Embedding a SIMILE Timeline in WordPress « Quædam cuiusdam
Embedding a SIMILE Timeline in WordPress
Sunday 28 March 2010 @ 12:26 pm

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.





Warning: Creating default object from empty value in /home/wandb/wallandbinkley.com/production/quaedam/wp-includes/comment-template.php on line 1015

 6 responses to “Embedding a SIMILE Timeline in WordPress”

  •   Aaron wrote:

    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!

  •   Scott wrote:

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

  •   Jon wrote:

    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/

  •   chris wrote:

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

    Chris

  •   chris wrote:

    okay, 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?

  •   Peter Binkley wrote:

    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.

Leave a comment