How to prepare images

This page covers how to add images to the site. For advice on what images to choose, see the style guides for each type of content.

To add an image to this site you need an image editing program like Photoshop. You prepare the images in a specific large size, and the site will automatically create a smaller version to display on in articles. Clicking on an image causes the large image to open in a popup box.

For homepage slideshow images

  1. Crop the image to 1040x480 pixels. (see below for Photoshop instructions)
  2. Choose the image name. Images are sorted alphabetically in the slideshow. To make it possible to control the ordering of items, each image start with a number, e.g. the image "05-saana-sana-show.jpg" comes before the image "10-bahari-beach-party-1.jpg"
  3. Go to the Media Manager (click here or in the administrator backend go to "Content > Media Manager")
  4. Click the Homepage-Slideshow folder
  5. Select your file and upload the image
  6. Check the homepage to make sure that the image is appearing as you expect

For "Meet the Staff" photos

  1. Follow the instructions below, but crop the image to 80x100 pixels
  2. Try to crop the image to select their head and shoulders, not their torso. This is to make sure that their face is visible with the small image size.

For article images

  1. If possible, select landscape images (that is, images that are wider than they are high, not actually images of landscapes!). This process will also work for portrait images.
  2. Crop the image to 600x400 pixels for landscape images or 400x600 pixels for portrait images. (see below for Photoshop instructions)
  3. While editing the article you want to add the image to, click the "Image" button below the article text box to open the Media Manager
  4. Click on the folder you want to keep your image in, then select your image and upload it.
  5. Select the image and set the alignment to left using the align dropdown.
  6. Add an image description that includes any key words that are relevant to the image - see SEO help for more on this. Click "Insert" to add it to the article.
  7. Back in the article editor, use the handles in the corner of the image to resize it. Drag the handle until the longest side of the image is 260 pixels (half central column width)
  8. Check the article page to make sure that the image is appearing as you expect

Cropping and saving images in Photoshop

  • Open the image in Photoshop
  • Select "Image > Crop"
  • Enter the required size in the "Width" and "Height" boxes
  • Draw a crop box on the image to select the part of it that you want
  • Hit the return key to crop the image
  • Select "File > Save for Web"
  • Save the file as JPEG, with quality "60", and choose a descriptive file name. Photoshop will replace the spaces in your file name with dashes - this is a Good Thing.

Organising the images in the back end

Administrators can create and delete the folders in the image gallery by going to the Media Manager pages in the back end (Click here or select media manager on the back end control panel).

Additional information