feat(gallery): grid variant with hover labels + download modal
Deploy / verify (push) Successful in 40s
Deploy / deploy (push) Successful in 1m1s

ImageGalleryBlock now branches on `block.variant`:

- "standard" (default) → existing carousel.
- "grid" → 2/3/4-column thumbnail grid (1:1 squares, w=400/q=75
  through /cms-images). Each tile scales 5% on hover and surfaces
  the image's title/alt/caption/description as a gradient overlay
  caption that fades in on hover and keyboard focus.

Click any tile → fullscreen lightbox (z-100 overlay + 90vh image).
The lightbox carries:
- A download button using the asset's filename (extracted from the
  src URL).
- Prev/Next arrows when there's more than one image (keyboard:
  ←/→), Esc to close, click on the backdrop closes too.
- Position counter (n/total) when applicable.

Type updates in block-types.ts: ImageGalleryBlockData gains
`variant?: "standard"|"grid"` and `title?`. ImageGalleryImage gains
`alt`/`caption`/`title` so the schema's `image` field shape is
honoured for the hover label.
This commit is contained in:
Peter Meier
2026-04-25 10:32:37 +02:00
parent ecff7b0bbf
commit 6246d7c3a4
2 changed files with 160 additions and 0 deletions
+8
View File
@@ -104,6 +104,10 @@ export interface ImageGalleryImage {
_slug?: string;
src?: string;
description?: string;
/** Optionaler Hover-Titel (image-Type: alt/caption/title). */
alt?: string;
caption?: string;
title?: string;
file?: { url?: string };
/** Nach resolveContentImages: Proxy-URL zum transformierten Bild (16:9). */
resolvedSrc?: string;
@@ -115,6 +119,10 @@ export interface ImageGalleryBlockData {
_slug?: string;
/** Optionaler Einleitungstext (Markdown). */
description?: string;
/** Optional: oberhalb des Galerie-Modals als Header. */
title?: string;
/** "standard" = Carousel (Default), "grid" = Thumbnail-Grid mit Modal. */
variant?: "standard" | "grid";
images?: ImageGalleryImage[];
layout?: BlockLayout;
}