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.
Do not use 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.
<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"
}
]
}
.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%;
}
/**
* @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();
});
})();