Friday, August 1, 2008

Blogspot image captions

Why is it so hard to do image captions on blogs?

Apparently because it's strangely hard to do image captions in HTML*.

Google it and you get "hems" and "hahs" and "TIMTOWTDI" responses.

This site recommends tables or CSS. Unfortunately CSS is awkward with blogs since the blog usually already has a bunch of styles defined, and some HTML (like "<br clear="all" />") gets stripped by blogspot as soon as it's posted. Grr.

So here's their recommendation, tweaked by me:
<table align="center">
<caption align="bottom"> caption text </caption>
<tr><td> <img ...> </td></tr>
</table>
And it looks like this:


A weird moth we saw on our Varsity/Venture High Adventure Campout
DSCF4097.jpg

"What is that mess? Code?!" - Love, Mom.

Okay, mom, I'll admit us computer types haven't made it perfectly easy for you yet...

Yes, that's a simple table in HTML code, which is the way we make web pages look better than just a bunch of words strung together. To use it in Blogspot, just insert your image like you always do (with no alignment), then switch to "Edit HTML" mode and copy/paste my code up there into your blog. Then replace the <img ...> tag in my code with the mess that blogspot entered in there for you (probably starting with "<a onblur...." and ending with "</a>").*

Change the caption and you're set.


This guy is just a little bigger than a quarter...
DSCF4098.jpg

Other tips

When you're in HTML editing mode, you'll probably want to enter a word or two in front of the <table> tag, and also after the </table> tag. This will make it easier when you switch back to "Compose" mode to just click on the text and continue typing.

Also, if you change that align="center" to align="right" in the table tag, you can push it off to the right (or left) of the flowed text.

Hope that helps -- enjoy!
* 10 second HTML tutorial: HTML is mostly just plain text with "tags" mixed in to change the formatting. Tags start with "<" and end with ">", and usually come in pairs, e.g. to bold some "text", you'd enter this in html: <b>text</b> (that's how I bolded my image caption). The closing tag is differentiated with a "/" in front of the tag name.

3 comments:

Chloe Smethurst said...

thankyou! worked a treat

Nate said...

Sweet! Thanks, this is exactly what I needed.

jpdatuin said...

Thx man! This is what I need!

Does anyone read this thing?

views since Feb. 9, 2008