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 variable $ariaLabels in /tmp/blade-cache/3ed249e08cdd43e4221fe6de4d82c336f3b0c55d.php on line 36

Warning: Attempt to read property "prev" on null in /tmp/blade-cache/42645fbe44200357ba1604629a45fa732c18cfd6.php on line 38

Warning: Attempt to read property "next" on null in /tmp/blade-cache/42645fbe44200357ba1604629a45fa732c18cfd6.php on line 57
 
<!-- gallery.blade.php -->
    
    <ul class="c-gallery" data-uid="66237d1309b4b">
                    <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_66237d1309b72" data-large-img="/assets/img/993-900x600.jpg" data-stepping="0" data-caption="Image with stuff" data-uid="66237d1309be2">
     
        <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_66237d1309b72" data-large-img="/assets/img/1026-900x600.jpg" data-stepping="1" data-caption="Sed posuere consectetur est at lobortis. " data-uid="66237d1309c33">
     
        <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_66237d1309b72" data-large-img="/assets/img/1038-900x600.jpg" data-stepping="2" data-caption="Image with stuff" data-uid="66237d1309c75">
     
        <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_66237d1309b72" data-large-img="/assets/img/1039-900x600.jpg" data-stepping="3" data-caption="Image with stuff" data-uid="66237d1309cb1">
     
        <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_66237d1309b72" data-large-img="/assets/img/1043-900x600.jpg" data-stepping="4" data-caption="Image with stuff" data-uid="66237d1309cea">
     
        <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_66237d1309b72" 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="66237d1309d20">
     
        <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>

        <br />
<b>Warning</b>:  Undefined variable $ariaLabels in <b>/tmp/blade-cache/3ed249e08cdd43e4221fe6de4d82c336f3b0c55d.php</b> on line <b>36</b><br />
<!-- modal.blade.php -->
<dialog class="c-modal c-modal--gallery c-modal--stepper c-modal--is-modal c-modal--padding-3 c-modal--transparent c-modal--overlay-dark" aria-modal="true" aria-labelledby="modal__label__gallery_66237d1309b72" id="gallery_66237d1309b72" data-uid="66237d1309e51">

    <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="66237d1309ebb">   
     <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-outlined material-symbols-outlined--filled c-icon--size-lg" aria-hidden="true" material-symbol="close" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="66237d1309efd">
                close
    </span>
            </span>
        
        
    </span> </button>    </div>

    <section class="c-modal__content" tabindex="2">

        
                        <br />
<b>Warning</b>:  Attempt to read property "prev" on null in <b>/tmp/blade-cache/42645fbe44200357ba1604629a45fa732c18cfd6.php</b> on line <b>38</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="66237d1309f56">   
     <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-outlined material-symbols-outlined--filled c-icon--size-lg" aria-hidden="true" material-symbol="chevron_left" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="66237d1309f91">
                chevron_left
    </span>
            </span>
        
        
    </span> </button>        
        <!-- image.blade.php -->
<figure class="c-image c-image--is-placeholder" data-uid="66237d1309d6e">
            
        <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-outlined material-symbols-outlined--filled c-icon--size-xl" material-symbol="broken_image" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="66237d1309dd4">
                broken_image
    </span>
            
                            <label class="c-image__placeholder-text">
                    Image missing
                </label>
                        
        </div>
        
    </figure>

        
                        <br />
<b>Warning</b>:  Attempt to read property "next" on null in <b>/tmp/blade-cache/42645fbe44200357ba1604629a45fa732c18cfd6.php</b> on line <b>57</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="66237d1309fe8">   
     <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-outlined material-symbols-outlined--filled c-icon--size-lg" aria-hidden="true" material-symbol="chevron_right" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="66237d130a020">
                chevron_right
    </span>
            </span>
        
        
    </span> </button>            </section>

    
                <!-- steppers.blade.php -->
<div class="c-steppers c-steppers--type-dots" data-uid="66237d130a08c">
    
</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
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