≡ Menu
David Lee King

Aligning Images in Blog Posts… Please



blogimageAnd 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:

  1. Write about something, and find an image to drop into the post.
  2. Drop it in however you normally do it.
  3. (the hard part*)… look at the HTML code for your fine blog post, and find the img tag (that’s the image tag).
  4. Somewhere around the width, height, and border parts of the tag, add this: align=”right”
  5. 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.
  6. 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″
  7. 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.
  8. 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!

Comments on this entry are closed.

  • cliff

    Hi Dave!

    Thanks for the link to my post.

    Actually the screen capture looks like the blog reader you’re using has removed the wrap.

    The original post on my blog (I use Typepad) features the wrapping, which you can see at this link:

    http://www.beyondbullets.com/2005/05/norman_calls_tu.html

  • cliff

    Hi Dave!

    Thanks for the link to my post.

    Actually the screen capture looks like the blog reader you’re using has removed the wrap.

    The original post on my blog (I use Typepad) features the wrapping, which you can see at this link:

    http://www.beyondbullets.com/2005/05/norman_calls_tu.html

  • http://www.blogger.com/profile/4574399 Braidwood

    Hi,

    I love the internet! I’m making a portfolio site for myself using blog software and I wanted to know how to wrap text around the image. Thanks!

  • http://www.fantastict.co.uk/ Joe

    Nice one Dave – so simple, but I’ve been trawling the net for hours to try to find out how to do it!

  • http://www.fantastict.co.uk Joe

    Nice one Dave – so simple, but I’ve been trawling the net for hours to try to find out how to do it!

  • RaiulBaztepo

    Hello!
    Very Interesting post! Thank you for such interesting resource!
    PS: Sorry for my bad english, I’v just started to learn this language ;)
    See you!
    Your, Raiul Baztepo

  • RaiulBaztepo

    Hello!
    Very Interesting post! Thank you for such interesting resource!
    PS: Sorry for my bad english, I’v just started to learn this language ;)
    See you!
    Your, Raiul Baztepo

  • http://www.blogger.com/profile/4574399 Braidwood

    Hi,

    I love the internet! I'm making a portfolio site for myself using blog software and I wanted to know how to wrap text around the image. Thanks!