Posted on

WordPress Image Galleries

WordPress Logo

One of the nice features of WordPress that we just started using recently is the built-in image galleries. However, as we found out the hard way, it is important to go about creating your image sets for pages and posts carefully. If you attach unwanted images to your page or post it is nearly impossible to remove them from your gallery. Luckily there are some options that can help remedy this situation after-the-fact.  Below are some tips & tricks that we hope will help you manage your WordPress images and galleries the easy way!

WordPress Image Gallery, The Easy Way

The easiest way to ensure your on-page image gallery only contains images you want is to upload any images you DO NOT WANT in the gallery via the admin sidebar “Media / Add New” link. This method allows you to insert the image into your post but does NOT add it to the gallery associated with that post. This is how we’ll be setting up our on-page images like “buy now” buttons that we don’t want to be in our gallery of screen shots related to a product.

For images you DO want in your gallery, use the image manager or “insert image” tool on your pages and posts. Any image that you upload from your computer using this method is automatically added to the image gallery.

Now you just need to select “Insert Gallery” in the image manager wherever you want the gallery to appear. We recommend setting all gallery images to be a same-size thumbnail so your rows and columns in the gallery line up nicely.

Here is an example with our images set to thumbnails. We’ve included the article thumbnail graphic, even though we don’t really want it to appear in our gallery, so we can show you the exclude option noted below without creating another post.

The gallery for this page, with an unwanted page graphic

Too Late, What Now?

So what do you do for those images, like our “buy now buttons” that are ALREADY in the gallery for the page, but you don’t want to show up in the picture gallery? You have to use the shortcode along with an exclude parameter and a comma separated list of the images you DO NOT WANT to show up on the page.

[gallery exclude="123, 9871"]

How do you find the image ID (this is a NUMBER, not the URL link)? We use FireFox and the Firebug plugin. When you bring up the image manager go the gallery tab, go the image you don’t want in the gallery and select “show” (this shows the image details for further editing). With the Firebug plugin you can right-click on the edit button below the image and select “inspect element”. There will be a bit of javascript code with a number and a URL snippet. The first number is the image ID.

We’ve heard that with IE and some other browsers you can hover over the button and the image ID will be in the URL on the bottom right of the screen. That trick does not work with the default FireFox 3.1 configuration on my system, maybe you’ll have better luck on yours without the Firebug plugin.

This page’s gallery WITHOUT our article thumbnail

Making The Popup Look Nice

Our galleries don’t use the standard WordPress image display. We’ve opted to install the jQuery Lightbox for Native Galleries Plugin. You should check it out it’s a good one… and be sure to support the author by donating a little cash to him. We think $5 is fair, don’t you?

Enjoy your WordPress galleries!