shadcn.io is not affiliated with official shadcn/ui
Photo Essay Gallery Blog Block for Vue
A photo-essay contact sheet: one wide and three narrow framed plates, each a figure with a numbered caption that is its one link, and a colophon cell; no lightbox.
Installation
Overview
A photo-essay sheet for Vue with Ark UI, written for Platecraft, a photography journal. A centred header names the essay, and under it four plates sit on a contact sheet: one wide plate across two columns and three narrow ones, plus a colophon cell with the photographer's note and a link to the essay. Each plate is a figure framed with overshooting hairlines and plus marks on its corners, carries its number in the corner and a caption such as "Plate 02. Glass at dusk" with the camera's note under it; the caption is the plate's one link, and the whole plate is its target. The plates are drawn in your theme's tokens, never photographs: a grid in perspective, contour lines, a halftone ramp and truchet tiles. Three columns on a desktop, two on a tablet, one on a phone. There is no lightbox; the link goes to the essay. It's built from Guides, with CSS for the entrance and the hover. For photography journals, portfolio essays and any post that leads with a few strong pictures.
FAQ
How do I add my own plates?
Edit DRAFTS at the top of the file: each plate has a number, a title, an exposure line and a kind. One plate has wide: true and runs two columns; one has tall: true and stretches to the wide plate's height on a desktop. The sheet is laid out for one wide and three narrow plates; a different mix needs its grid spans changed.
How do I use real photographs?
Put an img with size-full object-cover in place of the pattern inside each plate's frame (the PlateArt call) and keep its alt text; the frame, the corner marks, the number and the caption stay as they are. The patterns are aria-hidden artwork, so the caption is what names the plate for assistive technology; with photographs, describe each one in its alt.
What does a plate link to, and where is the lightbox?
The caption's link covers the whole figure, so a click anywhere on the plate opens the essay or the plate's own page, and the keyboard focus ring is drawn around the figure. There is no lightbox in this block; the gallery category has blocks that open pictures in one.
How are the plate patterns built?
Each is SVG path data computed at module scope: perspective lines running to one vanishing point, contour rings around a summit, dots that swell from the start of the plate to the end, and forty-pixel tiles each turned by a fixed rule. Two weights, light at 20% and strong at 60% of the foreground colour, and every stroke stays a hairline at any plate size.