WordPress, SuperSlider-Show plugin and the FromFolder option

I love the Slideshow 2 all-Javascript slideshow. It’s what powered my slideshow at Ambient Photography for the last two years. But I recently converted to WordPress and the SuperSlider-Show plugin to provide the same functionality. Out of the box it works great. But for a more complex presentation like mine it took a bit of tweaking.

Installation

I followed the instructions at http://wp-superslider.com/2008/how-to-use-superslider-show-plugin/, and then http://wp-superslider.com/2009/slideshow-how-to-use-the-from-folder-option/ but they only got me so far. And the forum seems devoted to cosmetic issues between browsers rather than customization.

One of the first things I did was opt for SuperSlider-Show to not link to it’s CSS stylesheet via the configuration panel. Whoops! Fail. Unfortunately I don’t know any PHP, but like most successful programmers I thrive on challenge, so this was my opportunity to learn. There’s a bug in v2.7.7 of superslider-show.php2:

if (($css_load == 'off')) return;

should be

if (($css_load == 'off')) break;

Okay, things seem to work now. Next!

The Title Page

http://www.ambientphotography.ca/

The first page shows a simple slideshow with no bells or whistles in a repeating loop. All the images exist in a sub-folder from the old site already. And to help things load even faster, I’ll use fixed-sized images. The shortcode for that gallery looks like this:

[gallery image_size="full" height="400" width="800" loop="true" controller="false" captions="false" thumbnails="false" loader="true" linked="false" fromfolder="smugmug-images/title" first_slide="1"]

Whoops! Weird fail. Apparently I didn’t read the instructions all the way to the bottom. The thumbnails are being used in the slideshow. As it turns out if you load images from a directory using fromfolder, the thumbs have to be a certain size so as not to get picked up as sldieshow images. This is odd since SuperSlider-Show is already configured to know which images are thumbs, as explained in the Advanced tab of the plugin configuration. But I digress. The following code change for my 150×150 thumbs was necessary:

$minwidth = "200";

to

$minwidth = "150";

and

if($width > $minwidth){ // if this image is larger than min_width

to

if($width >= $minwidth){ // if this image is greater than or larger than min_width

Okay looks good! Except when I click on the slideshow I see the image. The plugin appears to be ignoring the linked=”false” parameter I added to the gallery, though only when reading from a directory. Another code change is required to remove the captions and links the plugin is forcing upon each picture. This is a quick patch though and not a true fix:

$file = "'".$file ."': { caption: '".$caption."', href: '".$link_file."'}";

becomes

$file = "'".$file ."': {}";

Ok! Now this slideshow is looking the way I want. Next!

The Services Page

http://www.ambientphotography.ca/services/

This page shows four little slideshows, side-by-side, with no controls at all. And they all link to static pages. Fairly straightforward. The shortcodes are:

[gallery image_size="full" height="150" width="150" loop="true" controller="false" captions="false" thumbnails="false" loader="false" fromfolder="smugmug-images/portraits-small" clear="none" href="http://www.ambientphotography.ca/2011/services/toronto-portrait-photographer/"]

[gallery image_size="full" height="150" width="150" loop="true" controller="false" captions="false" thumbnails="false" loader="false" fromfolder="smugmug-images/weddings-small" clear="none" href="http://www.ambientphotography.ca/2011/services/toronto-wedding-bridal-photographer/"]

[gallery image_size="full" height="150" width="150" loop="true" controller="false" captions="false" thumbnails="false" loader="false" fromfolder="smugmug-images/engagements-small" clear="none" href="http://www.ambientphotography.ca/2011/services/toronto-engagement-photographer/"]

[gallery image_size="full" height="150" width="150" loop="true" controller="false" captions="false" thumbnails="false" loader="false" fromfolder="smugmug-images/headshots-small" clear="both" href="http://www.ambientphotography.ca/2011/services/toronto-headshot-photographer/"]

Notice that they all have clear=”none”, except for the last, which has clear=”both”. This is so that the slideshows all float:left in a row.

The gallery page

http://www.ambientphotography.ca/gallery/wedding-gallery/

There are four of them that look the same, so I’ll just show one. This is a slideshow with thumbnails, clicking on the thumbnail jumps to the image, and clicking on the image opens it up in a lightbox. Here’s the shortcode:

[gallery loader="true" controller="false" loop="true" delay="750" center="true" overlap="false" resize="length" captions="false" thumbnails="true" fast="true" linked="lightbox" fromfolder="smugmug-images/weddings" clear="none"]

Resize=”length” is not one of the options presented when you are inserting a gallery into your post, but it is available in the plugin configuration in the Image Options tab. Because I am pulling my images from a SmugMug feed, and they vary in dimension depending on their orientation, resize=”length” is a must-have. Unfortunately it doesn’t work in v2.7.7 of SuperSlider-show. Another PHP fix:

resize: ".$resize.",

becomes

resize: \"".$resize."\",

All finished!

It took a bit of time, a lot of swearing but in the end I am really happy that I was able to get the slideshows to look and feel the way they did in the old site. And the tools available to me now mean that it’s much easier to separate my content from my presentation which I love.

The finished site: Ambient Photography

Thanks to Daiv Mowbray for his work on SuperSlider-Show and of course the Slideshow 2 team.

This entry was posted in Programmer, Web Design. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>