TimelineJS Getting Started
This article introduces learners to TimelineJS, a free "open-source tool that enables anyone to build visually rich, interactive timelines".
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
Make a copy of the spreadsheet template and rename it accordingly
Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.
Add content to the Google Sheet:
Columns A-D: date of your timeline entry
Columns E-H: identify end date of entry (can be left blank)
Column I: display date can be used so the tool knows where it fits within the context of other events
Columns J and K: comprise headline and body text to display on timeline slides
Columns L-O: add media
L: URL to the desired media
M: credit original source
N: short caption
O: thumbnail of image (can be left blank)
Column P: often left blank but can be used to incorporate specialized features
Column Q: can be used to organize slides in groups (or tags)
Column R: sets background image (by URL) or color to slide
Publish your Google Sheet to the web
Select FIle→ Publish to web...
Ensure "Automatically republish when changes are made" and "Entire Document" are selected
Copy the URL (from the address bar in your browser)
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
TimelineJS projects can be embedded into a WordPress page and/or post using the HTML block type
The Knight Lab TimelineJS plugin is active, network wide, and uses shortcode to embed your project
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"]
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"]