If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
My friend Paula has a hosted Wordpress Blog, and she recently asked me how to place images within her text at either the right or left margins, and have text wrap nicely around the image, with a border. The instructions for doing this are the same for a self-hosted Wordpress blog, but you can also use a plugin like this one if you are self-hosted. Here, I am specifically describing how to do it using Wordpress.com using HTML, and with the current version (at the time of writing this is V2.5.1)
Please note - as pointed out to me recently by someone who commented on this post but used such bad language that I couldn’t approve the comment. You don’t have to do it this way - you can point and click your way using the tools provided by Wordpress to left or right align an image in Wordpress. But you don’t get the control you get by using HTML and some in-line styling, nor the option to add distinctive borders to your images, using colours other than black, nor can you add a title to the image to give your users a mouseover description of the image. The real reason I advocate this method is so that you start to de-mystify HTML. If you are not interested in getting used to opening up the code window, then simply don’t. It is not compulsory - I can’t be clearer than that. But for those of you who are interested in having a look, please read on.
1. Make Sure You Have Enough Text
It may sound like, completely obvious, but if you only have a couple of sentences, you won’t have enough text to wrap - and if you have a few images to include in your text, you will have to have sufficient text to wrap around all of them. So step is to write your text, and make sure you’ve a good few paragraphs.
I have a hosted Wordpress blog, so I am heading over there now to write some text. Having done that this is what my editing screen looks like, and so should yours.
2. Locate An Image That Is Suitable for Wrapping
If the image you select is too large, it won’t look good when text is wrapped around it (because it will take up all the available horizontal space on the screen leaving your text nowhere to go, and therefore it won’t wrap). To safeguard against this, your image should not be wider than say, 300pixels.
When an image comes out of a digital camera it is usually enormous. Resize the image to be somewhere between 100 to 300 pixels wide. If you don’t know how to resize an image I will write a post about how to do that soon. In the meantime, I am assuming you know how to resize an image. I am now going to find an image and add it to my Wordpress post.
3. Add The Image to the Media Library
To add an image, I first click on the Add an Image button (as indicated below), which is the Add media group of buttons.
This causes a pop up screen to appear like the one shown below. When you see this, click on the upload button and navigate to your image file.
When you have located the image file you want to use, the screen will return to look like this - see below. Ensure you make changes as shown on the next screenshot. You need to give your image a good title (written nicely as it will be visible), remove the Link URL and leave the alignment set to NONE. See below.
Next note the name of your image as suggested on the screenshot below and then click on the save button as indicated. Do NOT insert into the post at this time.
At this point you will have uploaded the image to the Wordpress web server computer, where the image IS now associated with the post you are writing, BUT at this stage it is not inserted into the post. So you won’t see it in the post.
I don’t advise that you click on the Insert Into Post button at this stage, but just like I did, ignore that button for now and just click on the Save all changes button as indicated above. In fact the image is now in the Media Library.
The reason I say don’t use the Insert into Post button is because if you do it at this stage, you are trying to do too many things at once. You are trying to upload an image, and place it into the post all in one go. It is much easier to upload the image into the Media Library, and then place it in the post at the next step.
4. Position Your Cursor
Now return to your post. You can see in my post below that I’ve positioned my cursor right at the start of the post. This is because I want to insert my image there so that it is level with the first word I’ve written, then have the text wrap around the image. Please do the same with your image. Place your cursor at the very beginning of your post. See below.
5. Insert Your Image
You are now ready to insert the image. It is very important to place your cursor in an appropriate place within the text before you insert the image.
Now insert the image by clicking on the add an image button as you did before, and when the pop up screen appears click on the Media Library button at the top, then click on the Show link next to the image you want to insert, (you may have many images in your Media Library), but this time click the button “Insert into Post”. Be careful to leave the options on the screen as they are. You should end up with an image that is positioned as the one shown below.
Now the right way to sort this out is to do some basic HTML. It is better that you do it this was because then you will have complete control. But you will have to be careful. Please do exactly as instructed.
Note the name of your image - mine was called les-cornettes1.jpg. You know the name of you own image because you noted it earlier on.
Next you are going to save your work by clicking the save button in the post. (Don’t publish yet - only save).
6. Do Some HTML
Next click on the HTML tab to leave the visual editor and enter code mode. Don’t be scared. It is mostly harmless.
If you remember you placed your image at the beginning of your post, so you won’t have to look far in the HTML to find it. It will be near the beginning. In HTML, images are represented with HTML text (as yours will be in your post) and look like this :
<img class="alignnone size-medium wp-image-29" title="les-cornettes" src="http://greenacreage.wordpress.com/files/2008/05/les-cornettes.jpg?w=300" alt="" width="300" height="225" />
When you have identified your image within your HTML you can change it the HTML to make the image behave exactly as you want it to. The only difference between my code above and yours will be the name of the image file (in my case les-cornettes1.jpg and the size - of course these will differ for you), but the image HTML should look very similar.
Now make the following changes to the HTML. I have shown the changes I made in blue so you can see them. (The part shown as pink is where your title for your image should be and it should already be there if you followed the instructions properly. If not, you can manually place the title now.)
<img alt="" />style="float:left; margin-right:10px; margin-top:5px; border:1px grey solid" class="alignnone size-medium wp-image-29" title="My favourite restaurant in France" src="http://greenacreage.wordpress.com/files/2008/05/les-cornettes.jpg?w=300" alt="" width="300" height="225" />
Then flip back to the Visual editor and save. You should then see that you have a nicely floated image to the left of the text, with a grey border around it 1 pixel thick, and when you hover your cursor over the image the title shows up for the user. You should have a 10 pixel gap between the text and the image and the top of the image should be at exactly the same position as the top of the text. You can experiment with different values to see the difference it makes. You can for example position the image to float right, or change the thickness of the border to say 3px instead of 1px, change the title, and so on.
7. Admire Your Image
Hope this made sense.
Here is how my image looked on the page after this process.
{ 2 trackbacks }
{ 17 comments… read them below or add one }
Brilliant Lizzy and thank you.
The only problem I encountered was trying to cut and paste your piece of changed code into my HTML draft - it wouldn’t paste. I also tried another image further down on the right hand side - I changed the code accordingly - it worked just fine but I didn’t like the end result. Though keeping to the margin the text was messy - maybe I should have blocked that piece of text?
Anyhow have a look http://locksparkfarm.wordpress.com/2008/05/12/the-cows-are-out/ and see what you think.
And thanks again for your very clear, descriptive and easy to follow steps.
Just one query, why doesn’t the pre-set aligned left or right in the wordpress image file work?
Wow - that has really looks good Paula. Well done. It’s strange how a simple thing like left or right aligning a photo can give the article a more polished look.
I don’t know why your second image failed to display well. If you wanted to align right you just have to change left to right on the float, and change the margin-right to a margin-left. Also you need to place the cursor in the correct position which would be at the *beginning* of a sentence. Lastly you would need to make sure the sentence you chose to use as the place to position the cursor was miles away from the previous picture so that they didn’t interfere with one another.
Getting back to what you did do, I took a look and it isn’t quite right, but as luck would have it, it has displayed well.
The blue line that needed to go in precisely where I specified isn’t complete and has some extra spurious characters in it at the end. Also the description of the image is missing. I also suggested that you remove the Link URL from the image (see above) - it is not necessary but it prevents the photo from being clickable - which usually is not required.
Probably the best thing to do is to keep a notepad file with the style alteration in it (the line you tried to cut and paste), make sure it is absolutely right and then paste that in. But be sure you are in the HTML editor (not the visual one) when you do it. That might be why it wouldn’t cut and paste?
Please (like this is school?!) can you go back into the HTML window and fix it. Look at it calmly and you’ll see the line you should have added is not exactly as I specified it. Change it so it is. And add a title attribute as in my example. You must have forgotten to do that at the Media Library stage, but you can do it manually now if you like. Is that cow called Desiree? Well, it would be nice to have a title of say “Desiree is happy to be outside” or something like that that appears when the user hovers their cursor over the photo.
Lastly why does the point and click pre-set work? It *does* work. But it doesn’t work as well as doing it the way I’ve described. The HTML way sounds harder at first, but after you have done it a few times you’ll be typing that extra line, in the right place without even thinking. It is just a small familiarity thing.
The pre-set doesn’t allow you to adjust the vertical alignment - your photo would not be precisely aligned with the text as it is in your post. Nor does it allow you to change the colour and width of the border. Also, doing it this way moves you one step closer to de-mystifying HTML. And if one day you want fuschia pink borders, 10 pixels thick around your images, you can.
LIZ! This is awesome!!! I started doing this Make Me Laugh Monday thing and have been hoping for a “magic click” to get my text around the MMLM image… perfect timing. What a great question for Paula to ask - and what a great gal to answer it so thoroughly for all of us to benefit from! I am sooo excited to try it!
Hi Jenny - thanks for publishing my fridge on Fridge Friday by the way!
Please try this and see if if works for you. I am always encouraging people to look under the bonnet of their web sites, and this is a great way to start. You get more control this way not that I’m a control freak or anything . . .
I tried and it completely fucked up - so sorry not going there again! It wouldn’t delete the old information rearranged the new and basically tied me up.
The right hand one worked fine - I changed the code without a problem - but the text wasn’t butting up evenly - I probably have to align it I guess.
I’m afraid I can’t get the pre-set ones to work at all - it just shoves the image in left or right and leaves the text below.
Anyhow I might be brave enough to try again - but I don’t have the time at the moment and am at work all day tomorrow and possibly the day after.
Thanks for your patience - better than mine!
So don’t use the pre-sets and have one more go at delving into the HTML. You can do it. The irony is that when you realise how easy it is you’ll wonder why it ever went wrong. Computing is like that. When you get over the frustration and disappointment. I guess computer types like me are used to battling with problems into the small hours. It’s how we get things done. It’s not patience - it’s tenacity.
Better to include the style definition in the CSS style sheet. Add sections to cover for the alignment none, left, …:
.alignnone {
float:left;
margin-right:10px;
margin-top:5px;
border:1px grey solid;
}
.alignleft {
float:left;
margin-right:10px;
margin-top:5px;
border:1px grey solid;
}
… etc …
Yes - it is better. But I am trying to get people who don’t know HTML to take a look at it for the first time. CSS comes next.
you saved me from pulling my hair out tonight! thanks a lot!!
No problem Tony. You get better control if you do this stuff yourself via HTML (or as Erwin above suggests, using CSS if you can). Persevere - it’s worth it in the end.
so informative posts and it’s really great for beginners. Thanks Liz to share with us.
Thank you Opengiga. I hope you know that I’m trying to encourage you to get into the HTML so that you can tackle other things later, once you are used to it. It does give you ultimate control.
Thanks for this page! When i began using wordpress I thought the visual option for editing posts would be exact, but it just ended up with awkward gaps and dodgy alignments in my posts. Thanks to you taking the time to write this post the problem is now solved and I once again have complete control over what my posts look like!
Thanks Jen. Someone wrote a comment here a few weeks back (which I deleted) to say I was a f****** ret**d for trying to get “ordinary” users to do little bits of HTML.
You’ve have highlighted exactly why I think this is the right thing to do. You get control. Thanks for taking time to comment - I feel much better now.
Okay. I know HTML but I’m pretty new to Wordpress and I’m starting to get frustrated right now. Since I’m not the Admin of the Site where I post but only can submit articles I do not have access to the CSS style sheet and therefore tried to do it the way you described it. (In such neat, actually pretty precise steps.)
Everything looked the way it did when you did it. Even the end result when going back to the “Visual” style instead of HTML. Perfect. Then I saved it and again it didn’t work!! Once I got back to see what went wrong the HTML-Code had changed!
(Just added the . infront/after each > < because I suppose you can’t post original HTML tags here without them actually showing the picture.
)
So now, when I look at the preview the picture is centred and there’s a gap between the picture and the text. (Whilest the text itself isn’t centred.)
Pleeeease help my and you’ll become my godess! Haha.
The HTML codes don’t show. ):
img class=”alignnone size-medium wp-image-1062″ style=”1px grey solid” src=”http://www.watch-gossip-girl.com/wp-content/uploads/2008/11/leighton-meester-bio11.jpg” alt=”" width=”250″ height=”227″ /
Leena - Please can you comment back with a link to the page where the image is not showing up correctly?