Timeline chapters years

A history told in dated quotations on the ink. Six years, each led by a big numeral, a short title, a voice from that year set large and italic with its attribution, and one paragraph of what happened; two interludes mark the parts of the story and carry no picture of their own. One mounted photograph on the right keeps up as you read, changing shape to each picture's own crop as the decades pass, and the year you are reading is the one that is lit while the others fade to well under half. The block is patternpaste/chapters with the rail flipped to the right, the morph on, the plate on, the reading line at 40, the smear off and the fade at 60.

The composition is the numeral. Every chapter opens with its year at display size, tight and heavy, above a title on the ladder, so the column reads as a timeline before a word of it is read: 1904, 1931, 1958, 1979, 2003, 2024, down the left of the page in the theme's own face. The quotation under it is the chapter's real content, set at the large rung in italic so it is the largest running text on the page, and the paragraph after it is the smallest. That inversion, the voice above the explanation, is what makes it a history in other people's words rather than a company timeline with quotes in it.

The picture is a mounted print. The plate is on, so each photograph sits in a mount drawn in the page's own ink mixed down, which on the ink ground reads as a pale card with a hairline; the crops are deliberately mixed (1:1, 4:5, 3:2, 4:3, 1:1, 16:9) because an archive is not photographed to one shape, and the frame changing shape from its top corner as the years pass is the effect. The two interludes have no picture and keep the print before them, which is what a part marker wants: the reader has moved on in the words and the evidence stays where it was until the next dated voice arrives.

• It is on the ink. The other two sit on base; this one inverts the root to contrast with base type, so the mounted prints and the display numerals sit on a dark page. A heritage piece wants the archive's own register, and a light page of pale photographs in pale mounts is a brochure.
• The chapter is a quotation, not an explanation. The case study is three paragraphs and a list; the index is two paragraphs and a list. Here the largest text in every chapter is somebody else's sentence, the paragraph is the smallest, and the numeral above both is the biggest thing on the page. No lists.
• The frame morphs, and the crops are mixed on purpose. The case study fixes its window; the index nudges between two portrait crops; this one morphs between six archival crops that are simply what the photographs are. The overshoot is the block's default 12.
• Two interludes. The case study has one, a text-only chapter inside the argument; here the interludes are the structure, the "Part two" and "Part three" that split six dates into three eras, and both keep the previous print.
• The fade is 60, the deepest of the three, against the case study's 50 and the index's 40. A quotation wants to be read alone; on the ink the faded years drop back into the page rather than reading as disabled controls, which is what holds the two light-ground siblings lower.
• The reading line is 40, between the case study's 34 and the block's 45: a chapter here is shorter than a case-study chapter and taller than a step, and the numeral should take the frame as it clears the top third.
• No smear. A reader of a history flicks between decades; a frame that leans on the way reads as a fault on the ink, where the mount's hairline makes any skew obvious.

1. The photographs. Every dated chapter includes an image block with an example photograph with its crop already set; click each and choose from your media library, or use the block toolbar's "Fill chapters from media library" to deal a multiple selection into the chapters in order. Keep the crops mixed if you can: the change of shape is the effect, and six prints in one crop want the case study's fixed window instead.
2. The years and the voices. Each chapter is a numeral, a title, a quotation, an attribution and a paragraph. Add a year by duplicating a Chapter group; add or remove an interlude the same way. A chapter with no image keeps the print before it.
3. The band, and how long a print is held. Chapter length in the block's inspector, 720 here. Raise it for longer paragraphs; past about 840 on a laptop the next year drops below the fold and the fade has nothing on screen to fade.
4. The fade. Fade the other chapters in the inspector, 60 here. Lower it if your paragraphs are the point and the quotations are not; 0 keeps every year at full strength.
5. Which side the rail is on. Pictures on the right in the inspector, on here. Off puts the prints on the left and the numerals inboard.
6. The plate. Draw the frame in the inspector, on here. Off, the photograph meets the ink with nothing around it, which suits a set of full-bleed documentary pictures better than archive prints.
7. The masthead and the hand-off row. Ordinary core blocks before and after the block, so they take your theme's measure. The button is your theme's outline style and states no colour.
8. Motion. The inspector has the switch and the dials: the reading line, the swap time, the overshoot, the wipe, the drift and the smear. Off, the section is the still spread with nothing missing.
9. The heading levels. The masthead is an h2, the interlude titles and the year titles are h3, because a history is one section with parts and dates in it. If this lands under another h2, or the page has no h1 above it, change the masthead's level in the block toolbar so the outline reads in order.

