EricMillerDesign

How to Integrate SlideShowPro Photo Galleries with ExpressionEngine

We’ve spent a good deal of time figuring out our current solution for integrating SlideShowPro (SSP) flash photo galleries with our favorite content management system ExpressionEngine (EE). If you are not already familiar with SlideShowPro, it is a Flash photo gallery component that reads XML files containing the list of images to display, with options such as transition effects, full screen mode, navigation styles and many others.

In this solution, a single EE weblog entry (not in the photo gallery module) is used for each photo. One Flash file is used to generate multiply galleries, and these galleries are created based on photos with matching categories or content within an EE field, such as an event name or tag.

How It Works

Before going through the steps, here’s the basic idea. The end result allows you to insert the following code in a template or entry to generate a gallery of photos that share the same EE category:

• That embeds the flash gallery and passes a category variable.
• The flash code grabs the category variable and calls an EE XML template.
• The XML template uses that category to generate a list of photos within the category.
• The SWF file reads the newly generated XML and displays the photos.
• We’ll then modify this to generate a gallery based on matching field content.

Please note that while this method uses SlideShowPro, it could be modified to work with a non-flash HTML5/CSS3 gallery, and we’ll be working on that next.

How To Do It

Step 1: Create Your Flash File

Create a flash file and insert the SlideShowPro component on the stage. Click on the component on your stage and give it an instance name; we will use “ssp” for this tutorial. While the default method of calling an XML file is by putting the path in the component inspector, instead we will use some ActionScript to call an XML file (which will actually be an EE template) from the flash embed code.

In the first frame of a blank layer in Flash, insert the following ActionScript. Note the use of “ssp” referring to your instance name of SlideShowPro:

Export your flash file and upload the SWF to your server. We’ll come back to it later.

Step 2: Create a Flash Embed Template

First, we’ll look at the method for creating a gallery of photos that share the same category.

In EE, create a template that will contain your flash embed code, avoiding the need to always include the full flash embed code in a template or entry. For this tutorial, we’ll create an EE template group called “photos” and name this particular template “category.” In template preferences, choose “Yes” under “Allow PHP?” and “Input” under “PHP Parsing Stage.” In the template, use your favorite method of embedding a Flash file (several options are available in the SSP documentation) and reference the SWF you uploaded in step 1. We’ll add a couple of modifications from there.

Add the following PHP code to the top of your template:

Then, we need to add the flashvar to the Flash embed to call the XML template (that we’ll create in step 3) and pass the variable again. Depending on your method of embedding the flash, this exact code may differ, but the var is the same:

So, with those two code snippets, we first embedded the variable “cat” and named it “cat_num,” and then passed it to the XML and renamed it “cat” again. You can use any variable names you like.

Step 3: Create the XML Template

Within your new “photos” template group, create a template (of type “XML”) named “xml_category.” This is the template we called in step 2. Again, choose “Yes” under “Allow PHP?” and “Input” under “PHP Parsing Stage” in the template preferences.

Insert the following code in the template:

So in the top of this template we have the PHP and EE code to grab the variable. We request “cat” from step 2, and assign it the name “cat_value.” We then use a standard EE “assign_variable” tag to take “cat_value” and assign it the name “cat_num.”

Following that code are the opening “gallery” and “album” tags for the SSP XML. Your id, title, and description can vary.

Then we have the EE code that generates the list of photos. In the opening weblog:entries tag, we call the weblog “photos” (which you’ll create next) and for the category, our variable “cat_num.” You can use any additional parameters in the opening tag, such as orderby, sort, limit, etc to define what is displayed in the photo gallery.

Following that is our img tag, that will repeat for each photo within the category. Here, we are using the EE ImageSizer plugin to generate the small and full screen versions for the Flash, but you could replace this with standard image tags, as long as you keep the “photo_path” EE field as the image source.

Using ImageSizer, we are generating a 500 pixel version for the standard gallery and a 1024 version for the full screen gallery. We are then adding a photo caption, link to a detail page so you can have permalinks for photos, and a target for that link, which are all optional. Finally, we close the weblog:entries, album and gallery tags.

Step 4: Create the Weblog

Now we need a weblog and some entries so we have photos for the gallery. Create a weblog named “photos” and the custom fields we referenced in the XML template. These were “photo_path” and the optional “photo_caption.” Also create a field for an event title or keyword (we’ll call it “photo_event”) if you want to modify this method later to create a gallery based on field content. Finally, create some categories and assign them to the weblog.

Now, you can publish some entries within the photos weblog. In the photo_path field, include the path only (not a full image tag) to your image when using the photo upload tool. Make sure to create at least a few entries with the same category applied to test this method.

Step 5: Create a Gallery

We can now embed our flash in a template or entry to generate a gallery. Use the code we first looked at in the intro of this tutorial:

Note: If you are using this code within entries, you will need to use the EE Allow EE Code plugin that allows for EE tags within entries. Even with that solution, you will have to see how EE renders the embed which can potentially break depending on your field formatting options. Alternatively, you can skip this embed and embed the flash code directly, including the category number in the flash var instead of the PHP variable, like so:

That’s it! You can now create category-based galleries on the fly.

Step 6: Modify to Use with EE Fields (Optional)

This method can also be modified to match content within an EE field instead of a category. For example, you can create a gallery of all photos where the event=“My Birthday” or a tag field contains “birthday.” You can of course just use this or the category solution, but I prefer having both available. We can use the same flash file, but need an additional flash embed template and XML template.

Using the same basic settings and code from the category model, create a template for the flash code called “event.” Replace the PHP code at the top with:

Replace the flash var with:

Create an XML template called “xml_event” with the following code:

We’re using the same method of passing the variable, but instead doing a search on the field “photo_event.” So in a few of your weblog entries, in the field photo_event, add a matching event name such as “My Birthday.” Now we can embed an event gallery:

If you’d rather match a keyword or tag within an EE field, instead of an exact event name, you can use this method with a slight modification. Change your variables to reflect a tag and add an EE field for tags. Then, when you do the search in the weblog:entries call in the XML template, change the code to:

You can modify the search as necessary following the EE user guide for the search parameter.

While it takes some set up, you are now ready to create custom galleries based on categories, matching event titles or keywords by inserting a single line of code.

What’s Next?

Next, we will modify this to work with an HTML5/CSS3 gallery, and create a method to import a bunch of photos at once using Solspace’s Importer module.

It’d be great if you’d share any modifications and uses of this method in the comments. Thanks!