Big Satchurday

How To Add Images/Photos With Wrapping Text in Wordpress

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. The instructions for doing this are probably the same for a self-hosted Wordpress blog, but here, I am specifically describing how to do it using Wordpress.com and with the current version (at the time of writing this is V2.5.1)

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, tomorrow. 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 my post, in HTML, the image is represented with text (as your will be) and looks 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 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.

Computers - Not Exactly Like Vaccum Cleaners

Sometimes I wonder why people new to computing get so confused. Why they have this huge expectation that computers should just work. And for this, I blame Microsoft.

There are lots of reasons some technical people dislike Microsoft and it’s not for me to discuss that.

I don’t mean to address the arguments about Microsoft being an evil empire and Open Source being the answer to everything.

I mean the day Microsoft introduced the idea of the My Documents folder (My Pictures and others) in Windows 95, and more recently, the concept of the just plain old Documents and Pictures folder in Vista.

Doing this has just added to the mystery of the C:\ drive, a place already pretty shrouded in folklore for the average new computer user. And why euphanise something like a disk drive and try to make it sound like a filing cabinet? Folders? Whatever.

Folders are a STUPID analogy as, in an office, you rarely place a folder inside another folder, and then place those inside another. This means people miss the point of a good directory structure altogether.

You try telling a new user to find something on the C:\ drive. They can’t navigate their way around the disk because Microsoft tried to make it too easy. This dummy approach to computing means people are allowed to get away with not having the faintest idea where things are. Software now makes a guess at where you want to put a file (sorry a document). A user doesn’t have to even make an attempt at thinking, not until that is an hour later when they can’t find the damn thing.

Some users never really get onto using a computer properly as they spend most of their time wondering where on earth stuff is. Then of course they blame the computer as in, “Stupid computer lost my document”. I sometimes wonder how some users can be so arrogant about something they know so little about.

And that’s just the disk. There are those just just don’t get what software is for either. They don’t get that software is designed to do a specific job or a number of very closely related jobs. That’s Microsoft’s fault as well. It started when they thought that letting MS Word generate web pages would be a good idea. There are now people who think that Word can also make a nice hot cup of tea. Word can generate web pages but there are better tools for the job.

When you think about the complexity that lies behind an average computer, the layers upon layers of meaning, the encoding, millions of person-hours of work that have gone into it, it’s a wonder they work at all.