Skip to content
Docs
Gallery

Gallery

Two independent pieces: <Gallery> puts several images at one spot in a post; the /gallery page is a filterable overview across every post.

Both work without JavaScript — the lightbox is a CSS :target trick and the filters are a CSS :has() trick. A small amount of JS may be added later purely as polish (keyboard/swipe navigation); neither feature depends on it.

<Gallery> — several images at one spot in a post

Same idea as <Figure>: import each image and give it its own credit/ai. id must be unique on the page (it becomes the lightbox anchor).

import Gallery from "astro-blog-theme/components/Gallery.astro";
import shot1 from "./shot1.jpg";
import shot2 from "./shot2.jpg";

<Gallery
  id="trip"
  images={[
    { src: shot1, alt: "…", credit: "© 2026 Erik Skopp", ai: false },
    { src: shot2, alt: "…", credit: "© 2026 Erik Skopp", ai: false, tags: ["travel"] },
  ]}
/>

Clicking a thumbnail opens a full-size lightbox with caption, credit, AI badge, and previous/next links.

/gallery — filterable overview across all posts

List the same images again under galleries in frontmatter — this is what the overview page reads, independently of where (or whether) <Gallery> places them in the body.

galleries:
  trip:
    - src: ./shot1.jpg
      alt: "…"
      credit: "© 2026 Erik Skopp"
      ai: false
      tags: [travel]
frontmatter.galleries can’t be passed into <Gallery> directly inside the same MDX file: MDX’s frontmatter export is a JSON snapshot taken before image() resolves paths to real assets. The two lists are kept separately on purpose — list the same pictures in both places if you want a post’s gallery to also show up on /gallery.

/gallery aggregates every post’s galleries in the default locale (same convention as /tags and /series), with its own lightbox and single-select filters by post, tag, and AI/human origin. getAllGalleryItems() from astro-blog-theme/gallery is available for a custom page mixing every locale together, with a language filter (getGalleryFacets already supports it).

ImagesMulti-language