I wanted to embed a SIMILE Timeline into a Wordpress posting, and it took longer than I expected to find a convenient way to do this without editing templates and such. There’s a nice plugin that does timelines for postings (WP SIMILE Timeline), but it doesn’t work for arbitrary timelines unconnected with the content of the blog itself. So, here’s a summary of a quick solution.

The requirement is to add some extra Javascript to a single posting (not for every posting, since that’s a fair amount of script to download needlessly), and to add onLoad and onResize handlers to the body tag. The easy solution: install the HiFi plugin, which does “Head & Foot Injection”. It allows you to specify some links you want to in the HTML head section, or at the end of the body section. It gives you a menu like this:

HiFi Screenshot

Those links will end up in the head for this posting.

The links are to the Timeline library, a local js file containing the configuration for the timeline we’re posting, and maybe a link to the css for that timeline. The local Javascript contains a call to a local XML file containing the events we ant to plot:

tl.loadXML("wp-content/2010/03/timeline-monet.xml", function(xml, url) { eventSource.loadXML(xml, url); });

For convenience, I uploaded the js and xml as media files in the Wordpress dashboard; but it threw an error when it tried to save the xml, so I uploaded that manually. I use the year/month directory structure for my uploads (Settings / Miscellaneous / “Organize my uploads into month- and year-based folders”), so the uploaded timeline files end up in wp-content/2010/03.

The local Javascript contains functions onLoad and onResize, as in the Timeline examples. To get those to fire at the appropriate times, the Javascript ends by attaching them to the window’s onload and onresize events:

window.onload = onLoad; window.onresize = onResize;

Adding those two lines was the only change I had to make to the SIMILE sample code.

Finally, the posting itself needs a div with the appropriate id:

<div id="tl" style="height: 300px;"></div>

And that’s it. Here’s a demo, using the “Life of Monet” example from the SIMILE Timeline site.

[Demo removed after migrating this blog to Jekyll, 2017.]