• Skip to primary navigation
  • Skip to footer navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

WP Fangirl

WordPress Consultant Sallie Goetsch

  • speakerdeck icon
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact

Adding a Photo Gallery to a WordPress Post or Page

June 21, 2011 by Sallie Goetsch

check gallery category

I have a client who’s on a world tour, and he wanted some help with uploading photo galleries to his blog, which  is using the Coraline theme. Inserting a gallery isn’t quite as intuitive as inserting a photo, so I decided to create some instructions for him. Since I thought they might be useful to more people, I’ve posted them here.

Screenshots of the WordPress dashboard are of the 3.2 beta, not my client’s live site.

Gallery Basics

Inserting one photo at a time when writing a WordPress post is pretty straightforward, but what if you want to add a whole collection of photos? Suppose you’re taking a trip around the world and you’ve set up your blog to chronicle your travels, and in each post you want to include a dozen shots of the city you visited that day?

The good news is that WordPress has gallery features built in, so you don’t even need a plugin to add a basic photo gallery to a post or page.

The bad news is that it requires more steps than adding a single photo. In fact, if you’re not used to WordPress, the latest features to help you display galleries might just make things more confusing for you. (The WordPress development team knows it needs to work on media, but hasn’t had a chance to tackle that yet. Improvements are in the pipeline.)

Meanwhile, WordPress galleries aren’t really that difficult once you get used to them, and there are some great plugins and themes to allow you to add some spectacular effects. Here are the steps to insert a no-frills photo gallery without adding any plugins.

1. Open the edit screen for the post or page where you want to insert the gallery. You can create a new post, or add the gallery to an existing post.

2. Position your cursor where you want the gallery to appear. Moving galleries after you insert them is more trouble than putting them in the right place to start with.

3. Click the Insert Image button at the top left of the post/page editing area, shown in Figure 1.

Insert Image Button
Figure 1: The four icons at the top of the editing window let you insert images, video, audio, and media, but for self-hosted WordPress installations, there are better ways to add everything but images.

4. Click the From Computer tab to upload the images for your gallery.

Add media files from your computer
Figure 2: This method of creating galleries only works with images you upload from your computer and attach to this post. See the Gallery Shortcodes section for a way to create galleries using other images in your Media Library. The built-in gallery feature in WordPress does not work with images hosted elsewhere on the Web.

5. Select and upload multiple images at once. Click Open when you’ve finished selecting images.

Multiple file upload screen
Figure 3: Windows users can select non-consecutive images by holding down the CTRL key while clicking the icons; Mac users can do the same with the CMD key. To select consecutive images, hold down the SHIFT key.

Tip: If you really are traveling around the world, uploading photos from your camera in an Internet café anywhere but Japan or South Korea can be pretty time-consuming. These days, even point-and-shoot cameras boast resolutions of 12 megapixels or more. That’s a 4000 x 3000 pixel image: each JPG file will be 2.5 MB. A set of them will take forever to upload over patchy hotel wi-fi or the satellite connection in that Mexican café.

If you don’t plan to print the photos when you get home, go into your camera settings and set your photo size and quality below the maximum. An image size of 1600 or even 1200 pixels on the longest edge is plenty for a website.

6. After WordPress has finished “crunching” the files, click the Save All Changes button at the bottom of the list of images.

Save All Changes
Figure 4: When creating a gallery, it’s important to click “Save all changes” rather than “Insert into post,” even if you upload images one at a time. This command tells WordPress to activate the gallery feature.

For bonus points, after you click “Save all changes”, click “Show” next to each image and fill in each image’s title, alternate text, caption, and description. Then Save all changes again. Giving the images titles that mean something to you helps the search engines find you and it helps screen readers for the visually impaired. And it will help you, too, when you’re going through your media library trying to find a particular photo.

Image Info
Figure 5: The image title pops up on the screen when you hover your mouse pointer over the image; the ALT text is the description visually impaired people hear. The caption appears below the gallery thumbnail.

