Styling image galleries - WordPress 2.8 Themes Cookbook

Styling individual images is great when a user is uploading one or two images and manually inserting them. However, WordPress' real image-displaying prowess comes in the form of its gallery capabilities.

A WordPress gallery is output by using the gallery shortcode within a post. It collects all of the images attached to a post via the media uploader, and then outputs them using standard markup. Because the markup is consistent, styling it is easy.

Getting started

For this recipe, you need to have a basic theme created already. It should include a page.php or single.php file that displays full post content. If you don't have one, use the Default WordPress theme as a guide, or visit http://codex.wordpress.com/

Theme_Development to learn more.

How to do it...

First, we need to open up the theme's style.css file and place our cursor just after the introductory comment. Then insert the following class declarations:

.gallery {

border: 1px solid #f88;

}

.gallery-item { background: #000;

}

.gallery-icon {

border: 1px solid #fff;

}

.gallery-caption {

border: 1px solid #00f;

}

These style declarations will allow you to see where the different parts of the gallery markup start and end, so you can further style them as you wish. To see the gallery styles in action, you'll need to create a gallery. Go to the administrative interface, and create a new post. Click

After clicking on the Save changes button, you'll be presented with the gallery settings, as shown in the following screenshot:

Select your desired gallery settings, and then click on the Insert gallery button. Something similar to the following markup will be sent to your post editor:

[gallery columns="2"]

After this has been inserted into the post editor, publish the post, and then view it in your theme. You should see something similar to the following screenshot:

How it works...

To understand how to style a gallery appropriately, we first have to understand how the gallery markup is output in the first place, and what exactly that markup looks like. Let's start with how it is generated and output.

When WordPress sees the shortcode [gallery] inside of a post's content, it auto-expands this, based on the images attached to that post. This expansion happens inside the

gallery_shortcode function found in wp-includes/media.php.

The gallery_shortcode function does a few things when it is invoked. First, it determines if the post that the gallery is being called for has any image attachments. If it does, then the function starts to generate output. The output starts with a style tag that declares some basic layout information about the gallery. These styles include margin, width, and border declarations for the main elements of the gallery, and were defined in the style.css file earlier in the example.

Then, the function iterates over each of the image attachments, and outputs an HTML tag for it. The tag can be changed through the use of shortcode parameters, but the class attributes used in the tags will always be the same. The pertinent classes to pay attention to are:

gallery gallery-item gallery-icon gallery-caption

So, at the very least, you should style these elements. After all of the image attachments have been iterated over, the gallery_shortcode function returns the HTML that has been produced, and this HTML is inserted wherever the gallery_shortcode is present in the post content.

For a simple four image, two-column gallery, the output would look something like this:

#gallery-1 { margin: auto;

}

#gallery-1 .gallery-item { float: left;

#gallery-1 .gallery-caption { margin-left: 0;

}

</style>

<a href='' title='Hydrangeas'><img width="150" height="150"

src="" class="attachment-thumbnail" alt="" title="Hydrangeas" /></a>

</dt>

</dl>

<a href='' title='Jellyfish'><img width="150" height="150"

src="" class="attachment-thumbnail" alt="" title="Jellyfish" /></a>

</dt>

</dl>

<a href='' title='Koala'><img width="150" height="150" src=""

class="attachment-thumbnail" alt="" title="Koala" /></a>

</dt>

</dl>

<a href='' title='Lighthouse'><img width="150" height="150"

src="" class="attachment-thumbnail" alt="" title="Lighthouse" /></a>

</dt>

</dl>

</div>

Please keep in mind that the previous sample uses the default tags for gallery items, captions, and icons. These tags can be changed by changing the shortcode attributes. To learn more about this and all the parameters that a user can change in their gallery shortcode, see http://codex.wordpress.org/Gallery_Shortcode.

Dans le document WordPress 2.8 Themes Cookbook (Page 170-173)