Post with a gallery

This post has a gallery set in its front matter as a list of objects, each with an image, alt, and caption property.

When you import the gallery component, the images are listed in a grid as buttons, each linked to the respective image in a <dialog> HTML element. A close button within each dialog allows the image to be hidden again. Includes gallery.css for styling the modal dialogs and backdrop, gallery.js manages modal dialog interactions.

A picturesque valley showcasing majestic mountains and lush forests, creating a serene and captivating landscape
Inside the Somiedo Natural Park, Asturias
Close-up of a delicate white flower with a yellow center, surrounded by green leaves
Jasmine nightshades blooming in July
A traditional Asturian village with it's raised granaries, surrounded by lush green hills and mountains
Traditional houses in Santullano, Somiedo Natural Park, Asturias
Close-up with unfocused background of a vibrant large blue butterfly gracefully perched on a delicate flower amidst lush green grass
A large blue (Phengaris arion)

Loop through images without additional interactivity:

  • A picturesque valley showcasing majestic mountains and lush forests, creating a serene and captivating landscape
  • Close-up of a delicate white flower with a yellow center, surrounded by green leaves
  • A traditional Asturian village with it's raised granaries, surrounded by lush green hills and mountains
  • Close-up with unfocused background of a vibrant large blue butterfly gracefully perched on a delicate flower amidst lush green grass

View this page on GitHub.