Home > web design > Integrating slideshowpro with galleria using php

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.

Does anyone know if there is a way to make Galleria (JQuery) work off of a SlideShowPro XML file?less than a minute ago via Tweetie

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.

When you call the page, to retrieve a specific album use the format:
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. 

#Your slideshowpro director api-path, e.g.

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

# 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
$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
		    #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

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>

# 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 -->
#galleria{width:900px;margin:10px auto}
#gallery_container{background: white; margin: 15px auto; width: 900px; text-align: left;}

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

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 />';
	echo '</div>';
	echo '<h2><a href="/galleria/ssp2galleria.php">Back to all albums</a></h2>';
	#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>';
	echo '</div>';

And the 4 galleria theme files I used…

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…

Similar Posts:

  • Pingback: JQuery your SlideShowPro. Yup, no more flash! — Scott Wyden Imagery()

  • Koala Kid

    Hi, thanks for the post. I got your code working with my cakePHP website with a little modification but then I noticed that there is a SSP plugin (http://github.com/aino/galleria/blob/master/doc…) for Galleria. It expects an XML file.

    Is there a way to grab an outputted XML file from Director using cURL? I've tried but I can't seem to generate an output. Here's the code I am using:

    $xml_feed_url = 'file.xml';
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $xml_feed_url);
    curl_setopt($ch, CURLOPT_HEADER, false);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $xml = curl_exec($ch);
    echo “xml = $xml”;

  • Sorry for the long wait on the reply – while the code above could be modified to loop through and create XML, you might be better off having a look at these:


    Have a look and let me know if that gets you anywhere. The original problem I had in using the XML input to Galleria was that is isn't very customizable without walking the xml document and parsing what you what. Using the php and html output, and formatting it with the CSS provided much simpler customization for what I needed to achieve.

  • Pingback: links for 2010-08-31 | bri-design studios()

  • guest

    Any demos of this code in use available anywhere?

  • Yes, Scott’s web site, http://scottwyden.com/ is running it. The “Portfolio” link in his menu runs it currently.
    He is also beta testing SSP Director’s new mobile version (if you access it from a smartphone or iPad).

    Based on the research I did when i wrote this, I would say there are probably a number of other sites that use it in some variation. If I hear back from any more, I’ll post an update.

  • Thanks Joseph. I (= PHP illiterate) was looking for some tutorial how to do it.

  • Karim

    Looks like Galleria has a plugin to fetch SSP xml galleries.
    Look at this : https://github.com/aino/galleria/blob/4aa7acba02ec34cc028960dff9807d85ba6c655f/docs/plugins/slideshowpro.rst
    Unfortunately I could not get it to work, but my skills in coding are close to non so…
    If someone could look into this it would be very helpful.

  • Eaglefunk98

    Any new examples of this? Have people moved on to other solutions? 

    I can’t seem to get the Galleria to load correctly the sspgalleria.php is communicating and getting files from director just not generating the viewer.

  • Shawn Beelman

    No one else pointed this out, so I thought I would… Line 9 is missing a semicolon. Took me a while to find that!

  • Sorry about that and thanks for pointing that out.  The original post has been updated!

  • David

    hi i’m trying to get this up and running on a non wordpress site, i’m sure this is a very basic question but how do i call/include the php from my html file/dreamweaver? 

  • As far as I know, unless you use an iframe, you can’t.  You can however, make a php file that resembles your HTML.  For a start, change your HTML page to a .php page.  It should still work exactly how it does today.  From there, weave the actual php code into the HTML.

  • PhotoSensate

    Wonderful starter. I also recommend using cache:
    $director->cache->set(‘cache’.$albumID,’+10 day’);
    In this case, I pull $albumID from a tag in a WP page to keep the cache separate for each page (From the support page: “Instructs the DirectorPHP class to cache this request. The required key parameter is a unique string to cache the response with, and should be different for each page you set up. The expires
    parameter is optional and defaults to ‘+1 hour’, meaning the cache will
    expire in one hour. Other examples include ‘+5 minutes’, ‘+1 day’, etc.”). My content per album doesn’t change a lot so the longer “+10 day” parameter is better for me, but note the default is 1 hour. Check out photosensate.com to see images pulled from SSP Director into the Galleria Azur theme.