City of Ghent Style Guide

Image Wall

Image wall

When to use this component

Use the image wall component on detail pages to present a set of images as a whole, showing the complete set of images using thumbnails.

When not to use this component

Do not use the image wall component:

  • To present only one image or only a few images. Only use the image wall component when the set of images contains at least 5 images.
  • To present images on a detail page that also already contains a lot of other content. The image wall component works best if it’s the only component on the detail page or if not much other content is placed before or after the image wall component.

Do not use the image wall component on overview pages or filter pages. Only use the image wall component on detail pages.

How it works

  • An image wall is a list of images presented by using figures.
  • Thumbnails are used to present the set of images.
  • The number of thumbnails is equal to the number of images in the set of images.
  • All thumbnails are shown.
  • Clicking a thumbail shows all images in a modal image gallery (lightbox).

Implementation

  • Using the class ‘image-gallery’ on the list element triggers lightbox initialisation on page load.

Accessibility

  • The images are placed in a unordered list.
  • When a image caption is provided, this is also used as aria-label for the lightbox link.
  • All lightbox links are described by a hidden span to identify it’s purpose (e.a.: ‘open gallery), add this to the bottom of your page template (above scripts).
  • The lightbox can be closed by use of the escape key.
  • Navigating through images in the lightbox can be done by using the arrow keys.
<ul class="image-wall js-lightbox">
  {% for item in items %}
    <li>
      <a href="{{ item.src }}" class="gallery-link"
          {% if item.caption %}
            aria-label="{{ item.caption }}"
          {% endif %}
         aria-describedby="image-gallery__open-gallery">
        {% include '@image' with {
          "caption": item.caption,
          "src": item.src,
          "alt_text": item.alt,
          "ratio": null
        } %}
      </a>
    </li>
  {% endfor %}
</ul>

<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
 
<ul class="image-wall js-lightbox">
    <li>
        <a href="https://via.placeholder.com/772x780" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/772x780" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/663x625" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/663x625" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/624x760" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/624x760" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/704x607" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/704x607" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/639x662" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/639x662" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/655x761" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/655x761" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/787x800" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/787x800" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/646x732" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/646x732" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/643x652" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/643x652" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/662x662" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/662x662" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/735x619" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/735x619" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/732x652" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/732x652" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/750x746" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/750x746" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/781x774" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/781x774" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/696x787" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/696x787" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/615x644" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/615x644" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/638x717" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/638x717" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/734x616" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/734x616" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/739x790" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/739x790" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/674x709" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/674x709" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/722x636" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/722x636" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/745x748" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/745x748" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/765x653" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/765x653" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/713x727" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/713x727" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/658x617" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/658x617" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/752x766" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/752x766" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/656x651" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/656x651" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/637x681" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/637x681" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/617x625" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/617x625" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/641x756" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/641x756" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/610x699" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/610x699" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/774x787" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/774x787" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/772x662" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/772x662" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/784x704" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/784x704" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/706x661" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/706x661" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/777x662" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/777x662" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/692x763" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/692x763" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/741x793" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/741x793" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/619x756" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/619x756" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/733x790" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/733x790" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/710x669" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/710x669" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/792x731" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/792x731" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/643x735" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/643x735" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/728x699" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/728x699" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/736x659" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/736x659" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/683x769" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/683x769" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/790x656" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/790x656" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/701x728" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/701x728" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/604x741" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/604x741" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/723x655" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/723x655" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/752x781" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/752x781" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/665x751" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/665x751" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/722x679" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/722x679" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/617x794" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/617x794" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/662x704" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/662x704" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/706x642" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/706x642" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/759x718" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/759x718" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/800x742" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/800x742" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/766x772" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/766x772" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/735x745" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/735x745" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/628x659" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/628x659" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/689x740" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/689x740" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/741x629" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/741x629" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/641x659" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/641x659" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/695x758" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/695x758" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/778x629" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/778x629" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/601x739" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/601x739" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/799x603" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/799x603" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/700x607" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/700x607" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/782x647" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/782x647" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/730x606" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/730x606" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/650x773" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/650x773" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/704x704" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/704x704" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/708x652" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/708x652" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/603x708" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/603x708" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/648x703" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/648x703" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/622x615" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/622x615" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/772x698" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/772x698" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/655x658" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/655x658" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/795x622" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/795x622" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/766x655" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/766x655" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/638x604" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/638x604" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/623x769" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/623x769" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/794x631" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/794x631" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/782x794" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/782x794" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/639x787" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/639x787" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/636x779" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/636x779" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/769x603" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/769x603" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/601x797" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/601x797" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/635x685" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/635x685" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/693x675" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/693x675" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/693x688" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/693x688" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/750x613" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/750x613" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/798x683" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/798x683" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/752x729" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/752x729" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/783x740" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/783x740" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/626x654" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/626x654" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/603x786" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/603x786" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/702x793" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/702x793" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="https://via.placeholder.com/603x626" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
            <figure><img src="https://via.placeholder.com/603x626" alt="placeholder image alternative text" />
                <figcaption>image caption</figcaption>
            </figure>
        </a>
    </li>
