Wrapping Text Around Images

Languages: English • 한국어 • (Add your language)

Current versions of WordPress now have image alignment built-in. WordPress adds CSS classes to align the image to the right, left, and center of a paragraph, so the text will wrap around the image.

1 Important Theme Code
2 Image Style
3 Captioning The Image
4 Clear The Display
5 Resources

Important Theme Code

In order to take advantage of these new CSS classes for image alignment and the text wrapping around the image, the WordPress Theme must include the following in the style.css found in the WordPress Theme directory.

img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

When adding the image in your WordPress blog, select the image alignment as right, left, or center in the Image/Media Panel.

The image will be embedded into your blog post with the selected style for alignment such as:

<img src="http://example.com/images/leaf.jpg" 
 alt="leaf graphic" 
 title="leaf graphic" 
class="alignright size-medium wp-image-3109" 
height="25" width="30"/>

Image Style

There are times when you want an image on your post to fill the screen, or sit in the middle of text with writing above and below it, but most of the time you want your image to sit on one side or the other of the text and have the text flow or wrap around the image. While the styles above will float the image left and right, you may want to add more design elements to your image.

Let's start from the beginning with a simple guide to using images in your WordPress blog.

First, here is a look at a typical image tag in your post, without the instructions for wrapping the text around the image. Note that we've added both the title and alt attributes to the tag; alt is important for accessibility, title is for the image tooltip.

<img src="http://example.com/images/leaf.jpg" 
 alt="leaf graphic" 
 title="leaf graphic" />

To begin the process of setting your image up to be wrapped, there are a few changes that you may need to make to the style sheet that controls your WordPress site. CSS offers a great list of resources for creating and editing Cascading Style Sheets.

From your WordPress Theme folder, open the style.css file in a text-editor. Important! Save a back up copy somewhere before you do any edits! Now, do a search for img. Hopefully, all your image selectors will be grouped together. If not, find them all and cut and paste them into one group to make this process easier.

Borders

You'll need to decide if you want a border around your images and, if you do, what size, color, and type it should be. For no border, you would use the following:

img {border:0}

For 1 pixel solid red line border, add:

img {border:solid red 1px}

If you create a link around an image, some browsers will put a border around the image to let the visitor know it's a link. If you don't want that, use the following:

a img {border:0}

You can still add a hover around the image so when the visitor moves their mouse over the image, not only will the mouse pointer turn into a hand, the image will get a colorful border:

a:hover img { border:solid red 1px; }

Padding and Image Width

Let's clean up one more thing to make the image in your content work better with the rest of the styles we will use.

We want to clear all the padding around the images within your content and make sure that the whole width of the image shows up rather than just a part of it. If it isn't in your style sheet, add the following:

p img { padding: 0; max-width: 100%; }

Image Left, Right, and Center

When an image sits on the sides of your text, it helps to have space between the text and the image so the words aren't right up against the edge. As some browsers treat the margins and padding differently, the following styles will accommodate most browser's "space requirements" so the image doesn't overlap the text or any lists that appear inline with the image.

img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; }

The declaration of display:inline keeps the image inline with the text that you placed it with.

Now, it is time to add the float declaration to the images. BUT WAIT. Why should we waste our left and right floats on just images? Why not use them on anything that we want to sit on the right or left of the page and have the text float around it? You can do that, you know. But that's for another tutorial. We're not going to waste this, so if it isn't there in your style sheet already, add the following:

.alignright { float: right; }
.alignleft { float: left; }

Note: The Default/Kubrick Theme uses this technique but names the classes alignleft and alignright. Using alignleft and alignright seems easier to remember and use, but either name sets may be used to make this work.

So what about centering the image? Yes, you can still do that too. The center tag isn't valid any more, so you can create a style for centering things:

img.aligncenter { display: block; margin-left: auto; margin-right: auto; }

Left, Right, and Centered Examples

This sounds like a lot of complicated stuff, but once this is done, you will never have to mess with it again. We hope. To use it, create the link to your image and add class="alignright", class="alignleft", or class="aligncenter" and the image will move to the right, left, or center and the text will wrap around it. It's just that simple.

<img src="/images/leaf.gif" class="alignright" alt="Red leaf" title="Red Leaf" />This is some text that will wrap around the image that sits on the right side of the text that you are writing about the leaf that is there. That is, if you are writing about leaves in the first place and you want to write about this specific leaf.

This is some text that will wrap around the image that sits on the right side of the text that you are writing about the leaf that is there. That is, if you are writing about leaves in the first place and you want to write about this specific leaf.

<p>This is text that sits above the leaf image that you might be writing about in your post if you were to write about leaves. <img src="/images/leaf.gif" class="aligncenter" alt="Red leaf" title="Red Leaf" />This is some text that will sit below the text image and you can continue to write about the leaf that is there.</p>

This is text that sits above the leaf image that you might be writing about in your post if you were to write about leaves.

This is some text that will sit below the text image and you can continue to write about the leaf that is there.

Alternative Text Size

Some browsers will now allow you to control the size of the text created by the ALT tag. This is the text that appears when you hold your mouse over an image or when the the image fails to load. You can set it to any size, but something much smaller than your content's font size would be a good idea.

img {font-size:60%}

Captioning The Image

Images tend to just sit there, looking pretty. The alt and title properties say a little something about what the image looks like, but other than that, unless you add some text around it, it just sits there. So create a caption style that adds some "spice."

.wp-caption { margin: 5px; padding: 5px; border: solid 1px #E5E5FF; background: #E5F2FF; font-size:90%; color: black }

In the above example, we've added a border and a little hint of background color, but you can style it however you want. We recommend that you at least make the text a difference size and padding to the overall container so it is distinguished from the rest of the post's content.

<div class="wp-caption alignright"> <img src="http://example.com/images/leaf.jpg" alt="leaf graphic" title="leaf graphic"> Red Leaf</div>

Red Leaf

This is text that wraps around the leaf image that features a caption. You might want a caption under the picture of the leaf if you were writing about leaves in your post. The caption sits below the text and helps the user to understand what the picture is about.

In the example above, we just added the alignright class to the container which will position it as a float to the right, allowing the text to flow around it. Using the alignleft class would float it to the left, and aligncenter would give you the text, image centered, text effect.

Clear The Display

In the event that the image is larger than the amount of text that would otherwise surround it, causing the image to hang like a flag over some element below it, then at some point in the text, you'll want to clear the display. Note that there is no text inside this division. However, if you use the WYSIWYG editor, it's necessary to put something inside the division (like a hard rule), otherwise the WYSIWYG editor will remove the div entirely (due to an idosyncracy/bug in TinyMCE editor that the WYSIWYG editor uses).

To clear the display in a way that works for both the "Text" and "Visual" editors, add this while in the text tab:

Resources

This article is marked as in need of editing. You can help Codex by editing it.

WordPress.org

Codex