Down to Brass Tacks Let's cut the crap.

Embedding a SlideShow Pro presentation

So you've created a SlideShow Pro presentation to feature some of the images in your portfolio, and now you want to embed it in your website—that is, you want to insert the slideshow in your design, not just point to the standalone web page that the software generated.

You may have been explained how to do it by following the procedure when using Dreamweaver, and later been surprised when it didn't work for you. I was surprised too, considering that this is the official way of going about it, but it just didn't seem to work.

The obvious observation is that everything works fine when the slideshow is first exported, but when you try to embed it in your design, it fails. So I've kind of reverse-engineered the auto-generated code to try and figure out what was going on. Not being a SlideShow Pro developer, I cannot say with certainty why it doesn't work by following the original procedure (they must have tested this!), but there really seems to be variables missing in the declaration...

---

But first, let's just take a moment to look at some of the parameters you set when creating the slideshow. Personally, I don't want all the bells and whistles that the software offers me:

• Unless I've added specific captions/comments for all the images, I don't want to display captions when the user hovers his cursor over an image.
• Unless I want to merge many albums inside the same slideshow, I don't want to display the gallery.
• Unless I will use this slideshow in a standalone page, I don't want to display the header.
• I certainly don't want to use popups for displaying a larger image in a new window when the user clicks on an image.

