WordPress 3 Complete — Save 50%
Create your own complete website or blog from scratch with 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:
- Choose a post or page for your image gallery.
- Upload the images you want in that gallery.
- Add the special code to the page or post, and save it.
|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:
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.).
Now click on the Upload/Insert image icon and upload some photos (you can choose multiple photos at once).
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:
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:
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.
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:
If you're in the HTML view, you'll see the gallery shortcode in that spot:
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:
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:
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:
In this article we saw how to add and manage built-in image galleries to display photos and other images.
- WordPress 3 Complete [Book]
- WordPress 2.9 E-Commerce [Book]
- Getting Started with WordPress 3 [Article]
- How to Write a Widget in WordPress 3 [Article]
- Understanding jQuery and WordPress Together [Article]
- Tips and Tricks for Working with jQuery and WordPress [Article]
eBook Price: $23.99
Book Price: $39.99
About the Author :
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.