WordPress tips – Layout of multiple images in a post.

When you’re new to WordPress, working with multiple images in a post can be frustrating. If you just want to insert a single floating picture, it’s easy, but what if you have multiples close together? Well, there may be other ways to handle this issue (in fact, I’ve used several myself, including the gallery feature, using tables, and so forth), but this is one quick fix on how to get your images looking like they should, that just takes adding a line of HTML to the post. So if this has always bugged you, read on! And if you know of other good quick fixes for image issues like this, leave them in the comments!

Two Side by Side

<div style=”clear: both;”></div>

AND SAVE IT, without going back to Visual Mode! (If you save in Visual mode you’ll delete the div tag) so you may want to do this LAST.

Single images, with text beside them:

This is text that shows us beside the image. These might be steps in a recipe, for example

test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test

Second set of text that shows us beside the image.

test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test

The HTML for this last part looks like this:

<h2>Single images, with text beside them:</h2>
<a href=”http://www.dabbledstudios.com/supperwhirl/wp-content/uploads/2010/02/lemons.jpg”><img title=”lemons” src=”http://www.dabbledstudios.com/supperwhirl/wp-content/uploads/2010/02/lemons-300×225.jpg” alt=”" width=”300″ height=”225″ /></a> This is text that shows us beside the image.

test text
<div style=”clear: both;”> </div>

<a href=”http://www.dabbledstudios.com/supperwhirl/wp-content/uploads/2010/02/freezing.jpg”><img src=”http://www.dabbledstudios.com/supperwhirl/wp-content/uploads/2010/02/freezing-300×208.jpg” alt=”" title=”freezing” width=”300″ height=”208″ /></a>This is text that shows us beside the image.

test text
<div style=”clear: both;”> </div>

Here is the same thing, except with a right picture. Works the same way as the left.

For just a picture by itself (no float) just use the None option when inserting the photo.

Hope this is useful to you! It was to me :) I try not to post too much web design related stuff here, since it’s not really the topic of this blog, but I figured this would be more universally useful. If you’re into this stuff, I post more if it at the DabbledStudios blog – latest was a post on troubleshooting problems with Contact Form 7, if you’re interested!