Density Photo Wall Gallery Block for React

Each entry in TILES has an id, a title and a scene. Add your image's address, then replace <Scene ratio={1} scene={item.scene} /> in the tile with <img alt="" className="size-full object-cover" src={…} />; the caption and the copy button already name it. Change linkOf to build each picture's real address.

The wall sits in a scrolling window of fixed height (28 rem on a phone, 32 rem from sm), so changing the density never changes the height of the block. The slider's value goes to the grid as --cols, and the grid's grid-template-columns is repeat(var(--cols), minmax(0, 1fr)). On a phone a second variable, --cols-sm, halves it (rounded, never below two), so the same slider gives two to four across. The read-out beside the label says "5 across" or, on a phone, the phone's count. Twenty-four divides evenly by 3, 4, 6 and 8; for 5 and 7 the block adds empty cells to finish the last row, so the shared hairlines never show a gap.

It is the catalog Copy Button, which writes the link to the clipboard and shows a check. The block also swaps its label to "Copied" in the same space and says "Link to Harbour roofs copied" in a polite status line. If the browser refuses (a page not served over HTTPS), the status line says it couldn't copy. The links are examples that go nowhere.

The slider takes the arrow keys, Home and End. Each picture's Copy link button is a tab stop and appears when it has focus, as well as on hover and on touch screens. Each picture also has a caption for screen readers with its title and year.

The wall is two to four pictures across in a window 28 rem tall that scrolls, the slider sits under the header text, and the button shows only its icon where a picture is narrow (it keeps its name).

Yes. The cells are your background colour on your border colour's hairlines and the pictures are mixed from your foreground, background and muted tokens, so the wall reads in a light theme and a dark one. The block ends on its last row of pictures with no closing line, so the next section's top rule closes it.