WordPress tips – Layout of multiple images in a post.

[2 Feb 2010 | By | 9 Comment(s) | 19,050 views ]

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

Two pictures, inserted at medium size. First one is Left, second one is Right.
Key: After inserting the pictures, add this in the html

<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 div line above is inserted AFTER the text. Again, do this last and in HTML mode.

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.

And finally… you can also put your text that goes under the picture inside those div tags. That will clear the float and move it to the next line. This also seems to have less of an issue with WP deleting the div tags.

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!

This entry was posted in website design and tagged , , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. 19,050 views

9 Comment(s) »

  • Anonymous [] (elsewhere) discussed this :

    New @ Dabbled: WordPress tips – Layout of multiple images in a post.: When you’re new to WordPress, working with m… http://bit.ly/92jAKI

  • Kind Canine [] (elsewhere) discussed this :

    Dabbled » Blog Archive » WordPress tips – Layout of multiple …: WordPress tips – Layout of multiple images in a … http://bit.ly/bhequf

  • Lorraine Goddard [] (elsewhere) discussed this :

    Check it out: "Wordpress tips – Layout of multiple images in a post." http://tinyurl.com/yheod2a

  • BlogThemeCreator [] (elsewhere) discussed this :

    Dabbled » Blog Archive » WordPress tips – Layout of multiple …: WordPress tips – Layout of multiple images in a … http://bit.ly/aR69ao

  • Kristen [] :

    This is going to be *incredibly* useful. I’d wondered about how to do this sort of thing a couple of weeks ago, when I didn’t have time to go hunting, then forgot about it. You’ve spared a new blog all sorts of frustration the next time I use pictures. Thank you!

  • Dot [] (author) :

    So glad you found it useful!

  • Anonymous [] (elsewhere) discussed this :

    @carissarogers here is the post I mentioned the other day, in case you didn't find it: http://tinyurl.com/ygctn4w

  • Maria [] :

    For this to work, what needs to go in the css file?

  • Dot [] (author) :

    What’s in your css file shouldn’t matter with this. It’s putting the div style right in the post.