Basic configuration

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:

See chapter header demos for more examples: https://lab-microservices.production.gannettdigital.com/lab-microservices/in-depth/demos/#chapters

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.

Removing chapter lines

To remove the default horizontal rule on chapter headings, set noline: true in chapter config.

{​​​​​​​chapters.1}​​​​​​​
noLine: true
{​​​​​​​​​​​​​​}​​​​​​​​​​​​​​

Example: https://www.freep.com/in-depth/news/local/michigan/detroit/2019/08/01/detroit-hoarder-squalor-dead-eaten-dog-sally-honeycheck/1492124001/