Gallery

The gallery component is useful to display a set of large photos. For each photo, you must provide the following information:

the URL of the full-size version (in the href attribute of the anchor element),
the dimensions of the full-size version (in the data-size attribute of the anchor element),
the URL of the thumbnail version (in the src attribute of the image element),
a caption and/or text alternative (figcaption element or alt attribute).

Note: Captions and text alternatives have different purposes, make sure you use them the right way.

<p>
  The gallery component is useful to display a set of large photos. For each photo, you must provide the following information:
</p>
<ul>
  <li>the URL of the full-size version (in the <code>href</code> attribute of the anchor element),
  </li>
  <li>the dimensions of the full-size version (in the <code>data-size</code> attribute of the anchor element),
  </li>
  <li>the URL of the thumbnail version (in the <code>src</code> attribute of the image element),
  </li>
  <li>a caption and/or text alternative (<code>figcaption</code> element or <code>alt</code> attribute).
  </li>
</ul>
<p class="notice notice--info">
  <strong>Note:</strong> Captions and text alternatives have different purposes, make sure you <a href="http://4syllables.com.au/articles/text-alternatives-images-captions/">use them the right way</a>.
</p>
<ul class="image-gallery">
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/1.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/1.jpg" /><figcaption>Lorem ipsum Duis exercitation dolore pariatur dolore.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/11.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/11.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/2.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/2.jpg" /><figcaption>Lorem ipsum Duis exercitation dolore pariatur dolore.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/3.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/3.jpg" /><figcaption>Lorem ipsum Anim non consequat tempor exercitation ad.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/4.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/4.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/12.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/12.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/13.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/13.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/5.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/5.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/14.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/14.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/6.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/6.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/7.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/7.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/8.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/8.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="4000x1000" href="/assets/gallery/21.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/21.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/15.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/15.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/16.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/16.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="4000x1000" href="/assets/gallery/22.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/22.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/17.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/17.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/18.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/18.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
</ul>

Small and medium

<ul class="image-gallery image-gallery--small">
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/3.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/3.jpg" /><figcaption>Lorem ipsum Anim non consequat tempor exercitation ad.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/7.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/7.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/12.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/12.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="4000x1000" href="/assets/gallery/21.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/21.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/13.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/13.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/5.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/5.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/14.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/14.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
</ul>
<ul class="image-gallery image-gallery--medium">
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/3.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/3.jpg" /><figcaption>Lorem ipsum Anim non consequat tempor exercitation ad.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/12.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/12.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/4.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/4.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="4000x1000" href="/assets/gallery/21.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/21.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/13.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/13.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/5.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/5.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
</ul>

Captions

You may, and should provide a caption for every image with the figcaption element.

By default, the caption is shown only in the viewer (cf. first image below).
To show it in the gallery as well, use class image-gallery__caption (cf. second image).
If you need to show a different caption in the gallery than in the viewer, leave the figcaption as is and add a paragraph before it with class image-gallery__caption (cf. third image).

Note: Captions in the gallery should be concise and consistent—either provide one for every image, or don't provide any at all.

<p>You may, and should provide a caption for every image with the <code>figcaption</code> element.
</p>
<ul>
  <li>
    By default, the caption is shown only in the viewer (cf. first image below).
  </li>
  <li>To show it in the gallery as well, use class <code>image-gallery__caption</code> (cf. second image).
  </li>
  <li>If you need to show a different caption in the gallery than in the viewer, leave the <code>figcaption</code> as is and add a paragraph before it with class <code>image-gallery__caption</code> (cf. third image).
  </li>
</ul>
<p class="notice notice--info">
  <strong>Note:</strong> Captions in the gallery should be <strong>concise</strong> and <strong>consistent</strong>—either provide one for every image, or don't provide any at all.
</p>
<ul class="image-gallery image-gallery--small">
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/12.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/12.jpg" /><figcaption>No caption in gallery, only in viewer.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/19.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/19.jpg" /><figcaption class="image-gallery__caption">Same caption in gallery as in viewer</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/9.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/9.jpg" />
        <p class="image-gallery__caption">
          Short caption in gallery
        </p>
        <figcaption>Longer caption in viewer.</figcaption>
      </figure>
    </a>
  </li>
</ul>