Timeline Archive View For WordPress
As I promised, here’s a how-to for adding the Simile Timeline widget to your wordpress blog:
First you need to save a copy of this file: timeline-xml.php to your wordpress root directory.
Next edit your wordpress header template and make it look like the following:
At the end of the HEAD element:
... <script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script> </head>
And the top of the BODY element:
<body onload="onLoad();" onresize="onResize();">
<div id="my-timeline"
style="height: 150px; border: 1px solid #aaa; font-size:9pt;">
</div>
<script language="JavaScript">
var tl;
function onLoad() {
var today = new Date();
var eventSource = new Timeline.DefaultEventSource();
var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource,
date: today.toUTCString(),
width: "70%",
trackGap: 0.0,
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 100
}),
Timeline.createBandInfo({
showEventText: false,
trackHeight: 0.5,
trackGap: 0.2,
eventSource: eventSource,
date: today.toUTCString(),
width: "30%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 200
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
var tl = Timeline.create(
document.getElementById("my-timeline"),
bandInfos);
Timeline.loadXML("{your-wp-root}/timeline-xml.php?" +
Math.random(), function(xml, url) {
eventSource.loadXML(xml, url);
});
}
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
</script>
<div id="wrapper">
...
Where your-wp-root is the URL to the root of your wordpress installation.
Let me know if this does/doesn’t work for you or if you have suggestions to improve it.