Skip to Main Content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.
Overview of Scalar Timeline Widget with Metadata
The Timeline widget is effective if you would like to display media items chronologically via an interactive timeline in your Scalar page. To create this visualization, all media items must contain time or date information in dcterms: temporal metadata field.
This page starts with the "Adding Time to Media item" section that contains step-by-step processes to add time or date information to your media.
Adding Time to Media item
- Navigate to an existing media item from Dashboard. Then, click on the Edit icon.
- Select the “Metadata” tab below the page editor. If there is no “dcterms:temporal” or “dcterms:date” field already listed, “click “Add additional metadata.”
- Within the metadata dialogue box, tick either “dcterms:temporal” or “dcterms:date” and click the “Add fields” button at the bottom-right.
- A new field (either “dcterms:temporal” or “dcterms:date”) you have selected will appear under Metadata in the page editor. Then, add time information (a particular date, time, or range) in the format month, day, year, hour, minute, second. Select “Save and view.”
Some of the supported date and time formats include but not limited to 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)
Adding a Timeline Widget to Scalar Page
Adding a Timeline with an External URL
Alternately, you can populate Scalar’s Timeline widget with content external to your Scalar project in which it appears. This strategy is effective if you want to directly integrate text with images, maps, videos, websites from an appropriately formatted Google spreadsheet powered by Timeline.js.
Here is how to do so.
- On your Scalar page, place the curser in the location you would like to embed a timeline and click the “Insert Inline Scalar Widget Link” button in the text editor.
- Choose “Timeline” from the widget options.
- Select the “External URL” tab in the content selector and paste in the URL to a Google Sheet containing properly formatted references to content. Click Continue.
- Select your formatting options for the widget. If you want to include any descriptive text below the widget, choose “Custom text” under “Caption” and enter it there. Click "Insert timeline widget."
Please see the TimelineJS site for information on how to prepare a timeline Google Sheet.
Using Timeline Layout to Structure a Scalar Page
Scholarly Communication and Publishing