Document big projects and enhance online presentations with free, interactive TimelineJS
Big projects almost always have a historical angle. Heck, often it's the history that is the angle. Document these projects online, and the presentation screams for an interactive element.
The obvious choice: A timeline!
There are several free timeline builder tools available, and one of the most elegantly designed and easiest to use is Knight Lab’s TimelineJS. Talk about fun. We recently took TimelineJS for a test drive and, despite finding a few bugs, had a blast putting together our test project.
Sport Ngin is preparing for a late-June move to new headquarters. Since October we’ve been documenting the progress at our soon-to-be new digs just down the street at 807 Broadway. Much of the content for our timeline came from the Construction Blog showing the progress of the massive renovation project at the Highlight Center.
Before getting into the tutorial, a couple comments about using TimelineJS. While photos and text were simple to load, we couldn’t get a Google map to render properly. Twitter posts also failed to load, which apparently is a known bug. Our workaround was to take screen shots of those elements – not ideal. We didn’t attempt to load a video element, so no report on whether that works as advertised.
Despite the Twitter and Google maps issues, we highly recommend the open-source tool for tracking or enhancing your big project.
If you don't already have one, create a Google account (you will see why in minute).
Click the "Google Spreadsheet Template" button (see image below).
Don't freak out! Just click the "Use this template button" to download it into your Google sheets folder.
If you want to rename the template you just opened, click the File button in the top left and then choose the Rename option.
Start replacing the text and links in the various columns. Be careful here. The TimelineJS site warns with this note: Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.
To add media elements, such as photos, simply drop in the URL of whatever you want to add to the timeline (see image below).
To get the URL of a photo, just right click on the photo (we're using Chrome as our browser) and select the Copy Image URL option (see image below). Then just paste the URL into the appropriate media column on the template.
Note: The photo has to exist somewhere online for you to grab the URL, so we'll often load random photos to a disabled page and then grab the URLs from there. TimelineJS offers this advice: ... photos must be publicly available online and the URL must end in .jpg, .png, or .gif. Some users have found that uploading images to Dropbox is an easy and convenient way to give them a URL that’s compatible with TimelineJS.
When you are ready to publish, click the File button in the upper left corner of the spreadsheet, then choose the "Publish to the web" option.
Make sure the "Automatically republish when changes are made" box is checked, then click the "Start publishing" button (see image below).
Once you have started publishing you can now copy the URL (see image below).
Now that you have the spreadsheet URL, go back to the TimelineJS homepage and paste it into the handy code generator (see image below).
You can now copy your HTML code from the code generator (see image below).
Choose the Code option from the Add New Page Element options (see image below).
Paste the code and click the Create This Page Element button. Note: You will likely see an error message in red after creating the element. Simply check the Override Code Error box and click the Create This Page Element button again.