How to create an Embedded Timeline

An Embedded Timeline lets site visitors scroll through past, present, and future events. These events can be marked with text, images, or both.

Embedded timeline styles "vertical by month" and "vertical by year" show a continuous vertical timeline as opposed to the existing scrollable horizontal timeline.

There are two steps to creating an Embedded timeline:

1. Create an Embedded Timeline
2. Embed the Timeline

Note: Content Authors cannot create an Embedded timeline.

See notes on other site templates.

Create an Embedded Timeline

1. From the Administration bar select My Workbench > Create/Manage Content, and select Embedded timeline.
2. Select Add a new Embedded timeline.
3. Add the Title of the Timeline.
   
4. Select the desired Timeline style:

Horizontal:

Vertical by month:

Vertical by year:

5. Create a Timeline element.
   
   Note: The background of each element block will highlight in yellow when the mouse cursor is on it.
    
   1. Enter the Headline of the Timeline element (optional). Note: a Headline must be entered for the timeline to scroll when published.
   2. Enter Content. Text and/or images can be entered. Images will be uploaded at cursor point. Note: Remember to add descriptive Alternate text.
      
   3. Select the Date associated with the Timeline element.
6. Continue to add as many Timeline elements as required by clicking on the Add another item button.
   
7. Save and Publish.
   
   Note: Embedded Timelines are Published by default.
8. A view of the completed Timeline elements will display as such:

Embed the Timeline on a Web page or other content type

You will need to know the node ID of the Embedded Timeline just created in order to embed in another content type.

The node ID can be found by hovering the cursor over the 'Edit' tab and noting the number after "node" at the bottom left of the browser window,

or by looking in the URL address bar after clicking Edit.

The Timeline can now be embedded in the body field of another content type, i.e. a Web page.

1. Place cursor where Timeline should be embedded and select the Add/Edit Timeline icon from the editing toolbar.
   
2. Enter the Embedded Timeline node ID (just the number) in the Timeline properties field and select OK.
   
3. Save and Publish.

The Embedded Timeline will display as such:

Other site templates