Category Archives: Web Design

Introducing Blip Slideshow: A WordPress/SmugMug plugin

It’s been two weeks since I started using WordPress and I absolutely love it. I recently blogged about my experience using Super-Slider Show to get my photography website, Ambient Photography, up and running quickly. My website and Super-Slider show both used the excellent Slideshow2 so migrating my complex set-up was relatively painless.

But I needed a way to keep my slideshow up-to-date and so I turned my attention back to the media RSS-reading slideshow plugins for WordPress. RSS feeds from photo sharing sites like Flickr contain all the most recent information about the photos you’ve already uploaded online, bypassing the need to upload the pics again to WordPress. Only one of the plugins I found was a close fit to what I needed for Ambient Photography, so I set about creating my own.

WordPress, and thus PHP is completely new to me. I am a J2EE programmer by trade and always considered PHP/Javascript a poor man’s language. Well what a poor man’s language it is! In less than four days I had learned MooTools, written my PHP plugin, debugged it for three major browsers and got it published! Introducing Blip, a Javascript slideshow WordPress plugin that reads image data from RSS feeds. Now when I update my photos on SmugMug, I can be sure that the latest pictures are appearing on my website.

Finding a WordPress/SmugMug slideshow plug-in

Today I’m working on a new website that focuses on my wedding photography. And I want to pull in SmugMug images via RSS feeds and display them on the WordPress site. I am looking for the following:

  • (Must Have) pull images from RSS feed
  • (Must Have) display in a Javascript Slideshow via a post tag and/or widget
  • (Must Have) display multiple slideshows per page
  • (Nice to Have) caching of the feed itself
  • (Nice to Have) caching of the images downloaded (for those times when a request to SmugMug just hangs)

So begins my search. Using the Add New Plugin on my WordPress blog, I search for “Smugmug”.

The first one I try is Anyfeed Slideshow and it seems to work as advertised. Configured as a widget, it has loaded the RSS feed and shows the images in a nice jQuery slideshow. It even has a couple options for tweaking the size. Nice. This should be easy!

The next one that comes up is Lifestream, but it appears to be a general Facebook news feed-like thing and not specific enough for my use. Skip.

Next is Viewzi Site Search for WordPress, but whatever Viewzi is, it closed in 2010. Next.

I try Smuggery, but after I enter my SmugMug alias (not the RSS way, but hopefully it will let me choose an album from all my albums) it just hangs at “downloading 107 albums”. Well that IS 50 megs or so of data. Not to mention the plugin homepage is AWOL. Next.

Next up is SmugPress. Again this asks for a SmugMug alias, which I enter, and then a smart feature is shown where the album data it downloads is cached. Nice. It’s configured as a widget and I go ahead and add it to the sidebar. Then it simply fails with a useless “[ Feed Read Error ]”. And the plugin homepage is literally 404. Next.

Next up is PhotoXhibit, like SmugPress asking for a SmugMug alias AND an album ID, which I enter, and nothing happens. :p

Then I install fdsPhotoFeed, and I enter the code they have as an example and check the post. Hey! I got somethumbnails displayed! But it’s not a slideshow. The docs say I also need wp-lightbox2. De-coupled code. Nice, I approve. Except wp-lightbox2 is a Lightbox, not a slideshow. And not only that but it doesn’t Lightbox the large images. I think because for some bizarre reason, fdsPhotoFeed has removed characters from the image filename?? 1162373008_wCp7L-M.jpg has become 1162373008_wCp7-M.jpg. Now that’s just crazy. Next.

Next on the list is PhotographerConnections. It wants my alias AND my password. Well my SmugMug account IS my life so I don’t really feel like giving my password out to third-parties. I change the alias field but not the password field, maybe it will work without authentication. Wrong. Now I can’t even get back to the Plugins page because the plugin is crashing at authentication. Isn’t WordPress supposed to automatically disable misbehaving plugins? This one is crashing so spectacularly, I have to connect over WebDAV and delete the plug-in manually. Next.

SmugMug Photo sidebar widget. This Widget successfully pulled my photos from SmugMug. It links to the SmugMug album instead of just the photo, cool. But there is no slideshow. And it has added quite a significant delay to the loading of the page. Obviously pulling the RSS feed is done on the server, as opposed to in the browser. And the plug-in’s homepage is MIA. Next.

WP-SmugMug is the last one to try. Install is okay, I create a new post with its short code including my RSS feed URL and perfect! It pulls my images and nice and quick too. Unfortunately, no slideshow.

So, to summarize. Those that worked as advertised:

  • WP-SmugMug
  • SmugMug Photo sidebar widget
  • fdsPhotoFeed (sort of, kind of)
  • AnyFeed Slideshow

The winner (for me) is clearly AnyFeed Slideshow, as it is the only one that actually builds a Javascript slideshow. Unfortunately I don’t particularly like the animation of the jQuery slideshow. One image is faded in, and when that is done, the previous image fades out. It’s fine if your images are all the same dimension, but looks odd when a portrait image is replaced by a landscape image or vice versa. It also waits for all images to be read before beginning the slideshow, which is quite a long pause on my page. And it seems to support only one slideshow per page. But at least it is a beginning! Time to hack.

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!