The Business Blog Authority

Formatting photos on your blog post

by Brian Brown (follow me on Twitter): February 19, 2007

El Jefe from El Bloggo Torcido (one of my favorite small business blogs...a winery), left a comment this morning on how difficult Typepad is to format photos in a blog post.

I wanted to address this issue in a post of its own, because it's so important. Specifically, El Jefe expressed frustration with a particular post he wrote on February 18 that contains several photos (warning: this post contains some, ah, adultish material). The problem was getting the text to wrap correctly around the photos was a pain in the butt.

Do you remember when the first line of a paragraph used to be indented? If you pull a book off your book shelf and read it, you will see that the first line of paragraphs is always indented to give the reader a visual reference to begin a new paragraph.

But something happened on the way to the web. It turns out that creating code to express that first-paragraph-indent on a webpage is very difficult. So over the years, a new convention appeared, which is simply to have a line space between paragraphs when you are reading something on the web.

Now you might be asking what all this has to do with photos? It's the same problem...displaying photos and how text wraps around photos is straightforward in print, but exceedingly difficult on the web. The web, and particularly blogs, have come up with its own rules as a result.

For this reason, I recommend not getting too frustrated over formatting, and keep to a few simple conventions. After all, people are not reading your blog because it looks cool. They are reading it because the writing, and the photos, are cool (at least to them). I don't know a single person who returned to a slick-looking blog because they liked the graphics!

One or two small photos

Feel free to wrap text to the left or right of photos if there are only one or two photos in your post, and there is enough room so that your text doesn't look scrunched. I like to leave at least a 200 pixel wide space for text if I'm going to have text next to a photo.

A large photo or multiple photos
When a photo is large enough to take up most the width of your blog post, then turn off the "wrap text" option in Typepad so that text automatically goes beneath the photo instead of next to it. (Technically, the text begins next to the photo at the very bottom, but hitting 'enter' once drops it below the photo.)

When using multiple photos to tell a story (a very effective type of post on a blog), don't try to wrap text. It's a pain, and you spend a lot of time trying to get the photo size just right so that the text next to it applies just to that photo (I believe this was the source of El Jefe's frustration).

Instead, introduce the photo with a paragraph, then add the photo beneath the introductory paragraph. Turn the 'text wrap' feature off, and write the next paragraph to introduce the next photo. Repeat.

This is a linear approach, no fancy formatting, but it's very effective and easy for a reader to understand. More importantly, it's easy for the blog writer to do and contains zero frustration.

If you are using "text wrap", save your captions for the end of your post. If you have turned "text wrap" off, you can add photo captions directly beneath each photo.

I've probably opened a can of worms here, so if you have a particular post that you have a question on, let me know in the comments and I'll take a look.

Remember, the main goal is to keep your blog posts simple, and stress-free. If writing posts is painful, you will never enjoy blogging enough to have a successful one.

Follow me on Twitter by clicking here.


hi Brian - thanks! I kind of expected as much, and I still want something better... Sometimes a picture is just too much to be spread across 450 pixels and needs the "softening" given by wrapping text. I know I could make it 250 but then it would just float there in the middle of the column.

I'm seriously considering going with the 3-column with post to the left as described on Typepad Hacks (another awesome resource!) A side effect is that your post column is allowed to fill the available space, so it may be wider than the 500 pixels it is currently fixed at - so that little 250 pixel picture will look even more lost...

One technique I noticed recently is to make clickable thumbnails that are much smaller than the text wrapping around them - you are basically ensuring that there is enough text to wrap no matter what.

Thanks very much!!! - j

ps: We were just talking about precision metalwork - it's not all THAT adult!-)

Just a plug for WordPress here. Very, very easy to format photos in WordPress. Especially with a few plugins. And, you can get a couple of css expressions to style photos even further.

Yep, the formatting options are a little limiting in Typepad. Over the past year of writing this blog I've gone from frustration to acceptance, and now I'm either very used to the options, or I like the simplicity of the Typepad format.

While there are plugins to do more in Wordpad, there are also blogging tools like Qumana and Performancing that allow you to compose a post on your desktop and format your photos with more options than the Typepad native interface.

Over the past year I've used these other blogging tools, but have recently gone back to plain old Typepad.

On the WordPress blog I contribute to, the photo interface is even worse. It seems to force a thumbnail no matter what, and I have to edit HTML to fix it. I expect that there must be better ways but finding them (and especially the explanation of their use) has always been problematic to me in WordPressLand.

If Qumana (or equivalent) had better photo formatting tools I might finally switch over. In general I found Qumana added time to the process for me without adding utility. I suppose that if I was trying to do a lot of offline work it might help - and I find it telling that you were pretty happy with it at one point but have decided to set it aside...

El Jefe, I think in my case I'm sticking with the Typepad native interface because that's what I teach my clients to use. I want to be teaching my clients something that I use every day and am uber-familiar with.

If I taught my clients to use Qumana (for example), it would be one more thing on the learning curve, and I'm finding the fewer the obstacles, the better.

I don't think I would discourage others from trying Qumana or Performancing or another external blog editor. It may streamline the process somewhat to use them. I just don't bother. Typepad's interface works well enough.

Thanks Brian for this lucid explanation. As a forty-something chica, I am easily thrown when things get too technical. I'll try it next time I do a post.


Thanks Arpi. Please let me know how it goes and post any questions here.

The comments to this entry are closed.


TrackBack URL for this entry:

Listed below are links to weblogs that reference Formatting photos on your blog post:

« Previous Post | Main | Next Post »


    Subscribe to RSS

    Read Small Business Blogging
    and Marketing Articles
    from Pajama Market in your
    RSS Reader