Gallery
Prints a list if thumbnails, linked to a larger version of the thumbnail.
Gallery
-
Image with stuff
-
Sed posuere consectetur est at lobortis.
-
Image with stuff
-
Image with stuff
-
Image with stuff
-
Image with stuff, and a long description provided in the caption field.
<!-- gallery.blade.php -->
<ul class="c-gallery" data-uid="678b0a647b1df">
<li class="c-gallery__item c-gallery__item-0">
<!-- image.blade.php -->
<figure class="c-image c-image--type-jpg c-image--full-width" data-open="gallery_678b0a647b201" data-large-img="/assets/img/993-900x600.jpg" data-stepping="0" data-caption="Image with stuff" data-uid="678b0a647b250">
<img
loading="lazy"
class="c-image__image"
src="/assets/img/993-300x200.jpg"
alt="The alt text"
/> <figcaption>
<span class="c-image__caption">Image with stuff</span><br>
</figcaption>
</figure>
</li>
<li class="c-gallery__item c-gallery__item-1">
<!-- image.blade.php -->
<figure class="c-image c-image--type-jpg c-image--full-width" data-open="gallery_678b0a647b201" data-large-img="/assets/img/1026-900x600.jpg" data-stepping="1" data-caption="Sed posuere consectetur est at lobortis. " data-uid="678b0a647b2d9">
<img
loading="lazy"
class="c-image__image"
src="/assets/img/1026-300x200.jpg"
alt="The alt text"
/> <figcaption>
<span class="c-image__caption">Sed posuere consectetur est at lobortis. </span><br>
</figcaption>
</figure>
</li>
<li class="c-gallery__item c-gallery__item-2">
<!-- image.blade.php -->
<figure class="c-image c-image--type-jpg c-image--full-width" data-open="gallery_678b0a647b201" data-large-img="/assets/img/1038-900x600.jpg" data-stepping="2" data-caption="Image with stuff" data-uid="678b0a647b333">
<img
loading="lazy"
class="c-image__image"
src="/assets/img/1038-300x200.jpg"
alt="The alt text"
/> <figcaption>
<span class="c-image__caption">Image with stuff</span><br>
</figcaption>
</figure>
</li>
<li class="c-gallery__item c-gallery__item-3">
<!-- image.blade.php -->
<figure class="c-image c-image--type-jpg c-image--full-width" data-open="gallery_678b0a647b201" data-large-img="/assets/img/1039-900x600.jpg" data-stepping="3" data-caption="Image with stuff" data-uid="678b0a647b386">
<img
loading="lazy"
class="c-image__image"
src="/assets/img/1039-300x200.jpg"
alt="The alt text"
/> <figcaption>
<span class="c-image__caption">Image with stuff</span><br>
</figcaption>
</figure>
</li>
<li class="c-gallery__item c-gallery__item-4">
<!-- image.blade.php -->
<figure class="c-image c-image--type-jpg c-image--full-width" data-open="gallery_678b0a647b201" data-large-img="/assets/img/1043-900x600.jpg" data-stepping="4" data-caption="Image with stuff" data-uid="678b0a647b3d7">
<img
loading="lazy"
class="c-image__image"
src="/assets/img/1043-300x200.jpg"
alt="The alt text"
/> <figcaption>
<span class="c-image__caption">Image with stuff</span><br>
</figcaption>
</figure>
</li>
<li class="c-gallery__item c-gallery__item-5">
<!-- image.blade.php -->
<figure class="c-image c-image--type-jpg c-image--full-width" data-open="gallery_678b0a647b201" data-large-img="/assets/img/1006-900x600.jpg" data-stepping="5" data-caption="Image with stuff, and a long description provided in the caption field." data-uid="678b0a647b42e">
<img
loading="lazy"
class="c-image__image"
src="/assets/img/1006-300x200.jpg"
alt="The alt text"
/> <figcaption>
<span class="c-image__caption">Image with stuff, and a long description provided in the caption field.</span><br>
</figcaption>
</figure>
</li>
</ul>
<!-- modal.blade.php -->
<dialog class="c-modal c-modal--gallery c-modal--stepper c-modal--is-modal c-modal--scale-up c-modal--padding-3 c-modal--transparent c-modal--overlay-dark" aria-modal="true" aria-labelledby="modal__label__gallery_678b0a647b201" id="gallery_678b0a647b201" data-uid="678b0a647b5dd">
<div class="c-modal__header">
<button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg c-button--icon-only" target="_top" data-close="" aria-label="close" type="button" data-uid="678b0a647b636">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-lg" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="678b0a647b66f">
</span>
</span>
</span> </button> </div>
<section class="c-modal__content" tabindex="2">
<br />
<b>Warning</b>: Undefined property: stdClass::$prev in <b>/tmp/blade-cache/42645fbe44200357ba1604629a45fa732c18cfd6.php</b> on line <b>38</b><br />
<br />
<b>Warning</b>: The parameter <b>"label"</b> is not recognized in the component <b>"button"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>244</b><br />
<button class="c-button c-modal__prev c-button__basic c-button__basic--default c-button--lg c-button--icon-only" target="_top" data-prev="" aria-label="chevron_left" type="button" data-uid="678b0a647b70b">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-left c-icon--material c-icon--material-chevron_left material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-lg" aria-hidden="false" material-symbol="chevron_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="678b0a647b744">
</span>
</span>
</span> </button>
<!-- image.blade.php -->
<figure class="c-image c-image--is-placeholder c-image--is-placeholder" data-uid="678b0a647b47f">
<div class="c-image__placeholder" aria-label="Image with stuff, and a long description provided in the caption field.">
<!-- icon.blade.php -->
<span class="c-icon c-icon--broken-image c-icon--material c-icon--material-broken_image material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-xxl" material-symbol="broken_image" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b0a647b574">
</span>
</div>
</figure>
<br />
<b>Warning</b>: Undefined property: stdClass::$next in <b>/tmp/blade-cache/42645fbe44200357ba1604629a45fa732c18cfd6.php</b> on line <b>57</b><br />
<br />
<b>Warning</b>: The parameter <b>"label"</b> is not recognized in the component <b>"button"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>244</b><br />
<button class="c-button c-modal__next c-button__basic c-button__basic--default c-button--lg c-button--icon-only" target="_top" data-next="" aria-label="chevron_right" type="button" data-uid="678b0a647b7aa">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-lg" aria-hidden="false" material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="678b0a647b7de">
</span>
</span>
</span> </button> </section>
<!-- steppers.blade.php -->
<div class="c-steppers c-steppers--type-dots" data-uid="678b0a647b842">
</div> </dialog>@gallery([
'list' => [
['largeImage' => "/assets/img/993-900x600.jpg", 'smallImage' => "/assets/img/993-300x200.jpg", 'caption' => "Image with stuff", 'alt' => "The alt text"],
['largeImage' => "/assets/img/1026-900x600.jpg", 'smallImage' => "/assets/img/1026-300x200.jpg", 'caption' => "Sed posuere consectetur est at lobortis. ", 'alt' => "The alt text"],
['largeImage' => "/assets/img/1038-900x600.jpg", 'smallImage' => "/assets/img/1038-300x200.jpg", 'caption' => "Image with stuff", 'alt' => "The alt text"],
['largeImage' => "/assets/img/1039-900x600.jpg", 'smallImage' => "/assets/img/1039-300x200.jpg", 'caption' => "Image with stuff", 'alt' => "The alt text"],
['largeImage' => "/assets/img/1043-900x600.jpg", 'smallImage' => "/assets/img/1043-300x200.jpg", 'caption' => "Image with stuff", 'alt' => "The alt text"],
['largeImage' => "/assets/img/1006-900x600.jpg", 'smallImage' => "/assets/img/1006-300x200.jpg", 'caption' => "Image with stuff, and a long description provided in the caption field.", 'alt' => "The alt text"],
]
])
@endgalleryBlade component parameters
| Key | Default value | Type | Available values | Description |
| list | [] | array | - | Array with following keys: largeImage, smallImage, caption and alt |
| ariaLabels | [] | array | - | Object with following keys: prev, next |
| id | string | - | The DOM id of the component. | |
| classList | [] | array | - | Array containing wrapping classes array |
| attributeList | [] | array | - | Array containing keys and values rendered as attributes |
| containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |