How to Create an Image Gallery in WordPress 3

Exclusive offer: get 50% off this eBook here
WordPress 3 Complete

WordPress 3 Complete — Save 50%

Create your own complete website or blog from scratch with WordPress

$23.99    $12.00
by April Hodge Silver | January 2011 | Open Source WordPress

In this article by April Hodge Silver, author of WordPress 3 Complete, we will see how to add and manage built-in image galleries to display photos and other images.

You can add an image gallery to any page or post in your website using WordPress's built-in Image Gallery functionality. There are just three simple steps:

  1. Choose a post or page for your image gallery.
  2. Upload the images you want in that gallery.
  3. Add the special code to the page or post, and save it.

 

WordPress 3 Complete

WordPress 3 Complete

Create your own complete website or blog from scratch with WordPress

  • Learn everything you need for creating your own feature-rich website or blog from scratch
  • Clear and practical explanations of all aspects of WordPress
  • In-depth coverage of installation, themes, plugins, and syndication
  • Explore WordPress as a fully functional content management system
  • Clear, easy-to-follow, concise; rich with examples and screenshots
        Read more about this book      

(For more resources on Wordpress, see here.)

Let's get started.

Choosing a post or page

For my food blog, I'm going to create a new page named My Food Photos for my image gallery. You can always do this on an existing page or post. Following is my new page:

WordPress 3 Complete

Note where I have left my cursor. I made sure to leave it in a spot on the page where I want my gallery to appear, that is, underneath my introductory text (After creating this page, I will also navigate to Appearance | Menus to add it as a subpage under About.).

Uploading images

Now click on the Upload/Insert image icon and upload some photos (you can choose multiple photos at once).

WordPress 3 Complete

For each photo you upload, enter the title (and a caption if you'd like). When you're done, click on the Save All Changes button. You'll be taken to the Gallery tab, which will show all of the photos you've uploaded to be attached to this page:

WordPress 3 Complete

If you want to upload more photos at this point, just click on the From Computer tab at the top, and upload another photo.

When you've uploaded all the photos you want (you can add more later), you may want to change the order of the photos. Just enter the numbers 1 through 6 (or however many photos you have) in the Order column:

WordPress 3 Complete

Make sure you click Save All Changes.

On most computers, you can, instead of entering numbers, simply drag-and-drop images. WordPress will then generate the order numbers for you automatically.

WordPress 3 Complete

Then, you can review the Gallery Settings. There are a number of ways to use the gallery, but there is a single approach that I've found works for most people. You can experiment on your own with other settings and plugins, of course! I suggest you set Link thumbnails to to be Image File instead of Attachment Page. You can leave the other settings as they are for now.

Once all of your settings are done, click on the Insert gallery button. This overlay box will disappear, and you'll see your post again. The page will have the gallery icon placeholder in the spot where you left the cursor, as seen in the following screenshot:

WordPress 3 Complete

If you're in the HTML view, you'll see the gallery shortcode in that spot:

WordPress 3 Complete

Note that because I'm uploading these photos while adding/editing this particular page, all of these photos will be "attached" to this page. That's how I know they'll be in the gallery on this page. Other photos that I've uploaded to other posts or pages will not be included in this gallery.

Learning moreThe [gallery] shortcode is quite powerful! For example, you can actually give it a list of Media ID numbers—any Media item in your Media Library—to include, or you can tell it to just exclude certain items that are attached to this post or page. You can also control how the Thumbnail version of each image shows whether the medium or large. There is more! Take a look at the codex to get all of the parameters: http://codex.wordpress.org/Gallery_Shortcode

Now, publish or save your page. When you view the page, there's a gallery of your images as follows:

WordPress 3 Complete

If you click on one of the images, you'll be linked to the larger version of the image. Now, this is not ideal for navigating through a gallery of images. Let's add a plugin that will streamline your gallery.

Using a lightbox plugin

A lightbox effect is when the existing page content fades a little and a new item appears on top of the existing page. You've seen this effect already in the WP Admin when you clicked on Add/Insert image. We can easily add the same effect to your galleries by adding a plugin. There are a number of lightbox plugins available, but the one I like these days uses jQuery Colorbox. Find this plugin, either through the WP Admin or in the Plugins Repository (http://wordpress.org/extend/plugins/jquery-colorbox/), and install it.

Once you've activated the plugin, navigate to Settings | jQuery Colorbox:

WordPress 3 Complete

Use the Theme pull-down to choose the theme you want (the preview image will update to give you an idea of what it will look like); I've chosen Theme #4. Then you can choose to either Automate jQuery Colorbox for all images or Automate jQuery Colorbox for images in WordPress galleries. You can choose whether to automate for all images; I certainly suggest you automate for images in galleries. You can experiment with the other settings on this page (if you routinely upload very large images, you'll want to use the areas that let you set the maximum size of the colorbox and resize images automatically). You'll want to disable the warning (the very last check box on the page). Then, click on Save Changes.

Now, when I go to my image gallery page and click on the first image, the colorbox is activated, and I can click Next and Back to navigate through the images:

WordPress 3 Complete

Summary

In this article we saw how to add and manage built-in image galleries to display photos and other images.


Further resources on this subject:


WordPress 3 Complete Create your own complete website or blog from scratch with WordPress
Published: January 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


April Hodge Silver

April has been designing and developing new web sites from scratch since 1999, just before her graduation from Columbia University. Early in her career, she worked for several web companies and startups, including DoubleClick and About.com. Since 2004, she has been self-employed through her company Springthistle Design and has worked with a staggering variety of companies, non-profits, and individuals to realize their web site dreams. In her professional work, April's focus is always on usability, efficiency, flexibility, clean design, and client happiness. WordPress is the best solution for many of Springthistle's Clients, though April also develops custom web applications using PHP and MySQL. More about April's professional work at http://springthistle.com

In her free time, April enjoys developing recipes in the kitchen, bicycling, and relaxing with her daughter, dog, and darlin wife.

Books From Packt


WordPress Plugin Development: Beginner's Guide
WordPress Plugin Development: Beginner's Guide

WordPress 3.0 jQuery
WordPress 3.0 jQuery

WordPress 3 Site Blueprints
WordPress 3 Site Blueprints

WordPress 2.8 Themes Cookbook
WordPress 2.8 Themes Cookbook

WordPress Complete
WordPress Complete

WordPress 3.0 Ultimate Security
WordPress 3.0 Ultimate Security

WordPress and Flash 10x Cookbook
WordPress and Flash 10x Cookbook

WordPress MU 2.8: Beginner's Guide
WordPress MU 2.8: Beginner's Guide


Your rating: None Average: 1 (1 vote)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
C
B
k
C
b
k
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software