Using images

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. To upload pictures:

• Click Media then Add New to upload images from your computer.
• You can also do this via the Upload/Insert link above the light grey bar at the top of the editing panel – it also allows you to place the image you upload (or any other image in the Library) onto the page at the text insertion point.

You can edit picture sizes a bit in WordPress but not a lot, so try to scale them down a bit before uploading, and not load megabytes and megabytes’ worth of image! Aim for at least under 1000px wide.

When you upload an image, WordPress labels this as the full-size version and then automatically generates some additional, smaller size versions. If the picture isn’t big enough to do all the size options, you will notice that when you come to insert it some of these sizes won’t be available. These sizes are pre-defined by the designer to fit the various areas of the site.

PICTURE SIZES USED ON THIS SITE:

• Thumbnail – 140px wide by 170px high – for small ‘thumbnail’ pics, they appear alongside list entries and are useful for headshots or logos.
• Medium – 200px wide – for use in side column content (a suitable height gets decided by WordPress).
• Large – 485px wide – The full width of the main middle column (a suitable height gets decided by WordPress). This is the size used for the feature image at the top of a post. Alignment should be set to ‘none’.
• Full – The original size you uploaded it as.

Big pictures at the top of the page

Almost all main pages have a featured image at the top of the page (the wide image that the page title sits inside). They are a fixed size across the site. You need to upload this image at the correct size: 705px by 285px. (Amy might make this editable within WordPress at some point)

To change/add this image, go to the page in the admin area, click on Set featured image and follow the instructions to upload the new one. If you are changing an existing image, you will need to remove featured image before setting a new one.

To help find these pictures in the media library, name any new files you make for this job starting ‘mainpic_’ then the name. When you come to see what images are available in the library, you can search for ‘mainpic’ and these will all be found.

Adding pictures in the main column

A main column image

Click the Upload/Insert link above the row of style buttons at the top of the editing area.

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 (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.
• The Description field is to specify any attribution/credits for the image, needed if the picture is a stock photo. See ‘Finding photos’ below.
• If you are using the image in the main column, you can add a Caption that will appear under the picture.
• The Link URL should almost always be set to None – otherwise the image becomes a rather pointless link to a page containing nothing but that same image (potentially confusing for the site visitor). The only time this is really useful is if the picture is a link to another page or website. You will need to know the full link beforehand to type in. See more information on links here.
• Use the Alignment option to specify whether you want the image float to the left or the right within the column or, if it is the full width of the page, choose none.
• Then specify the Size you want.

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

WordPress occasionally inserts the image at the top of the page regardless of where you thought you put the cursor – in the HTML editor you can highlight the code that has just appeared and cut and paste it where you wanted the image to go.

A medium version 200px wide

Adding images in side columns

These count as

– see the help page ‘inserting items into left and right columns’.

Editing images

WordPress offers some very basic cropping and scaling tools but it’s better to make sure your images are the right size in the first place if they are for a specific use.

After clicking on Media in the left Admin menu column you will see a list appear of all the images. As you hover over each a list of options will appear. The first one says ‘edit‘ – this also appears underneath the thumbnail if you have clicked on an item and are viewing details for just that one picture.

On clicking Edit the image is displayed. Drag a rectangle within the image area to display a cropping frame. Enter the required width and height into the Image Crop: Selection fields. You can 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.

Don’t worry about this being super complicated – have a play and see what happens. WordPress will remember where you started from so you can restore the original. The only drawback is if the images you upload are huge then these files will all be stored on the site and take up lots of space.

Post Thumbnail Editor

An adjusted thumbnail

The Post Thumbnail Editor lets you adjust each size version separately rather than making the change across all the sizes like the basic Editor does. WordPress automatic thumbnails are just cut from the middle of an uploaded picture. You can change the view to make it a more interesting thumbnail (eg: to get the title in or prevent someone’s head being chopped off because they weren’t in the middle of the picture.)

When you go to edit an image, you will notice another link saying Post Thumbnail Editor. Clicking on this takes you to another window. Select the image size which is the problem and drag the cursor around to frame the image as you want it, and follow the instructions. The thumbnail size will give you fixed proportions to crop; if you want to change the view for larger sizes (where available) the cursor will not give you fixed dimensions – be careful!

Finding photos

Two good sources of stock 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.

Make sure that all photos used on the site are displayed in line with any copyright requirements. Don’t just pull stuff off the internet and stick it up on your site! Better safe than sued.