Gallery

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

Gallery

<!-- gallery.blade.php -->
    
    <ul id="61efb14560f20" class="c-gallery" data-uid="61efb14560f1a">
                    <li class="c-gallery__item c-gallery__item-0">

                <!-- image.blade.php -->
<figure id="61efb1456147b" class="c-image c-image--full-width" data-open="gallery_61efb145613ec" data-large-img="/assets/img/993-900x600.jpg" data-stepping="0" data-caption="Image with stuff" data-uid="61efb14561475">
     
        <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="61efb145614fa" class="c-image c-image--full-width" data-open="gallery_61efb145613ec" data-large-img="/assets/img/1026-900x600.jpg" data-stepping="1" data-caption="Sed posuere consectetur est at lobortis. " data-uid="61efb145614f5">
     
        <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="61efb14561548" class="c-image c-image--full-width" data-open="gallery_61efb145613ec" data-large-img="/assets/img/1038-900x600.jpg" data-stepping="2" data-caption="Image with stuff" data-uid="61efb14561544">
     
        <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="61efb14561592" class="c-image c-image--full-width" data-open="gallery_61efb145613ec" data-large-img="/assets/img/1039-900x600.jpg" data-stepping="3" data-caption="Image with stuff" data-uid="61efb1456158e">
     
        <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="61efb145615d9" class="c-image c-image--full-width" data-open="gallery_61efb145613ec" data-large-img="/assets/img/1043-900x600.jpg" data-stepping="4" data-caption="Image with stuff" data-uid="61efb145615d6">
     
        <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="61efb14561622" class="c-image c-image--full-width" data-open="gallery_61efb145613ec" 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="61efb1456161e">
     
        <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 -->
<div id="gallery_61efb145613ec" class="c-modal__bg c-modal__bg__animation--scale-up" role="dialog" aria-modal="true" aria-labelledby="modal__label__gallery_61efb145613ec">
    <div class="c-modal c-modal--gallery c-modal--stepper c-modal--is-modal c-modal--padding-3 c-modal--overlay-dark"  data-uid="61efb145617cd">

        
        <header class="c-modal__header">
            
            <button id="61efb145618567.30877001" class="c-button c-modal__close c-button__basic c-button__basic--default c-button__icon-size--xl ripple ripple--before c-button--icon-only" href="" target="_top" data-close="" type="button" aria-pressed="false" data-uid="61efb1456186b">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb145618cd" class="c-icon c-icon--size-xl material-icons" translate="no" role="img" alt="" data-uid="61efb145618c9">
                    close
            </i>
        
                    
            
    </span>
</button>        </header>

        <section class="c-modal__content">

            
                            <button id="61efb145619142.62446942" class="c-button c-modal__prev c-button__basic c-button__basic--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" data-prev="" type="button" aria-pressed="false" data-uid="61efb14561922">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb1456196c" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb14561969">
                    chevron_left
            </i>
        
                    
            
    </span>
</button>            
            
            <!-- image.blade.php -->
<figure id="61efb1456169f" class="c-image c-image--is-placeholder" data-uid="61efb1456169a">
            
        <div class="c-image__placeholder" aria-label="Image with stuff, and a long description provided in the caption field.">

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

            
                            <button id="61efb145619ae6.75139539" class="c-button c-modal__next c-button__basic c-button__basic--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" data-next="" type="button" aria-pressed="false" data-uid="61efb145619bb">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb14561a02" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb145619ff">
                    chevron_right
            </i>
        
                    
            
    </span>
</button>                    </section>

        
        
            <!-- card.blade.php -->
<div id="61efb14561a98" class="c-steppers c-steppers--type-dots" data-uid="61efb14561a95">
    
</div>
            </div>
</div>
@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