Caption Density Gallery Block for React

Full reveals a line of place, date and credit and a short story under every title. Each is a field of the FRAMES entry (place, date, credit, story), so more fields are one more line in the Row component. Keep the Full caption short enough for its picture's height, about 160 pixels, or the rows will grow.

The Full lines are always in the layout, and Short hides them with invisible, opacity-0 and inert, so each row is as tall as its Full version. A hidden caption can't be tabbed to or read out, and the change fades in over a few hundred milliseconds (not at all with reduced motion).

The drawn pictures are one Scene component. Where the code comment says so, swap it for an <img> with object-cover, and add a src to each entry. The row's picture box is a fixed 160 pixels high and as wide as the ratio asks, so keep each entry's ratio the photograph's own.

Each row's picture comes first in the markup and the caption second, always. From md the grid places them: the picture in the first five columns and the caption in the last six, then swapped on the next row. A screen reader and the Tab order never see the swap.

Each row stacks, the picture above its caption and as wide as the screen (cropped to 128 pixels high). Under sm the two-sentence story is dropped in Full, which keeps the page to a couple of screens; the place, date and credit remain.