Uploading and Using Images in WordPress 2.0 (2)

Having upgraded to the new WordPress 2.0, I have to say I’m impressed. It has some very nice improvements, some cool features, and all in all I think things are pretty slick in it’s admin interface. However, I can’t seem to find any sort of documentation on WordPress’ site about one of the coolest enhancements, the improved ease of uploading and using images in your blog posts. There doesn’t seem to be a lot on WordPress’ online documentation, and besides a somewhat cluttered site with flash videos, I didn’t find much on the greater web, either. And I don’t really like watching video tutorials – I prefer step by step still frames. Anyway….here’s my rough try at a basic tutorial on how the new WordPress image system works

First, before getting to the WordPress part, a word on images in general. Pictures you take with a digital camera by default are BIG. A 4 Megapixel image is 2289 x 1712 pixels big – most computer monitors are probably set at 1280 x 1024, or 1024 x 768. So by default the raw image is enormous, bigger than can fix on the screen without shrinking it. On top of that, big sized pictures also are big in memory size. So instead of uploading that picture that you just got from your camera, save your readers from having to download the huge original and RESIZE IT!!

If you don’t already have some image editing software (likely came with your computer or digital camera), I would suggest Google’s Picasa, Irfanview, or if you’re adventurous, The GIMP, for free options. Something like Photoshop Elements is also good. I usually aim to resize so that the image will fit all on the screen at 100%. Shrinking things to 50% or 33% usually works well.

Now, next you need to get your images into WordPress.

Here is the “Edit/Write Post” page. You can see there is an Upload dialog at the bottom.

Clicking the “Browse” button lets you select an image (or other file) to upload.

After selecting what you want to upload, click the “Upload” button.

After uploading, you’ll see on the “Browse” tab a thumbnail of the image you just selected. Woohoo!

“Browse” shows all uploaded images related to this specific post. “Browse All” shows everything that has been uploaded, regardless of the post.

Left clicking on an image brings up an “options” menu. You can select between “Using Original” (which displays the full image in the post) or “Using Thumbnail” (which displays a thumbnail image in the post).

You can control whether the image is linked to the full image, or if it is linked to another page, or if it is not linked at all.

“Send to editor” places the image at the cursor point in the editor window. “Delete” deletes the image. And then you can close the options window, too.
Show about linking external images, too.

I just clicked “Send to editor” to place the image in the editor window.

Once the image is in the editor window, you can select and resize it, much like you would do in Microsoft Word. Also, when an image is selected, you can change it’s options by hitting “Alt-M” or clicking on the insert/edit menu icon in the toolstrip at the top.

Tadaa! That’s pretty much all there is to it. You can also drag and drop images from the “Browse” strip to the editor. It’s cool stuff.

Alternatively, if you find a picture online and don’t want to save and upload it, you can use the insert/edit image icon on the toolstrip to insert a linked image. You just copy and paste the link to the image, and it will appear in your post. This is useful, but also beware that some websites might not like it – it will be using their bandwidth instead of yours. But oh well, right?