Integrating slideshowpro with galleria using php

The other day a friend of mine, Scott tweeted about getting slideshowpro to work with galleria. As someone who is usually up to a little coding challenge from time to time, and not knowing anything about slideshowpro nor galleria, I challenged myself to get it working with his wordpress setup.

I started researching slideshowpro, and I knew that is used XML based feeds into the flash SWF’s that they use, but what I didn’t immediately know, was that the XML it produced was dynamic. I set off coding some simpleXML stuff in php, based on an XML file Scott had cached on his server. Once I got that working with galleria, I started to tackle the DirectorPHP API.

I knew Scott uses the Thesis theme on his site, which is capable of including php files, outside of the normal wordpress stuff, without resorting to plugins. So once I got my php code working as a standalone page, all he’d I’d have to do is a few tweaks, and then include it in Thesis.

Some pre-requisites:

• A working slideshowpro director environment on your server
• You’ll need to download the slideshowpro “accessory”, the DirectorPHP which requires PHP 5 and cURL module
• Lastly, you’ll need to download the Galleria files
• The ssp2galleria.php file from here

In the root of your website, create a galleria folder. You do not have to use the root folder, but the php code I will describe it based on that. Before uploading the DirectorPHP files, open the classes/directorAPI.php and enter your slideshowpro api-key and api-path in the file.
Put the ssp2galleria.php, which I will explain later, the DirectorPHP classes directory, and the galleria files and directories into that directory.

How it works

Using the slideshowpro DirectorPHP class, the ssp2galleria.php generates the img tags that galleria is looking for. If you pass in the albumID into the page,
e.g. ssp2galleria.php?albumID=4,
it will display that album ID. If you omit the album ID, it will make a list of all “live” and “published” albums, and make a clickable galleria slideshow from that.
If you try to get crafty and pass in bogus album ID, it has a default album ID to fall back on.

*Note – The watermarking feature in slideshowpro’s flash based shows doesn’t translate to galleria. So, if you want watermarks, you’ll have to have them on the source image.

I hope the comments in the code are enough to get you going. Most of the changes you’ll want to make are more in the galleria customization, and the associated galleria css files. If not, leave me a comment, send me a tweet, or email me and I’ll try to help. However, I offer no warranties, nor promises…

And now, the guts of the ssp2galleria.php.

<?php
/* 
When you call the page, to retrieve a specific album use the format:
/ssp2galleria.php?albumID=1    
If you omit the ?albumID, it will retrieve a list of all available albums
*/

#used to create the page title tag
$websitename="Joseph Hoetzl Photography and more...";

#Your slideshowpro director api-key, e.g. 
#$apikey='4343433f334234443423233';
$apikey='';

#Your slideshowpro director api-path, e.g.
#$apipath='www.yoursite.com/ssp-director';
$apipath='';

#Used in case of someone passing in bogus albumID's.  Be sure to enter a valid album ID here!
$defaultAlbumID=1;

# WARNING!!! Be sure to have also entered your API key and path in the DirectorPHP.php file as well as setting it here!
# I haven't investigated this too far, but please be sure to do it for now...
# Include the DirectorAPI class file and create a new instance of the class
include('classes/DirectorPHP.php');
$director = new Director($apikey, $apipath);
# You may want to commnent out this cache line while testing
$director->cache->set('portfolio_cache', '+1 day');

# Gets the albumID from the URL
$albumID = $_GET['albumID'];

# What sizes do we want?

# You may need this depending on what you are doing with galleria
# $director->format->add(array('name' => 'thumb', 'width' => '100', 'height' => '100', 'crop' => 1, 'quality' => 75, 'sharpening' => 1));

# These are the parameters of the image that will be used when galleria is displaying a single album
$director->format->add(array('name' => 'large', 'width' => '900', 'height' => '550', 'crop' => 0, 'quality' => 95, 'sharpening' => 1));

# These are the parameters of the image that will be used when galleria is displaying a all albums
$preview = array('width' => '640','height' => '480', 'crop' => 0, 'quality' => 65, 'sharpening' => 1 );				

# Get a list of all the album ID's
$albums = $director->album->all(array('list_only' => true));

# Just in case you need a count for some further use...
$numAlbums = count($albums);

# Isolate the Album ID's into an array using xpath
$arrAllAlbumIDs = $albums->xpath("album/id");

