Editorial chapters case, Pattern Paste Canonical: https://patternpaste.com/pattern/editorial-chapters-case.html Interactive (https://patternpaste.com/interactive/) Chapters (https://patternpaste.com/interactive/chapters/) Catalogue access Needs plugin (https://patternpaste.com/docs/install-pattern-paste/) # 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. Start here ## What you change first - 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 words. Seven chapters, each a label, a title, three paragraphs and one closing element, a pull-quote or a three-item list. - The band, and how long a picture is held. patternpasteBand in the block's inspector, 720 here. - The fade. patternpasteDim in the inspector, 50 here, in steps of five up to 70. - Which side the rail is on. patternpasteFlip in the inspector. - The plate. A drawn frame around the picture in the inspector, off here. - 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. - 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. - 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. 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. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - The fade. - The frame's surfaces, and there are none. - The measure. - The type ladder. ### Set by this pattern - Seven chapters, one of them without a picture. - The band, at 720. - The fade, at 50. - The reading line, at 34. - A fourth element in every chapter, alternating. - Landscape crops only, 16:9 and 3:2 alternating. - The labels are labels. - The masthead is outside the block. - The hand-off row is a sibling after the block Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview A long-form case study told in seven chapters. The prose runs down the left at the theme's own measure; the right-hand rail holds one picture frame that stays with the reader and takes each chapter's photograph as that chapter reaches the reading line. While the reader is scrolling, the chapters they are not reading sit at half strength and the one at the reading line is at full. Every picture is landscape, the frame never changes shape and nothing is drawn around it, so what moves between chapters is the photograph and nothing else. The block is patternpaste/chapters with the rail flipped to the right, the morph off, the plate off, a long band, the reading line high, the smear at zero and the fade at half. ### 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. Make it yoursVariations and the edits to make first ### What you change first - 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. - 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. - 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. - 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. - 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. - 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. - 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. - 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. - 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. Theme behaviourInheritance, fixed decisions and contrast ### 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. Technical notesBlock mechanics, responsive behaviour and constraints ### 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 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 (https://patternpaste.com/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment. 35KB of core-block markup, 9 blocks (button, buttons, group, heading, image, list, list-item, paragraph, patternpaste/chapters), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Start free trial to copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Use it for - Agency and studio case studies - Long-form project write-ups - Annual reviews told chapter by chapter - Consultancy engagement stories - Feature articles with a picture per section #### Pair with Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Blog Post featured lead Two Query Loops read as one section: the newest post opens at display size with its featured image, its byline and an excerpt, and the three behind it sit in a rail beside it as ruled date-and-title lines with no picture at all. It reads your own posts, so the lead changes the moment you publish; the preview on this page shows sample posts from our demo site, not yours. States no colour and no font of its own. (https://patternpaste.com/pattern/post-featured-lead.html)Call to action CTA band A full-bleed closing band that inverts the page: a contrast ground carrying base text, one centred statement, one action. States no colour and no font of its own. (https://patternpaste.com/pattern/cta-band.html) #### Before you paste 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. How to install it (https://patternpaste.com/docs/install-pattern-paste/). 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. How we test patterns (https://patternpaste.com/how-we-test/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). #### What's inside Blocks button, buttons, group, heading, image, list, list-item, paragraph, patternpaste/chapters Core only NO Chains 88, deepest 3 rungs currentColor no color base, black, contrast, role-label, white spacing 20, 40, 60, 80 font-size large, medium, x-large Continue exploring ## Next in Interactive Explore all 36 interactive patterns (https://patternpaste.com/interactive/)Also in Editorial (https://patternpaste.com/patterns/editorial/) Shot in Twenty Twenty-Five Cover Cover Needs plugin ### Cover chapters backdrop A photo essay where the pictures fill the page: six chapters run down the right on white plates over one full-height frame behind them, and as each chapter reaches the reading line the photograph behind the words changes, wiping in along the direction of travel. 7 blocks Open preview (https://patternpaste.com/pattern/cover-chapters-backdrop.html) Shot in Twenty Twenty-Five Features Features Needs plugin ### Feature chapters view One photograph, six looks: the frame holds a single scene and the camera moves across it as you read, panning and zooming to the part each chapter points at with a soft spotlight on it, and the last chapter lets the whole picture go. 7 blocks Open preview (https://patternpaste.com/pattern/feature-chapters-view.html) Shot in Twenty Twenty-Five Stats Stats Needs plugin ### Stat chapters numbers Six numbers, each with the story behind it: the chapters run down the right, and on the left one card on your contrast colour holds the figure for the chapter you are reading, in display type, and swaps to the next as you reach it, wiping in along the direction of travel. 6 blocks Open preview (https://patternpaste.com/pattern/stat-chapters-numbers.html)