Zum Inhalt springen
Docs
Galerie

Galerie

Zwei unabhängige Teile: <Gallery> setzt mehrere Bilder an eine Stelle im Beitrag; die /gallery-Seite ist eine filterbare Übersicht über alle Beiträge.

Beides funktioniert ohne JavaScript — die Lightbox ist ein CSS-:target- Trick, die Filter ein CSS-:has()-Trick. Etwas JS kann später rein als Politur dazukommen (Tastatur-/Swipe-Navigation); keins der beiden Features hängt davon ab.

<Gallery> — mehrere Bilder an einer Stelle im Beitrag

Wie bei <Figure>: jedes Bild importieren und mit eigenem credit/ai versehen. id muss auf der Seite eindeutig sein (wird zum Lightbox-Anker).

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"] },
  ]}
/>

Klick auf ein Thumbnail öffnet eine Lightbox in voller Größe mit Caption, Credit, KI-Badge und Vor-/Zurück-Links.

/gallery — filterbare Übersicht über alle Beiträge

Dieselben Bilder noch einmal unter galleries im Frontmatter auflisten — das ist die Quelle für die Übersichtsseite, unabhängig davon, ob/wo <Gallery> sie im Beitragstext platziert.

galleries:
  reise:
    - src: ./shot1.jpg
      alt: "…"
      credit: "© 2026 Erik Skopp"
      ai: false
      tags: [reise]
frontmatter.galleries lässt sich innerhalb derselben MDX-Datei nicht direkt an <Gallery> übergeben: Der frontmatter-Export von MDX ist ein JSON-Schnappschuss von vor der Bildauflösung durch image(). Die beiden Listen sind bewusst getrennt — dieselben Bilder an beiden Stellen eintragen, wenn die Galerie eines Beitrags auch auf /gallery auftauchen soll.

/gallery aggregiert die galleries aller Beiträge in der Standardsprache (dieselbe Konvention wie /tags und /series), mit eigener Lightbox und Einzelauswahl-Filtern nach Beitrag, Tag und KI-/Mensch-Herkunft. getAllGalleryItems() aus astro-blog-theme/gallery steht für eine eigene Seite zur Verfügung, die alle Sprachen mischt, inklusive Sprachfilter (getGalleryFacets unterstützt das bereits).

BilderMehrsprachigkeit