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 both the image and video assets exist in the appropriate build directories.

Input

::: gallery:my-gallery

:: item:one type:image source:portrait.jpg caption:"Caption for item one" ::

:: item:two type:image source:landscape.jpg caption:"Caption for item two" ::

:: item:three type:image source:square.jpg caption:"Caption for item three" ::

::: exit:my-gallery

Output

<section id="my-gallery" class=" gallery">
  <div class="figure__items">
    <div class="gallery__item" data-gallery-item="one">
       <img data-image="portrait-jpg" src=".../images/portrait.jpg" alt="portrait.jpg">
         <div class="figcaption" data-caption="portrait-jpg">
           <p class="small">Caption for item one</p>
         </div>
     </div>
     <div class="gallery__item" data-gallery-item="two">
       <img data-image="landscape-jpg" src=".../images/landscape.jpg" alt="landscape.jpg">
          <div class="figcaption" data-caption="landscape-jpg">
            <p class="small">Caption for item two</p>
          </div>
      </div>
    <div class="gallery__item" data-gallery-item="three">
      <img data-image="square-jpg" src=".../images/square.jpg" alt="square.jpg">
        <div class="figcaption" data-caption="square-jpg">
          <p class="small">Caption for item three</p>
        </div>
    </div>
   </div>
</section>