Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

    Image Added
  2. Select Add a new Embedded timeline.

  3. Add the Title of the Timeline.

    Image Added
  4. Select the desired Timeline style:

Horizontal:

...

Vertical by month:

...

Vertical by year:

...

  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.

      Image Added
    2. Enter Content. Text and/or images can be entered. Images will be uploaded at cursor point. Note: Remember to add descriptive Alternate text.

      Image Added
    3. Select the Date associated with the Timeline element.

      Image Added
  2. Continue to add as many Timeline elements as required by clicking on the Add another item button.

    Image Added
  3. Save and Publish.

    Note: Embedded Timelines are Published by default.

  4. A view of the completed Timeline elements will display as such:

    Image Added

...

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.

    Image Added
  2. Enter the Embedded Timeline node ID (just the number) in the Timeline properties field and select OK.

    Image Added
  3. Save and Publish.

The Embedded Timeline will display as such:

...