Chapter Headers
Introduction
One of the key differences between an in-depth story and a traditional article template is the way we handle chaptering. By default, a chapter is marked by using the Heading 2 selector in Presto. Chapters will (by default) inherit the themeColor of the document.
Enhanced chapter headers can be configured to add an image to each chapter break, use a horizontal rule instead of text or even replace the chapter heading with an interactive component.
We can also introduce interstitial scrollytelling during chapter breaks - this feature will actually present the next few paragraphs of a Presto story after a chapter break in a scrolly frame before getting back to the story. We're calling this a "scroll interlude."
With no configuration, a chapter header looks like this:
Chapter Header Configuration
Chapters are targeted with very basic syntax identifying them with an index number. The first chapter is indexed as 1. To apply a rule to all chapter headings, use "chapterHeaders" (see below).
Example Chapter Targeting
Replace *all* headings with stars
{chapterHeaders}
sectionbreak: ☆☆☆
{}
Replace *only* the first chapter heading with asterisks
{chapters.1}
sectionbreak: ***
{}
Most of the configuration examples below will show only one form (targeting a specific chapter, or globally configuring chapters) but in most cases, the same configuration works in both places.
Most of the configuration examples below will show only one form (targeting a specific chapter, or globally configuring chapters) but in most cases, the same configuration works in both places.
Removing chapter lines To remove the default horizontal rule on chapter headings, set noline: true in chapter config.
{chapters.1}
noLine: true
{}
/image here/
Using a plain-text section break
If your goal is to simply give the narrative a short break, a place to take a breath, you might use a plain-text section break.
{chapters.1}
sectionbreak: ***
{}
This will remove the actual words written in the header in Presto and replace it with the sectionbreak text, exactly as typed:
/image here/
Use an image as a section break
As with plain text breaks, you can use an image in place of a text heading. By default, this image will be the same width as normal text, but it can also be configured to run full width, by setting fullwidth: true.
{chapters.1}
fullwidth: true
sectionbreak: https://www.gannett-cdn.com/indepth-static-assets/uploads/master/4586698002/c8f60461-0fef-4f74-a1bb-ded0a60a540c-paper-burn-4.1.jpg
{}