JTools: Timelines

As of January, 2017, this J Tools unit is not being updated. 

TimelineJS  is recommended as a quick way to create timelines.  You use a Google docs template to fill in your headline, text and media. Then you paste that spreadsheet URL into TimelineJS and get embed code that you place on your web page.

Note that photos have to be placed on a server with a URL, so you can do that on NCC News Online or other photo sharing services that offer a URL.  See this sample timeline that accompanies a story about the Hotel Syracuse.

Here’s a much more sophisticated timeline, on power plants, coordinated by the New York Times and The History Project.

7 quick steps to a timeline

for a handout of the steps below and illustrations, click here.

1.        Organize your material and write your copy. Write your headlines, text and photo captions for each section of the timeline.

2.        Upload your photos so each has a unique URL.  Load it as you would any photo on NCCNewsOnline.  Copy down the URL at the far right (not in the address bar) .

3.       Go to TimelineJS:  timeline.verite.co  Scroll down through samples and see the how-to.

 4.      Use Google Docs to fill in a spreadsheet template

5. Generate the code by going back to TImelineJS and scroll (may be up)  for embed code section

  • Put Google URL (4e above)  in place designated (left). It will generate embed code (right). Copy that code.

6. Embed the code. Go to NCCNews Online posting site: nccnewsonline.net

  • Open a new post and type introduction or text needed to go with the timeline.
  • Go to the text tab  (far right tab) to get to the coding
  •  Find location in the code where you want timeline to appear.
  • Cut/paste embed code from 5a above.
  • Publish the story
  • Check how it looks at NCCNewsOnline. Revise and republish, as needed.

To see the slides that accompany this unit, click here.



Leave a Reply

Your email address will not be published. Required fields are marked *