7. After you click “Save all changes”, the Gallery tab appears at the top of the Add an Image dialog box. From now on, whenever you click the Add an Image button for that post, you’ll see the Gallery tab between From URL and Media Library.

Gallery tab
Figure 6: The Gallery tab only appears in posts that have had galleries inserted. The number in parentheses after the word “Gallery” shows how many images are in the gallery.

8. Choose your Gallery Settings from the options below the list of images in the gallery. This is where you decide what order to put the pictures in and how many columns your gallery should have.

If your gallery is going to appear on a page with a sidebar and you use the standard 150 x 150 pixel thumbnail size, you won’t be able to fit more than three images across. But if you use a full-width page for your galleries, or a smaller thumbnail size, you can have five or six columns of photos.

Note: to change the size of your image thumbnails, go to Settings –> Media. Changing the settings there will affect all new images you upload. To change the sizes of images that are already in your Media Library, install the AJAX Thumbnail Rebuild plugin: http://wordpress.org/extend/plugins/ajax-thumbnail-rebuild/.

In addition to the built-in options to sort the images by Menu Order, Date/Time, Title, and Random, you can manually order your images by numbering them in the boxes in the Actions column (see Figure 6) and clicking “Save all changes” again.

The final option is whether to link the thumbnails to the original image file or to the attachment page. If you’ve filled in an image description or want people to be able to submit comments on a particular image, then it’s best to link to the attachment page. Lightbox and slideshow plugins tend to override this option, but some will display the descriptions from the attachment page.

9. When you’re happy with your settings, click the Insert gallery button.

insert gallery
Figure 7: Select your gallery options before inserting the gallery.

Once you click the button, a gallery placeholder appears in your post editor window. If you’re using the visual editor, the gallery placeholder looks like this:

gallery placeholder
Figure 8: You can edit your gallery settings by clicking on this placeholder, or delete the gallery entirely. Just select one of the icons that pops up in the top left corner of the placeholder. The mini gallery icon will take you back to the insert gallery options; the red circle with a line through it will delete the gallery.

If you’re using the HTML editor, the gallery placeholder looks like this:

gallery shortcode
Figure 9: What you’re looking at is called a gallery shortcode. (A “shortcode” is a command in square brackets that substitutes for HTML or PHP.) If you need to move your gallery around in your post, the easiest way is to switch to the HTML editor and cut and paste that shortcode.

10. If your theme supports post formats, toggle the “Gallery” radio button on. That way your gallery can take advantage of any special design features your theme has for galleries.

gallery post format
Figure 10: If you see a box like this with a list of post formats, select the one that says “gallery” to help WordPress display your gallery better. If you don’t see a box like this, then either your theme doesn’t support post formats or you are using an outdated version of WordPress and need to upgrade.

Note: WordPress introduced post formats in 2011 with WordPress 3.1. They’re designed to help display certain kinds of content in special ways, much the way Tumblr does.

Older themes may not support post formats, or may support them in a different way. The Coraline theme from Automattic supports Gallery and Aside post formats, but you have to designate categories in the theme options in order to use them. If you’re inserting a gallery in the Coraline theme, be sure to choose the right category.

gallery category in Coraline theme
Figure 11: To activate the gallery post format in the Coraline theme, you have to assign a category to it. Before you can assign the category, you need to go to Posts –> Categories and create it.
check gallery category
Figure 12: Once you’ve set up the gallery category, remember to select it when creating your post.

If your theme doesn’t support post formats, don’t worry. The gallery itself will display just fine. The main difference will be in the way the post excerpt appears on the blog index page.

11. And now for the last crucial step: publish the post or page.

publish button
Figure 13: Click Publish (or Update) to share your gallery with your readers.

Your gallery appears as a grid of neatly arranged thumbnails in the single post display.

