SlideShowPro and EE Gallery Part I

published on Jan 31st, 2006 // 13 Comments

 
SlideShowPro and EE Gallery Part I
 

A quick tutorial combining Expression Engine's Gallery module and the new slick flash tool SlideShowPro.

To start with let me introduce you to both Expression Engine and to SlideShowPro.

Expression Engine “is a modular, flexible, feature-rich web publishing system”. It is by far the most flexible script I have used to date and I have been through them in troves. 5pieces.com was built in EE. I use it for clients sites all the time.

SlideShowPro is a dynamic, customisable gallery for Flash. The flexibility of this tool is fantastic. You could literally plug it in anywhere. It has great support and the documentation.

Ok I am assuming you have ExpressionEngine with gallery module installed and also a purchased copy of SlideShowPro.
Good..Let’s start.

  • 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. I use a batch folder as I find it more useful than adding images one by one.

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 untill 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.
  • Now under the middle column choose ‘New Template
  • Call this ‘gallery_flash’. Under ‘Default Template Data‘ leave it as ‘None – create an empty template‘. Click Submit
  • You can also just duplicate your existing gallery/index template
  • Repeat this for another template called ‘gallery_xml’. Choose rss type template for this one
  • In the right-hand column click on your new ‘gallery_flash’ template.
  • Copy and Paste this into your template.Normally you would paste this into your content area. Change the path values for the flash movie to where ever you intend to upload it to. I uploaded it to my gallery images folder. Save changes.
  • Open up your gallery_xml template and put the following into your template.
    <?xml version="1.0" encoding="UTF-8"?>

    <gallery>

    {exp:query sql="SELECT cat_id,cat_folder FROM exp_gallery_categories WHERE gallery_id = '6'"

    {exp
    :gallery:entries gallery="slideshow" category="{cat_id}" limit="500"}
    {exp
    :gallery:category_name}<album title="{category}" description="{category_description}" >{exp:gallery:category_name}

    {entries}
    <img src="http://www.yoursite.com/images/slideshow/{cat_folder}/{filename}.jpg" tn="http://www.yoursite.com/images/slideshow/{cat_folder}/{filename}_thumb.jpg" caption="{caption}"/>
    {/entries}
    </album>
    {/exp:gallery:entries}

    {
    /exp:query}
    </gallery

    You will have to change a few variables here. Remember I asked you to take note of your gallery id. Well change the ‘6’ for it here. In mine my gallery is called slideshow’. Change this out for your gallery name. Also make sure the paths are correct.

Now all that is left to do is setup SlideshowPro the way you want it using the manual they provide. and Output your .swf which you will upload to where you specified above. In the .fla file put in the path for your xml file just like a normal expression engine url i.e http://www.yoursite.com/index.php/gallery/gallery_xml/

Now load up your gallery flash page and your slideshow should be running in tune with your Expression Engine Gallery.

 

13 Comments

CD says:

This tutorial is great, thanks for doing it. I have a question though, a problem arises by the presence of quotation marks in the caption. If the quote marks appears in the second caption, you only see one image in the slideshowpro album — and you only see one album.

I get the error:

This page contains the following errors:

error on line 8 at column 55: Unescaped ‘<’ not allowed in attributes values
Below is a rendering of the page up to the first error.
</PRE>

Have you seen this? Is there a workaround?

Thanks,

Carl

gravatar icon
 

CD says:

Hello again,

We solved the problem with the caption.

We used the EE XML Encode plugin.

I can’t seem to make it show here, if you want to contact me, I’d be happy to show you want we did.

Thanks,

Carl

gravatar icon
 

CD says:

Another question…

How do you specify the album thumbnail in the gallery_xml file and pull it from EE?

Carl

gravatar icon
 

Editor says:

There is no native album/category image in the EE Gallery mdoule so I didn’t spend much time with it. I do however show how to add this in the Alternative Gallery Template tutorial. To add the album image for the galley_xml would be a mish-mash of both these tutorials. I don’t have the time at the moment I’m afraid to revisit these but you are welcome to.I might at a later date.

Regarding the quotation marks. Did you just try adding the ascii code for them rather then called a plugin. “ (& #8220;) and ” (& #8221;) without the whitespace

gravatar icon
 

CD says:

I didn’t try the ascii code, but that would’ve been the next step.

I’ll look at the Alternative Gallery Template tutorial.

Another question, if you have time, what if I want to attached a sound file to an album?

gravatar icon
 

LZ says:

If you click on image you get taken to the view comment template, which is an error if you don’t have a regular version of the gallery with comments in it.

Any work arounds?

gravatar icon
 

Editor says:

LZ are you talking about my own Slideshow gallery or one you made using this tutorial? In the code provided there is no link to your comment template so this shouldn’t happen. There was in my personal one but I have changed that since your comment

gravatar icon
 

ward monteyne says:

Hello, I’m using EE for the first time, and so far everthing goes fine, except for a flash-banner. This flash-banner uses dynamic loaded xml and images,it works local and independent but when its loaded into an dynamic generated page it won’t work. Is there a solution? thanks ward

gravatar icon
 

Editor says:

Ward, have you got a link I can look at? Email me privately if you prefer

gravatar icon
 

peach says:

hi, do you need ssp with director in order to use this tutorial? thanks.

gravatar icon
 

Editor says:

peach, no you can use it straight off the bat with just the slideshow component and the EE gallery

gravatar icon
 

Marc D says:

Can the EE gallery and Slideshow Pro Director work together in tandem? I’m thinking there might be issues/conflict with the directory of images that Director automatically creates and the EE gallery directory…is it possible?

gravatar icon
 

ktrain says:

I just wanted to thank you for this tutorial. It was just what I was looking for. Saved me a ton of time. Also very well written, concise and easy to follow. I will definitely look over the rest of your site and stay tuned for more ee tutorials.

gravatar icon
 
 
Commenting is not available in this section entry.