Want to Wrap Text Around an Image Using WordPress? Take the Plunge
This tutorial shows how to wrap text around an image using WordPress version 2.5 or later. It also shows how to insert an image and align it (position it to the left, right or center). In earlier versions of WordPress, you had to use the Code (HTML) editing window to insert a bit of HTML (using cascading style sheets) to get the text to wrap properly.
Wrapping text around an image has been improved in WordPress 2.5 or later. You no longer need to use HTML code. Instead, you can use the Add an Image dialog box to specify image alignment, and this does a good job of wrapping text.
If you have already inserted an image, and you decide you want to wrap text around it, you can use the Image Editing dialog box to set image alignment, which has the same nice effect on text wrap.
How to Position an Image and Wrap Text Around an Image Using WordPress 2.5+
Filed under: WordPress Tutorials | Tagged: image, markmclaren, mcbuzz, photo, text, tutorials, version 2.5, WordPress, WordPress Tutorials, wrap |
Free WordPress Tutorials - Business Blogging 101 
i have a question… what if you make exactly what you show in the tutorial and it doesn’t work? in the preview it looks just fine, the text looks wrapped around the image but in reality, in the actual post, it is still on top of the text with a lot of white to the right. i would like to know what could be the problem if u can help me. i am quite new to this, so looking in the code didn’t help me, although i tried several things, including adding the piece of code which you presented for version 2.3 of wrdprss.
any ideas why is it not working for me?
Hi noidor79,
Please confirm that your site is at http://www.fcbihor.net/
I’m just guessing that this is the case based on what I found in Google for your username.
I will go ahead and tell you what I see that’s causing the problem on this page (and probably every page where you try to wrap text):
http://www.fcbihor.net/beijing-2008-jocurile-olimpice-de-vara.html
If this is not your site, let me know!
The style.css file that is part of your WordPress theme is missing some standard information that comes with most themes. Without it, even though you assign the “align left” value to an image as you have done, the image won’t really be aligned left and therefore text won’t wrap.
If your site is hosted by a third party (not hosted on WordPress.com), then you can edit your WordPress theme files, including the style.css file. This means you can add the missing information yourself.
Or if you know who created your theme, you can ask them to add that information for you.
Let me know who is hosting your site and I can tell you how to fix the problem.
yes, i can confirm. that is my site and that is the page i am having the problem with. i have hosting for this particular site with hostingpuppy. i can edit the css file; in fact i have tried several things already after finding some things on the internet about this. but unfortunately it hasn’t worked yet. a couple of times there was wrapped text but it was messy. i would like it to be nice and tidy like yours.
thank you for your interest!
Try this.
Download a copy of your current style.css file from the revolution_blog_split-10 theme directory. Save a copy as style-2008-08-07.css (or whatever) as a backup.
Open style.css in a text editor and scroll to the very bottom of the file.
On a new line, paste in the following:
img.alignleft {
float: left;
margin: 5px 10px 0 0;
}
img.alignright {
float: right;
margin: 5px 0 0 10px;
}
img.centered, img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
Save the file and upload to your theme folder, replacing the old style.css file.
This should fix the problem. It may not be a complete fix. You may need a few more additions to the style.css file. See if this works and we’ll go from there.
I tried this morning waht you said and it worked. Now if it is not much trouble, I would like to ask you how can I make more space on the right and less at the bottom(between image and text).
thank you very much for your help!
Okay. We need to do a couple of things. First, add the following at the bottom of your style.css file, like you did with the align CSS code above.
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
This is taken from the style.css file for the Business Blogging 101 theme. It will add a box around the image. You can see what it looks like if you look at the image of the diver at the top of this post. If you don’t like the box, we can change it later.
Let’s see what the padding around the image (and the box) looks like after you add this code.
If there is still too much padding on the bottom and not enough on the right of the image, you can adjust the CSS values. You can do this for each image separately or you can do it by changing the style.css file, which will affect all images in your blog.
Two things you can change:
1. The .wp-caption {…} code above has the following line:
margin: 10px;
This sets the margin (space) on all sides – top, right, bottom and left – to 10 pixels. You can change this to
margin: 10px 10px 0px 10px;
This sets the margin on the bottom of the image and caption to zero.
If you play around with the values by setting each one to 0, you will see which one sets the top, right, bottom and left margin. That is actually the order. The first 10px is the top, second is right side, third (zero in this case) is bottom, fourth is left side.
Earlier you added this to the style.css file:
img.alignleft {
float: left;
margin: 5px 10px 0 0;
}
To increase the space on the right of a left-aligned image, you can increase the 10px to something greater, like 20px. So you would make it
img.alignleft {
float: left;
margin: 5px 20px 0 0;
}
Try all this and see how it looks. We’ll go from there.
yes, that was it! I did what you said, and then juggled a little with the values and now I it’s like I like it to be. thank you! now I now what i’m supposed to do in similar situations.
@noidor79 Looks good! Nice work!
Thanks for checking out https://mcbuzz.wordpress.com
Mark McLaren – McBuzz Communications
Hi Mark,
Have a bit of a similar problem to the above but can’t seem to get it fixed. I’m in the process of moving my blog (http://munsterhockey.wordpress.com) from WordPress.com to a third party site (http://southernfriedhockey.com). I wanted to maintain the Dusk theme, which is no longer available from WordPress but I managed to download it elsewhere. The text wasn’t wrapping around pictures, plus the borders around the pics had disappeared. So I copied the CSS from the theme on the WordPress.com blog, and when that didn’t work, tried adding the extra code as outlined above. Still nothing. Any ideas? Am totally new to this so shooting in the dark here!
Thanks a million,
Al
Alan,
Thanks for your question. You have a great blog at http://munsterhockey.wordpress.com
I’m not sure if you have it set up yet, but I can’t see your new blog at http://southernfriedhockey.com so I can’t say what is going on there.
If you tried adding the CSS that appears in my replies to noidor79’s comments above, double check to be sure that you added this at the end of the CSS file rather than at the beginning or somewhere else, and that there is not more than one CSS file linked to in the section of the page. (Again, if I were able to see the site, I could give you a better assessment.) The above is an ad hoc solution that may not work for every WordPress theme. I’m fairly certain that your text wrap problem is caused by something similar, but we probably need to tailor it to your theme.
Is there a way to let me see the new site you are working on?
Mark McLaren
Thanks for that Mark – I’ve been having some problems with the propogation of the new site which should be resolved in the next day or so. I’ll let you know so you can have a look at it then.
I did indeed put the CSS code at the bottom, but nothing’s doing – will try again once the site is live and let you know how I get on.
Happy new year and cheers again for your help!
Al
Mark,
Thanks for the tip to noidor79. I had the same issue. I added the lines of code you suggested to the CSS file and voila. It worked like a charm. I was really wondering what the problem was until I ended up on your blog. I am now going to browse your blog and I’m sure I will learn a lot more.
Thanks again
Michel
Hi, I am able to wrap text around an image as instructed in your video, however, it is not aligned very well with the left margin and top margin of the text. What should I do to rectify this?
Cheers /John