# Editorial chapters case > A long-form case study in seven chapters: the prose runs down the left and one picture frame on the right stays with you as you read, taking each chapter's photograph as that chapter reaches the reading line. The chapters you are not reading fade back to half while you scroll, so the one at the reading line is the one that is lit. The frame is a single fixed landscape window rather than a changing shape, because pictures already in the same crop have nothing to morph between; the new picture wipes across it along the direction of travel and drifts a little to rest. Nothing is drawn around it either: the photograph meets the page rather than sitting in a mount. One of the seven is a text-only interlude in the client's own words, and it keeps the picture from the chapter before it rather than emptying the frame. Nothing moves until you scroll, and nothing moves after you stop. A long band of scroll to each chapter, the reading line high on the screen so the words lead, and no smear. Includes replaceable example images. Needs the companion plugin, which comes with your access; without it, or without motion, the masthead is followed by the seven chapters as a plain stack, each picture above its own words, with nothing faded. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/editorial-chapters-case.html Section: Editorial Access: Included in Pattern Paste access. Needs: Requires a block theme on WordPress 6.7 to 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. Also needs: Install the Pattern Paste plugin first, then paste. This section embeds one of its blocks: the plugin comes with your access, downloads from your account, and takes a minute. Paste without it and the section arrives as a plain stack of your headings, text and images, with none of the motion. Blocks: button, buttons, group, heading, image, list, list-item, paragraph, patternpaste/chapters Keywords: editorial, case study, chapters, long-form, sticky, scrollytelling, story, spread Promise: This variation embeds one of our blocks: install the companion plugin, then paste. --- ## The signature moment: seven landscape pictures in one fixed window, with the chapter you are reading the only one lit `patternpasteMorph` is off here, and that is a composition rather than the effect switched off. With the morph on, the frame takes each picture's own crop and changes shape between chapters; with the six pictures here already in one crop family there is nothing for it to change to, so a morph would be a frame redrawing itself at the same size while the reader watched. Off, the frame is one window the width of its track and the height of the stage, every picture is cropped to fill it, and the only thing that happens at a chapter boundary is that one photograph wipes across another along the direction of travel and drifts a few pixels to rest. What carries the reader instead is `patternpasteDim`, at 50. The chapter at the reading line is at full strength and the six around it are at half, so the eye is told where it is by the prose column rather than by the picture. That is the right way round for a case study: the reader is here to read, the picture is the evidence beside the paragraph, and a window that holds still is a window they stop noticing. The section is photographically static between swaps: nothing in it moves on a clock, so with the page still there is nothing on screen to pull the eye off the sentence. ## Why this is not team-chapters-index or timeline-chapters-years - **The morph is off, and it is the only one of the three where it is.** The timeline has six archival pictures in six different crops so the shape change IS its effect, and the index nudges between two portrait crops. Here every picture is 16:9 or 3:2 and the frame is a fixed window; `patternpasteOvershoot` is left at its default and is honestly inert, because there is no shape change for it to overshoot. - **The fade is 50**, above the index's 40 and under the timeline's 60. `patternpasteDim` is what a section with this much prose in it needs and a section with a line of copy per chapter cannot use: fading a caption to half makes it unreadable and marks nothing, while fading a chapter of a hundred and eighty words to half is exactly how a long-form piece says which one is being read. 50 rather than 70 because the chapters above and below the reading line are still meant to be legible, and rather than 25 because a fade a reader does not notice has cost contrast for nothing. - **It is the only one of the three with nothing drawn around the picture.** `patternpastePlate` is off. The other two mount their pictures: the timeline because an archive print wants a mount, the index because six portraits crossing one frame want a consistent border to swap inside. A case study's photographs are evidence, and a mount turns evidence into a framed print; off, the picture meets the page and is the largest thing in the section by some way. - **It is the only one with a chapter that has no picture.** The interlude between chapters three and four is the client speaking, and it carries no `core/image` at all, so the frame keeps the picture from chapter three while those two paragraphs are read. A quotation about the fortnight behind the counter is read against the counter. The index's people each need their own picture by construction; the timeline's interludes are part markers rather than a second voice. - **The rail is on the right.** `patternpasteFlip` puts the pictures on the outside right edge and the prose in the wider left column, which is the side a long read wants to start on, as the timeline does; the index runs the rail on the left. - **It is text-led, and the band is what says so.** 720 against the block's 640: each chapter is worth 720px of scroll before the next one takes the frame, because a chapter here is a hundred and thirty to a hundred and ninety words rather than a line and a button. The index runs a shorter band so its rail swaps faster; this one holds a picture for as long as it takes to read the chapter beside it. **720 rather than more, and the fade is the reason.** A band of 840 put the chapters 896px apart, which on a 900px-tall laptop screen is one chapter and a third of a screen of empty page: the fade was correct in the markup and invisible to the reader, because there was never a second chapter on screen to be dimmed against the one being read. At 720 the next chapter's label and title clear the fold under the chapter at the reading line, at half strength, which is the whole point of turning the fade on. - **The reading line is high.** 34 against the block's 45. A chapter that is taller than the screen has its opening lines at the top of the viewport, so the picture should change when the reader arrives at the words rather than when the chapter's middle drifts past the centre. A picture-led section wants the line near the middle; this one does not. - **No smear.** `patternpasteSmear` is 0. The skew on a fast scroll is a flourish that suits eight quick swaps, which is exactly the index's argument for turning it on; over seven long chapters a reader flicks once and lands in the middle of a paragraph, and a frame that skews on the way there reads as a rendering fault rather than as speed. - **A small drift.** 10 against the block's 24. The picture arrives a beat after the wipe, and the shorter travel keeps the arrival quiet enough to sit beside body copy. ## What it inherits from your theme - **Typeface.** Nothing states a family. The eyebrow, the masthead heading, every chapter title, every paragraph, every pull-quote, every list item and the button take whatever your theme sets. - **Palette.** The band is your `base` with your `contrast` as its ink, the one pair every block theme is obliged to keep legible. The labels and the pull-quotes lead on `role-label`, which only our theme tool defines, and fall through to `contrast` everywhere else. The lists state no colour at all and take the band's ink. The button is your theme's outline button style. - **The fade.** `patternpasteDim` fades the chapters not being read to half of whatever your theme's ink already was; it states no colour and cannot make one up. A dark style fades its own pale ink towards its own dark ground and a light style does the reverse. - **The frame's surfaces, and there are none.** With the plate off the block draws no hairline, no ground and no mount: the frame's own ground is transparent, so the photograph sits directly on the band's colour and needs nothing of ours to be legible in a dark style or a light one. - **The measure.** Each chapter's prose is a constrained group with no content width of its own, so it takes your theme's content width inside the column and is aligned left rather than centred in it. The masthead does the same, which is what puts one left edge down the whole section. - **The type ladder.** The masthead is `x-large`, every chapter title and every pull-quote is `large`, and every paragraph and list is `medium`, each stated as a chain with a tuned `clamp()` behind it. Nothing here is display type: an editorial section that sets its own sizes against a photograph would stop being your magazine and start being ours. ## What it decides for itself - **Seven chapters, one of them without a picture.** Six carry the arc, from the brief to the year after; the seventh is a text-only interlude between chapters three and four in which the client says what the fortnight behind the counter looked like from their side. **A chapter with no `core/image` keeps the picture the chapter before it put in the frame**, which is a feature of the block rather than a gap: the interlude is read against chapter three's photograph, and the frame never goes empty. The block derives its row count from the chapters, so adding or removing one needs no other change. - **The band, at 720.** The chapter's minimum height and therefore the run of scroll one picture is worth. It is set by what the fade needs rather than by what the copy needs: a chapter here runs a hundred and thirty to a hundred and ninety words, which at the theme's measure is a little under 600px on a laptop, and the band is what puts the next chapter's opening on the same screen at half strength. Longer than the copy, so a picture is held to the end of its own chapter and the reader had time to look at it; short enough that the chapter being read is never the only one visible. - **The fade, at 50.** Half, and only while the frame is live. The still spread, a reduced-motion reader and the phone read every chapter at full strength. - **The reading line, at 34.** High, because the words lead. - **A fourth element in every chapter, alternating.** Chapters one, three and five close on a pull-quote, one italic line at the `large` size on the label's own colour chain; chapters two, four and six close on a three-item list, what we found, what changed and what it cost. The alternation is what stops seven chapters of three paragraphs reading as one long column, and each of the two does something the paragraphs cannot: a line worth repeating, and three numbers side by side. - **Landscape crops only, 16:9 and 3:2 alternating.** They are the shapes a documentary photograph of a place or a process actually comes in, and with the morph off they are also what makes the fixed window honest: a portrait picture in a landscape window is cropped to a strip through its middle. - **The labels are labels.** "Chapter one", "Interlude" and the eyebrow are uppercase with wide tracking at under a rem, which is a marking rather than a size, so they read as apparatus beside the prose instead of competing with the titles. - **The masthead is outside the block.** It is an ordinary `core/group` before it, inset by the same `max(clamp(1.25rem, 4vw, 4rem), calc((100% - 1600px) / 2))` the block uses, so in the editor it is plain copy rather than an entry in the block's chapter list and on the page it shares its left edge with every chapter below it. - **The hand-off row is a sibling after the block**, inset by that same expression, because a full-bleed band needs something under it to show where the section ends. ## What needs the plugin 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, every chapter's picture in the rail beside that chapter's own words, in order, nothing faded, and the interlude's row simply has no picture in it. Nothing is hidden and nothing is waiting to be revealed. - **With the plugin deactivated entirely**: the masthead is followed by the seven chapters as a plain stack of core blocks, each picture above its own words, 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 picture in it and every chapter 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, the fade never runs, and the script does not initialise at all. ## What you change first 1. **The photographs.** Every chapter but the interlude includes an example image block with a landscape crop already set; click each and choose from your media library. The block's own toolbar has "Fill chapters from media library", which deals a multiple selection into the chapters in order and saves six trips through the modal. Keep them all landscape: with the morph off they are cropped to fill one window, so a portrait picture arrives as a strip. 2. **The words.** Seven chapters, each a label, a title, three paragraphs and one closing element, a pull-quote or a three-item list. Add a chapter by duplicating one of the `Chapter` groups and remove one by deleting it; the grid follows. A chapter with no picture keeps the one before it, which is what the interlude is: delete its image and you have made one anywhere you like. 3. **The band, and how long a picture is held.** `patternpasteBand` in the block's inspector, 720 here. It is how much scroll one chapter is worth, and also the chapter's minimum height: raise it if your chapters run longer than these, lower it if they are a paragraph each and you want the column tighter. Raise it far and the fade below stops doing anything, because the next chapter is pushed off the bottom of the screen. 4. **The fade.** `patternpasteDim` in the inspector, 50 here, in steps of five up to 70. It is how far the chapters you are not reading fade back while you scroll. 0 turns it off and gives you a plain spread with a sticky picture; above 50 the chapters either side of the reading line stop being readable ahead of time, which suits a section a reader is meant to take one chapter at a time. 5. **Which side the rail is on.** `patternpasteFlip` in the inspector. Off puts the pictures back on the left, which is also the order the degraded stack reads in either way round. 6. **The plate.** `A drawn frame around the picture` in the inspector, off here. On, every photograph gets a mount and a hairline in your own ink mixed down, which is what the other two chapters composites ship. 7. **The masthead.** The eyebrow, the heading and the line under it are ordinary core blocks before the block, so they take your theme's measure and can be cut back to a heading alone. 8. **Motion.** The inspector has the switch, "Animate this block", and the dials: the reading line, the swap duration, the wipe, the drift, the smear, the fade and the morph. Turning the morph ON here is the one change that alters the composition rather than the timing, and it wants pictures in different crops to be worth anything. Off, the section is the still spread with nothing missing and nothing faded. 9. **The heading levels.** The masthead is an `h2` and every chapter title is an `h3`, because a case study is one section with chapters in it rather than seven sections. Where this lands on your page is yours to check: if it sits 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. ## What is not proved - **`patternpasteOvershoot` is inert here, honestly and on purpose.** The control is greyed rather than hidden while the morph is off, and moving it changes nothing about this payload's render. `check-knobs` reports that rather than failing it. Turn the morph on and it is live again. - **`chapters-aspect-off` is skipped**, and reported by `chaptersSkips`: the judge's morph rule asks whether the frame arrived at the picture's own shape, and with the frame deliberately fixed to the stage box there is no such shape to arrive at. Everything else the judge measures still runs, including that the frame stays put while the page moves and that the picture painted is the one belonging to the chapter at the reading line. - **The interlude keeping chapter three's picture IS measured**, and it is the one place in the three composites where the judge's `expected` rule does the interesting half of its job: `chapters-wrong-picture` asks for the picture the render says belongs to the chapter at the reading line, which for a chapter with no image of its own is the last one before it. What is NOT measured is the composition question underneath it, whether a reader notices that the picture did not change; that is a judgement about the copy, and it is why the interlude is the client's own voice rather than more of ours. - **The fade's exact value is not asserted.** The judge proves the frame sticks, the right picture is painted and nothing moves at rest; nothing reads the opacity of a chapter that is not being read. What IS covered is that it cannot hurt anybody: the fade never runs in the still spread, so the contrast the gates measure is the contrast every reduced-motion reader, every phone and every script-free page actually gets. - **The wipe's direction is asserted only through its result.** Nothing reads which edge the picture came in from; the judge proves the right picture comes back on the way up. - **A whole chapter flicked past in one gesture gets one swap, not six.** The current chapter is read off the scroll position once a frame rather than from a stack of crossings, so a reader who jumps four chapters lands on the fourth picture without seeing the three between. That is the right behaviour and it is not measured. ## Included images 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](/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment.