Working with media

Media library location

  • Content > Media library

Uploading media

Before uploading anything to the media library, please ensure you are entitled to do so: do not breach copyright, and do not upload files that contain personal data: names, addresses, contacts, images; without informed explicit consent. For more information on consent for personal data, please see: GDPR.

  • From the navigation menu, choose 'Content > Media Library'
  • Open 'Categorised' and select your Media Library
  • Select + Add media.

    Add media button

  • Fill out the following boxes and leave the rest blank:
    • Drop file or click to choose the file you want to upload.
    • Type. In most cases, this will be chosen for you. If not, select the associated file type from the text links. Please contact the webteam if you wish to upload a file type not listed.
    • Name. Insert a sensible name so that you can find the file in the media library later.
    • Description. Text inserted here is used to describe the file within the final published web page. In the case of .jpg and .gif image files, this text is displayed in the browser when a visitor hovers over the image with their cursor. This text also forms the alternative text or "Alt tag" description that visitors using assistive browsing technology will have read out to them. For example, the descriptive text associated with an image allows meaning to be conveyed to a visually impaired person.
  • Select Save changes to upload the file to the media library.

Edit or update an item in the media library

  • Open the media library
  • You can select an image by selecting its name, or by using the 'Actions' drop-down.
  • You can now rename the item or upload a new version over the top of the existing item.

Video

Do not upload video files to the t4 media library. 

Image quality and things to avoid

  • Use good quality imagery. This doesn’t mean images have to be professionally shot: smartphone images are acceptable if the quality is good enough.
  • Always preview the image and check the quality before you publish it.
  • If you don’t have access to a photo library, then the Flickr Creative Commons pages are a great place to start looking. (Go to the advanced search section and click ‘Only search within Creative Commons-licensed content.’)
  • Whatever image you use, it should not be blurry, grainy, stretched, pixelated or badly lit. Avoid obvious stock photography which can look cheesy and false. Try not to say too much with the feature images. When in doubt keep the image simple and let the text tell the story.
  • Also avoid using images of marketing material containing a lot of text. Instead, use the main image from the marketing material and put the relevant text in the story title and description.

Image formats

  • Photographic images should be saved as .jpg files: we'd recommend setting quality to 70%, but you should check that this does not overly degrade your image.
  • Graphical images should be saved as .gif or .png files.

Images sizes

story summary

  • Width: 700px
  • Height: 300px

image in quick links column

  • Width: 300px
  • Height: varied

staff profile portrait

  • Width: 300px
  • Height: varied

navigation tile 1 & 3

  • Width: 700px
  • Height: consistent [300px preferred]

page splash

  • Width: 1400px
  • Height: varied

We recommend that web images are kept under 100Kb in size. When you have a low file size which is web friendly it will not take a long time to load up when people browse your website.

Resize images before uploading to the media library

  • It is good practice to set your image size before uploading to the media library. This keeps the file size down and also gives better results when displaying the image on the page.
  • If you don’t already have access to an image editing program such as Photoshop or Paint, there are several free image editing programs available online or as a download. These include:
    • PIXLR
    • Sumopaint
    • Paint.net
    • IrfanView
      • To resize in IrfanView:
      • Open your image.
      • Select Image > Resize/Resample.
      • Type in the new dimensions in width and height. Note that by default the editor will automatically set a height if you input a width and vice-versa.
      • Click 'ok'

Left or right align an image and allow text to wrap around the image

When editing a content item, double click on the image.  A pop-up window will appear named 'Set media attributes'.  Now insert the text 'left' or 'right' into the box named 'class'. 

Delete any text that may appear in the box named 'float'.

Alternative (ALT) text

  • Alternative text, or alt text, is used as an alternative to an image for people who use screen readers.
  • Use alt text where you need to help users understand the visual content. Don’t always make the alt text a literal description of the image: think about what point the image is making.
  • One piece of advice is to imagine that you’re reading out the content of the page down a telephone. When you get to the image, what would you say about it to help the listener understand the point the page is making?

Adding ALT text 

To add an ALT tag for an image in t4, you must add a description to the image in the Media Library. To add a description:

  • Select Content > Media Library
  • find the image within your media library
  • Select or edit the image
  • Enter the image description in the box named 'Description': use text that fulfills the same function as the image

For more information please see the following web accessibility article on Alt text.

Making documents accessible

PDFs

You can check the accessibility of a PDF in Acrobat Pro.

It’s made considerably more straightforward if the original document the PDF was generated from follows good practice: such as linking text in a logical order. If it doesn’t, you’ll need to add a logical reading order in Acrobat. You’ll also need to add alternative text to images in Acrobat.

Office documents

The Office suite has built in accessibility checkers: Tools > Check accessibility. 

If you cannot make your documents accessible, you should publish them in an alternative format: for example, as web pages.

Find out more