Embed a Timetoast timeline in your Omeka exhibit
223523-166-timetoast.jpg

Timetoast is a free tool for building timelines.

  • First, create your timeline at http://www.timetoast.com.
  • Once you have completed your timeline, look for the "embed/share" link just below the timeline and click on that link. You have two options here:
    1. You can copy the default HTML code, which will create a 550x400 timeline with a white background.
    2. You can edit the code by filling in a new width/height and selecting a color.
  • Choose the second option, and enter a width of 850. Select the "generate code" button.
  • Copy the HTML code that you generate.
  • Go to your Omeka exhibit, and create or edit the page where you want the timeline to appear.
  • Edit the page and use the "HTML" editing window to open a blank white screen.
  • Paste the code you generated into the window. It will look like this (perhaps without line breaks, but that doesn't matter):
<object width="850" height="400">
<param name="movie" value="http://www.timetoast.com/flash/TimelineViewer.swf?passedTimelines=61558" />
<param name="passedTimelines" value="61558" />
<param name="allowScriptAccess" value="always">
<embed src="http://www.timetoast.com/flash/TimelineViewer.swf?passedTimelines=61558" type="application/x-shockwave-flash" passedTimelines="61558" width="850" height="400" allowScriptAccess="always" /></object>

Note that your code will be slightly different (the number 61558 on the example refers to the specific timeline. Yours will have a different number.)

We need to edit this code slightly so that it works in Omeka. Replace the word "embed" with "iframe." Your code line should look list this:

<iframe src="http://www.timetoast.com/flash/TimelineViewer.swf?passedTimelines=61558" type="application/x-shockwave-flash" passedTimelines="61558" width="850" height="400" allowScriptAccess="always" />

Save your page. In the editing window, you should see the embedded timeline.
Tip: Open two tabbed versions of your exhibit when you are editing it. The admin version will be where you edit, the other version where you check your work. Once you save a change in the admin view, then refresh the regular view to see the changes. This will keep you from having to go back and forth between views.

+++If you want to include other text on the page:

For a header, add this code before the code you pasted from Timetoast:

<h1>insert header</h1>

You can use <h2> through <h5> for smaller headings, just follow the same text.

For text following the timeline, add this code after the code you pasted from Timetoast:

<p>Add your text here</p>

Once you have saved these codes, you can save the code and leave the HTML editing screen. You can edit the text in the default editor.

For an example of a Timetoast timeline in an Omeka exhibit page see: http://gvh.aphdigital.org/exhibits/show/elementairesample/earlyyears/timeline

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License