gallery post in the Coraline theme
Figure 14: Three-column gallery of 150 x 150 pixel thumbnails in the Coraline theme, designed in 2010.

WordPress galleries appear much the same from theme to theme, unless the designer has included special CSS (styling instructions) for galleries. A gallery inserted into a post in Coraline (Figure 14, above) looks much like a gallery inserted into a post in Twenty Eleven (Figure 15, below). Well—except for the fact that the photos have different subjects.

lolcat gallery
Figure 15: Another three-column gallery of 150 x 150 pixel thumbnail images, this time in the Twenty Eleven theme designed for WordPress 3.2 in—you guessed it—2011.

And, in fact, a WordPress gallery looks just the same in a theme designed long before post formats were even imagined. The basic gallery display has been the same since 2005. Fancying it up has been the job of plugin designers and sometimes theme designers.

Gallery Post Formats Change the Post, Not the Gallery

If WordPress galleries themselves look the same in themes that support the gallery post format and those that don’t, what does the gallery post format actually do?

First, it gives the designer the opportunity to make the rest of the post look different from other kinds of posts—making it a full-width post where a standard post has a sidebar, for instance, or giving it a particular background color.

Second, it changes the way the post appears in the blog index (the home page). The themes used for the screenshots above both show post excerpts in the blog index. For a standard post, the excerpt is just a few lines of unformatted text. That’s not very helpful for a gallery, so a gallery post excerpt is set up to work a little differently. Even when a theme doesn’t show thumbnail images with excerpts of standard posts, gallery posts use thumbnails for excerpts, then tell you how many images are in the gallery.

gallery archive page
Figure 16: Coraline puts a box (like the caption box) around the thumbnail image it uses in its post excerpt, and includes a link to “more galleries.”
gallery posts on the Twenty Eleven blog index
Figure 17: The Twenty Eleven excerpt has a label above it saying “Gallery.” There’s no box around the thumbnail and no link to other galleries. These differences are style choices made by the theme designers.

If galleries are important to you, check out the way a theme handles the gallery post format in the demo before you decide to use it. Sure, you can hack the theme or install a plugin to change it, but the better it works in the first place, the better off you are.

For the Experts: Gallery Shortcodes

In earlier versions of WordPress, the only way to insert a gallery was with the shortcode [gallery] (remove one set of square brackets to actually use). Used by itself (you can type it into either the visual editor or the HTML editor), the “gallery” shortcode will display a gallery of all images attached to that post or page.

But you can do more, because shortcodes come with options. In fact, the “gallery”shortcode comes with more options than you have when you insert a gallery through the file upload screen. The options associated with the “gallery” shortcode are:

  • columns: number of columns in the gallery.
  • id: ID of the post whose images you want to display. It does not have to be the post you’re putting the gallery into. You can find the post ID by hovering over the post title in the All Posts list and looking down into the lower left corner. You’ll see a small popup that says something like [code]”http://your.domain.com/wp-admin/post.php?post=ID&action=edit,”[/code] except there will be a number after the “post=” instead of the word “ID”. That’s the post ID number.
  • size: the image size to use for the thumbnail grid: thumbnail, medium, large, or full. The default is “thumbnail.”
  • orderby: the criterion for ordering images. The choices are menu_order, date, title, ID, and RAND.
  • order: ASC (ascending) or DESC (descending).
  • link: determines whether the thumbnails link to full-size images (file) or attachment pages (attachment).
  • include: tells the gallery to include specific attachment (image) IDs. You find these by going into the WordPress Media Library and hovering over the image title. A popup appears in the lower left corner of the browser, the same way it did to show you the post ID.
  • exclude: tells the gallery to exclude specific attachment (image) IDs. You can use either the “include” or the “exclude” option in one shortcode, but not both.

So if you wanted to insert a gallery that used a single column of large images, ordered by ID, and including attachments 17, 18, 19, 25, 26, 27, 34, 35, 36 (from three different posts), the shortcode would look like this:

