You can also use the WordPress Add an Image window to insert a full photo gallery into your posts. Upload all your images; then instead of clicking the Insert into Post button, click the Save All Changes button at the bottom of the Add an Image window (refer to Figure 3-1), and then click the Gallery link at the top of the Add an Image window (the Gallery link appears only on posts that have images uploaded to it). (See Figure 3-5.) This tab displays thumbnails of all the images you uploaded for your post.
Follow these steps to insert a photo gallery into a blog post:
Type the number of the sequence in which you want this image displayed. (If you want this image displayed first, for example, type the number 1.)
You can specify the following options:
All the changes you made to each individual image listed in the gallery are saved.
WordPress inserts into your post a piece of short code that looks like this: [gallery].
Table 3-2 shows some gallery short codes that you can use to manually specify the display settings for your photo gallery.
Use the WordPress gallery short code to change different aspects of the display of the gallery in your post, such as the caption, order of image appearance and HTML markup tags that help you control the style of the gallery within your CSS file:
Gallery Short Code | Output |
[gallery columns=“4” size=“medium”] | A four-column gallery containing medium-sized images |
[gallery columns=“10” id=“215” size=“thumbnail”] | A ten-column gallery containing thumbnail images pulled from the blog post with the ID 215 |
[gallery captiontag=“p” icontag=“span”] | A three-column (default) gallery in which each image is surrounded by <span></span> tags and the image caption is surrounded by <p></p> tags |
The <span> tags create an inline element. An element contained within a <span> tag stays on the same line as the element before it; there's no line break. You need a little knowledge of CSS to alter the <span> tags. Click the Design tab in your WordPress Dashboard, and then click the Theme Editor subtab to edit the stylesheet for your theme. Here's an example of what you can add to the stylesheet (style.css) for your current theme:
span.gallery-icon img { padding: 3px; background: white; border: 1px solid black; margin: 0 5px }
Placing this bit of CSS in the stylesheet (style.css) of your active theme automatically places a 1-pixel black border around each thumbnail, with 3 pixels of padding and a white background. The left and right margins are 5 pixels wide, creating nice spacing between images in the gallery.
Here are a handful of great gallery plugins:
Figure 3-6 shows Lisa's post with her photo gallery displayed, using the preceding steps and CSS example in the default WordPress theme: Twenty Ten. This code is the gallery short code that she used for the gallery shown in Figure 3-6 — [gallery icontag=“span” size=“thumbnail”].
Matt Mullenweg, cofounder of the WordPress platform, created a very extensive photo gallery by using the built-in gallery options in WordPress. Check out the fabulous photo gallery at http://ma.tt/category/gallery, as shown in Figure 3-7.