• Typeface. Nothing states a family. The numerals, the titles, the quotations, the paragraphs and the button take whatever your theme sets; a serif theme sets the years in serif figures, which is right.
• Palette. The root is your contrast as ground and your base as ink, the one pair every block theme is obliged to keep legible, measured at 18.88:1 on twentytwentyfive. No role slug appears anywhere: on a ground the payload paints itself, roles do not apply.
• The mount. The block draws the plate in currentColor mixed down, so on your contrast it is your base at seven and sixteen per cent: a pale card and a hairline, in your colour and not ours.
• The measure. Each chapter's prose is a constrained group with no width of its own, so it takes your theme's content width inside the column, aligned left. The masthead and the hand-off row do the same.
• The ladder. The masthead heading is x-large, each interlude heading is x-large too (it is a part title, not a chapter title), every year's title is large, every quotation is large, every paragraph is medium, each stated as a chain with a tuned clamp() behind it.

• Display type. The year numerals are a bare clamp(3.25rem, 7.5vw, 6.5rem) paragraph at weight 600, line-height 1 and letter-spacing -0.02em: a stat figure whose size IS the composition, so it is not on the ladder. The attribution lines and the two part labels are uppercase, tracked at 0.2em, and stay at their own small clamp, which is a marking rather than a size.
• Six years and two interludes. Six dates is enough for three eras of two; eight chapters is what the block lays as eight explicit rows. Adding a year needs no other change.
• The band, at 720. Every chapter's minimum height and the scroll one print is worth. A dated chapter is a little under that on a laptop at the theme's measure, so the band is the floor and the next year's numeral is on screen, faded, beneath the one being read.
• The rail on the right, because the numeral wants the left edge of the page: a column of years down the left is the timeline.
• The masthead is outside the block, an ordinary group inset by the same gutter the block uses, and the hand-off row is a sibling after it, so a full-bleed band on the ink has something under it that says where the section ends.

This pattern embeds patternpaste/chapters, a dynamic block registered by the companion plugin, which comes with your access. Install it before pasting, or the block shows the missing-block placeholder in the editor.

• With the plugin and motion off (the inspector switch, and also what the storefront's still picture and the contact sheet show): the two-column spread on the ink, every year's print in the right-hand rail beside its own words, the interludes with no print of their own. Nothing is faded and nothing is hidden.
• With the plugin deactivated entirely: the masthead is followed by the eight chapters as a plain stack of core blocks on the ink, each print above its own year, in the order they were typed, and then the hand-off row. Nothing you type lives inside the block.
• A reader who has asked for reduced motion gets the still spread, with every print in it and every year at full strength.
• On a phone there is one column and the same stack, with the plugin, without it and with motion off: below the block's own breakpoint there is no frame to stick and the script does not initialise.

• The fade's value is not measured against the contrast floor. The floor is read on the resting spread, which never fades; at 60 the faded years are your base at forty per cent over your contrast, which is legible on the two stock themes by inspection and not by a gate.
• The interludes' picture carry-over is proved by result. chapters-wrong-picture expects an interlude to show the print before it and passes when it does; nothing reads that the frame held still through the boundary rather than swapping the same print out and in.
• The wide cell. At 1920 the rail track is wider than the largest print, so a square 1904 sits at the outer edge of a track with ink to its left. The block caps the spread at 1600 and the numeral column holds the left edge; it reads as a margin, not a gap, and it is not measured.
• A serif theme's figures. The numerals take the theme's face; a serif with old-style figures sets 1904 with descenders, which is a look rather than a fault and has not been rendered here.

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.