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.

1. Navigate to an existing media item from Dashboard. Then, click on the Edit icon. 
   
   


2. Select the “Metadata” tab below the page editor. If there is no “dcterms:temporal” or “dcterms:date” field already listed, “click “Add additional metadata.” 
   
   


3. Within the metadata dialogue box, tick either “dcterms:temporal” or “dcterms:date” and click the “Add fields” button at the bottom-right.
   
   


4. 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)

Once you add time information to your media item, you can plot it to a timeline. Here is how to do so.

1. 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.
   
   


2. Choose “Timeline” from the widget options.
   
   


3. A pop-up window will display various content items. Filter by “Media files” in the content selector.
   
   


4. Choose a media item or selection of media items you want to display on the timeline.
   
   
   
   If you wish, you can also choose paths and tags and include the items they contain or tag, respectively, by ticking the box under “Include Children” for that item in the content selector. Click "Continue."


5. Choose your formatting options for the widget from the pop-up. If you want to include any descriptive text below the widget, choose “Custom text” under “Caption” and enter it there. Then, click “Insert timeline widget.”
   
   


6. You will be able to see the timeline plotted like below.
   
   

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.

1. 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.
   
   


2. Choose “Timeline” from the widget options.
   
   


3. 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.
   
   


4. 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.

You can also embed a timeline in the header and plot as many media items as you’d like. This displaying strategy is effective if you want to make the temporal history or context of your media items the focus. Please note that timelines tell narratives of linear progression. If this is not the argument you want to make, consider visualizing information spatially or conceptually.

Here is how you do it.

1. Select Timeline from the Layout drop down on a new or working page.
   
   


2. In the Relationships drop down, select Tag.
   
   


3. Click “To make this page a tag” to choose the media items that tag the current page. 
   
   


4. A pop-up window will appear to display all content items. In the top-left box, filter by media.
   
   


5. Select as many media items you want to embed. Then, click “Add selected.”
   
   


6. Click “Save and View.”
   
   


7. You will be able to see the timeline plotted in the header like below.
   
   

Contact Scholarly Communication and Publishing at scpub@library.illinois.edu for guidance or visit our website.