Blogger Tip: Wrapping Text Specific to Multiple Images

One thing I've struggled with in my blog is the ability to post multiple images and have text roughly aligned with each image. That way I can actually write about the image that's next to the text.

It's going to take some html changes. Don't be scared. You can do this.

If you don't know what html is, don't worry. It's the language that a web browser (Internet Explorer, Firefox, etc.) uses to know where and how to put stuff on the page you are viewing. Html "tags" tell when to start and stop a particular format. The starts look like <this> and the stops look like </this>. Got it? Good, because you don't need to know any of this. Read on.

Here's the quick list of what we're going to do:

1. Load an image into the post
2. Add some text to go with the image
   
3. Add a snippet of html before the image
4. Add a snippet of html after the text

So start by composing a new blog entry and import an image into it. Just for grins at this point, click the "Edit Html" tab in the upper right of the compose window. The code for the image is a big scary block of html that starts with <a onblur="try... and ends with ...border="></a>. It should be about 5 or 6 lines total. Again, you don't need to understand it... you just need to be able to find the <a> at the end.
Okay, so switch back to "compose" mode (upper right tab) and add some text to the post. Now, switch back to "Edit Html." If you entered your text to the right of the image if should show up after the </a> part. That's good. That's what we want. Now find the end of your text. That should be pretty easy to do. Got it? Great. Guess what... we're half way there.

Okay, here's the fun part. Go back to the html and find the beginning of the image code again. Right before the <a paste this code:

<table style="border: medium none ;"><tbody><tr><td valign="top" width="100%">

Good, now go to the end of your text and paste this code in:

</td></tr></tbody></table>

Good. Now go back to "compose" mode and look at it. Okay, so it's not so impressive.... yet. The trick of this is that those code blocks can be repeated to get the text to stay with the relevant image. Each separate picture and the associated text is surrounded by its own "table" tag. This way, the browser knows to keep them separate. The post immediately below this one is a good example of two pictures with associated text.

Here is the updated post html, the parts I added are red. Since there are two pictures there are two "table" tags included, as you can see below:

<table style="border: medium none ;"><tbody><tr><td valign="top" width="100%"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoSWLwihwZWVfFdR_DapsP5f3wDUbiWr0t_LeV3-g3a2OUf4G1rmRD4IKmcPON4WyrOjBmpKTtJaUArTPHFxwFUTVYixn_o_DVPgv6ohDcla-fUPls9GS7GQd6T3AbyvYzoGIM/s1600-h/wip1.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 320px; height: 243px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoSWLwihwZWVfFdR_DapsP5f3wDUbiWr0t_LeV3-g3a2OUf4G1rmRD4IKmcPON4WyrOjBmpKTtJaUArTPHFxwFUTVYixn_o_DVPgv6ohDcla-fUPls9GS7GQd6T3AbyvYzoGIM/s320/wip1.jpg" alt="" id="BLOGGER_PHOTO_ID_5319591784571512354" border="0" /></a>Hmm. The title sounds like "Kibbles and Bits"... Menites and Kans, Menites and Kans, I'm gonna get me some Menites and Kans.

But anyhoo.... I converted a Killa Kan from various bits, and I think he turned out okay. Meet Stompy and Chompy. I think the rationale behind Chompy's name is self evident, and of course Stompy is up on one leg. The third in the set is tentatively named "Clyde," named for the ghost in Pac-man who broke the rhyming pattern. I don't know what Clyde will be, but he won't be a stock Kan. Anyone care to share ideas?</td></tr></tbody></table>
<table style="border: medium none ;"><tbody><tr><td valign="top" width="100%"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW7BKuVUUoiBG7FlpdUc-sMU92_6vsgFNQ1TWwqvwK2Of2xQ15z646NKEKaUf3IGz8KIAMx1wIIQrIGlthF-fFf8TMl-9BnL5ykODbw4rvj02tffVjuXqF2gvsgNcR2wvpwfzL/s1600-h/wip1.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 320px; height: 176px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW7BKuVUUoiBG7FlpdUc-sMU92_6vsgFNQ1TWwqvwK2Of2xQ15z646NKEKaUf3IGz8KIAMx1wIIQrIGlthF-fFf8TMl-9BnL5ykODbw4rvj02tffVjuXqF2gvsgNcR2wvpwfzL/s320/wip1.jpg" alt="" id="BLOGGER_PHOTO_ID_5319593172141889330" border="0" /></a>Also up are some models from the game Warmachine. I play the "Protectorate of Menoth" faction, and I absolutely love the models in this game. I have a standing challenge for a 500 point fully-painted game around May 1, so I'm planning what models need painting. My opponent will almost assuredly field Khador, so I'm in for a first-class whuppin'.</td></tr></tbody></table>

That's it! Go to town and let me know if it works/doesn't work for you or if you've found a better method to accomplish this.