Captioning in WordPress 2.6

One of the changes made with WordPress 2.6 is support for captions on images within posts. Having recently upgraded this blog to the current version of WordPress, I was curious to see how big a deal it would be to provide appropriate styling for those captions in the resulting markup for a captioned image. What I found: it was simple.

WordPress now wraps the inserted image with a DIV with a couple of classes (wp-caption and a class specifying the alignment), and follows the image’s IMG tag with a paragraph classed with wp-caption-text. The image’s IMG tag is also classed, but the purposes of this discussion, that won’t matter. The alignment classes on the wrapping DIV are alignright, alignleft, and aligncenter; these are the same classes that have been used to specify image alignment in the past, so we’ll want to make sure we don’t clobber any style attributes already applied to those classes lest we goof up the appearance of posts authored under previous verions of WordPress.

In previous versions, WordPress used those same classes (alignright, alignleft, aligncenter) to specify the alignment for the images; the difference now is that those classes are applied to the enclosing DIV elements rather than the image itself. In my existing stylesheet, I have already defined the following CSS to float the images to the appropriate side:

.alignright { float: right; }
.alignleft { float: left; }

By leaving those generic, images in posts authored with the earlier WordPress versions will still be positioned appropriately and the enclosing DIV will be positioned appropriately, while allowing the text of the post to flow around the image and the accompanying caption, in posts from the new version. (Centered images aren’t floated, but are “centered” based on the margins applied to the DIV, as shown below; note the use of the auto left and right margins.)

The other item to note in looking at the markup applied when we insert an image is that both the image’s IMG tag and the wrapping DIV have widths specified (the IMG via the width attribute, and the DIV via an inline style attribute). The DIV‘s width is set to be 10 pixels larger than the image’s width.

In my theme, I’ve provided a subtle border and a bit of whitespace around images, and I wanted to retain that same basic appearance with the new layout. I also wanted the caption text to now appear inside that border and for the caption text to be a slightly smaller size than the page’s body text.

Enough, already! Let’s see both the necessary entries in the CSS and the results…

div.wp-caption { border: 2px solid #e4e4e4; padding: 0; background: #f0f0f0; }
div.wp-caption img { margin: 5px; }
p.wp-caption-text { font-size: 0.9em; margin: 0 5px 5px 5px; }
div.alignleft { margin: 0 0.8em 0.5em 0; }
div.alignright { margin: 0 0 0.5em 0.8em; }
div.aligncenter { margin: 0 auto 0.5em auto; }
Li enjoying a juice-break on her first camping trip (July 2008)
Li enjoying a juice-break on her first camping trip (July 2008)

And here’s the result. We’ll add some filler text and an image with a caption as an illustration. Integer id massa non purus pretium consectetuer. Donec volutpat mollis tortor. Maecenas orci turpis, venenatis nec, dignissim in, cursus eget, nulla. Nam condimentum, orci ac fermentum iaculis, justo nunc consequat pede, adipiscing hendrerit lacus orci vulputate nisl. Etiam consectetuer justo quis pede. Duis arcu nisi, fringilla sit amet, dignissim ut, vulputate quis, velit. Morbi metus. Donec diam justo, porttitor vitae, ultrices ut, auctor nec, sem. Fusce fermentum risus vitae justo. Cras feugiat justo non turpis ultrices pellentesque. Nam diam justo, convallis ac, euismod quis, ultricies rutrum, quam. In quis ipsum. Quisque imperdiet. Curabitur et orci in urna lacinia placerat. Aliquam erat volutpat. Sed lobortis. Mauris quis est a lorem tincidunt mollis. Duis pellentesque accumsan nulla. Nam tempus.

Comments? Got a better way? See a problem? Let me know.