SlideshowPro and EE Gallery Part II

published on May 14th, 2006 // 1 Comment

 
SlideshowPro and EE Gallery Part II
 

This is an updated tutorial for larger galleries. It is a more dynamic and will give you a lot more freedom for design.

Updates

  • 4/07/08 – I updated the images template to use a more secure method of retireving our needed variable

This is the scenario

  • You have the Expression Engine Gallery Module installed.
  • You have multiple categories with numerous images.<
  • You would still like to hold onto your nice category templates and not have your whole gallery load into SlideshowPro.
  • Instead you would like SlideshowPro embedded on category pages dynamically loading only images related to those categories

Gallery Schematic

1SlideshowPro Preparation
2SWFObject
3EE Gallery Setup
4EE Templates

SlideshowPro Preparation

  • Purchase if you haven’t already and download SlideshowPro.
  • Install the extension
  • Open Flash
  • Drag an instance of the component onto your stage
  • Give it the instance name of ‘ssp
  • In your component inspector remove ‘images.xml‘ from the variable XML File Path
  • Add a new layer above it called ‘Actions
  • Add this to the first frame of the Actions Layer
ssp.xmlFilePath=xmlfile
  • Goto File>Publish Settings
  • Under formats set your flash (.swf) name to slideshow.swf
  • Untick HTML we wont need it
  • Click Publish

SWFObject

SWFObject if you haven’t come across it before is a Javascript Flash Player detection and embed script.

SWFObject is a small Javascript file used for embedding Macromedia Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. It is also very search engine friendly, degrades gracefully, can be used in valid HTML and XHTML 1.0 documents, and is forward compatible, so it should work for years to come.*

Download SWFObject 1.5
For the purposes of this tutorial I won’t be covering the detection variables but the site has a load of info on how to do this. We will only be using one file from the download (swfobject.js)
Upload this JavaScript to wherever you keep your scripts on your server e.g. http://www.somesite.com/scripts/swfobject.js

EE Gallery Setup

  • Log into EE and goto modules > Photo Gallery
  • Create a gallery if you haven’t done so already. It will ask you to create a directory for your images on your server.
  • When that is complete goto Preferences and do whatever configuring you need to do there.
  • Add your categories, category description etc and images.

Things to take note of:

  • Your Gallery id
  • You can find this by clicking on any of the main menu items of your gallery (Categories, New Entry, Batch etc.). Now look up at your address bar.
    Read through it until you come to ‘gallery_id=1’. The number here is your gallery id.
  • Your gallery short name.You will have added this in your preferences a while ago.
  • Now come out of the gallery module and goto your ‘Templates’
  • You will see that a new template group has been added. Its name reflecting the name of your gallery.
  • Click once on the gallery template group name in the left hand column and all that groups templates will appear in the right-hand column.

EE Templates

We will be using the category default template plus a new template.

Images Template

  • In your Gallery Template group create a new RSS template called ‘images
  • In your Gallery Template Preferences turn php ‘on‘ for your category and newly created images template.
  • Set the PHP Parsing Stage to ‘input‘ for the images template.
  • Now in your images template add this code images.txt

3 variables to change here

  • gallery_urlchange it to the folder for your gallery images. (don’t forget trailing slash)
  • gallery_nameshortname of your gallery
  • gallery_numberid of your gallery. if its your first gallery then the default ‘1’ is fine
  • Save template

Category Template

In the header of the template we are going to link to our SWFObject we uploaded beforehand

<script type="text/javascript" src="http://www.somesite.com/scripts/swfobject.js"></script> 
  • Now we add some PHP which checks to see which category page we are on and turns it into a variable
<?php
$cat_id 
'{segment_3}';
$cat_id substr($cat_id1);
?> 

To use SWFObject we have to add a div to the template with an id of flashcontent’. This is where our Slideshow will appear

<div id="flashcontent" align="center"></div

Now we can add our SWFObject code

  • make the 2 urls here relavant to your site.
  • the 550 and 400 are the width and height of your movie
  • 7 is the version of flash that you published to
  • #FFFFFF is the movies background colour
<script type="text/javascript">
// <![CDATA[
var fo = new SWFObject("http://www.somesite.com/images/photos/slideshowpro.swf""foo""550""400""7""#FFFFFF");
fo.addVariable("xmlfile""http://www.somesite.com/index.php/gallery/images/?album_id=<?php echo $cat_id;?>");
fo.addParam("scale""exactfit");
fo.addParam("menu""false");
fo.write("flashcontent");
// ]]>
</script> 

There you have it. A bit more complicated than the last SlideshowPro tutorial but gives you a bit more freedom in your templates

This tutorial has now been kindly translated into French. Thank you Pierrick
You can find it here

 

1 Comments

Name Libby says:

Great article. I’ve created a daily photo gallery with ExpressionEngine’s Photo Gallery Module: http://www2.binghamton.edu/photos/

Does anyone know how to integrate .mov files into ExpressionEngine’s Photo Gallery Module?

gravatar icon
 
 
Commenting is not available in this section entry.