Embedding Timelines in Exhibit Pages (a how-to)

I just wanted to share the way I embed Timelines in Exhibit Pages, because I figure someone else might want to do the same. (And I couldn't get Exhibit Builder 3.0 to work and let me do it easily.) Note that this depends on not displaying the default Neatline Timeline pages, though you could probably change the iFrame style to work around it.

First, I strip everything off of the timeline page other than the timeline itself. Here's my local CSS (which resides in the css folder of my theme):

header {
display: none;
}

#primary-nav {
display: none;
}

#content h1 {
display: none;
}

body {
	background: none;
}

#admin-bar {
	display: none;
}

#content {
	border: 0px;
}

.navigation {
	display: none;
}

And here's my timeline show.php (which lives in theme/neatline-time/timelines/)

<?php
/**
 * The public show view for Timelines.
 */

queue_timeline_assets();
$head = array('bodyclass' => 'timelines primary',
              'title' => metadata($neatline_time_timeline, 'title')
              );
echo head($head);
?>
<?php queue_css_file('nltime_local');
echo head_css(); ?>
<base target="_blank">
<h1><?php echo metadata($neatline_time_timeline, 'title'); ?></h1>

<!-- Construct the timeline. -->
<?php echo $this->partial('timelines/_timeline.php'); ?>

<?php echo metadata($neatline_time_timeline, 'description'); ?>

I also have a local css file for exhibits, where I pull some sneak CSS tricks to make the iFrame work correctly:

#outeriframe
{
   width:940px;
   height:250px;
   overflow:hidden;
   position:relative;
}

#inneriframe
{
   position:absolute;
   top:-44px;
   left:-170px;
   width:1280px;
   height:1200px;
}

.hidden {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

Finally, to embed this in an exhibit, I add the following code to the exhibit page's main text area (click "HTML" to add code):

<!--Alert screen-readers to the non-screen-reader-friendly content -->
<div class="hidden">The following iframe contains a timeline for items related to the exhibit which have chronological data available.</div> 

<!--Create the iframe -->
<div id="outeriframe"><iframe id="inneriframe" src="YOUR TIMELINE URL" scrolling="no" width="800" height="250"></iframe></div>
<p>View fullscreen timeline.</p>

Note that the styles do have to be included in an external stylesheet. I tried doing inline styles, but the editor ate the code.

You should end up with something like this: https://github.com/sheepeeh/snippets/blob/master/omeka/plugins/neatline-time/timeline-iframe.PNG

All code in this post is also available at:
https://github.com/sheepeeh/snippets/tree/master/omeka/plugins/neatline-time

I'm jumping off topic and latching onto something you just mentioned as an aside, but could you elaborate about the problems you had with Exhibit Builder 3?

We're aiming to get that released in the very near future and any information about problems you encountered would be greatly appreciated. I didn't run into any problems myself with the NeatlineTime integration, but I didn't delve too deeply.

It may have been something I did (or something strange with our database), but the entire plugin was very broken for me. Changing layouts didn't actually change the form, and when I tried to add items, I was taken to a list of items in plain black text on white, with radio buttons that didn't actually do anything.

Hmm, sorry to hear that.

It sounds like maybe a problem arising from old cached versions of the Exhibit Builder admin files. It's possible a refresh and/or clear cache could have resolved the problem. Either that, or some Javascript and CSS was plain missing.

We haven't heard any similar reports, but we'll keep an eye out.

If you can get the new Exhibit Builder and NeatlineTime working, you should be able to do what you're describing very easily, without editing either plugin.

It actually works fine with all the changes living in theme files, though the Exhibit Builder layout would obviously be easier. But it's done, and it works, so I'm happy!