[gallery columns="1" size="large" orderby="ID" order="ASC" link="attachment" include="17, 18, 19, 25, 26, 27, 34, 35, 36"]

And then there are the really geeky options that probably won’t be of interest to anyone but theme designers:

  • itemtag: the type of (X)HTML tag used to enclose each item in the gallery. The default is “dl”, which is “definition list.”
  • icontag: the tag used to enclose each thumbnail image. The default is “dt”, or “definition term.”
  • captiontag: the tag used to enclose the caption for each thumbnail. The default is “dd” or “definition definition.”

A designer might want to change these if definition lists are going to be important in the theme, but ordinary people can safely ignore them.

(All this shortcode info comes from the WordPress Codex.)

Related Items

  • WP Remix banner
    Theme Options vs. Plugins for Controlling WordPress Features and Functions
  • It’s WordPress Plugin Developer Donation Day!
  • Cover of Building a WordPress Blog People Want to Read by Scott McNulty
    Building a WordPress Blog People Want to Read

Share this post:

Share on Twitter Share on Facebook Share on Pinterest Share on LinkedIn Share on Email

Filed Under: Using WordPress Tagged With: Galleries, Tutorial

Reader Interactions

Comments

  1. Micah..BlackLight says

    February 27, 2012 at 10:29 pm

    thank you SO MUCH for posting this! sheesh! I was runnin myself nuts trying to figure it all out.. you’ve saved me a LOT of trouble..

  2. Nicolas says

    June 2, 2012 at 11:07 pm

    Well done indeed !
    Thanks.

    • Sallie says

      June 3, 2012 at 8:48 am

      Thanks, Nicolas. You have some nice galleries on your site. WordPress 3.4 will include the ability to put links in your captions, an improvement we’ve needed for a long time.

Primary Sidebar

What I Write About

  • Book Reviews
  • Content Strategy
  • Design
  • Hosting and Servers
  • Most Valuable Plugins
  • There's a Plugin for That
  • Using WordPress
  • Widgets
  • WordPress Consulting
  • WordPress Events

Series

  • Interviews (5)
  • Checking Up on Your Website (4)
  • Client from Hell (5)
  • WordCamps (17)
  • WP-Tonic Roundtable (30)
  • Modern Tribe Tutorials (13)

Follow Sallie on Twitter

    Sorry, no Tweets were found.

RSS Latest News from the East Bay WordPress Meetup

  • Does It Work? Using The New CSS Layout with Rachel Andrew
    Things change rapidly in the WordPress world. The content in this post is more than a year old and may no longer represent best practices.Description Over the past two years, […] The post Does It Work? Using The New CSS Layout with Rachel Andrew appeared first on East Bay WordPress Meetup.
  • Speaker Training
    Get the workbook and slides for the October 2019 speaker training, plus background and pro tips. The post Speaker Training appeared first on East Bay WordPress Meetup.
  • SEO Audit Template & Resources
    Our November speaker, John Locke, graciously provided a template for an SEO audit report. You can download it as a Microsoft Word or PDF document. The post SEO Audit Template & Resources appeared first on East Bay WordPress Meetup.

Footer

Contact Info

2063 Main St #133 · Oakley, CA 94561

+1 (510) 969-9947

author-izer

sallie [at] wpfangirl [dot] com

Location

Map of East Contra Costa County

I live in Oakley, CA and run a WordPress Meetup in Oakland, CA. Don't confuse them!

Subscribe for New Posts

  • Since I blog on an unpredictable schedule, you might want to subscribe by email. I'll also send out occasional announcements about events.

  • Privacy Policy: I will never sell or rent your contact information.

  • This field is for validation purposes and should be left unchanged.
  • Contact
  • Colophon
  • Comment Policy
  • Privacy Policy
  • Five for the Future

Copyright © 2023 · Utility Pro on Genesis Framework · WordPress · Log in

MENU
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact