...

...

...

Before You Start

• Consider creating a Google Drive folder for your TimelineJS project

• Gather your rich media content (e.g., videos, pictures, etc) and save to your Google Drive

• Draft your narrative in a Google Doc to ensure you have a copy of your work outside of TimelineJS

  • It's easier, and more familiar, to write narrative in a Doc than a spreadsheet, for example

  • You'll be able to copy/paste your narrative into the Google Spreadsheet you'll use to create the timeline

• Familiarize yourself with the frequently asked questions (and answers) for creating with this tool

Steps

1. Make a copy of the spreadsheet template and rename it accordingly

   1. Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.

2. Add content to the Google Sheet:

   1. Columns A-D: date of your timeline entry

   2. Columns E-H: identify end date of entry (can be left blank)

   3. Column I: display date can be used so the tool knows where it fits within the context of other events

   4. Columns J and K: comprise headline and body text to display on timeline slides

   5. Columns L-O: add media

      1. L: URL to the desired media

      2. M: credit original source

      3. N: short caption

      4. O: thumbnail of image (can be left blank)

   6. Column P: often left blank but can be used to incorporate specialized features

   7. Column Q: can be used to organize slides in groups (or tags)

   8. Column R: sets background image (by URL) or color to slide

3. Publish your Google Sheet to the web

   1. Select FIle→ Publish to web...

      1. Ensure "Automatically republish when changes are made" and "Entire Document" are selected

4. Copy the URL (from the address bar in your browser)

5. Open TimelineJS and paste your link into the "Google Spreadsheet URL" field and follow their directions, immediately below the field into which you pasted a URL in the previous step, to Share your timeline 

   1. TimelineJS projects can be embedded into a WordPress page and/or post using the HTML block type

   2. The Knight Lab TimelineJS plugin is active, network wide, and uses shortcode to embed your project

   3. Use the shortcode below and replace "Your source url here" with the URL of your Google Sheet. Be sure to paste the Google Sheet URL inside the quotation marks:
      [timeline version="timeline3" src="Your source url here"]

   4. You can explore various size configurations by adding the height and width variables to your shortcode:
      [timeline width="800" height="600" version="timeline3" src="Your source url here"]

...

Watch this quick (less than 3 minutes) video on how to use TimelineJS:

Notes

...

Related articles

...

...