Wednesday, November 18, 2009

Even Easier Image Formatting / Text Wrapping in Blogger

Blogger has improved their composition form quite a bit.  The esoteric method I posted previously of matching text with images can be done with a much easier process now.

First, the intent:  You have multiple photos you want to write about, and you want the text for each photo to show up next to the photo in question.  Here is an example of where I have done this.

Here's how to do it.  Start with a new post, and add an image.  Click the "left" link on the image control bar to move it to the left of the screen.  Now enter some text to go with that image.  Okay, here's the scary part... I know you can do it.  Be brave.  Click the "Edit HTML" tab above the compose window.  What you will see are two blocks of text, both surrounded by DIV tags.  One is the image and the other is the text you entered.  "Cut" the text you entered from within the second div (leave the <div> and </div> tags there) and paste the text just before the </div> tag surrounding the image.  That's it.  Go back to "Compose" and that text should be locked to the image now.  Repeat for as many photos as you would like.

One final note.  Don't be surprised when Blogger rewrites your HTML to its own purposes.  The intent of the formatting seems to stick even if the gubbins move around.

No comments:

Post a Comment