How do I upload and include an image in my Wordpress blog entry?

The blog entry editor in Wordpress has grown in sophistication and is now a very nice little Web page editor unto itself, which has certainly helped fuel the growth of blogging as a publishing tool for everyman. Nonetheless, there are still some nuances that are darn useful to figure out, most notably including how to upload and insert images and pictures into your blog entries.

To document it, I borrowed the Blogworld Expo Weblog, which is running WordPress version 2.6.2. The screen shots will reflect that version, but yours should look quite similar even if you have an older or newer version of Wordpress.

(To get the latest version, you can always just pop over to wordpress.org where it's available for free. Thanks, Matt!)

Okay, on with the show!

When you're typing in an entry, odds are very good that you're smart and using the built-in HTML tools so that you don't have to learn some obscure markup language. That means that you're in the "Visual" mode, as you can see in the following screenshot:

Notice there that the cursor is over the little "image" icon. Make sure that your cursor insert point in the blog entry itself is where you want the image to appear, then click on the little Add an Image icon, as shown.

A pretty big window pops up with lots of options:

Since you want to upload an image rather than use one that's already online, click on the "Choose files to upload" button, as shown. If you knew the URL of an image you wanted to include (perhaps because you had already uploaded it to Photrade, Flickr or Photobucket) you could instead just copy and paste the image address into the "Source" box).

When you click on the button, a standard file selection window pops up, one that you've probably seen hundreds of times before. This is a Mac OS X one, but the process is identical if you're running Windows, of course:

I've picked out the image I want to upload at this point, so all I have to do is click "Select" to have it actually uploaded to the server. I do that and we're back to the image insertion (actually image gallery) window:

Skip the first few lines (which are confusing and probably shouldn't be shown) and you'll see that the image is now previewed, along with a bunch of optional settings for title, caption, description, and so on.

Take a few seconds to make the title descriptive (and, yeah, a keyword or two sprinkled in here would be a good thing too for findability), then scroll down to the bottom:

This is where you can adjust the size and alignment of the image. My recommendation is that if the image is small, left or right align it so that text flows around the image in a way that's quite attractive, but if it's large, center it (as I do with the pictures, um, screen shots, in this blog entry).

Almost always, I also recommend that you have "full size" as the size picked. The only time that might not be a good choice is if you have uploaded some really big photographs or images.

Finally, and this is a key step that lots of new folk forget, don't choose "Save all changes" but click on "Insert into Post" to actually add the image to your blog entry!

Now the editor will show you a shiny new photo, picture, image, graphic, whatever you just uploaded:

That's it. Publish this blog entry and you'll find the image neatly included therein!