The WordPress Gallery

Posted on Friday, June 26th, 2009 at 12:31 pm in

The native WordPress Gallery feature allows you to add a simple image gallery to a Post or Page on your blog. However, there seems to be very little documentation on using the Gallery in the WordPress Codex, so here’s a quick how-to.

How To Create A WordPress Gallery

Upload your images — using the “Add an Image” option — whilst editing/creating the post (or page) that will contain the final gallery.

This is crucial!

Uploading images whilst working on a page allows WordPress to create a direct association between each image and its parent page. It is this association that is used to create your gallery.

Tip:

When creating a gallery, try to ensure that the images you’re uploading are all roughly the same size (e.g. 1000 pixels wide by 750 pixels high). The final gallery of thumbnails will look a lot neater as a result.

Once the images have all been uploaded, check that each image has a human-readable title. No titles like abc2864.jpg, please. Give your images real titles like “My Dog” or “Roses”. If you have made changes to the image titles, remember to select “Save All changes” to record your amendments.

Now close the Media Interface and go back to your post/page content. Place your cursor where you would like your new gallery to appear – leaving one blank line before (and after) your cursor and any text.

Select “Add an Image” again. Scroll down to the bottom of the Media interface to the Gallery Settings section.

Link thumbnails to:
  • Image File: When people click on the small image, the raw full size image will be displayed
  • Attachment Page: When people click on the small image, a larger version will be shown within its own WordPress page
Order images by:
  • Menu order: Display images in the same order as they appear in the Media interface. You can change the order of the images using the Order box. Insert a number next for each image, then select “Save all changes”. The images will be re-arranged into your preferred menu order.
  • Title: Order by image title
  • Date/Time: Order by upload time
  • Random:
Order:
  • Ascending: From A to Z or 1 to 9
  • Descending: From Z to A or 9 down to 1
Gallery columns:
How images do you want in each gallery row? To display 4 images in a row, enter “4”. However, bear in mind that your design may not accomodate that many images in a line and that you may have to try again if the gallery doesn’t look so good.

When you have finished entering your Gallery Settings, select “Insert gallery”. Then save your updated post, or page.

If you want to achieve the reverse and keep an image out of a gallery, see Avoid Adding Images to a WordPress Gallery.

If you found this article useful or think we’ve missed something, please leave a comment.

10 Comments

  1. CAnderson - August 22, 2009 at 10:14 pm

    This has just saved my sanity. Works GREAT now that I know how it works.

  2. Joke De Winter - February 17, 2010 at 1:54 pm

    Excellent post, really useful. It should be added to the WordPress codex.

    Is their a way to have the attachment page display the original content of the page on which the gallery was? Or even have a link back to the previous page, or better still “previous” and “next” links to cycle through the gallery?

    • Mel - February 24, 2010 at 11:53 am

      Adding it to the Codex is on my ToDo list.

      It should be possible to display the content of the parent page using a custom query based on the post parent but that’s not something I’ve tried yet.

      This theme (and the original Sun City theme) display links back to the parent page or post. And offer next and previous image links via the next_image_link and previous_image_link template tags.

  3. Turid - May 3, 2010 at 2:29 pm

    It’s such an easy task when explained in human language. Thank you, thank you, thank you!

  4. Rich Sweeney - June 20, 2010 at 4:43 am

    I can’t seem to get my file to display. I created a file in indesign, exported to a pdf, opened up in photoshop, then exported as a .gif,jpeg,bmp and all I can get is an x sign. All are rbg. I am using the lasted word press version, and W7

    • Mel - June 21, 2010 at 1:10 pm

      I’d suggest posting on the WordPress support forums – preferably with a link to a page on your site that displays the broken image. It’s probably an image path issue but it will need a little bit of investigation first to confirm this.

  5. kmaier - August 24, 2010 at 5:19 pm

    i am not seeing any “Gallery Settings” when i do this. working in 3.0

    Select “Add an Image” again. Scroll down to the bottom of the Media interface to the Gallery Settings section.

  6. Jesse Stormer - December 23, 2010 at 6:14 am

    In addition, turn off extensions and plug-ins in your browser. took me a solid day to figure out that a crappy ‘better-pop up blocker’ was not allowing me to click ‘insert gallery’

  7. Brenda - August 26, 2011 at 1:57 pm

    Is there a way to link to the “large” image instead of the “raw full size image”? A filter? Any help would be appreciated.

    • Mel - August 30, 2011 at 9:29 pm

      Not without a plugin, no – although you can control which image is displayed via your theme’s image.php template file if you chose “Link To Post Url”.

Sorry, the comment form is closed.

WordPress Theme Development

Top