Gallery

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

Gallery

broken_image 
<!-- gallery.blade.php -->
    
    <ul id="62bed337a1acc" class="c-gallery" data-uid="62bed337a1ac6">
                    <li class="c-gallery__item c-gallery__item-0">

                <!-- image.blade.php -->
<figure id="62bed337a1e81" class="c-image c-image--type-jpg c-image--full-width" data-open="gallery_62bed337a1de3" data-large-img="/assets/img/993-900x600.jpg" data-stepping="0" data-caption="Image with stuff" data-uid="62bed337a1e7a">
     
        <img src="/assets/img/993-300x200.jpg" alt="The alt text" class="c-image__image "  />
                    <figcaption class="c-image__caption">Image with stuff</figcaption>
            </figure>


            </li>
                    <li class="c-gallery__item c-gallery__item-1">

                <!-- image.blade.php -->
<figure id="62bed337a1eed" class="c-image c-image--type-jpg c-image--full-width" data-open="gallery_62bed337a1de3" data-large-img="/assets/img/1026-900x600.jpg" data-stepping="1" data-caption="Sed posuere consectetur est at lobortis. " data-uid="62bed337a1ee9">
     
        <img src="/assets/img/1026-300x200.jpg" alt="The alt text" class="c-image__image "  />
                    <figcaption class="c-image__caption">Sed posuere consectetur est at lobortis. </figcaption>
            </figure>


            </li>
                    <li class="c-gallery__item c-gallery__item-2">

                <!-- image.blade.php -->
<figure id="62bed337a1f4a" class="c-image c-image--type-jpg c-image--full-width" data-open="gallery_62bed337a1de3" data-large-img="/assets/img/1038-900x600.jpg" data-stepping="2" data-caption="Image with stuff" data-uid="62bed337a1f44">
     
        <img src="/assets/img/1038-300x200.jpg" alt="The alt text" class="c-image__image "  />
                    <figcaption class="c-image__caption">Image with stuff</figcaption>
            </figure>


            </li>
                    <li class="c-gallery__item c-gallery__item-3">

                <!-- image.blade.php -->
<figure id="62bed337a1f93" class="c-image c-image--type-jpg c-image--full-width" data-open="gallery_62bed337a1de3" data-large-img="/assets/img/1039-900x600.jpg" data-stepping="3" data-caption="Image with stuff" data-uid="62bed337a1f8f">
     
        <img src="/assets/img/1039-300x200.jpg" alt="The alt text" class="c-image__image "  />
                    <figcaption class="c-image__caption">Image with stuff</figcaption>
            </figure>


            </li>
                    <li class="c-gallery__item c-gallery__item-4">

                <!-- image.blade.php -->
<figure id="62bed337a1fcd" class="c-image c-image--type-jpg c-image--full-width" data-open="gallery_62bed337a1de3" data-large-img="/assets/img/1043-900x600.jpg" data-stepping="4" data-caption="Image with stuff" data-uid="62bed337a1fca">
     
        <img src="/assets/img/1043-300x200.jpg" alt="The alt text" class="c-image__image "  />
                    <figcaption class="c-image__caption">Image with stuff</figcaption>
            </figure>


            </li>
                    <li class="c-gallery__item c-gallery__item-5">

                <!-- image.blade.php -->
<figure id="62bed337a2003" class="c-image c-image--type-jpg c-image--full-width" data-open="gallery_62bed337a1de3" 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="62bed337a2000">
     
        <img src="/assets/img/1006-300x200.jpg" alt="The alt text" class="c-image__image "  />
                    <figcaption class="c-image__caption">Image with stuff, and a long description provided in the caption field.</figcaption>
            </figure>


            </li>
            </ul>

    <!-- modal.blade.php -->
<dialog id="gallery_62bed337a1de3" class="c-modal c-modal--gallery c-modal--stepper c-modal--is-modal c-modal--padding-3 c-modal--overlay-dark" role="dialog" aria-modal="true"
    aria-labelledby="modal__label__gallery_62bed337a1de3" data-uid="62bed337a215e">

    <header class="c-modal__header">
        
        <button id="62bed337a21f3" class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg c-button--icon-only" href="" target="_top" data-close="" type="button" aria-pressed="false" data-uid="62bed337a21ef">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bed337a2243" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="62bed337a2240">
                    close
            </i>
            </span>
        
        
    </span>
</button>    </header>

    <section class="c-modal__content">

        
                    <button id="62bed337a2285" class="c-button c-modal__prev c-button__basic c-button__basic--default c-button--lg c-button--icon-only" href="" target="_top" data-prev="" type="button" aria-pressed="false" data-uid="62bed337a2282">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bed337a22bc" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="62bed337a22b9">
                    chevron_left
            </i>
            </span>
        
        
    </span>
</button>        

        <!-- image.blade.php -->
<figure id="62bed337a2038" class="c-image c-image--is-placeholder" data-uid="62bed337a2036">
            
        <div class="c-image__placeholder" aria-label="Image with stuff, and a long description provided in the caption field.">

                            <!-- icon.blade.php -->
    <i id="62bed337a20b3" class="c-icon c-icon--size-xl material-icons" translate="no" role="img" alt="" data-uid="62bed337a20ae">
                    broken_image
            </i>
            
                            <label class="c-image__placeholder-text">
                    Image missing
                </label>
                        
        </div>
        
    </figure>

        
                    <button id="62bed337a22f8" class="c-button c-modal__next c-button__basic c-button__basic--default c-button--lg c-button--icon-only" href="" target="_top" data-next="" type="button" aria-pressed="false" data-uid="62bed337a22f5">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bed337a232a" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="62bed337a2327">
                    chevron_right
            </i>
            </span>
        
        
    </span>
</button>            </section>

    
            <!-- card.blade.php -->
<div id="62bed337a23a3" class="c-steppers c-steppers--type-dots" data-uid="62bed337a23a0">
    
</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: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Gallery/gallery.json