And now for a little lesson in HTML. The image on the right is a blog post (good blog, too, by the way). Notice how it’s arranged – first a chunk of text, then an image, then another chunk of text. Lots of bloggers post this way – they insert an image into the text of their blog post. Images within a blog post can even be useful at times (this blog post is one example (hopefully…).
However – look at the image of the blog post. Notice all that empty white space to the right of the image? Wouldn’t that post (and many others on many other blogs) look a whole lot better if the text would wrap around the image? I think so… hence this post. I’m going to teach any interested parties how to do that image wrapping thing:
Wrapping text around an image in a blog post:
- Write about something, and find an image to drop into the post.
- Drop it in however you normally do it.
- (the hard part*)… look at the HTML code for your fine blog post, and find the img tag (that’s the image tag).
- Somewhere around the width, height, and border parts of the tag, add this: align=”right”
- The align=”right” addition will make the image go to the right (align=”left” will do the same thing, but cram the image to the left of the page), and will make the text wrap around the image.
- Here’s an img tag example, from my post: img style=”BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid” height=”251″ alt=”blogimage” src=”http://photos10.flickr.com/12155718_78a7dca8ee_o.jpg” mce_src=”http://photos10.flickr.com/12155718_78a7dca8ee_o.jpg” width=”413″ align=”right” border=”0″
- Here’s another important part – stick the img tag where you want the top of the image to appear. For example, I wanted the image in my post to appear on the right side, and starting at the first line of text. So I dropped the img tag right smack before the first line of text.
- That’s it – all your blogging friends will think you’ve turned especially hip.
* One caveat (I love saying that – it sounds so completely stuffy) – You have to be able to get to the HTML code part of your blog. I know you can using Blogger, but I don’t know if other blog packages allow this. I’m assuming they do…
edit: Of course, it also works best if you first pick the correct size for the image the first time around…
Update: Cliff at Beyond Bullet Points made a comment – his blog posts DO word wrap on his blog… just not in Bloglines (where I read his blog posts). So, checking into that a little bit… apparently, Bloglines likes more normal HTML (align=”right”) but doesn’t like CSS styling (Cliff’s post includes this style=”FLOAT: left for the word wrap thing.
That makes sense – I include a 1 pixel border style in the img tag (which you can see in #6 above) that also doesn’t appear in Bloglines. So just an FYI here… and thanks for the clarification, Cliff!
Related Posts
