Photo Gallery for WordPress: the Isotope Gallery

Earlier this year I relaunched this blog with a new responsive theme and I was looking for a modern WordPress gallery plug-in. I settled on the Isotope Gallery from codecanyon. Previously, I had been using a Flash gallery which I liked a lot but Flash is a poor option these days. Flash is unavailable on iPads and iPhones and support for it is dwindling elsewhere.

I also had the very popular NextGEN gallery installed as it was included with my previous WordPress theme. Since it was already there I tried it out but I wasn’t happy with the results. My main complaint is that it’s not really responsive which means that it doesn’t adapt well to different size screens and mobile devices. And it has a quirk of sometimes breaking the thumbnail images into rows of different lengths; e.g., one row will have three thumbnails and the rest will have four. For no discernible reason. And that’s on a large desktop display.

So, I googled “WordPress responsive gallery plug-ins” and got dozens of hits (e.g., 15 Best Gallery Plugins for WordPress and  75+ Best WordPress Gallery Plugins). I started screening galleries first, for responsiveness, and then for attractiveness and other desirable features. I went through them quickly but still ended up spending several hours looking at demos, reading descriptions and trying out the occasional contender. For now, I’ve settled on the Isotope Gallery.

The Isotope Gallery in Use

The Isotope Gallery is a WordPress plug-in which is easy to install and configure. It’s a commercial product but the price, at $14, is reasonable. It works great on my Windows desktop in Chrome, Firefox and Internet Explorer (IE7, 8, 9 & 10) and it works well on my Android phone and my iPad in all the various browsers I have on those devices except for Firefox on Android.

Isotope Galleries appear on a WordPress post or page as a collection of thumbnails which the website visitor can click on to see a large version of the image. The usual forward and back arrows are present so that the visitor can easily see more photos at full size. You can also include a caption for each image (it defaults to the filename). Each thumbnail defaults to 250 x 250 px but you can change the height (only—well, sort of, see below). By changing thumbnail heights you can better accommodate various portrait and landscape orientation images. For portrait mode images you will usually want to increase the height so that the viewer gets to see more (or all) of the image in the thumbnail. For landscape format photos you typically want to decrease the height for the same reason. Since the only dimension you can change is the thumbnail height your landscape format thumbnails will usually be smaller than those of your portrait images. I’m talking here only about the thumbnails—the full-size photos will display at whatever image size you provide (or whatever size the viewer’s screen will handle).

In the preceding paragraph I alluded to the possibility of changing the width as well as the height. Yes, you can change the thumbnail widths—the widths of all of the thumbnails in your gallery. That is, you cannot change them individually as you can with the height. So, you can increase or decrease the widths of the columns of thumbnails but you cannot make one thumbnail wider or narrower than another in the same gallery. Also, if you do change the thumbnail width after you’ve set custom heights for individual thumbnails the result may not be ideal. Since changing the widths will also change the aspect ratio of each image you will find that you may not get the entire subject (in one or the other dimension) into the thumbnail anymore. To fix the problem, you’ll have to then readjust the heights. So, be sure to choose your thumbnail width setting before setting individual heights.

The Gallery Viewer’s Experience

It would be nice if you could also adjust individual thumbnail widths but this would make the plug-in harder to use and would present complications for the plug-in developer. The Isotope Gallery automatically arranges the thumbnails on the screen into columns of equal width. The number of columns depends on the thumbnail widths and the page width. One of the nice things about the gallery is the cool way it automatically resizes and reflows the thumbnails when you change the browser width.  When that happens what the viewer sees is that the thumbnails are animated from their current locations to new locations on the page as determined by the new screen width. It’s a very attractive effect.  The same thing happens on a mobile device when you rotate it from landscape to portrait or vice-versa. Try it on my Gallery page.

Similarly, when you change your browser’s window width or rotate your device while viewing the large version of an image, the image being viewed is resized and repositioned. So, for example, if you’re viewing a landscape image while your tablet is in portrait orientation and then you switch to landscape for a better look the photo resizes and repositions itself to take advantage of the new layout. Again, it’s done smoothly with a nice animation that lends a touch of elegance.

Grouping and Filtering Photos

Another nice feature is that you can create multiple groups of photos to allow your website visitors to quickly see a subset of your photos. For example, you could group your photos into portraits, landscapes and sports categories. When someone first visits your gallery page all three groups would be displayed but they could filter by category by clicking just “portraits” or “sports.”

Unfortunately, there doesn’t seem to be any straightforward way to disable this feature. I’m not currently using that feature and my workaround has been to delete the group titles. This still leaves an empty line with the word “ALL” (representing all the photos) at the right margin of the gallery page (which visitors see). When you do this it also means that the gallery group all but disappears from the plug-in’s WordPress dashboard. Normally, you see the group label (e.g., “sports”) which you can click on to expand the group for editing. But with no title all you see is a thin bar with a two-headed arrow. Clicking the bar opens a panel with all your photos and you can proceed as usual but you do have to be aware that the panel shrinks down almost to nothing when closed.

Creating a Gallery Page or Post

You can create as many gallery pages or posts as you like. Creating a gallery page or post is a two-step process. First, you go to the Isotope Gallery plug-in page in your WordPress dashboard and create a new Isotope Gallery. As described above, you add one or more groups as needed and then you add your photos to the group(s). Then you go to your page or post and insert a shortcode like the one shown in the screenshot below. You get the ID from the Isotope Gallery screen where you create/edit your gallery. The shortcode for each gallery is shown in the Gallery properties sidebar:

You can copy/paste that shortcode from the sidebar right into your page or post.

There is one thing to be aware of if your blog has any subscribers. If you have subscribers, they automatically get an email each time you post. However, when you post a gallery all they will see is the shortcode instead of the image thumbnails.