Gallery

Gallery

A gallery directive can be used to insert an array of media elements into a containing figure. Custom JavaScript and CSS can be applied on a per-build basis to customize the look of the gallery, and can be used with third party tools to create carousels.

The example below assumes that there are both the image and video assets exist in the appropriate build directories.

Input

::: gallery:my-gallery

:: item:one type:image source:figure.jpg caption:"Figure Caption." ::

:: item:two type:video source:my-video caption:"Video Caption." ::

::: exit:my-gallery

Output

<div class="figure__large figure__inline figure__fullbleed">
    <figure id="my-gallery">
        <div class="figure__items">
            <div class="gallery__item" data-gallery-item="one">
                <img data-image="my-image-jpg" src="../images/figure.jpg" alt="figure.jpg" />
                <div class="figcaption" data-caption="my-image-jpg">
                    <p class="small">Figure Caption.</p>
                </div>
            </div>
        </div>

        <div class="figure__items">
            <div class="gallery__item" data-gallery-item="two">
                <section class="video">
                    <video data-video="my-video">
                        <source src="../media/my-video.mp4" type="video/mp4" />
                    </video>
                    <button data-media-controls="my-video" class="media__controls media__controls--play" />
                </section>
                <div class="figcaption" data-caption="my-image-jpg">
                    <p class="small">Video Caption.</p>
                </div>
            </div>
        </div>
    </figure>
</div>