Updated May 30, 2011Doc Sheldon
I thought I’d throw an intermediate-level tip in here today:
How to text-wrap images in WordPress
There are a couple of ways to make your text wrap around an image in WordPress. Naturally, one is extremely simple, but not entirely perfect, while the other is slightly more complex, but provides a much prettier package.
The Simple Way
First, place your cursor at the point in your copy that you want to insert the image. Then, simply look above the edit box tool bar in the control panel of our WordPress back-end, and click on the image icon , as indicated here:
You’ll then be presented with this pop-up window:
At that point, under the From Computer tab, click on Select files, and navigate to the image you want to upload, and double click on it. It will upload to your WordPress image Gallery, and you can adjust certain settings here:
On the above screen, you can enter your Alternate Text, your Alignment (none) and Size (medium in this example). When that is finished, click on Insert into Post.
You’ll see that your image will appear in the Visual edit box, as shown here, without wrapping text:
This is the point at which you will either continue on the simple path, or take the other fork, for a more precise placement. For the simple mode, click once on the image, and then click on the Right-Justify button. Now click on the Left-Justify button, and you’ll see that your image returned to its original position, but now has been wrapped in the text. However, you’ll also notice that the text is so close to the edge of the image that it makes it difficult to read. Let’s put a little white space in there, to save the readers’ eyes.
Left click once on the image, and then left click on the image icon that appears in the upper left portion of the image. That will take you to the image edit pop-up, here:
Click on the Advanced Settings tab, and on the next screen you’ll see where you can enter values for Vertical Space and Horizontal Space. I suggest 5 and 10 (pixels) for these, as they’ll provide ample white space between the image and your text, avoiding over-crowding.
Save those settings, and you’ll now see that your image is wrapped in text, with a comfortable margin of white space. If you’re content with that, then you’re done!
However, if you noticed that the image is also somewhat indented (10 px) from the left margin, and would prefer that it be flush-left, read on.
The Better-But-Not-Quite-So-Simple Way
At this point, you’re going to switch from the Visual Editor to the HTML Editor. Scroll down until you find your image, and you should find some code resembling this:
<a rel=”attachment wp-att-929″ href=”http://docsheldon.com/?attachment_id=929″><img class=”alignnone size-medium wp-image-929″ title=”Water lilies” src=”http://docsheldon.com/wp-content/uploads/2011/05/Water-lilies1-300×225.jpg” alt=”screenshot19.40a” width=”300″ height=”225″ /></a>I thought I’d throw an intermediate-level tip in here today:
Edit that code to this:
<a rel=”attachment wp-att-929″ href=”http://docsheldon.com/?attachment_id=929″><img style=”border: 0pt none; float: left; padding-right:10px; padding-bottom:10px” title=”Water lilies” src=”http://docsheldon.com/wp-content/uploads/2011/05/Water-lilies1-300×225.jpg” alt=”screenshot19.40a” width=”300″ height=”225″ /></a>I thought I’d throw an intermediate-level tip in here today:
In other words, you’re going to replace this:
<img class=”alignnone size-medium wp-image-929″
<img style=”border: 0pt none; float: left; padding-right:10px; padding-bottom:10px”
Since you’re limiting the padding to only the bottom and right side of the image, the float: left nudges the image snugly to the left margin, giving you a nice, tidy alignment.
If you aren’t already comfortable editing your layouts from within the html edit window, I strongly suggest you make the effort to learn it. While WordPress is a very user-friendly platform, you’ll find that being able to edit at the html level will open up a great deal more flexibility for you.
Of course, learning both html and php will give you super-powers!
Linking to a particular point on a page