WordPress stores images and other attachments in the Media Library, which you can access from the main menu on the left of any of the admin pages. Click Media -> Add New to upload images from your computer. You can also do this via the Upload/Insert link above the row of buttons at the top of the editing panel – which also allows you to place the image you upload (or any other image in the Library) onto the page at the text insertion point.

Before uploading a photo, check that its pixel dimensions are compatible with its intended use (See Image sizes in the side column). You need to make your pictures that right size before you put them into WordPress. It’s possible (but not that easy) to reduce the scale of an image in WordPress, but attempting to enlarge an image is not recommended.

When you upload an image, WordPress labels this as the full-size version and then automatically generates some additional, smaller size versions (provided the full size version is large enough). The usual available values are: thumbnail, small, medium, large and full – although this varies from site to site, and sizes greater than the original upload (full) will be unavailable. These sizes are pre-defined to fit the various column sizes in the site.

Adding pictures in the main column

In the page/post editing panel, place the cursor where you want the picture to appear in the main content text.

Click the Upload/Insert link above the row of editor buttons.

From here, either follow the instructions to Add media files from your computer or click the Media Library tab, find a suitable existing image and click Show.

In the main image details panel there are various fields and options:

• The Edit Image button allows you to crop and scale the image, but this is best done outside of WordPress, before you upload the image. See Editing the image below.
• The text in the Title field will pop up when the user mouses over the image.
• One of the main uses of the Description field is to specify the attribution/credits for the image. See Finding photos below
• The Link URL is best set to None – otherwise the image becomes a rather pointless link back to a page containing nothing but that same image – potentially confusing for the site visitor. Setting it to None also makes for HTML that’s a lot easier to read/edit/debug.
• Use the Alignment option to specify whether you want the image hang to the left or the right within the page or, if it is the full width of the page, choose none.
• Then specify the Size you want – see Image sizes.

When you’ve made your choices/adjustments, click Insert and you will be returned to the page/post editing panel.

WordPress has a disconcerting habit of inserting the image at the top of the page, regardless of where you thought you put the cursor, so – in the HTML editor – you might need to highlight the code that has just appeared and cut and paste it where you wanted the image to go.

Editing the image

WordPress offers some very basic cropping and downscaling tools which are described briefly below. However, they are not particularly easy to use, and it’s far better to ensure that all images are the right size before uploading them to WordPress. But if you really must…

When the Edit Image button is pressed on the Edit Media panel, the image is displayed. Drag a rectangle within the image area to display the cropping frame. Then enter the required width and height into the Image Crop: Selection fields. Drag the cropping frame around to find a suitable view, and then click the crop icon above the image area. Save the changes and Update Media.

If the correct cropping dimensions give a frame that looks too small, then you will need to reduce the scale (resolution) of the image before cropping it. Click the Scale Image link, enter either the required height or width into the appropriate field, and press the Scale button. You can then make another attempt at cropping the image.

If all is well, Save the changes and Update Media. If not, use the Restore Original Image link and have another go.

Finding photos

Two good sources of photos are…

• iStock: you pay a small fee for each photo
• Flickr Creative Commons collections: three versions of the licence, with different restrictions on use.

In both cases, you need to acknowledge the source of the photo. One way to do this is to paste the appropriate attribution into the Title field when you upload the photo to WordPress. For photos used in any of the Wingfinger Widgets, another approach can often be used…

If there’s a line starting credits= in the Description field of the attachment, this will be used to drop a small camera icon in the bottom right corner of the image. This displays the credit line when moused over – and if the credit line is a link, clicking the camera will open it (eg: a Flickr page) in a new window. This facility means that it may be preferable to include most photos using the Post widget rather than placing them directly into the editing panel. Most free photos still require attribution of some sort, and this is probably the easiest way of satisfying the requirements.