30 lines
1.5 KiB
Text
30 lines
1.5 KiB
Text
---
|
|
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>
|