Timeline

Columbia Sites can display interactive timelines on Landing Pages. Optionally, up to three filters can be created to narrow events on the timeline.

See an example of the timeline functionality

NOTE:

  • If using filters, the labels and values must first be created before entering events into the timeline

    Set the filter labels in Site Settings > Labels & Categorization

    Interface for entering in labels

    Go to Taxonomy to add the filter values set for each label created above:

    • Click List Terms for the filter label to add the values
    interface to add values into filter label

    Repeat this step for each filter label created.

  • Select Add Timeline from the content menu

    NOTE: You cannot select Timeline within a page section.

    add timeline from the content menu

  • Optional, add a Heading for the timeline

    The Heading is always visible as the user scrolls through the timeline.

    heading field
    sample of headline display

  • Add an Introductory Slide for the Timeline

    If wanted, add a first slide that introduces the timeline. If not, skip to the next step.

    timeline title slide button
    Expand the Text and Media sections to add in content:
    • Text section allows for a Headline and Text to appear on the slide
    • Media section allows for an image or video embed to appear on the slide
    text/media field

    Enter in text as needed.

    interface for adding text
    how the headline and text fields display on webpage

    Enter in media - images or video - URLs as needed.

    IMPORTANT: Make sure to add the URL for the image or video. There is no way to link to an uploaded image file here.

    URL field
    image displays

    Enter in the caption and/or credit for the media URL just entered.

    enter caption and credit information
    example how the caption and credit display on the timeline

  • Enter a timeline event

    Enter the Date for the timeline event.

    These fields create both the timeline slide and the date on the bottom axis to access the slide.

     

    field for entering date
    how date displays on the slide
    Enter text and/or media

    See above for instructions

    Within the media section, enter a Thumbnail for the event

    The Thumbnail displays on the bottom axis of the timeline.

     

    enter in thumb image
    how the thumbnail displays on the bottom axis
    Add a background image if needed

    This image will span the entire slide. Anything added in the text and media tabs appears on top of this background image.

     

    background image button

  • If filters were created, add them in for each timeline event

    Expand the Category field to enter in filter values

    interface to add timeline filters

  • Click Add Timeline Event for additional timeline slides

    Use this button for each separate slide in the timeline. Repeat the process above.

    timeline event button

  • If necessary, add Eras

    Eras refer to categories of time within the timeline.

    E.g., if your timeline details a person's life eras could be:

    • Childhood
    • Teenage Years
    • Adult
    • Later Years

    Eras appear on the bottom axis under the years listed.