Solutions

SlideshowPro is a popular Flash-based application for displaying a slideshow of images. In this solution I will show you how to use Perch to publish content to your slideshow by editing the XML file.

Note: As of June 2011 it appears that the standalone version of SlideshowPro is no longer available.

We’ll be using the standalone version of SlideshowPro for this solution so, if you haven’t already, download the trial or your full version of the software.

We need to follow a few steps to get SlideShowPro working on our site – none of these should take very long so you will be watching your image slideshow in no time.

1. Save slideshowpro.swf into our site
2. Save swfobject.js into our site
3. Embed SlideShowPro on the page that will display the gallery
4. Create a special PHP page that will output the XML file read in by SlideShowPro
5. Create a Perch template to define the individual images used in that XML file
6. Upload our images using Perch

1. Save slideshowpro.swf into your site

In the SlideShowPro_Standalone download open the Embed folder and copy the file slideshowpro.swf into your site.

2. Save swfobject.js into our site

SlideShowPro recommend using swfobject.js to embed the player into your site. This is a JavaScript method of embedding Flash. Download the JavaScript file from http://code.google.com/p/swfobject/ – you just need the file swfobject.js from the zip. Save that into your site.

3. Embed SlideShowPro on the page that will display the gallery

On the page of your site that you would like the slideshow to appear on, add the following to the head of the document.

<script type="text/javascript" src="/assets/js/swfobject.js"></script>
	<script type="text/javascript">
	var flashvars = {
		loadParams: "false",
		xmlFilePath: "/slideshow-photos.php",
		xmlFileType: "Default",
		initialURL: escape(document.location)
	}
	var params = { 
		bgcolor: "#121212",   
		allowfullscreen: "true"
	}                
	var attributes = {}
	swfobject.embedSWF("/assets/swf/slideshowpro.swf", "slideshow", 
			"620", "460", "9.0.0", false, flashvars, params, attributes);
</script>

Change the paths to swfobject.js and slideshowpro.swf so that they are correct for the locations you just saved those files to.

In the flashvars section of that code you will see xmlFilePath: "/slideshow-photos.php" change /slideshow-photos.php to the name of a file on your site that will be the XML content for the slideshow. This won’t be a page that users visit (I just create mine at the same level as the slideshow display page).

Staying on your slideshow display page add a div to the body of the page in the location you would like to see the slideshow and give it an ID of slideshow.

<div id="slideshow"></div>

4. Create a special PHP page that will output the XML file read in by SlideShowPro

Create a new page at the location you added for xmlFilePath in the last step. The entire contents of this file should be the following code (you can also download my example from the code download accompanying this solution). Change the album title and description if you wish.

<?php include('perch/runtime.php'); ?>
<?php echo '<?xml version="1.0" encoding="utf-8"?>' ?>
<gallery>
    <album title="gallery" description="My Gallery">
        <?php perch_content('Slides'); ?>
    </album>
</gallery>

5. Create a Perch template to define the individual images used in that XML file

The last bit of configuration we need to do is create a new template in perch/templates/content. Save a file in perch/templates/content as slide.html with the following content:

<img src="<perch:content type="image" id="image" label="Image" width="600" />" 
	title="<perch:content type="text" id="title" label="Title" required="true" />" 
	caption="<perch:content type="text" id="caption" label="Caption" required="true" />" 
	link="" tn="<perch:content type="image" id="image" label="Image" width="120" />"/>

6. Upload our images using Perch

Visit your special XML page in the browser. All being well you will just get an empty browser window on that page.

Now log into Perch. Hopefully you will see a new content area on that page labeled Slides.

Click the word Slides and on the next screen select the Slide template and check allow multiple.

You should now be able to start uploading your images.

After uploading some images visit the gallery page which is the page we initially created to display the slideshow. You should see your SlideShowPro slideshow in action.

Customizing SlideShowPro

You should be able to customize SlideShowPro in any way allowed by the software by editing the flashvars and params. Further documentation can be found on the SlideShowPro website. To edit the lines in the XML document that display the individual images, edit the slide.html template that you created in perch/templates/content.