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.

A couple blog-related updates

The WordPress crew released an update to the blogging engine this past week, so I’ve updated to their latest version as of this morning. I’d run through the update on my development box at home ahead of actually updating the real blog, so the upgrade itself went flawlessly and took less than 5 minutes. The major changes that appear to be of interest to me are post revisioning, captioning on images, and some significant improvements in its handling of images. Most of the changes are on the administrative side, but a couple of those should make it easier for me to get back to work on getting some of our China pix posted. I’ve also updated to the latest jQuery library under the hood, as well, primarily for the speed improvements and bugfixes incorporated since I first began using it here.

For the curious, you can find more on the update here and here.

Blog traffic stats for June: 124 unique visitors, 329 page views, 227 visits.

Blog Stats for March 2008

I use Google’s Analytics to track traffic on my blog; in response to a question posed by a friend in a conversation this week, here is a summary of the traffic during March 2008:

  • 631 visits by 281 unique visitors from 39 different countries and from 34 states in the US
  • 1,478 page views
  • Firefox accounted for 55% of the visits, with Internet Explorer accounting for 38%, and Safari about 4%

Upgraded to WordPress 2.5

As of this morning, I’ve upgraded to the new version of WordPress (version 2.5), released just this past weekend. Most of the changes in this version — although significant — are either under the hood or within the administrative side of things. The one significant change that pushed me to upgrade so soon after release is the built-in support for image galleries. I’ll be playing with that as a means of sharing some of the pix from our recent China trip.