Skip to content

Visual Essay Knightlab Timeline Tag

julia-ha edited this page Jul 9, 2021 · 2 revisions

The Knightlab Timeline Viewer is used to associate and display a timeline visual with a text element. The timeline is generated by the user using a Google spreadsheet that is then processed by the Knight Lab service, which can be found at: https://timeline.knightlab.com. Knight Lab utilizes TimelineJS, an open-source tool that enables anyone to build visually rich, interactive timelines to generate the timeline visual. The steps to create the timeline source ID that is used in this visual essay tag can be found on the Knight Lab Timeline website at: https://timeline.knightlab.com/#make.

Below is an example of the Knightlab timeline viewer component:

Syntax

<param ve-knightlab-timeline>

Options

  • source: The source ID of the timeline generated on Knight Lab.
  • timenav-position: The display position of the scrollable navigation on the timeline. The options are top or bottom.
  • hash-bookmark: Default is false. If set to true, TimelineJS will update the browser URL each time a slide advances, so that people can link directly to specific slides.
  • initial-zoom: The position in the zoom_sequence series used to scale the Timeline when it is first created. Takes precedence over scale_factor.
  • height: The height of the timeline.

More documentation on TimelineJS options can be found here: https://timeline.knightlab.com/docs/options.html.

Usage examples

<param ve-knightlab-timeline source="1mlXQQ3VKfeYznV2VktShOQd2-7aH5p52_n20LQ1U0uE" timenav-position="bottom" hash-bookmark="false" initial-zoom="1" height="640">
Clone this wiki locally