WordPress – Image Galleries

Over the past few months, I’ve put together several WordPress blogs, and had to sift through a mountain of different plug-ins that offer improved handling of images and galleries.

Considering how little writing I could find online, comparing the different packages, I thought it might be useful to others if I were to post the results of my findings.

First, to discuss some of the issues:

Issues to Consider:

Flash — Most of the beautiful solutions are based on Adobe Flash, but I prefer not to use this technology on any site I’m responsible for.  The reasons are several: (1) Flash can look beautiful, but does not lend itself to search engine optimization, (2) download times can get very large, (3) it’s incompatible with most mobile devices, and Apple has announced without a doubt that it will never support Flash on iPad or iPhone.  So, while Flash is nice for websites that have heavily animated movies, if you want to be accessible from any media that a user might have, then Flash is out of the question.  And considering that most image galleries require no animation more complex than an image fade or maybe a resizing, there’s no need to bring in “the big guns” and use Flash.

Javascript — Generally, Javascript is necessary for any “actions” on web pages, so the non-flash plug-ins will be based on Javascript.  In particular, the jQuery library is the leading standard, which most of the good plug-ins use.

Thumbnails — One way to make a gallery is to have a browsable series of tiny images, and to let users click on one to open a larger window containing your image.  This is good if you have very high-resolution images, because viewers on a large screen will get to see your pictures at the full size of their screen.  It’s bad because the artistic value of your image is likely to be lost at a small size.  It’s more engaging to users if you use a WordPress template that has no sidebars, so that you can load a high-res image directly onto the page.  That way, readers can see your image in a big size without having to click anything.

Inline Galleries — If you have a series of images, and you want users to automatically see the entire series, then you can’t use a full-screen pop-up gallery.  But there are certain plug-ins that will let you have a standard WordPress post, which contains an image that cycles through many pictures.  All of the inline gallery tools I have found do not allow you to have more than one of these in any given post.  So, for instance, if you’re showing pictures of a house, you cannot use a single blog post to have a series called “kitchen” and a series called “bathroom” and a series called “bedrooms”, and have all three of those series auto-cycling on the same page.  You would need to use a different post for each series.  You can, however, have a post which has as many static images as you like, plus one slideshow (just not more than one slideshow per post).

Compatibility — Not all of these tools are compatible with each other!  If you decide that you’d like to use pop-ups and inline slideshows, for instance, you could be in trouble.  Be careful, and definitely back up your WordPress installation and database before installing anything.  I learned that the hard way — it’s possible for incompatible tools to mess each other up in a way that can’t be repaired by uninstalling the plug-ins.

My top picks:

jQuery Colorbox — The nicest of the pop-ups, it allows for auto-resizing to the browser window, dimming the background while the pop-up is loaded, and displays image titles and descriptions at the bottom.  Colorbox over-rides the standard WordPress gallery functionality, so you use the regular tools for uploading images to a post, and the post displays with the wordpress-standard gallery thumbnails in your post… Any time a user clicks a thumbnail or an inserted image, the pop-up appears instead of whatever WordPress would otherwise have done.  http://wordpress.org/extend/plugins/jquery-colorbox/

Photospace — Displays thumbnails and an inline slideshow (images cycle inside your post, instead of in a pop-up).  This is also one of the only tools that does a really beautiful crossfade from one image to the next.  It has an easy-to-use configuration UI in WordPress, but it lacks the ability to change the settings for each instance of a slideshow.  For instance, I might want one slideshow to cycle every 2seconds, and another to cycle every 5seconds; Photospace doesn’t allow that.  But it’s probably my favorite anyway, since it’s so darned clean.  UI controls are clear (start/stop/next/prev/download), and it allows displaying image titles and descriptions.  Photospace galleries do not automatically over-ride WordPress settings; you need to put a shortcode into your post.  (Switch to the HTML view, and just put in [photospace].)   This is nice because the extra step only takes a moment, and it allows you to use a different tool for other galleries (see below, FancyBox Gallery). http://wordpress.org/extend/plugins/photospace/

FancyBox Gallery — Another Jquery tool, this one is nicely compatible with Photospace… I hunted around a long time to find a pair of plug-ins which are mutually compatible, and I can confirm with current versions that PhotoSpace and FancyBox Gallery definitely work together.  This one intercepts the standard WordPress gallery and allows images to be opened in full-screen pop-ups.  So if you install both, you can use Photospace for posts requiring an automatic slideshow, and you can still let FancyBox give you a pretty pop-up for images you would like users to see full-screen.  Since I post a lot of photography at very high resolution, I would like big-screen users to see my images at 2500×1200 whenever possible… Obviously the WordPress blog can’t be made that large, but a pop-up can!  It’s not quite as nice as jQuery Colorbox, above, but its compatibility with Photospace makes it a real winner for me. http://wordpress.org/extend/plugins/fancybox-gallery/

CrossSlide — Also using jQuery, this plug-in is extremely lean (about 2k), and therefore allows for very fast loading.  It requires substantial configuration for each instance, which is a drag, but its performance is fantastic.  It’s for inline slideshows only, and is powerful enough to do a full “Ken Burns effect” (images zoom, pan, and crossfade, elegantly and beautifully).  I don’t think it handles captions.  I found the configuration too onerous to set up, but if I had a single post that really needed a beautiful and smoothly animated slideshow, I would seriously consider going through the hassle. http://tobia.github.com/CrossSlide/

Portfolio Slideshow — Nice inline slideshow, and each instance can be easily configured via shortcodes.  Handles titles & descriptions nicely, but the “next/prev” controls are a little cryptic.  One problem: totally incompatible with jQuery Colorbox, and possibly other plug-ins. In fact, installing this thing screwed up one of the blogs I was recently building for a client, and no form of deactivate/upgrade/uninstall/reinstall/delete was able to repair it!  I actually had to revert to a prior version of the blog.  Then I tried it again on a totally clean and brand-new WordPress installation, with the same result.  I liked this tool a lot at first, but I’m afraid of it.  Also, it can do “fade in / fade out” but only with going to a background-color in between.  So it’s not a true crossfade (one image becomes another).  For this reason, I think Photospace kicks its butt.  And Photospace has less-confusing controls for your users (start/stop/next/prev). http://wordpress.org/extend/plugins/portfolio-slideshow/

Superb Slideshow — An optimistic name… This one looked great to me; comfortable in a widget or in a post, and it has a nice option for partially-opaque section on the bottom of each image for a title or description.  However, I was disappointed upon examination to discover that it doesn’t interface with the WordPress Gallery in any way… In fact, I couldn’t figure out how to get more than one “Superb Slideshow” onto a website at all.  (Not one-per-post; I mean one-per-site!)  On his home page, he has some views with multiple “Superb Slideshows” running, so perhaps there’s a way.  But it definitely requires more tinkering than the tools I listed above.  I could not get this tool to work correctly, and the author has a message on his website saying he’s unavailable for a month and a half.  http://www.gopiplus.com/work/2010/10/10/superb-slideshow-gallery/