Media library

Before inserting images, videos and files into a page you need to add them to your site's media library. Here's how.

Accessing the Group Media Library.
Off

This guide covers the following media types:


Images

    How to upload an image (step-by-step guide)

    1. Go to Media

    • Select Media from the tab menu
    • To edit a previously uploaded item, find the item, then click the Edit button.
    • To create a new media item then click the + Create media button.
    Click 'Create Media' to upload a new file, image or video

    2. Select type of media to upload

    • Select the type of media you want to create. Click on Image
    Select the type of media you want to create

    3. Choose file to upload

    • Click on the Choose file button. A pop-up box will appear allowing you to locate your image file. 
    Click the 'Choose File' button to upload your image

    4. Add information and crop image

    • Use the cropping tool to specify the crops of the image:
      • Landscape 16:9 (required) - the most commonly-used crop. This is how images will appear when embedded within Basic pages, News stories and Hub pages.
      • Homepage banner 8:3 - used on Home
      • Square 1:1 (required) - used on Staff profile
      • Central homepage banner 3:1

    Image name:

    Your Group should have a short prefix for all media files, eg 'CHEM' for the Department of Chemistry. If you don't know your code, check your media library for existing examples. Using this code when naming your image will help to identify media that belongs to your Group when editors are browsing the media library.

    Use a clear, unique title to name your image

    Alternative text:

    The New CMS requires that alt text be added for all pictures. Writing appropriate alternative text when you upload an image helps make the website more accessible for people using screen readers or if images fail to load. Here are some tips to help you write good alternative text:

    • use plain language and keep it concise
    • only describe what is significant to the understanding of the image - think about how much meaning your alt text adds to the page. For example, 'Girl in red t-shirt in lecture theatre using Mac computer' is too much detail
    • never start it with ‘A picture of…’ or ‘Image of…’
    • if the image is only for decorative purposes, only use one or two words
    • don’t just copy what you have put for the image name
    • avoid abbreviations which only an internal audience will understand, for example MBB - screenreaders may read these as one word and not spell out the individual letters
    • complex images require individual consideration. One solution is to provide the same resource in a more accessible format - for example, provide a data table to supplement a complicated graph image
    Web Support - Media - Crop Image Example Top

    5. Caption

    • Optionally use this field for a caption, for copyright, or for both.

    6. Save

    • Once all compulsory fields and cropping sizes have been completed click the blue Save button.
    Fill in all required fields and resize and crop your image

    Tips for uploading images

    Size and quality:

    • Upload a high resolution, uncropped version of your picture.
    • The minimum permitted image size is 800x450px.  

    Descriptions:

    • Add a meaningful alternative text. This short description of the image will be used by screen readers and displayed when the image is not loaded, important for accessibility.
    • Add a meaningful image name. This will help you find it when inserting it on a page.
    • If your image is downloaded from the Asset Bank, make sure to add the image ID number to the Name field to prevent duplication e.g. 'Firth Court Rotunda 25468'.
    • Consider a consistent naming convention you can use within your department so that it's obvious where to find a file and what it contains.
      • Example naming convention: <date YYYYMMDD>+<DEPARTMENT>+<location>+<subject of image>+<version>
      • Example in use: 20190322 LAW Western Bank Library Student reading books 003

    Cropping:

    • Always use the cropping tool to specify three crops of the image - Landscape 16:9, Square 1:1 and Homepage banner 5:2. 

    Videos

    In order to optimise pages and the user experience for website visitors around the world, we strongly recommend using Kaltura to host videos instead of YouTube or Vimeo.

    Any video you create needs to be compliant with accessibility legislation.

    • To add videos follow steps 1 and 2 (above) but select Video Embed instead of Image.
    • YouTube, Vimeo and Kaltura videos can be added.
    • To add YouTube and Vimeo videos copy and paste the video URL into the Video Url or Kaltura 'iframe' embed field.
    • To add Kaltura videos copy and paste the entire embed code into the Video Url or Kaltura 'iframe' embed field. You can find the embed code in the video's sharing options.
    • Remember to add a meaningful video name. This will help you find it when inserting it on a page.
    • The caption field text is as alternative text for the video placeholder image which is shown before someone clicks play (if this is empty then the 'Name' field is used)
    • You can customise the thumbnail for your video by changing it in the platform on which the video is hosted – Kaltura, YouTube or Vimeo.

    Video playlists cannot be added at the moment. Live streams from YouTube and Kaltura can be added.


    Files

    Do not upload a file if its contents can be added on a regular website page. Files are harder for users to search for, are not mobile-friendly and make it harder for website visitors to act immediately on the task in hand. Files can also contain duplicate course content which is not CMA compliant.

    In particular, avoid uploading the following types of file:

    • course or department brochures
    • course timetables
    • module information

    Is a file the best way to communicate your content?

    Any file you upload needs to be compliant with accessibility legislation.

    • To add files follow steps 1 and 2 (above) but select File instead of Image.
    • Include a clear description of the file type and size, e.g. PGT Disrupted Studies form (doc, 62KB).
    • Special characters such as  ~ ! @ # $ % ^ & * ( ) ` ; < > ? , [ ] { } ' " and | should be avoided.
    • There is a 32 MB limit on files.
    • Make sure you keep the file up-to-date. If you need a file replaced or deleted, please contact digital.help@sheffield.ac.uk.

    Audio

    To upload an audio file, first upload it to a video hosting platform such as Kaltura and then insert it a video embed as normal. We recommend that you customise the thumbnail for your video by changing it in the platform on which the video is hosted – Kaltura, YouTube or Vimeo.


    Next step

    Create a page (step-by-step tutorial)

    Get in touch

    If you have CMS questions or are stuck then get in touch and we'll do our best to help.