Home > How to > How to use WordPress’s gallery feature

How to use WordPress’s gallery feature

by Kathy Purdy on November 21, 2008

WordPress 2.5 included a photo gallery feature and an image uploader that uses Flash. The documentation for these features is spotty to non-existent. I have been hunting around for information on this feature and experimenting with it on my gardening site. This is what I’ve found out so far.

A new template for your theme

The first thing you need to realize is that with the introduction of this feature a new template was added to the WordPress core: image.php. If your theme is lacking this template, the gallery feature will still work, but not to its best advantage. Blog Almighty has the best instructions I’ve found for creating this template if it isn’t included in your theme.

Update your stylesheet

Furthermore, the gallery makes use of some styling that needs to be included in your styles.css file. You can find the additional classes and suggested attributes in the WordPress support forum.

These two things will ensure that your gallery has the right look and functionality after it is published. But how do you get your photos uploaded and create a gallery when you’re writing a post?

What to expect when it’s published

First of all, we’ll talk about how it works as a gallery when published to your blog. In the post you’ve created, there will be a display of thumbnails with captions under them.

This is one row from a series of thumbnails. The caption text is larger here than on a single medium image.

This is one row from a series of thumbnails. The caption text is larger here than on a single medium image.

When a reader clicks on a thumbnail image, she is taken to a medium size image on its own page, with more text if you have chosen to add it.
The key elements to a gallery image. The presence of duplicate popularity ratings is probably due to a faulty image.php design on my part.

The key elements to a gallery image. The presence of duplicate popularity ratings is probably due to a faulty image.php design on my part. (Click on image to enlarge.)

Above the image will be a title, which will function as a link back to the main post. The reader will be able to comment on this picture without going back to the main post. (Comment form not shown in illustration.) He will also be able to move through the rest of the gallery by clicking on Next and Previous links, which may themselves be thumbnail images, without going back to the main post. If the reader clicks on the medium image, she will be taken to the largest size image, with no text at all, and will have to use the Back button to get back. (Screenshots taken from this post.)

How to get these results when editing your post

Now, how to make this work on the back end? When writing a post, place your cursor in your post where you want the gallery to be. At the top right of the writing textbox on Write Post page, you will see the words Add Media and a little icon for Add an Image (circled in red). Click that, and a new box/screen pops up, asking you for the files to upload. You can select one or several files (if your browser, such as Firefox, is compatible) at once. Then click Upload files.

This is what your screen looks like if you upload one photo.

This is what your screen looks like if you upload one photo.


After the files are uploaded, you have an opportunity to modify the information associated with each one. (Refer to screen shot above.) Title is what will go above the photo when it’s on a page all by itself, and will also become the title tag in the html. Caption will be the small text under the photo, but will also function as the alt tag in the html. (This is regrettable, as the alt tag is to explain the image when it can’t be seen, and often should be worded differently than a photo caption would be. It can be edited by hand when in code view, but will add extra time to your posting.)

Finally, you can type in a Description. This will show up when the medium image is on its own page, but otherwise won’t be seen. I leave the Link URL alone, and then choose an Alignment based on whether it is a full width image, in which case I use center, or less than full width, when I choose left or right depending on how I want the text to wrap. Then click Hide in the upper right, and click Show in order to modify the next photo in the series you uploaded. When you’re done, click Save All Changes. After the changes are done, you will see a button that says Insert Gallery into post. Click that button and you’re done. These last instructions are not illustrated above, but this brief movie demonstrates these steps rather quickly.

No thumbnails, just single images in the post

If you want to use it to show single images, you upload the images in the same fashion. Only the Caption will be visible on the post page, because when the medium image is clicked it shows the image file itself. The Title and Description will never be visible. Choose the alignment as you did when preparing images for a gallery. Finally, instead of clicking Insert Gallery into Post, click Insert into Post, and the image will be inserted where the cursor is.

A mix of single images and a gallery requires a dummy

If you want a mix of single images and a gallery, you have a problem. Every image that is uploaded while editing a post will become associated with that post and will show up in its gallery. To keep the single images out of the gallery, you must keep them from being attached to that post. Open another tab in your browser and start another dummy post. Upload the image that you want to display as a large single image in your real post, and save it. Then delete the dummy post. Go back to your real post and place the cursor where you want the single image to be. Click the Add media button, but choose Media Gallery instead of Upload. You will find the image you uploaded from the dummy post there. Write a caption if you wish, choose your alignment option, and insert it into your post. It will not show up in the gallery for that post. (I have Margaret Roach to thank for this tip.)

Did this help? Or, do you know a better way?

As I said in the beginning, I’ve learned this much through trial and error and extensive use of search engines. If anyone has tips or corrections, please offer them in the comments. If my explanation hasn’t been clear enough on any point, I’ll give it another shot if you bring it to my attention.

{ 1 trackback }

10 Perfect Plugins for Building a WordPress CMS | kevinleary.net
August 5, 2009 at 12:43 pm

{ 0 comments… add one now }

Leave a Comment

Previous post: How to read more blogs in less time

Next post: How to extract urls from MS Word 2007 hyperlinks