Making a Storymap

Put your embed code between the two ,p.

Go to Choose make a storymap. You can upload jpeg files to the storymap directly, or you can find images on the web and right click to go to “open image in new tab” and copy the URL to paste into the space in storymap. Make sure that you cite the location from which you obtained your photo. It is possible to do a search on the web for non copyrighted images, and there is a place called unsplash that has many. Always give credit to the photographer.

The special feature of storymap is that in the space at the top of the page, on the map, you enter a place. I put Paris, France on the first slide (not the title slide, the next one) because that is where I was born (I left when I was 3 months old, no I do not speak French). Then the next slide is Berkeley, California. Etc. If you have actual street addresses, you can put those in directly. 2229 Marin Avenue, Berkeley, for example.

When you are done, select the “publish” button, and then share. Copy the embed code on the share option (you may have to scroll down to see this).

Now go to your wordpress website. I suggest you make a page rather than a post. New page, then begin writing a sentence. Select the three dots at the top of the bock and convert to html. Paste in your embed code between the two ps. You do not need to know html code to do this, I certainly do not know it.

The reason for making a page is that you can make the page width larger, and that is often a good idea for displaying storymaps properly.

Editing Audio

The highlight of our research together may well be your audio interview with a member of Keene’s community. Consider the following which explains how ABtech got started around 1997:

Bill Abbott speaks in 2019 to Virginia Van Zandt, Puja Thapa and Lindsay Ljungberg.

Pneumo Precision–one of their largest customers was a company called Federal Products in Rhodes Island, and they used Pneumo’s air bearing in their roundness gauge that they sold, mainly domestically; and so Ken [Abbott] knew them, traveled down to see them, designed a lot of special machines for them, and at some point–well, Precitech–Don [Brehm] sold the company to Taylor Hobson in England, and that was another company that made air bearings, and was a competitor of Federal Products, so Federal Products needed a source of air bearings, they did not want to continue to buy them from a competitor. and so one of the fellows that he got to know through the engineering department, called up Ken and said basically, “What would it take for you to make air bearings and sell them to us?”

Bill Abbott, retired comptroller from Pneumo Precision and father of Ken Abbott, 2019.
Bill Abbott 2019 explains how Federal Products pushed Ken Abbott to start his company in 1997. Interview by Virginia Van Zandt, Lindsay Ljungbert, and Puja Thapa.

Download the program audacity ( which we will use to make selections for you to upload into your site. It is a good idea to make the selection only 30 seconds long, as readers have trouble focussing for longer. It is also a good idea to type out what is being said right underneath the audio, so that the reader can look visually at the words while they listen. Here is an audio snippet from an interview with Bill Abbott (father of Ken Abbott) made last year by Virginia Van Zandt, Puja Thapa, and Lindsay Ljungerg:

The on-line manual for audacity is available, here is the section on selecting and exporting audio:

When you are listening, the time will flash on the screen. I make a selection by figuring out the start time and end time of my selection. You can type [ to enter the start time and ] to enter the end time, and then push space bar to listen.

It took me about an hour to select my audio, and to get my start and end times just exactly right. I found the transcript quite useful in locating what I wanted to select, and in helping me gauge where the selection was in the audio file (my selection was on page 9 of a 15 page transcript–hence i figured it would be just past half the audio file, and that helped me locate it).

Putting up a timeline

Step 1. Go to 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.