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

<section id="my-gallery" class=" gallery">
    <div class="gallery__item" data-gallery-item="one">
        <img data-image="my-image-jpg" src="../images/my-image.jpg" alt="my-image.jpg" />
        <div class="figcaption" data-caption="my-image-jpg">
            <p class="small">Image caption</p>
        </div>
    </div>
    <div class="gallery__item" data-gallery-item="two">
        <section class="video">
            <video data-video="my-video"></video>
            <button data-media-type="video" data-media-controls="my-video"
                class="media__controls media__controls--play" />
        </section>
        <div class="figcaption" data-caption="my-video">
            <p class="small">Video caption</p>
        </div>
    </div>
</section>