Monthly Archives: March 2011

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.

My new user experience with WordPress 3

I’ve launched a new website using WordPress 3, my commercial photography site Ambient Photography. It’s actually an old website, hand-coded in HTML, that I transformed to a WordPress site. There are two main reasons I did this:

  1. More of my IT clients are asking for PHP skills (though truthfully, configuring the site required almost no PHP knowledge)
  2. I wanted a content manangement system (CMS) running my site so that updates to it were easier to make.

For reference, the old site is now here: http://www.ambientphotography.ca/2010/

Before any of this began I had to make the decision on which CMS to use. The big ones to look at are Joomla, WordPress, Drupal and MovableType. A friend at One-Nyne Design suggested Symphony as well, but that turned out to be more of a programmer’s framework rather than a ready-to-go CMS. A few years back I ran a MovableType blog and I found it a little complicated to setup. According to market share, WordPress and Joomla lead the pack. So I bought two books on Joomla (it seemed to offer the most flexibility and a largest assortment of extensions) and one on WordPress. Installation of Joomla was a breeze, but after a week trying to customize it, watching dozens of video tutorials, and half a book later I was ready to tear my hair out. Opening the WordPress book I installed the software and customized a majority of the site in less than a day. Decision made.

WordPress can be downloaded and installed on your own webserver, or you can get an account at WordPress.com with a pre-fab site ready to go. I’m still a J2EE guy at heart, but the WordPress install took all of five minutes, including creating the MySQL databases, configuring Apache and installing WordPress. There’s no way I could do a J2EE deploy of a new Struts web application in anything under an hour. As a busy entrepreneur, I just don’t have the time to tinker anymore.

WordPress has two types of content entries:

  1. Article-style “posts”
  2. Webpage-style “pages”

Since my photography site is a more traditional website and not a blog, the majority of the content I created in WordPress are Pages. But the Posts functionality in WordPress now allows me to streamline the “news” pages I was creating in hand before, and even shows an excerpt of the most recent news item on my homepage.

With the content created, my next task was to replicate the style of my old site. WordPress uses a PHP template system to transform the content and style into the look you want. Pre-fab themes are easily installed from http://wordpress.org/extend/themes/. But rolling your own custom theme is as easy as dropping an index.php (peppered with WordPress PHP tags) and a style.css stylesheet into a new sub-directory. The default WordPress 3 theme, called Twenty Ten, is an excellent reference of how to get the functionality you need into your custom theme. And better yet, all themes can be tweaked, or extended as child themes, to suit your specific needs – everything is open source.

Plugins easily extend the functionality of WordPress without writing code. I used four plugins for my site:

  1. Contact Form 7 – to create a contact form with a quiz – something I consider better than CAPTCHA at eliminating spam.
  2. Graceful Email Obfuscation – I looked at several email obfuscators – many were easy to beat leaving behind giveaways like mailto’s and specific CSS classes but this one appears pretty fool proof.
  3. PJW Page Excerpts – this allows me to use excerpts for pages (as the Meta Description tag), since be default excerpts are only input by WordPress for posts.
  4. Super Slider-Show – encapsulates the all-Javascript Mootools Slideshow2, which I was already using on the old site. I also made several modifications to this plug-in to get it do what I wanted.

There were a few hiccups along the way:

An in all, I spent about a week’s worth of spare-time getting everything going. I’m very happy with the results and I look forward to creating more WordPress sites in the future. Thanks Internet!