ImgsGrid

Multi-image grid — responsive column count via `divide`, optional per-image captions, a centered single-column layout when only one image is passed, and a per-cell click-to-enlarge (lightbox) affordance for images with pipeline variants.

Article Media & Embeds

Two columns with captions

Single image

Three columns, no captions

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ImgsGrid — new coverage (epic #1647, wave 6, #1662). // // The mock slugs below (`oxi-cap-ep1-*`) don't exist on R2, so their // `/images/p/<slug>/*.webp` requests resolve to the styleguide's // image-placeholder plugin (see `article-image/article-image.stories.tsx`). // // Click-to-enlarge affordance (#405, #1864): cells whose slug has pipeline // variants in metadata-db (`oxi-cap-ep1-front-panel`, `oxi-cap-ep1-grid-notes`) // render wrapped in `.zd-enlargeable` with `data-enlarge-*` + a (hidden) // `<EnlargeButton>`; slugs absent from metadata (`oxi-cap-ep1-rear-panel`) and // WIP/image-stash cells render the plain image. NOTE: the styleguide preview // mounts only PreviewApp — it does NOT import image-enlarge.css or the // ImageEnlarge island, so these stories verify the rendered *markup* only, not // button eligibility toggling or dialog interaction (verify that on a real // BaseLayout page). import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { ImgsGrid } from './imgs-grid'; const meta: StoryMeta = { title: 'ImgsGrid', category: 'Article Media & Embeds', description: 'Multi-image grid — responsive column count via `divide`, optional per-image captions, a centered single-column layout when only one image is passed, and a per-cell click-to-enlarge (lightbox) affordance for images with pipeline variants.', usage: `import { ImgsGrid } from '@/components/mdx/imgs-grid';\n\n<ImgsGrid srcs={['a', 'b']} captions={['写真A', '写真B']} divide={2} />`, }; export default meta; export const TwoColumns = defineStory({ name: 'Two columns with captions', render: () => ( <ImgsGrid srcs={['oxi-cap-ep1-front-panel', 'oxi-cap-ep1-grid-notes']} captions={['フロントパネル', 'グリッド設定']} divide={2} /> ), }); // A lone image is centered at half width on desktop, ignoring `divide`. export const SingleImage = defineStory({ name: 'Single image', render: () => ( <ImgsGrid srcs={['oxi-cap-ep1-front-panel']} captions={['OXI Coral フロントパネル']} /> ), }); // No captions passed — alt text falls back to the slug, hyphen-split and // title-cased. Also exercises the enlarge affordance's two branches: // `front-panel`/`grid-notes` have metadata variants → `.zd-enlargeable` wrapper; // `rear-panel` is absent from metadata-db → plain (non-enlargeable) fallback. export const ThreeColumnsNoCaption = defineStory({ name: 'Three columns, no captions', render: () => ( <ImgsGrid srcs={['oxi-cap-ep1-front-panel', 'oxi-cap-ep1-grid-notes', 'oxi-cap-ep1-rear-panel']} divide={3} /> ), });