Jefferson's Newspaper

Following on my previous entry on adding an image Lightbox to Omeka, today I’ll run through the steps it takes to get a featured image gallery running on your Omeka homepage. I searched for awhile to find a gallery plugin that a.) looks good, b.) works well and c.) is not too complicated for me to figure out. Fitting the bill nicely, I found GalleryView, a fairly lightweight jQuery plugin with lots of options for your tweaking enjoyment. It’s a bit more challenging to implement than Lightbox and requires a fair amount of CSS knowledge to prettify, but this should help you get started.

Step One: Download and Install GalleryView (and edit the GalleryView CSS)

Download the GalleryView package and place it in your theme’s /common/ directory. Be sure that you have placed the whole shebang directly inside the /common/ directory and renamed the outer folder galleryview (if you use the default galleryview-2.1.1 name, you’ll need to adjust the scripts below to match). Go into your theme to common/galleryview/galleryview.css and edit the first id, changing it from #photos to #featured-gallery (or something else if you prefer, see below for details).

Step Two: Edit your Header (Scripts and Configurations)

The code below will work as is if you are using the popular Berlin theme, but if not simply replace the word berlin below with the name of your Omeka theme. Be sure the paths below match with where you actually placed your files in the previous step.

*** To save hours of confusion, watch out for typos and try using your browser’s “view source” feature to ensure that your links are reaching their destination.

<link rel="stylesheet" href="<?php echo WEB_ROOT;?>/themes/berlin/common/galleryview/galleryview.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<?php echo WEB_ROOT;?>/themes/berlin/common/galleryview/jquery.galleryview-2.1.1-pack.js"></script>
<script type="text/javascript" src="<?php echo WEB_ROOT;?>/themes/berlin/common/galleryview/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="<?php echo WEB_ROOT;?>/themes/berlin/common/galleryview/jquery.easing.1.3.js"></script>
<script type="text/javascript">
		jQuery.noConflict();  
		jQuery(document).ready(function(){
		jQuery('#featured-gallery').galleryView({
			panel_width: 425,
			panel_height:430,
			filmstrip_position:'bottom',
			show_captions: true,
			pause_on_hover:true,
			transition_interval:5000,
			nav_theme:'light'
		});
	});
</script>

That final, multi-line script above initializes GalleryView and contains your configurations. You can change them however you like according to the GalleryView documentation, but here I’m setting the dimensions, timing, theme, etc. There are a couple other things worth highlighting here if you are not familiar with JavaScript. First of all, the string containing #featured-gallery is setting up the gallery to run automatically on images displayed in the html div with the id of “featured-gallery” – you can change this to whatever you like, but remember that it needs to match the outer div on your index page in the next step. Also worth noting, the script generally runs on a generic placeholder function called $, but in order to get around the conflict with the Prototype library (which also uses $ as a generic placeholder), I’ve included the jQuery.noConflict() line and replaced $ with jQuery.

Step Three: Edit your Index Page (Looping Items and Calling GalleryView)

The code below uses a custom loop to retrieve the images. As noted, the outer div uses the id “featured-gallery”, as well as a required class, “galleryview” — #featured-gallery is the only id or class that you can change below!

	<h2>Featured Items</h2>
	<div id="featured-gallery" class="galleryview">
	<ul id="gallery">
		< ?php 
		//this loops the 5 most recent featured items
		$items = get_items(array('featured'=>true, 'recent'=>true), 5);
		set_items_for_loop($items);
		while(loop_items()):
		?>
			< ?php $index = 0; ?>
			< ?php while ($file = loop_files_for_item()): ?>
			    < ?php if ($file->hasThumbnail()): ?>
			    <!-- this makes sure the loop grabs only the first image for the item -->
			        < ?php if ($index == 0): ?>
		    	       < ?php echo /*Image URL*/'<li><img src="'.item_file('square thumbnail uri').'"/>'; ?>
		    	    < ?php endif; ?>
			    < ?php endif; ?>
			< ?php endwhile;?>
			< ?php
			echo '<div class="panel-overlay">';
			echo /*Item Title*/'<h3>'.item('Dublin Core', 'Title').'</h3>';
			echo /*Item Description Excerpt*/'<p>'.item('Dublin Core', 'Description',array('snippet'=>175));
			echo /*Link to Item*/ link_to_item(' ...more ').'</p></ul></div>';
			?>
			< ?php endwhile; ?>

I’ve added some comments inline with the code above to describe what it’s doing, so if they make sense to you, you can probably figure out any changes you might need (for example, looping more or fewer images meeting whatever Omeka-friendly criteria you like).

*** I’m using square thumbnails in my loop because they’re easy, but you may need to adjust the max thumbnail size in your Omeka settings to avoid blurry images.

Step Four: Season to Taste

Though the example above works pretty nicely “out of the box” in a two column homepage theme, the GalleryView documentation contains a list of configuration options, so you will probably want to fool around with those, as well as your CSS, to integrate GalleryView properly into your theme’s overall aesthetic. You might also want to customize the loop in Omeka (personally, I’m not a huge fan of the one used above, but haven’t figured out a better one just yet).

Hope this has helped a few folks out there who, like me, are working near the edges of their skill set. As always, feel free to share your comments, questions, suggestions, critiques, etc. I’ll try to keep this updated as needed.

By the way, I’m planning to release a new Omeka theme that incorporates both Lightbox and GalleryView, as well as some other fun stuff, so stay tuned.