Putting captioned images side-by-side in Blogger

Dealing with multiple images side-by-side is a long-standing and hopefully-someday-will-be-resolved feature request for Blogger, but you can do it pretty easily right now with Blogger in Draft and a tiny bit of playing with Edit HTML.

Here’s the result we’re going for:

Old design: Footer full of badges

New design: Footer full of blog stuff

Shiny, no? Here’s how to do it:

1. Upload both photos to Blogger. Leave them centered, but change their size down to small. (You may have a wider post column than mine and be able to leave them at medium.) You’ll want them placed one after the other.
2. Add a caption to each photo. This is a feature that’s being tested out on Blogger in Draft, so you’ll need to go there to use it. Just click the “Add caption” link in the photo’s tools bubble.
3. Switch to Edit HTML and find the <table> code. Now things start to get tricky.
4. Copy each <td> from the second <table> into the first. There’ll be one <td> for the image and one for the caption. Cut each one from the second image and paste it after the corresponding </td> in the first image. (See screenshots below.)
5. Delete the second <table>. You can get rid of the now-empty second table.

Copy the second image’s <td>…

…into the first table.

You can also do this without adding the captions but then you have to make your own <table> If you go this route, add class="tr-caption-container" to it to get the nice image borders around the whole thing in the new templates. (Though looking at it now the padding is a little weird; I might update the templates to be better in this situation.)

(Can you tell I just shipped a big feature and now have more time to play with my blog?)