How To Add Images/Photos With Wrapping Text in WordPress via the HTML Code Window


This post has been superceded. Please click through to my post on the CaptionPix Plugin to find out about a WordPress plugin that makes image placement very easy. It’s one we’ve written so please use it, and tell us what else you’d like it to do.

My friend Paula has a 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.

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. Of course you can have WordPress auto-resize your images if you prefer.

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.

Add media by clicking the add an image button

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 putinto 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 added 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. Maybe you didn’t place your cursor at exactly the right point, and if you add the image to the post now, it may end up in a pace you did not intend.

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 add 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. Add Your Image

You are now ready to place the image. It is very important to place your cursor in an appropriate place within the text before you add the image.

Now place 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 place, (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 you can add some basic HTML.

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 :


When you have identified your image within your HTML you can change 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.)


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.

Moving From wordpress.com To wordpress.org

Your Blog Is http://yourblog.wordpress.com

If you’ve been wondering about the future of your wordpress.com hosted WordPress blog, this article is for you. You have heard that hosting your blog yourself is a better idea, but you’re wondering what you’ll need to do to achieve a self hosted wordpress blog.

Self Hosted and Centrally Hosted WordPress Blogs

If your blog has an address like http://titleofmyblog.wordpress.com, then your blog is hosted by wordpress.com. This is a free service and it enables anyone to start a blog with zero cost and minimum set-up effort. But your blogging efforts will form part of the wordpress.com domain, which you will be sharing with thousands of other wordpress.com blogs.

I too have a WordPress blog, but because mine is self-hosted, it is referred to as a wordpress.org blog. I downloaded the free wordpress software, but then placed it under my own domain name, lizjamieson.co.uk

If you are new to blogging, a wordpress.com solution seems like a good idea because it is easy. But if you want to use your blog to build something long term, maybe something that’ll eventually be monetised in some way, I think it is best to own your own domain name. You can then make all the decisions about what appears on your site – you control the advertising, the addons, and the content.

So What’s Stopping You?

There are a lot of people who would prefer to self-host because they prefer to be in control, but who fear it is too much of a technical challenge to do so. There are some things you have to learn , and some things that you’ll have to get used to, but it’s entirely possible for anyone to run their own self-hosted blog, assuming they are willing to learn some basic webmaster skills.

This is not intended to be a tutorial, but I’m about to provide a list of items to bear in mind if you’re thinking of self hosting.

You Need A Host

Get a host, and please be prepared to pay for it. If you want a service that is available, reliable and supported in some way this will cost money. You can get good hosting for a few pounds (or dollars) per month. So go do it. The host will need to provide you with email, PHP server side scripting and a MySQL database.

You Need a Domain Name

Pink Sheep On a Hill

You’ll need your own domain name. So if you are currently http://brightpinksheep.wordpress.com you’ll need to acquire a suitable domain name, like for example, brightpinksheep.com

This means that once your blog is set up, people will type http://www.brightpinksheep.com rather than http://brightpinksheep.wordpress.com. Big difference. If the domain name, brightpinksheep is already taken, you’d need to get creative and think of a new potential domain for your blog.

You Need An FTP Program

FTP stands for File Transfer Protocol and an FTP program allows you to copy files from your computer (in your house), to your web host’s great big web server in the sky. In this way, if you want to add some new feature to your blog, you will first download the feature to your computer, and then upload it to the host’s web server computer. You will do this using the FTP program. You will get used to this.

You Need To Set Up A MySQL Database

There is no reason why you can’t learn to do this, but if you think the learning curve might be too much, you can pay a third party or your host to set this up for you. All that is required is that you create an empty database, and provide a username and password that has access to the database.

You Need To Download and Run A Copy Of WordPress

WordPress files can be downloaded free, from wordpress.org. Then you use your FTP program to upload them to your server. Next you type a simple URL address in your browser to start the installation, and when prompted to do so, you provide the username and password of your database.

Within a couple of minutes your wordpress blog will be ready for use. The appearance of the blog will be down to the default theme that all WordPress blogs start out with as standard. But don’t worry you can easily change this.

Maintenance of Your Self-Hosted WordPress Blog

The first bit of maintenance you’ll want to do, is to find a WordPress theme to suit your blog. You will have the pick of all the free themes (many hundreds) or you can pay someone to create a unique one for you. The former is achieved by downloading the theme of your choice from wordpress, and then uploading it to your server using your FTP program.

Plugins

On a self-hosted blog, you also have the option to install (by downloading to your computer and then uploading to the server), your choice from a large number of plugins written specifically to make certain aspects of the blogging easier and more effective. There are stats plugins, internet marketing plugins, decorative plugins, informational plugins and many others that judiciously used, will help to make your blog more interesting to your readers and make it more visible online.

WordPress Updates

WordPress will also, from time to time, issue updates to the the wordpress software that you must install. When this happens, you will download the required files from the wordpress site, then upload them to your server using, (you guessed it) your FTP program. As you can see, you and this FTP program will be come intimately acquainted. Before you do this, you’ll need to backup your database and your current set of wordpress files. Then if something goes wrong you’ll be able to backtrack.

Migrating from a Large Existing WordPress.org Blog

This can be a real challenge. Read what other people have to say about it. It is important not to have duplicate content on the web – i.e Google will usually detect this and not index anything other than the original content. Even if you destroy your wordpress.com blog, it’ll be some time before traces of it are removed from Google’s index (although there is a way to request page removal . . . but that is another topic). I am afraid I would be inclined to start again. Simply stop writing in your wordpress.com blog and carry on from where you left off with your self-hosted wordpress.org blog. If you have a bit of a following they will visit your old blog and let you lead them to your new one. If you haven’t then you are not missing out on much.

There are other strategies you could follow, but I think the one proposed is best and it is simple. Keep them both. Eventually your new blog will be more popular than your old one, but until it is, let the old one continue to work for you and draw people to your new blog.

What Else?

There are some hosts out there that offer automatic installs of new WordPress accounts as part of their service. That would make the setup pretty easy. But normally unless you pay someone each time, I don’t know of a service that manages all the updates as well. You are best learning this for yourself anyway. It won’t take you long and you’ll enjoy yourself. Honestly.