Embed a Dipity timeline in your Omeka Exhibit

Dipity is a tool that allows you to make timelines and maps that you can embed in your exhibits.

  • Create an account at http://dipity.com
  • Create and save your timeline
  • Select "embed" (the link appears on top of the timeline on the right)
  • You can choose between a timeline, flipbook, list, or map view
  • You can choose size
  • You can choose background and text colors and appearance.

Copy the embed code from white text box you chose. It should look like this (perhaps not with line breaks):

<div class="dipity_embed" style="width:600px">
<iframe width="600" height="400" src="http://www.dipity.com/CathyHajo/Birth-Control-Clinics-in-New-York-City/?mode=embed&z=0&bgcolor=%23000000&bgimg=/images/black_grad_up.png#tl" style="border:1px solid #CCC;">
</iframe><p style="margin:0;font-family:Arial,sans;font-size:13px;text-align:center">
<a href="http://www.dipity.com/CathyHajo/Birth-Control-Clinics-in-New-York-City/">Birth Control Clinics in New York City</a> on <a href="http://www.dipity.com/" />Dipity</a>.</p></div>

Note that your code will have a different URL (pointing to your own timeline).

  • Open Omeka and edit or add the exhibit page where you want the timeline to appear.
  • Select the HTML editing tab, which opens a blank white box.
  • Paste your code in place.

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 Dipity:

<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 Dipity:

<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.

Here is an exhibit page with a sample Dipity timeline: http://aphdigital.org/GVH/exhibits/show/elementairesample/earlyyears/dipity

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