Wrapping text correctly around photos in wordpress

My last few posts have been photo related and I usually like to write a short explanation alongside my photos. The problem with using the wordpress Visual editor is lining up the photos and text so the text appears next to the photo and wraps around to make it look nice.

Using the default wordpress formatting, you end up with a post like this:

Green butterfly on lavender flowers

Green butterfly on lavender flowers

First photo
Here is my first photo. Aligned to the left with my explanatory text wrapping around it on the right side. The first photo and text group looks ok, but look where the second photo appears –

Lavender flowers at Herrenchiemsee, Germany

Lavender flowers at Herrenchiemsee, Germany

Second photo
Here is my second photo. Aligned to the right with my explanatory text wrapping around it on the left side. The default formatting doesn’t align the photos nicely though.


How to line up the photos with the text
Some people might like this, but I think it’s rather messy. Here’s a simple trick to get the alignment right.
dannyboybroderick-wordpress-text-editor
When you are editing a post, position your photos on the left/right of the post as usual. When everything is in place, go from the ‘Visual’ editor to the ‘Text’ editor and add this line between each block of text/photos:

<br style="clear: both;" />

Everything will magically line up and look 100% better. Here are the same two photos, but with the single line of html included:

Green butterfly on lavender flowers

Green butterfly on lavender flowers

First photo
Here is my first photo. Aligned to the left with my explanatory text wrapping around it on the right side. Now look where the second photo is –

Lavender flowers at Herrenchiemsee, Germany

Lavender flowers at Herrenchiemsee, Germany

Second photo
Here is my second photo. Aligned to the right with my explanatory text wrapping around it on the left side. Formatting looks much better because the photos and accompanying text appear together.


One warning
Be careful switching back to the ‘Visual’ editor, as sometimes this special formatting line will get removed by the editor and you’ll have to put it back again!

Thanks for checking by. If you have any questions, please post below and I’ll attempt to get back to you as soon as possible.

Leave a Reply

Your email address will not be published. Required fields are marked *

*