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. Embedded Timeline button.
  2. Select Add a new Embedded timeline.
  3. Add the Title of the Timeline.
    Screenshot of the required Title field, which is for Admin use only.
  4. Select the desired Timeline style:


horizontal embedded timeline

Vertical by month:

vertical by month embedded timeline

Vertical by year:

vertical by year embedded timeline

  1. 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.Headline textfield of Embedded Timeline.
    2. Enter Content. Text and/or images can be entered. Images will be uploaded at cursor point. Note: Remember to add descriptive Alternate text.
      Embedded Timeline content area.
    3. Select the Date associated with the Timeline element.Embedded timeline date.
  2. Continue to add as many Timeline elements as required by clicking on the Add another item button.
    Add another item button to timeline.
  3. Save and Publish.

    Note: Embedded Timelines are Published by default.
  4. A view of the completed Timeline elements will display as such:View of an Embedded Timeline element.

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,

Node number at bottom of browser window.

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

Node number from URL.

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.
    timeline icon
  2. Enter the Embedded Timeline node ID (just the number) in the Timeline properties field and select OK.
    Timeline properties
  3. Save and Publish.

The Embedded Timeline will display as such:

Published timeline.

Other site templates