layout – Dabbled https://dabbled.org Experiments in Art, Craft, and Food - an archive Sun, 06 Mar 2011 15:06:26 +0000 en-US hourly 1 145231836 WordPress tips – Layout of multiple images in a post. https://dabbled.org/wordpress-tips-layout-of-multiple-images-in-a-post/ https://dabbled.org/wordpress-tips-layout-of-multiple-images-in-a-post/#comments Tue, 02 Feb 2010 14:01:12 +0000 http://dabbled.org/?p=3085 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.… [ KEEP READING ]

]]> 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!

]]> https://dabbled.org/wordpress-tips-layout-of-multiple-images-in-a-post/feed/ 9 3085