Putting up a timeline

Step 1. Go to https://timeline.knightlab.com/ where you can use Knight Lab’s timeline JS.”   

Step 2. Click on “Make a Timeline.”  Get the spreadsheet template, make a copy, and rename it.  It’s important to put the new name. 

Step 3. Leave row one of this template spreadsheet alone. Go to Row 2, to the cell that says ‘text,’ and type a title for your timeline.  Such as “My daughter Anita is about to graduate from 8th grade.” 

Step 4. In the next row, I add her birthdate 2006 09 26. If you only have a year, leave the month and date blank. I do not have an end date, so I clear those slots.  The big issue is the image.  I go to drop box, hover over a picture, and look to the right bar. Click share,  click “get a link,” then “copy link” which is now on my clipboard. I think paste that link into the part of the spreadsheet that originally said flickr. I also provide an attribution: Photo by Marie Duggan. And a caption: Anita Julca. 

Step 5. Another way to add a photo. Anita is now in 8th grade at Keene Middle School. I search for an image of the mascot of the Keene cardinals. I find one, I right click on that image and select “open image in new tab.” I then go to that new tab, copy that URL and paste it into the media column of the spreadsheet template.  Note: the URL for the image has to end with .png or .jpg. If you get an image url that is very long and doesn’t work, then find a different image and try again. Be sure to credit the site where you got the image, and send them an email asking permission to use the photo if you can find a contact. 

Step 6. Under “file,” select “publish to the web,” click “publish,” and say “ok.” Now a link will appear, but be careful! Don’t use that link! Instead, close the popup box and select the URL at the top of your google spreadsheet. Gopy that link into Step 3 of the original TimelineJS website (see the first bit), then go to 4 and hit preview.  Did your timeline come out? Well, there are often some bugs to work out.  Retrace your steps to work out the bugs.  WAIT: AFTER PUBLISH TO THE WEB, LOOK DOWN AND SEE IF “NONE” APPEARS BELOW IN THE BOX. IF SO, USE THE DROPDOWN ARROW TO CHANGE TO OD1. NOW PROCEED AS ABOVE.

Step 7. Go into your wordpress site, to the page you wish to use. Open a block. Select “classic” as the format of the block. Go to the three vertical dots, and select “edit as html.” Now copy and paste the embed code from Step 4 of the Timeline js website. Go to Update, and visit the page, you should see your timeline.


I’m adding a block.

Author: Marie Christine Duggan

Marie Christine Duggan has taught at Keene State College since 2000. She thinks students and ideas are the best part of teaching. She wonders how humans modify the way markets work by the institutions we create.

Leave a Reply

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