Timeline archive

A history read the way an archivist reads a sheet of negatives. Eight square photographs, four across, twice, each filed under a currentColor hairline with a date and three or four words. Core blocks only: core/group, core/columns, core/column, core/image, core/heading, core/paragraph.

The signature is that one section holds two densities. Above, the eyebrow, the heading and the lede are given a spacing-70 run of air and the lede is held to a 40rem measure, so the opening breathes like the top of an essay. Below, the sheet is packed: the gap between frames is clamp(0.5rem, 1.2vw, 0.75rem), the same value between the two rows as between the cells, captions are small, and eight dated frames sit hard against each other on one screen. The switch from one density to the other, in the same band and on the same ground, is what makes the archive read as an archive rather than as a gallery with dates on it.

Nothing here is at display size except the section heading, and that is the point. Every caption, the date and the title alike, sits at a clamp() floored at 0.9375rem. A contact sheet is not a place where any one frame is louder than the others; the moment a date is set at 3rem the sheet becomes a timeline with a favourite. The heading carries the whole of the section's scale so the sheet can stay flat.

How a cell is built

Each cell is a core/group holding a populated core/image at aspectRatio 1/1 with scale: cover, then a second group carrying a 1px currentColor border-top and the two caption lines. The rule belongs to the caption, not to the image, so it sits under the frame like the line on a filing card and follows your text colour wherever your theme puts it. It cannot resolve to nothing, which a preset colour rung could.

The date is uppercase at 0.18em tracking; the title is the same size with no tracking and a tighter line height. That is the only contrast inside a cell, and it is enough to tell a date from a description without a second colour, a second family or a bold weight fighting the heading.

What happens at 390, stated honestly

The four columns stack. Core sets flex-basis: 100% on a column below 782px and this pattern does not override it, because four across at 390 leaves about 88px a cell and a three-word title ladders into a ribbon at that width. So on a phone the sheet becomes a single column of eight dated frames, read top to bottom. It is a different reading than the sheet gives on a laptop, and it is still an archive: the rule, the date and the title arrive in the same order under every photograph. isStackedOnMobile: false was deliberately not set; the measured cost of forcing four across on a phone is worse than the loss of the grid.

1. The eight photographs. Select each one in the editor; the crop and the layout are already set.
2. The captions. A date and three or four words. Four columns inside a 1240px band are about 290px at 1280 and about 190px at 820, which is the width the three-word floor was set against; anything longer ladders there. If your titles want to be sentences, the section wants timeline-rail.
3. The heading and lede. Written to say the section is a sheet of eight. If you add a row, say so there too.
4. The number of frames. Duplicate a row for eight more. Keep the count a multiple of four so the sheet has no short last row, which is the one thing that makes a contact sheet read as unfinished.
5. The shape. Ship this one where the section is a block on the page that the reader stops at, and timeline-strip where it is a band that wants to be crossed in one pass; the strip is the same eight frames in a single row, captioned by the date alone.

• The typeface. No font family is stated anywhere.
• Your colours. base for the ground, contrast for the type, both ending on a colour WordPress guarantees. Every rule is currentColor.
• Your spacing scale. The air above the sheet and the gap between the frame and its rule are spacing presets, so a theme with a generous scale gets a more generous opening and the density contrast grows rather than shrinks.
• Your photographs. The image blocks include example photographs. Choose Replace to select your own media; the 1/1 crop is already set.

• Full bleed with a 1240px measure.
• The tight gap. clamp(0.5rem, 1.2vw, 0.75rem), used for the gap between cells and between the two rows, so the sheet has one gutter and not two.
• The square crop. A square is the shape a contact sheet is filed in, and it keeps eight frames the same whatever the buyer uploads.
• The caption ramp. Both lines at the same size, separated by tracking and line height alone.
• Eight frames. Four across is a sheet; three would be a gallery and five would need a smaller caption than the floor allows.

Nothing is numbered, nothing is counted down, and no caption asks the reader to do anything. The dates mark a monthly selection from a studio image library. The photographs are visual references selected during those months, not historical photographs of the studio or a record of when each source image was taken.

It is also not the other patterns in this section. timeline-rail is six open entries with a sentence each on one continuous hairline; timeline-decades is twenty single lines grouped under decade heads. Neither carries a photograph, and both are read as text. This one is read as pictures, and its captions are shorter than either pattern's shortest line. timeline-strip is the closest neighbour: the same eight photographs in one row rather than a sheet, with the titles dropped because there is no room for them.

• Core blocks only. No plugin, no script, no separator, no core/gallery.
• Grid layout on core/group was deliberately not used: the two core/columns rows are the shape that is the portable shape in the themes this catalogue is verified in.
• Example photograph URLs travel with the copied markup; see image credits.

The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image or cover and choose Replace to use your own Media Library files. See image credits for the sources and licenses. Pasting an image URL does not import a Media Library attachment.