</ul>

<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
 
{
  "items": [
    {
      "src": "https://via.placeholder.com/772x780",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/663x625",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/624x760",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/704x607",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/639x662",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/655x761",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/787x800",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/646x732",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/643x652",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/662x662",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/735x619",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/732x652",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/750x746",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/781x774",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/696x787",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/615x644",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/638x717",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/734x616",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/739x790",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/674x709",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/722x636",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/745x748",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/765x653",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/713x727",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/658x617",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/752x766",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/656x651",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/637x681",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/617x625",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/641x756",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/610x699",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/774x787",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/772x662",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/784x704",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/706x661",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/777x662",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/692x763",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/741x793",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/619x756",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/733x790",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/710x669",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/792x731",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/643x735",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/728x699",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/736x659",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/683x769",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/790x656",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/701x728",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/604x741",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/723x655",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/752x781",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/665x751",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/722x679",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/617x794",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/662x704",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/706x642",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/759x718",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/800x742",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/766x772",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/735x745",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/628x659",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/689x740",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/741x629",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/641x659",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/695x758",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/778x629",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/601x739",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/799x603",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/700x607",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/782x647",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/730x606",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/650x773",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/704x704",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/708x652",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/603x708",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/648x703",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/622x615",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/772x698",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/655x658",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/795x622",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/766x655",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/638x604",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/623x769",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/794x631",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/782x794",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/639x787",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/636x779",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/769x603",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/601x797",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/635x685",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/693x675",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/693x688",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/750x613",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/798x683",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/752x729",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/783x740",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/626x654",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/603x786",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/702x793",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    },
    {
      "src": "https://via.placeholder.com/603x626",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    }
  ]
}
  • Content: 
    .image-wall {
  @include phablet {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  > li {
    margin-bottom: $gutter-width;

    @include phablet {
      width: span(6 of 12);
    }

    @include tablet {
      width: span(4 of 12);
    }

    @include desktop {
      width: span(3 of 12);
    }

    &.hidden {
      margin: 0;
    }
  }

  width: 100%;
}
  • URL: /components/raw/image-wall/_image-wall.scss
  • Filesystem Path: components/41-organisms/image-wall/_image-wall.scss
  • Size: 438 Bytes
  • Content: 
    /**
 * @file
 * Javascript binding of Masonry.
 */
'use strict';

(function () {

  if (!Masonry || !imagesLoaded) { // eslint-disable-line no-undef
    return;
  }

  const grid = document.querySelector('.image-wall');
  if (!grid) {
    return;
  }

  const msnry = new Masonry(grid, { // eslint-disable-line no-undef
    columnWidth: 'li:not(.hidden)',
    itemSelector: 'li',
    transitionDuration: 0,
    gutter: 24
  });

  imagesLoaded(grid).on('progress', () => { // eslint-disable-line no-undef
    msnry.layout();
  });

})();
  • URL: /components/raw/image-wall/image-wall.bindings.js
  • Filesystem Path: components/41-organisms/image-wall/image-wall.bindings.js
  • Size: 538 Bytes