Embedding a SIMILE Timeline in Wordpress
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:
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.]
This is amazing and just what I was looking for! I was playing with the WP Simile Timeline plugin but as you mention it won't list arbitrary dates (not connected with posts). I have implemented your approach here: http://www.japanmattersforamerica.org/chapters/timeline/. So far it is just the Monet example but I am working quickly to get this to my needs. Thanks again!
Thanks for posting this I too was looking to do this and not having much experience of HTML/PHP/Javascript this saved me a lot of time an effort. I'm personally trying to create a timeline to record events in my new born daughters life, with links to pictures, video and posts. Thought this would be a nice thing for her to have in the future. Thanks again, really appreciate this, and I'm sure she would too, some day!!
Exactly what I was looking for - thanks Peter for solving and posting the solution to a growing headache. Seeing you're a librarian, if you're interested in looking at a bibliography->timeline approach, here's the link: http://www.jkwchui.com/synthetic-ion-channel-bibliography/
I'm just trying to build a timeline of my favorite TV series into my Wordpress blog. It's been a pain in the ... but I was proceeding well today and got it up running outside Wordpress. Now I followed those instructions and embedded the following
<script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true?" type="text/javascript"></script> <script src="wp-content/uploads/2011/06/serientagebuch.js" type="text/javascript"></script>in the head injection. Then I puit the following<div id="my-timeline" style="height: 800px; border: 1px solid #aaa"></div> <noscript> This page uses Javascript to show you a Timeline. Please enable Javascript in your browser to see the full page. Thank you. </noscript>in the article itself - The DIV is rendered as I can see the thin line around it. The code of the local .js reads as followsvar tl; function onLoad() { var eventSource = new Timeline.DefaultEventSource(); var bandInfos = [ Timeline.createBandInfo({ eventSource: eventSource, date: "Apr 1 1975 00:00:00 GMT", width: "80%", intervalUnit: Timeline.DateTime.YEAR, intervalPixels: 100 }), Timeline.createBandInfo({ overview: true, eventSource: eventSource, date: "Apr 1 1975 00:00:00 GMT", width: "20%", intervalUnit: Timeline.DateTime.DECADE, intervalPixels: 200 }) ]; bandInfos[1].syncWith = 0; bandInfos[1].highlight = true; tl = Timeline.create(document.getElementById("my-timeline"), bandInfos); Timeline.loadXML("events.xml", function(xml, url) { eventSource.loadXML(xml, url); }); } var resizeTimerID = null; function onResize() { if (resizeTimerID == null) { resizeTimerID = window.setTimeout(function() { resizeTimerID = null; tl.layout(); }, 500); } }; tl.loadXML("wp-content/uploads/2011/06/serientagebuch.xml", function(xml, url) { eventSource.loadXML(xml, url); }); window.onload = onLoad; window.onresize = onResize;The xml file is fine and runs smoothly with the html file where I put all the javascript in one file as you can see here: http://www.wwwchrisde.de/test/zeit.html Any advice on how I can make it work would be great. Chrisokay, got it - after posting it here I saw it within a second. The wrong calling of the xml file was to blame. I have fixed it and it works when I preview the post but upon publishing it doesn't work anymore - I just see the empty div tag. Any idea what can fix this?
All I can suggest to make sure all your paths are correct. I've just noticed that the relative paths I'd used to get to wp-content (as in the screenshot) had been messed up when I changed the url structure of the site a couple of months ago.
[...] that we just created, and the Simile Timeline libraries in the <head> element. Thanks to Peter Binkley, I learned that you can install the HiFi plugin, which lets you inject code into the <head> [...]