Tuesday, 7 August 2012

Create a one page online exhibition with Omeka data...

The University of Otago Library has been doing online exhibitions for about ten years now. During that time a lot of trends have come and gone (Flash has gone thank goodness!). The latest trend (as we see it, or actually, as I see it!) is the one page online exhibition. This is due in large part to the fantastic-ness of Jquery...

We recently installed Omeka and were keen to use it as the container for a large number of our images.  We were also keen to keep with the ethos of 'enter once, use multiple times and let others use it too...'

I did have a look at the Exhibition component of Omeka, but this did not suit the purpose I had in mind - a really 'lite' exhibition site that could be easily viewed across all platforms - mobile and desktop.

To start with, images taken for the last online exhibition were entered directly into Omeka and wrapped into a 'Collection'.

What we then wanted to do was hook into that Collection and display the relevant details on a separate page - a 'skin' so to speak.

So, below is the 'recipe' for using Omeka-Json data and PHP to display fields on another page (or site):

Step 1. Use Omeka 'Item Order' (plugin) via Collections to order the images. If you want them in a particular order that is! We did as we also used navigation.

Step 2. Grab the Json file from Omeka and decode it:

require '../../jsonwrapper/jsonwrapper.php'; //you'll need this if you are using a server less that has anything less than PHP5 - we found this to be a 'gotcha' when developing on one server but hosting on another!

$json = file_get_contents("http://yoursite/collections/show/41/?output=omeka-json");
$data = json_decode($json, true);

The '41' is the id for the Collection, btw.

Step 3. Find the items within the data to display images and all their parts. This bit was REALLY labour intensive. Basically, what I had to do was count where an array fell in the Omeka-Json output. To get the initial output in order to do this we did a var-dump (ie. var_dump($item); die();).

$i = 0;
foreach ($data[5] as $item){
if ($item[0]=='item')
$src = $item[2][1][2][1]; //find image link
$srcthumb = explode("fullsize", $src); //find Fullsize and replace with 'thumbnails' - echo it out a thumbnail
$Title = $item[3][1][4][1][4][1][2][1]; //find item title
$Date = $item[3][1][4][5][4][1][2][1]; //find publication date
$Abstract = $item[3][1][4][2][4][1][2][1]; //find abstract
$Creator = $item[3][1][4][3][4][1][2][1]; //find author/creator
$Publisher = $item[3][1][4][4][4][1][2][1]; //find publisher

Step 4. Echo it all out (we used lightbox/slimbox too):

Eg. echo '<div class="thumbnail-img"><a href="' . $src . '" rel="lightbox[gallery]" title="<h3>' . $Title . '</h3> <p> ' . $Abstract . ' </p><p>' . '<i>' . $Title . '</i>, ' . $Creator . ', ' . $Publisher . ', ' . $Date . '.</p>"><img class="lazy" src="grey.gif" data-original="' . $srcthumb[0] . 'thumbnails' . $srcthumb[1] . '"/></a></div>';

Step 5. Debug and add your own customisations :)

Here is a real example of what we achieved: http://www.library.otago.ac.nz/exhibitions/charting-the-land-on-the-ocean/index.php

One issue that still remains unresolved is displaying all the images/thumbnails that are associated with an item record - at present, the Omeka-Json only outputs one image, not all available images.


No comments:

Post a Comment