Scalar 2 User's Guide

Timeline Layout

The Timeline layout uses Timeline.js to display any content contained or tagged by the current page in chronological order at its top. Content must include dcterms:temporal or dcterms:date in the format month, day, year, hour, minute, second. Each item on the timeline displays its thumbnail, title, description, and link for its content when clicked. The rest of the page follows the Basic layout, with text and media interspersed.

Bellow you'll find step-by-step instructions for using the Timeline layout.

Step one: Add metadata to content in your Scalar book. Navigate to the edit page for the content you’d like to add to your timeline, select “Metadata,” in the page editor, and click “Add additional metadata.” Then, within the metadata dialogue box, tick the box next to either “Temporal” or “Date” under “dcterms” and click “Add fields” at the bottom-right of the dialogue box. You should now have a new field under Metadata in the page editor – “dcterms:temporal” or “dcterms:date”; enter either a particular date (and time) or a range into that field using a supported date/time format (see below).

Step two: Add descriptions and thumbnails to content in your Scalar book (optional). The Timeline layout will also display an item’s description and associated thumbnail. To add a description to an item, simply enter your text into the description field in the page editor. To add a thumbnail click on “Styling” and choose “Thumbnail” from the dropdown menu. Then select an image from your media library or enter a url for the image’s location on the Web; click “save.”

Step three: Gather your content. Once you’ve added temporal metadata to the items you’d like displayed in your timeline, create a new page (or alternatively, use an existing page) and either tag those items to that page or add them to the page as a path.

Step four: Select the Timeline layout. Finally, set the current page to the Timeline layout via the drop-down menu under “Layout.”

Supported metadata formats.

Supported date formats for the timeline layout include the following:

MM/DD/YYYY (07/21/1988)
MM/DD/YYYYe (07/21/1988BCE) - CE, AD, BCE, and BC are supported
MM/DD/YYYY hh:mma (07/21/1988 2:59 AM)
MM/DD/YYYYe hh:mma (07/21/1988BCE 2:59 AM)
MM/DD/YYYY HH:mm (07/21/1988 14:59)
MM/DD/YYYYe hh:mm (07/21/1988BCE 2:59)

One can also include a date range. Any two dates in one of the above formats may be used, separated by a hyphen. Thus the following formats are supported for date ranges:

MM/DD/YYYY - MM/DD/YYYY (07/21/1988 - 08/06/1990)
MM/DD/YYYYe - MM/DD/YYYYe (07/21/1988BCE - 08/06/1990CE)
MM/DD/YYYY hh:mma - MM/DD/YYYY hh:mma (07/21/1988 2:59 AM - 08/06/1990 2:59 AM)
MM/DD/YYYYe hh:mma - MM/DD/YYYYe hh:mma (07/21/1988BCE 2:59 AM - 08/06/1990CE 2:59 AM)
MM/DD/YYYY HH:mm - MM/DD/YYYY HH:mm (07/21/1988 14:59 - 08/06/1990 14:59)
MM/DD/YYYYe hh:mm - MM/DD/YYYYe hh:mm (07/21/1988BCE 2:59 - 08/06/1990CE 2:59)

The Timeline Layout is powered by Timeline.JS built by the wonderful people at Knight Lab.

This page has paths:

This page references: