Skip to Main Content
Ask

Timeline JS Quick Start Guide

A guide to creating digital timelines using an open source tool called Timeline JS.

Step 1: Download the Template

In order to create a timeline using this tool you will need to have a Google account so that you can host the spreadsheet that feeds the timeline.

Downloading the Template:

  1. Open your browser and login to your Google Account
  2. Go to: http://timline/knightlab.com
  3. Click on the green "Make a Timeline" Button
  4. For Step 1 click on the "Get the Spreadsheet Template" button
  5. When prompted, click on the "Make a Copy" button
  6. Your new downloaded template will now open. It has a default file name of" Copy of Official Timeline JS3 Template." Change the filename to something that meaning to you. This is the filename not the display name for the timeline.

 

Step 2: Make your Timeline Visible

In order for your timeline to be visible you need to publish it and generate a URL or "embed code" for it.

The first part of this process is to update the spreadsheet you just downloaded so that outside applications can read the data.

  1. Open the File Menu in your spreadsheet and select, Publish to the Web.
  2. On the resulting page, click on the button labeled, Publish.
  3. Close the pop-up window.
  4. Highlight and then copy the full URL for this spreadsheet from the address bar of your browser
  5. In another tab return to the Timeline JS site at: https://timeline.knightlab.com
  6. In Step 3 of their instructions (Generate Your Timeline" paste the URL you just copied from your browser (for the spreadsheet) and paste it into the box marked, "Google Speadsheet URL."
  7. In Step 4 of their instructions highlight and copy either the Sharelink (this is easier) or the Embed Code.
  8. Share the link with others (via email, in a web page etc) or embed the supplied code in a web page to share your Timeline.

Step 3: Adding Content to your Timeline

Each row in the spreadsheet will represent an entry. You do not have to use all of the columns I recommend that you use the following columns:

  • Date - Year (month and day - as numbers are optional)
  • Headline - this is main title for entry - keep it short but meaningful
  • Text - information that you want to convey about this point on the timeline
  • Media - The URL for an image or other media content
  • Media credit - A credit for the media
  • Media Caption - A caption for the media
  • Thumbnail - The same URL as used for Media

The following is optional:

  • Group - Enter a group (keyword or category) if you want to provide a path through a theme on your timeline.

When starting to enter a new item go to the next empty row. Do not leave an empty row.

 

Warning About Adding Images to Timeline JS

Timeline JS is a great tool but the way it works with images is hard. In order to add an image the images must be hosted online as a file and you must have that URL for that file.

  1. Here is an example of a URL that will work: https://tile.loc.gov/storage-services/service/pnp/cph/3b10000/3b18000/3b18700/3b18714r.jpg
  2. Here is an example of a URL that will not work because the image is within a web page: http://cdi.uvm.edu/image/brooks-1136
  3. Sometimes if an image is on a page you can perform a right click and open the image in a new browser tab and that will produce a URL that will work (as above) but other times you will be thwarted. Here is an example that does not work  - note no http or https prefix and no file type suffix such as .jpg: blob:null/2cf00f98-98cf-4237-a336-22def3e42513

 

 

Using a Free Image Hosting Service

One way to workaround this issue is to download images with open rights to your computer and then upload them to a free image hosting service. I found this one to work well:

IMGBB

 

  • You do not need to create an account
  • Simply click on START UPLOADING
  • Drag and drop or open the desired image file
  • Minimize the advertisement and click on the green UPLOAD button
  • When notified that the file has been upload copy the URL to a location where you can access it and or paste into the Media column of your timeline.

imgbb