WordPress Gallery tips

WordPress galleries are a great way to display a sequence of screenshots as part of a tutorial, however there are times when you want more control over which images are displayed than can be achieved with the Gallery settings dialog box.

Creating a Gallery

Firstly we need to upload some images using the "Upload/Insert" link which is shown above the toolbar in the "Add New Post" screen:

When the "Add Media" dialog box opens, upload your images and then navigate over to the Gallery tab where all of the images you have uploaded for the current post will be shown (if you use the multi-file uploaded you will need to click on  "Save all changes" before the tab is displayed):

If you scroll down to the bottom of the image list you will find the Gallery Settings section where you can change settings such as the order of the images and how many columns they should be displayed in. Click the button at the bottom to insert the gallery into your post:

By default, the gallery will display all of the images you have attached to the post. In my example below I have attached 12 photos. While writing your post, a placeholder is shown within the text to indicate where the gallery will be displayed. Clicking on the "Preview" button (towards the top right of the "New Post" page) will open your post in a new window so that you can see what the gallery will look like. In my example of 12 photos, it is displayed as follows:

Example gallery of images
Example gallery of images


Controlling which images are displayed

Before we can control which images are displayed we need to find out the numerical ID that WordPress has assigned to each of the images that we have uploaded. Clicking on the gallery placeholder will highlight it and provide two buttons; one to edit the gallery options and another to delete the gallery.

When the gallery placeholder is clicked, it becomes highlighted and two buttons become available in the top left corner.

Click the edit button (the leftmost button) and it will bring up the same dialog box you saw earlier. This is where we can determine the numerical IDs that we need to control which images are displayed in, or hidden from, our gallery.

Click on the "show" link next to an image and then hover the mouse over the larger preview of the image that appears. The ID of the image shown will then be displayed at the bottom of the page (in Google Chrome) or in the status bar (Internet Explorer). Make a note of the ID for each image.


Hovering the mouse over the larger preview picture will reveal the image ID at the bottom of the browser

Now we have all the information we need to control the images that appear in the Gallery, so close the dialog box.

Excluding images from the gallery

Back in the "Edit Post" screen, switch to the HTML view and look for the following code. This code is the command to display the gallery within the post:

To exclude an image, we simply need to add the exclude option and specify a list of image IDs we don't want displayed (separated by commas).

Excluding the image above from our earlier gallery of 12 images would result in the following:

Gallery with an image excluded

Gallery with the image ID of 420 excluded


Only displaying specific images in the gallery

If you have a lot of images in your post and you only want to display a few of them then it's probably much easier to list the images you do want, rather than those you don't. Again, find the placeholder in the HTML view but this time we specify the include option to list all the images we want displayed.

Using our previous gallery as an example we choose to display only four of the images in the gallery:

Gallery of included images

A gallery showing only the images with an ID of 413, 415, 416 and 419.


Other Gallery Options

Some other useful options used to control the gallery that you might not be aware of are listed below:

id="123"

This option allows you to display images  associated with a different post to the current one by simply specifing the numeric post ID. Note that you cannot mix images from multiple posts.

size="medium"

You can choose the size of the thumbnails displayed within the gallery. Valid options are "thumbnail", "medium", "large" and "full". The actual size in pixels of each of these options can be tweaked at a global level from within the the WordPress admin panel (under Settings > Media).

Enhancing the gallery

There are a number of plugins available that can enhance (or replace) the gallery support built in to WordPress if your needs are more complex.

One plugin that I can heartily recommend is FancyBox for WordPress by José Pardilla, which uses jQuery to display images full size when clicked without reloading the page.