WordPress:Wrapping Text Around Images

rightThere 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. Let's look at how this can be done.

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="/images/leaf.jpg" 
 alt="leaf graphic" 
 title="leaf graphic">

Giving The Image Style

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. WordPress: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}

WordPress:Image:leaf.gif

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.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.left { 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:

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

Note: The Default/Kubrick Theme uses this technique but names the classes alignleft and alignright. Using left and right 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.centered { 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="right", class="left", or class="centered" 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="right" 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.

rightThis 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="centered" 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. centerThis 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."

.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 distinguised from the rest of the post's content.

<div class="caption right"> <img src="/images/leaf.jpg" alt="leaf graphic" title="leaf graphic">

Red Leaf

frame|right|Red LeafThis 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 right class to the container which will position it as a float to the right, allowing the text to flow around it. Using the left class would float it to the left, and centered would give you the text, image centered, text effect.

Clear The Display

In the event 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.

Resources

This article is [[WordPress::Category:Copyedits|marked]] as in need of editing. You can help Codex by editing it.

WIKI使用导航

站长百科导航

站长专题