Gallery

A CSS grid image gallery that composes LightboxImage for lightbox integration. Images are arranged in a configurable grid with optional captions. Clicking an image opens the page-level Lightbox overlay.

File: src/core/components/ui/Gallery.astro

Props

Prop	Type	Default	Notes
items	GalleryItem[]	required	Array of gallery items (see type below)
columns	number	3	Number of grid columns
gap	"sm" | "md" | "lg"	"md"	Gap between grid items
group	string	auto-generated	Lightbox group name for navigation grouping
class	string	—	Additional CSS classes

GalleryItem type (from src/lib/gallery-types.ts):

type GalleryItem = {
  src: string;
  alt: string;
  hires?: string;
  caption?: string;
};

Usage

---
import Gallery from "@core/components/ui/Gallery.astro";
import Lightbox from "@core/components/ui/Lightbox.astro";

const images = [
  { src: "/images/photo-1.jpg", alt: "Photo 1", caption: "First image" },
  { src: "/images/photo-2.jpg", alt: "Photo 2" },
  { src: "/images/photo-3.jpg", alt: "Photo 3", caption: "Third image" },
];
---

<Gallery items={images} columns={3} />

{/* Page-level Lightbox required — Gallery does not include its own */}
<Lightbox />

Accessibility

• Each image is wrapped in a <figure> element with an optional <figcaption> for captions.
• Images use LightboxImage which renders accessible <a> + <img> markup with proper alt text.
• Gallery does not include its own <Lightbox> — it relies on the page-level Lightbox contract. A <Lightbox /> component must be present on the page for lightbox functionality.
• Without JavaScript, clicking an image follows the link to the full-size image (progressive enhancement).