feat(gallery): grid variant with hover labels + download modal
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:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user