Manage the Media Library

The Media Library is a central library of reusable assets, such as images and documents that can be reused accross the site.

The Media Library is an important part of the wcms's content reuse functionality. This digital asset management functionality ensures that content isn't duplicated and consistency is maintained. If a media item is modified in the library, the modifications will be made throughout the site.

Format an image

Before you add your image to the Media Library you will need to make sure you are using the correct image quality, size, aspect ratio and file type. The T4 Image Guide contains information about image types and sizes, and naming conventions in the Media Library.

Note: Before changing images on section and subsection landing pages, please contact the Web Team for assistance.

Cropping, size and aspect ratio

You do not need Adobe Photoshop to crop and resize images. Online image editors such as Pixlr and Irfanview can be used to crop and resize images free of charge.

When cropping your image, think about where the image will be used and what you want people to focus on. Ensure the image conforms to one of the following aspect ratio and image sizes:

Landscape

  • 3:2 aspect ratio, as per standard aspect ratio used by most digital cameras
  • 1000px wide by 667px high
  • Use for most images across the website

Gallery images w/o caption

  • 3:2 aspect ratio
  • 1200px wide by 800px high
  • Use for gallery images without a caption
  • Abbreviation: _gallery

3 column rows

  • 2:1 aspect ratio
  • 724px wide by 484px high
  • Use for normal content pages with a single image
  • Abbreviation: _3col

Long

  • 3:1 aspect ratio
  • 1000px wide by 333px high
  • Use for banners

Square

  • 1:1 aspect ratio
  • 1000px wide by 1000px high

Gallery with caption

  • 1:1 aspect ratio
  • 1200px wide by 1200px high
  • Use for gallery images that have a caption
  • Abbreviation: _gallery-caption

Student or staff profile

  • 1:1 aspect ratio
  • 600px wide by 600px high
  • Use for staff profile images to appear on People/Meet the Team pages, or student profiles as they appear in a content block
  • Abbreviation: _profile

Avoid putting borders around images. The image should go right to the edge of the frame this is also known as full bleed. For images with a white background, such as people/staff photos, instead of a border add a light grey overlay to help them stand out from the white background of the website.

File types

Use JPGs for all photographic-style images. Do not use BMPs or TIFFs.

For drawings, PNGs are almost always superior to GIFs as they are widely supported by most browsers. Use GIFs for very small or simple graphics (e.g. less than 10x10 pixels, or a colour palette of less than three colours) and for images that contain animation. If you think an image might compress better as a GIF, try it as a PNG and a GIF and then pick the smaller.

Image quality and size

Use good quality imagery. This doesn’t mean images have to be professionally shot. Smartphone images are acceptable if the quality is good enough. Whatever image you use, it should not be blurry, grainy, stretched, pixelated or badly lit. Change the resolution of all images to 72dpi. Smaller file sizes mean that pages load faster, so reduce image file sizes as far as you can without affecting quality. 

If you are using a photo-editing tool where you can also adjust the number of colours used, adjust to you image depending on the file type:

  • JPG, 60
  • PNG-8, 256
  • GIF, 256
  • PNG-24, 146

Adding or Uploading images

Images can be added via the Add Media button in the Media Library or via the Upload New Image function

Adding or Uploading documents

Documents (DOC, PDF, XLS, or PPT) can be added via the Add Media button or the Upload New Document function