So with all that said, I have to (or can) disable many important features of the slideshow that will simplify its interface (there may even be some I missed—you'll have to carefully review all the innumerable and incoherently organized options to be sure):

Unfortunately, the software is not very brilliant and will export images even for disabled features. That is, it'll export large-size images to display full screen, in popups and in thumbnails even if the features were explicitely turned off.

Moreover, even if you've set the slideshow to be of a given size, it won't export images that are of the exact size required to fit in the frame automatically—it'll export images the size you specify manually, even if that means the images will be larger than the room available (rendering all the images ugly because Flash's resizing interpolation sucks, thus also turning into a farce the output sharpening you've expected), and even if that means you'll have to fuss with the pixels until it seems to match perfectly, considering the variable height of the navigation bar, strokes you might have added, etc. This is ridiculous:

In this example, I had to set a slideshow dimension of 900x634 (yes, 634 exactly) to match my 900x600 images, considering the navigation bar I had configured, with no stroke.

(Note that all the settings can be modified manually by editing the exported XML files directly, but I don't presume you'll want to do that. It'll be easier to configure it right from the start...)

Once you've exported this thing, you'll want to go in the "album1" folder and delete all the useless images it exported for you that will simply take up space for nothing. In my case, I delete the two folders "fs" (for full screen images) and "popup" (for popup images). By now you've cut the whole thing's size by a not inconsiderable margin (enormous if you had left the "Full Screen" and "Popup" dimensions to large sizes). If you've both turned off the previews and are using a navigation bar that only displays numbers, you can delete the "thumb" folder as well.

---

Alright. So now you've got a folder containing all the stuff that SlideShow Pro exported for you and you want to embed the slideshow inside your design.

If you follow the official instructions, you'll use Dreamweaver's embed feature and add the "base" variable, which will prompt you to add a "Scripts" folder containing two files in the root of your website. If you have more than one album, yet have them separated (because you want the user to access them using links/buttons in your design, not by using the slideshow's "Gallery" feature), this means you'll have more than one of those SlideShow Pro exported folders containing duplicates of certain files.

We don't want all that—let's optimize! Forget about the official procedure. Here's how you do it (strap your seatbelt, because this requires editing some code). I will presume here that all your albums will be accessible from a single location—that is, you'll have some kind of "portfolio" section (thus, a "portfolio" folder) that contains links to the various albums. Something quite like this:

In this case, I have two albums in my portfolio (the main album and another about "nature") and I want each one to display a slideshow.

First step, export all your slideshows separately.

You will end up with a bunch of different folders, all containing a standalone slideshow page and its associated files/folders. We don't want to merge them in a single slideshow (as you might have done in a previous assignment to have all of them showing in the gallery), but we do want to merge them in a single folder that we will add inside our portfolio section, to save space and keep things clean. (I presume here that you will have already deleted the useless images folder for unused features, as explained earlier, to save space.)

Select one of the slideshows as the base where all the others will be added. (It doesn't matter which one.)

In that folder, you can delete the "index.html" file exported by SlideShow Pro, as we will not be using a standalone page to view the slideshow. You can also go ahead and delete the "pop.html" and "pop.swf" files, as we will not be using the "popup" feature (well, not here, in any case).

Rename some files and folders.

Because we will be merging many albums in the same folder, we need to select unique names for the album-specific files. For example, if your album is about portraiture, rename these files in this fashion:

• Rename the "param.xml" file into "param_portraiture.xml".
• Rename the "images.xml" file into "images_portraiture.xml".
• Rename the "album1" folder into "album_portraiture".

Now, because we have messed with the file names, the slideshow is broken. We must change the values in the files that depend on these specific names.

Open the (former) "param.xml" file (Dreamweaver, for example, allows you to edit the code directly), and locate the "xmlFilePath" attribute near the end of the file. You should change the value that is set to "images.xml" into the new images file, "images_portraiture.xml". The parameter file is good to go!

Open the (former) "images.xml" file, and rename all the occurences of the "album1" value to the new name of the images folder ("album_portraiture"). There should be 5 of those, all in the <album> tag. The image file is good to go!

Good work. Now, do that procedure with each of your albums. When you're done, you will move the parameter file, the images file and the album folder of each album into the base gallery's folder. The remaining files (expressInstall.swf, loader.swf, slideshowpro.swf and the "js" folder) will be shared by all slideshows, so you don't need to bring them over.

Move the slideshows in your site's folder structure

When you're done, you should put the base slideshow folder inside your portfolio folder and rename it "slideshows". As an example, for my portfolio, I had two albums, so here's the folder structure of the portfolio folder as seen in Dreamweaver, once I have moved over the base "slideshows" folder:

Notice that some files are shared by all albums, and some files are specific to each album. If you have more slideshows, you'll have more album-specific files, but the basic structure should remain the same.

Embed the slideshows in each portfolio page

We're almost done. At this point, we have optimally merged all the slideshows in a single folder that we have incorporated into our site's structure, but we still need to make them appear on the appropriate pages.

Go into Dreamweaver, in your main portfolio page. Add a <div> tag at the location where you would like to place the slideshow (it is presumed that the space available in your design matches with the size of the slideshow, of course). Give that <div> tag the id "flashcontent" (it could have been anything, but we'll stick to the official name...) There is no need to create a CSS rule for that id. Remove the useless text Dreamweaver inserts inside the div. You'll end up with a bare, skinny div that doesn't do anything yet (this is normal):

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

Now go in the code for your page, and inside the <head> section of the page, add the following chunk of code:

<script type="text/javascript" src="slideshows/js/swfobject.js"></script>
<script type="text/javascript">
   var flashvars = {
      paramXMLPath: "param_city.xml"
   }
   var params = {
      base: "slideshows",
      bgcolor: "#ffffff",
      allowfullscreen: "false"
   }
   var attributes = {}
   swfobject.embedSWF("slideshows/loader.swf", "flashcontent",
      "900", "658", "9.0.0", "slideshows/expressInstall.swf",
      flashvars, params, attributes);
</script>

You'll have to simply replace the "param_city.xml" to whatever the name of the parameters file for the slideshow you want there (say, for example, "param_portraiture.xml"). Also, you'll have to change the size for the slideshow (where it says 900 and 658) to the size appropriate for your slideshow. Notice that the height is larger than the value entered when configuring the slideshow—this is because I am using the "wet floor" feature that shows a nice little reflection at the base of the slideshow, which this height has to account for. You may have to change the background color value as well (bgcolor) if it isn't white...

Do this in all your portfolio pages, simply changing the name of the parameter file, and you're done! (You'll obvisouly only see the result once you preview the page inside a real browser...)

Why all the complication?

When you're done, you'll have all your slideshows in a single folder, you'll have deleted all the extraneous/duplicate files and folders to save space, and you won't need to add a "Scripts" folder in the root of your website. You have included a bunch of variables in the code that were missing by following the official procedure (remember that the only variable it required you to add was "base").

It required some more work in the code, but is a cleaner, more size-efficient solution in the end.