Skip to main content

Building an Omeka Exhibit at the Fisher Fine Arts Library: JuxtaposeJS and TimelineJS

A guide for using Omeka and Neatline in the humanities

Using a JuxtaposeJS image

If you want to add a fun image comparison tool with a movable slider, try using JuxtaposeJS. Examples of this can be found on the site I created, Explore Fisher.

1. Juxtapose uses iframes to add dynamic images, so you will first need to create a simple page in Omeka (using the Simple Pages plugin) to house the iframe image.

2. You will also need to allow Omeka to use iframe elements: in security settings, add "iframe" to allowed HTML elements, and uncheck the HTML filtering box.

3. Juxtapose uses images that you upload from Dropbox to the Juxtapose site, or that you link to from the web. I found the latter to be the easier option.

To link to an image from your Omeka site, you will need to find the image's url:

  • Select the item you want and go to the item record in Omeka. (Make sure the item status is set to "Public:Yes.")
  • Click on the thumbnail image at the top of the record. This takes you to a record for the file itself.
  • On the right, under "Direct Links," click on "Fullsize."
  • Copy the url and paste it into the Juxtapose generator.
  • Do the same for the second image.

4. In Juxtapose, add labels and credits, and preview the image. When it's ready, click "Publish." This provides a web link and an embed code. Copy the entire embed code.

5. Back in Omeka, go to the edit page for the simple page you created. Click on "HTML editor" in the box on the bottom, and paste the iframe embed code you copied from the Juxtapose page. (I also added a <p> element around it. Here's why: I did the other steps first, but the only thing that showed up on the public page was an empty box. When I viewed the html editor, I saw the iframe within a <p> element, with a basic empty box structure. So I tried adding the <p> tags, and it displayed properly on the public page.)

6. You will need to adjust the iframe dimensions to make sure it displays on the whole page and adjusts size.

In Omeka support forum, I found this post helpful:: https://forum.omeka.org/t/adding-iframe-to-simple-pages/855

And if you'd like to customize your Juxtapose further using javascript, Knightlab offers help: https://timeline.knightlab.com/docs/instantiate-a-timeline.html

 

Using TimelineJS to Create a Timeline

If you want to add a simple and dynamic timeline to your site, try using TimelineJS. (An example can be found on Explore Fisher.) Timeline works by using a Google sheet to input image links and data and then converting them into an iframe image. A template sheet is provided for you, or you can create your own so you can customize the timeline further.

​Tips for using Timeline in Omeka:

  • You will need to create a simple page to house your Timeline iframe, similar to what you might use for Juxtapose. See instructions under "Using a JuxtaposeJS Image." 
  • You will also need to find the urls for multiple images to use in your timeline. You can follow the same steps as you used for Juxtapose.