# Check if the albumID was passed into this code from the url
if (isset($albumID)) {
	    $displaySingle = True;
		$checkArrayKey = array_search($albumID, $arrAllAlbumIDs); 
	    if ($checkArrayKey == null AND $albumID != 2) { /* KLUDGE ALERT!!! The 2 there is because I didn't figure out how to get 0 to not be the same as null, and albumID 2, was in array position 0.  I'm sure there are better ways*/
			#If the albumID isn't available, or it is an excluded one, set the album ID to the default one
			$albumID=$defaultAlbumID; 
		    }
		    #OK, now we know we have a valid albumID. Let's go use it!
    		$album = $director->album->get($albumID);
			# Set the contents variable for shorter access to the album's data
			$contents = $album->contents[0];
		} else {
			# go to get the images for the all albums display
		   $director->format->preview($preview);
		 }
?>

<!-- 
Note - if you are integrating this into wordpress, be very mindful of the code here 
Most of this header information will be in your wordpress template, so you would need to remove it!
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd\">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head><title><?php echo $album->name ?> Portfolio from <?php echo $websitename ?></title>

<!-- Also of note - your wordpress theme may already be loading jquery, so you wouldn't need this, but be sure to check the versioning!!! -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<?php 
# Load the main galleria javascript library
echo '<script src="/galleria/galleria.js"></script>';

# You will most likely want slightly different look and feel between albums and all albums, 
# so, depending if we are showing a single album or not, load up the approprate them
# which in turn, will load the different css
if ($displaySingle) {
	echo '<script src="/galleria/themes/classic/galleria.classic.js"></script>';
} else {
	echo '<script src="/galleria/themes/classic/galleria.portfolio.js"></script>';
}
?>

<!-- Just some basic stuff here for clarity, yes, this would be handled elsewhere -->
<style>
html,body{background:#fff;}
#galleria{width:900px;margin:10px auto}
#gallery_container{background: white; margin: 15px auto; width: 900px; text-align: left;}
</style>
</head>
<body>

<!-- fire off the galleria code -->
<script language="javascript">
$('#galleria').galleria({
	image_crop: false,
	transition: 'fade',
	data_config: function(img) {
		return {
			description: $(img).next('p').html()
	   };
     }
});
</script>

<?php 
if ($displaySingle) {
	#this will display a single album
	echo '<h1>'. $album->name .'</h1>';
	echo '<div id="galleria">';
	#using the DirectorPHP XML elements, loop through them, outputting the url into the src of the img tag
	foreach ($contents as $image): 
	echo '<img src="'.$image->large->url.'"/><br />';
	endforeach;
	echo '</div>';
	echo '<h2><a href="/galleria/ssp2galleria.php">Back to all albums</a></h2>';
	} 
	else 
	{
	#this will display all of the albums
	echo '<h1>All Albums</h1>';
	echo '<div id="galleria">';
	
	#Since I made an array of all albumID's to see if one is valid, just re-use that array.
	foreach ($arrAllAlbumIDs as $albumID): 
		$album = $director->album->get($albumID);
			#if you want to omit any live and published album ID's, enter it here
			#Be aware, that if it is live and published, it is accesible via ?albumID= unless you want to trap that as well
			if ($albumID != 16){
				#using the DirectorPHP XML elements, loop through them, outputting the preview image url into the src of the img tag, and, the albumID as a href
				echo '<a href="ssp2galleria.php?albumID=' . $albumID . '"><img src="'. $album->preview->url . '" alt="" title="'. $album->name . ' Portfolio" /></a>';
			}
	endforeach;
	echo '</div>';
}
?>
</body></html>

And the 4 galleria theme files I used…
galleria.portfolio.js
galleria.portfolio.css
galleria.classic.css
galleria.classic.js

This really only uses some very basic galleria customizations. Galleria is really much more configurable, and using the techniques above, you can pretty much get the DirectorAPI to deliver whatever content you need to supply to galleria. You can find out more about the slideshowpro DirectorPHP class, on their wiki.

I hope this puts you on the path to be flash free, without having to re-do your entire slideshowpro setup, so your content can be displayed on those non-flash playing devices. I know many slideshowpro users are wanting a simple plug and play solution, but unless someone writes a front end to galleria, or some other non-flash based album display, you’ll have to get a bit more hands on with some CSS and minor javascript tweaking.
You might also want to integrate a concept like this into WPTouch, which would fairly easily let you keep your spiffy flash based slideshows for “full” web browsers, while delivering the galleria based slideshow to “mobile” browsers.

Oddly enough, last week, on my commute, I was listening to episode 148 of the This Week in Photography (TWiP) podcast, and Frederick Van Johnson mentioned that he wished there was a non-flash based way of displaying slideshowpro content. Well, here you go…

Simply wondering how I got that “tweet” to display above? Head over to twitter’s blackbird pie…

If you found this information valuable, please consider a donation. I don’t drink expensive coffee…