---
title: 'Post with a gallery'
description: 'A gallery with good old "popup" functionality inside a dialog element, a new image shortcode that links directly to the image with its original dimensions, and a regular loop over images.'
date: 2024-01-30
gallery:
  - image: ./src/assets/images/gallery/asturias-1.jpg
    alt: 'A picturesque valley showcasing majestic mountains and lush forests, creating a serene and captivating landscape'
    caption: 'Inside the Somiedo Natural Park, Asturias'
  - image: ./src/assets/images/gallery/asturias-2.jpg
    alt: 'Close-up of a delicate white flower with a yellow center, surrounded by green leaves'
    caption: 'Jasmine nightshades blooming in July'
  - image: ./src/assets/images/gallery/asturias-3.jpg
    alt: "A traditional Asturian village with it's raised granaries, surrounded by lush green hills and mountains"
    caption: 'Traditional houses in Santullano, Somiedo Natural Park, Asturias'
  - image: ./src/assets/images/gallery/asturias-4.jpg
    alt: 'Close-up with unfocused background of a vibrant large blue butterfly gracefully perched on a delicate flower amidst lush green grass'
    caption: 'A large blue (Phengaris arion)'
---

<p>Gallery popups using the <code>dialog</code> element:</p>

{% include "components/gallery.njk" %}

<p>Loop through images without additional interactivity:</p>

<ul class="gallery" role="list" style="padding: 0;">
  {%- for item in gallery -%}
    <li>{% eleventyImage item.image, item.alt %}</li>
  {%- endfor -%}
</ul>