The Chapter component provides a scroll-to point for the story. We call them “Chapters.” Each chapter point can have an image or video as a cover as well as a title and subtitle.

General Notes

• The Chapter menu comes into view when the page is scrolled to the first chapter

Developer Documentation

Official (not very useful) documentation is archived here:
https://web.archive.org/web/20210729205457/https://aesopstoryengine.com/help/chapter-component/

This is a basic chapter with default options. Note horizontal rule above and white-space below chapter title.

Aenean a placerat ex. Praesent placerat, odio at tincidunt dapibus, lacus est viverra libero, id condimentum dolor enim eu sem. Nam luctus tortor non elit mollis consequat. Nulla quis mi eget nibh volutpat condimentum sed sed magna. Pellentesque eget ipsum nisi. Pellentesque blandit neque varius, auctor lorem sit amet, commodo urna. In id mollis lacus.

Maecenas sollicitudin consectetur ex ut maximus. Duis mollis dolor orci, vel consectetur felis consectetur vel. Proin eleifend aliquam mattis. Ut orci velit, suscipit nec blandit vel, maximus ut odio. Fusce pulvinar velit faucibus dui commodo, congue accumsan ex ullamcorper. Curabitur faucibus ex at sodales sollicitudin. Aliquam maximus iaculis turpis ac vestibulum. Praesent rutrum fringilla tortor, ut gravida ipsum pretium ut. Curabitur lacinia enim convallis massa laoreet accumsan.

Cras laoreet ipsum vitae diam accumsan, eu tempor purus venenatis. Donec rhoncus imperdiet feugiat. Curabitur gravida tempus odio, a aliquam nulla ultrices luctus. Integer aliquet orci nec purus consectetur pellentesque. Nulla urna urna, aliquam sed bibendum a, fermentum a dolor. Nam sit amet eros enim. Vestibulum malesuada vitae neque vel suscipit. Phasellus sodales ultrices mi, nec gravida enim. Donec sodales ex purus, eu convallis diam aliquam vitae. Vivamus sit amet eleifend ligula. Praesent vel arcu blandit, feugiat mi sit amet, aliquam quam. Praesent nisl libero, convallis et justo ac, convallis blandit arcu.

Aenean ac enim non diam scelerisque vulputate. Suspendisse aliquet malesuada urna. Praesent condimentum leo sit amet elit condimentum ultricies. Aliquam erat volutpat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse eu arcu ultricies, cursus felis ut, congue diam. Donec auctor enim a tincidunt feugiat. Maecenas ultrices velit luctus, consectetur nulla ut, molestie lorem. Mauris nisi tortor, viverra ut viverra quis, tempor elementum nisi. Donec auctor dictum ligula vitae fermentum.

This Chapter block has an added Subtitle.

The Minimum Height property is set to 100px, reducing the gap below the title/sub-title and the content below it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum aliquam eros, in dapibus ipsum elementum vitae. Duis dignissim, metus nec congue interdum, neque sem tristique felis, id ultrices odio sapien vel enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus sit amet lectus rutrum justo elementum dapibus ut nec lectus. Integer et pellentesque nibh. Vivamus consequat viverra arcu eu imperdiet. Vivamus fringilla nisi in lectus cursus suscipit.

In tempus erat non quam mollis, non fermentum sem pretium. Aliquam scelerisque eros sed magna pharetra, a tempor dui vehicula. Nullam auctor nisl in nisl porta, a congue justo consectetur. Sed ornare mi nec lorem dapibus laoreet. Vestibulum venenatis turpis vel ornare volutpat. Etiam ac mattis ligula. Ut feugiat sed lectus nec laoreet. Praesent pretium neque in ex ornare, eget iaculis justo dictum. In mattis, velit eleifend pharetra porta, lectus mauris faucibus est, sed interdum nunc ex eget nulla. In luctus augue vitae ultrices semper. Nam bibendum facilisis diam, id tempor sapien dapibus eu. Donec in leo sit amet odio venenatis aliquet. Pellentesque sed velit enim.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris egestas, metus in sodales feugiat, sapien massa porta orci, at auctor ipsum libero id ex. Pellentesque vitae nunc porta, ultrices dui laoreet, pellentesque ex. Mauris finibus scelerisque purus quis luctus. Aliquam erat volutpat. Nulla semper vel purus non dapibus. Nam magna mi, lobortis id nisi fringilla, dictum malesuada felis. Nullam et mauris non dolor gravida pellentesque ut sed diam. Curabitur sed lobortis lacus. Morbi laoreet nisl id luctus consequat.

This Chapter block has the Background Type property set to Image. This places the selected image under the title and subtitle.

The Minimum Height has also been set, to display more of the image.

Photo via Good Free Photos.

Notes:

• The title and subtitle are rendered in black text, so care has to be taken when choosing a background image to ensure the text remains readable when placed over it
• A solid colour can also be used as a background
• We do not have the facility to store video files, so the Video background type cannot currently be used
• Be careful that the background image doesn’t adversely affect legibility of text placed on top of it. The image I used above is a good example of what not to do!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ipsum vitae diam accumsan, eu tempor purus venenatis. Donec rhoncus imperdiet feugiat. Curabitur gravida tempus odio, a aliquam nulla ultrices luctus. Integer aliquet orci nec purus consectetur pellentesque. Nulla urna urna, aliquam sed bibendum a, fermentum a dolor. Nam sit amet eros enim. Vestibulum malesuada vitae neque vel suscipit. Phasellus sodales ultrices mi, nec gravida enim. Donec sodales ex purus, eu convallis diam aliquam vitae. Vivamus sit amet eleifend ligula. Praesent vel arcu blandit, feugiat mi sit amet, aliquam quam. Praesent nisl libero, convallis et justo ac, convallis blandit arcu.

Pellentesque auctor nec tellus a imperdiet. Donec gravida fringilla est, eget finibus dolor. Aliquam a sapien enim. Nam ultricies tellus nec sodales congue. Cras finibus dictum facilisis. Sed dapibus justo facilisis scelerisque imperdiet. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi nec malesuada dolor. In luctus porta ligula ac vulputate. Fusce ac molestie elit. Aliquam blandit diam vitae mattis finibus. Maecenas auctor felis ante, vitae facilisis justo luctus eget. Sed et feugiat tortor.

Suspendisse a consequat urna. Mauris egestas mattis libero at porta. Nulla facilisi. Duis facilisis, risus id fermentum ullamcorper, nisi augue fringilla est, et mollis mauris purus ac ex. Aenean vel dolor ornare, commodo arcu commodo, mollis ex. Quisque ullamcorper lobortis sem. Duis suscipit dignissim est, molestie semper nisi. Mauris ultrices tortor non nisi lacinia, eget accumsan nisi mollis.