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/781x622" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/781x622" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/667x783" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/667x783" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/730x694" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/730x694" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/714x693" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/714x693" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/679x712" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/679x712" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/786x654" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/786x654" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/625x626" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/625x626" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/713x672" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/713x672" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/756x665" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/756x665" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/716x678" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/716x678" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/723x608" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/723x608" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/682x616" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/682x616" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/705x791" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/705x791" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/786x644" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/786x644" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/632x634" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/632x634" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/608x659" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/608x659" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/733x628" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/733x628" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/690x791" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/690x791" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/773x795" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/773x795" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/620x753" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/620x753" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/729x712" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/729x712" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/798x616" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/798x616" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/672x699" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/672x699" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/733x702" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/733x702" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/773x777" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/773x777" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/604x751" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/604x751" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/784x615" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/784x615" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/695x669" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/695x669" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/715x614" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/715x614" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/637x647" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/637x647" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/782x664" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/782x664" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/719x676" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/719x676" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/761x776" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/761x776" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/682x727" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/682x727" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/602x763" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/602x763" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/759x659" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/759x659" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/633x723" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/633x723" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/776x654" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/776x654" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/743x689" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/743x689" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/618x751" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/618x751" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/693x799" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/693x799" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/610x740" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/610x740" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/692x739" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/692x739" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/762x775" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/762x775" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/773x753" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/773x753" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/667x665" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/667x665" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/738x734" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/738x734" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/701x704" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/701x704" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/631x758" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/631x758" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/645x707" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/645x707" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/682x664" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/682x664" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/672x694" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/672x694" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/766x742" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/766x742" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/671x791" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/671x791" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/740x654" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/740x654" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/657x620" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/657x620" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/660x768" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/660x768" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/760x682" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/760x682" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/671x754" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/671x754" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/738x711" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/738x711" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/746x769" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/746x769" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/684x712" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/684x712" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/743x709" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/743x709" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/726x728" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/726x728" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/775x722" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/775x722" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/764x720" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/764x720" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/648x674" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/648x674" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/677x679" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/677x679" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/774x665" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/774x665" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/717x648" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/717x648" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/656x600" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/656x600" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/613x670" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/613x670" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/650x615" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/650x615" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/666x745" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/666x745" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/682x622" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/682x622" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/642x705" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/642x705" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/683x791" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/683x791" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/791x656" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/791x656" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/677x673" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/677x673" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/712x602" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/712x602" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/621x642" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/621x642" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/766x708" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/766x708" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/668x776" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/668x776" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/690x602" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/690x602" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/766x701" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/766x701" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/614x718" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/614x718" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/702x650" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/702x650" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/773x707" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/773x707" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/659x692" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/659x692" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/797x677" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/797x677" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/649x780" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/649x780" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/776x750" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/776x750" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/771x701" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/771x701" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/751x603" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/751x603" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/714x760" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/714x760" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/754x763" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/754x763" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/772x734" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/772x734" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/689x687" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/689x687" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/749x697" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/749x697" alt="placeholder image alternative text" />
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/691x733" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure><img src="https://via.placeholder.com/691x733" 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/781x622",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/667x783",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/730x694",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/714x693",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/679x712",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/786x654",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/625x626",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/713x672",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/756x665",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/716x678",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/723x608",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/682x616",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/705x791",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/786x644",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/632x634",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/608x659",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/733x628",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/690x791",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/773x795",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/620x753",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/729x712",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/798x616",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/672x699",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/733x702",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/773x777",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/604x751",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/784x615",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/695x669",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/715x614",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/637x647",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/782x664",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/719x676",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/761x776",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/682x727",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/602x763",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/759x659",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/633x723",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/776x654",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/743x689",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/618x751",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/693x799",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/610x740",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/692x739",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/762x775",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/773x753",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/667x665",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/738x734",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/701x704",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/631x758",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/645x707",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/682x664",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/672x694",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/766x742",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/671x791",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/740x654",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/657x620",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/660x768",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/760x682",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/671x754",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/738x711",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/746x769",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/684x712",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/743x709",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/726x728",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/775x722",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/764x720",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/648x674",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/677x679",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/774x665",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/717x648",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/656x600",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/613x670",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/650x615",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/666x745",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/682x622",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/642x705",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/683x791",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/791x656",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/677x673",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/712x602",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/621x642",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/766x708",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/668x776",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/690x602",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/766x701",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/614x718",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/702x650",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/773x707",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/659x692",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/797x677",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/649x780",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/776x750",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/771x701",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/751x603",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/714x760",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/754x763",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/772x734",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/689x687",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/749x697",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/691x733",
"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();
});
})();