Text Around Images. How to Wrap?

To take advantage of 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; }

38. Text around images. Can I wrap

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 like this:

<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″/>

Sometimes you may 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 need 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 shown above will float the image left and right, you might need to add more design elements to your image.

Here is a look at a typical image tag in your post, without the instructions for wrapping the text around the image. Just 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 start the process of setting your image up to be wrapped, there are some changes that you might need to make to the style sheet that controls your WordPress site. CSS offers a great list of resources to create and edit Cascading Style Sheets.

Open the style.css file in a text-editor from your WordPress Theme folder. It’s very important that you save a back up copy somewhere before you do any edits! Now, you should do a search for img. All your image selectors must be grouped together. If not, find them and cut and paste into one group to make it easier.

You should decide if you want a border around your images and, if you do, also decide what size, color, and type it should be.

You would use the following for no border:

img {border:0}

For 1 pixel solid red line border, you should add:

img {border:solid red 1px}

In case 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 it to happen, use the following:

a img {border:0}

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

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

To make the image in your content work better with the rest of the styles we’ll 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%; }

When an image sits on the sides of your text, that helps to have space between the text and the image so that the words won’t be right up against the edge. Since some browsers treat the margins and padding in different ways.

The following styles will accommodate most browser’s “space requirements” so the image doesn’t overlap the text or any lists that appear in line 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 in line with the text that you have placed it with.

Some browsers will allow you to control the size of the text you created by the ALT tag. This is the text which appears when you hold your mouse over an image or when the image fails to load.

You can give it any size, but something much smaller than your content’s font size would be a good idea.

img {font-size:60%}

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 example above, we’ve added a border and a little hint of background color, but you can style it however you want. We recommend you to make at least the text a difference size and padding to the overall container so it is distinguished from the rest of the post’s content.

In case 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 need to clear the display. Note that there is no text in this division. Anyway, if you use the WYSIWYG editor, it’s necessary to put something inside the division, otherwise the WYSIWYG editor will remove the div fully.

In order to clear the display in a way that works for both the “Text” and “Visual” editors, add this in the text tab:

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

That’s it, guys! Hope you liked this article!

Share this!

Leave a Comment

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