Skip to Main Content

Multimedia Timelines with Timeline.JS

Overview

knightlab.northwestern.edu

  • The Timeline.JS developer, Knightlab, creates free, open-source, easy-to-use storytelling tools.
     
  • Their tools offer simple options for out-of-the-box use if you have an idea you want to create a digital visualization for, but don't have the time to learn complicated new software.
     
  • If you have the knowledge/experience, you can use the source code.
     
  • If you have CSS knowledge/experience, you can customize CSS.

Get Organized

  • Create a folder for your project files: https://inside.nd.edu/task/all/googledrive
     
  • Create a sub-folder for your project image and other media files
     
  • Create a sub-folder for you saving back-up images of your completed timeline

Set Up Your Timeline

Create the Timeline Spreadsheet

  • Click the "Get the Spreadsheet Template" button

  • Click the "Make a Copy" button

Set Up the Timeline Spreadsheet

  • Rename the spreadsheet file
     
  • Move the spreadsheet file to the project folder
     
  • In the spreadsheet file, check the sharing settings to verify that "anyone with the link" is NOT enabled
  • Duplicate the tab named "od1," and rename it "original-template"
  • Add a new tab, and rename it "publish-link" 

Publish Your Timeline

There are 2 browser tabs we'll need open for this step:

  1. The timeline.knightlab.com website
     
  2. Our spreadsheet file

In the spreadsheet file:

  • Click File > Share > Publish to web

  • There are 3 steps we need to complete to publish our spreadsheet file properly for the timeline website
  1. In the pop-up box that will appear, ensure that "od1" is selected in the "link" section
     
  2. Click "Published content & settings" and ensure that "automatically republish when changes are made" is selected
     
  3. Click the "Publish" button

  • Copy the URL for your spreadsheet file from the browser address bar

On the timeline.knightlab.com/#make page:

  • Paste the URL of your spreadsheet file into the box on step 3 of the page

  • You can expand the "Optional settings" section to tweak the font of your timeline, and a few other settings
  • Copy the URL of your timeline from the top box of the step 4 section of the timeline page

  • Paste the URL of your timeline into the "publish-link" tab of your spreadsheet file

Add Content, Customize, & Edit Your Timeline

Load Your Timeline in a New Browser Tab

  • Paste the URL of your timeline (from the "publish-link" tab of your spreadsheet file) into a new browser tab
     
  • As you add and edit content in the spreadsheet file, you can now refresh the tab displaying your published timeline to see what those changes look like in real-time

Before You Start Editing the Spreadsheet File, Please Note:

Dates & Times

  • "Year" is the only required field
     
  • BCE years: use negative number (e.g., -80)
     
  • If you have an approximate date, you still have to enter a year, but can tweak how that will show up on your timeline by using the “display date” column. Doing this will still show the year you enter in the navigation pane, but it will also display the display date text you enter above the headline of the event.

Formatting in the Spreadsheet Using HTML Markup

  • <h1>Heading 1 style</h1>

  • <p><big><b>Here is big, bold text.</b></big></p>

  • <p><big>Here is big text.</big></p>

  • <p><i>Here is italics text.</i></p>

  • <p>Here is regular text.</p>

  • <p><a href="library.nd.edu">Here is a hyperlink to the library website.</a></p>

    (The markup above will display like this: Here is a hyperlink to the library website.)

  • You can change background colors of slides with CSS named or HTML named color codes (or add a URL linking to an image to display that as a slide’s background image)

Media

Preserve Your Project

When your timeline is complete, consider backing up your project by taking screenshots and saving those images.

Resources