Gallery

Prints a list if thumbnails, linked to a larger version of the thumbnail.

Gallery

  • The alt text
    Image with stuff
  • The alt text
    Sed posuere consectetur est at lobortis.
  • The alt text
    Image with stuff
  • The alt text
    Image with stuff
  • The alt text
    Image with stuff
  • The alt text
    Image with stuff, and a long description provided in the caption field.

Warning: Undefined property: stdClass::$prev in /tmp/blade-cache/42645fbe44200357ba1604629a45fa732c18cfd6.php on line 38

Warning: The parameter "label" is not recognized in the component "button" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 231

Warning: Undefined property: stdClass::$next in /tmp/blade-cache/42645fbe44200357ba1604629a45fa732c18cfd6.php on line 57

Warning: The parameter "label" is not recognized in the component "button" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 231
 
<!-- gallery.blade.php -->
    
    <ul class="c-gallery" data-uid="673ed2b11284e">
                    <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_673ed2b11286a" data-large-img="/assets/img/993-900x600.jpg" data-stepping="0" data-caption="Image with stuff" data-uid="673ed2b1128b6">
     
        <img src="/assets/img/993-300x200.jpg" alt="The alt text" class="c-image__image" />
                    <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_673ed2b11286a" data-large-img="/assets/img/1026-900x600.jpg" data-stepping="1" data-caption="Sed posuere consectetur est at lobortis. " data-uid="673ed2b112905">
     
        <img src="/assets/img/1026-300x200.jpg" alt="The alt text" class="c-image__image" />
                    <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_673ed2b11286a" data-large-img="/assets/img/1038-900x600.jpg" data-stepping="2" data-caption="Image with stuff" data-uid="673ed2b11293a">
     
        <img src="/assets/img/1038-300x200.jpg" alt="The alt text" class="c-image__image" />
                    <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_673ed2b11286a" data-large-img="/assets/img/1039-900x600.jpg" data-stepping="3" data-caption="Image with stuff" data-uid="673ed2b11296b">
     
        <img src="/assets/img/1039-300x200.jpg" alt="The alt text" class="c-image__image" />
                    <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_673ed2b11286a" data-large-img="/assets/img/1043-900x600.jpg" data-stepping="4" data-caption="Image with stuff" data-uid="673ed2b112999">
     
        <img src="/assets/img/1043-300x200.jpg" alt="The alt text" class="c-image__image" />
                    <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_673ed2b11286a" 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="673ed2b1129c5">
     
        <img src="/assets/img/1006-300x200.jpg" alt="The alt text" class="c-image__image" />
                    <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_673ed2b11286a" id="gallery_673ed2b11286a" data-uid="673ed2b112b0c">

    <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="673ed2b112b60">   
     <span class="c-button__label">         
                    <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="673ed2b112b98">
                    </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>231</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="673ed2b112bee">   
     <span class="c-button__label">         
                    <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="673ed2b112c79">
                    </span>
            </span>
        
        
    </span> </button>        
        <!-- image.blade.php -->
<figure class="c-image c-image--is-placeholder" data-uid="673ed2b1129f1">
            
        <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-xl" material-symbol="broken_image" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="673ed2b112aa4">
                    </span>
            
                            <label class="c-image__placeholder-text">
                    Image missing
                </label>
                        
        </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>231</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="673ed2b112cd4">   
     <span class="c-button__label">         
                    <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="673ed2b112d05">
                    </span>
            </span>
        
        
    </span> </button>            </section>

    
                <!-- steppers.blade.php -->
<div class="c-steppers c-steppers--type-dots" data-uid="673ed2b112d62">
    
</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"],
    ]

])
@endgallery

Blade 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.
Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Gallery/gallery.json