XClose

Information Services Division

Home
Menu

Drupal CMS: Add an image

Learn how to add an image in Drupal.

This guide is aimed at

  • Staff
  • PG Students

Before you start

  • You need to be a Senior Editor, Editor or Author.
  • When editing use Chrome, Firefox or Safari but NOT Internet Explorer.
  • You must have copyright to use the image. Refer to the guide on Drupal and copyright for further details.
  • If you are using photos of students or staff where the person is easily identifiable or you are taking photos of people for your site, you must ensure a Filming and Photography Consent form has been completed. Refer to UCL's GDPR guidance for more information.
  • Ensure the image is on brand (refer to the brand guidelines)
  • Ensure the image is the right size. Guidance on image sizes can be found on the Resize an image how-to guide

Instructions

Below is information on how to add a new image as well as how to add an image that is already in the website's image Library.


Adding a new image - steps 1 + 2

  1. Ensure you are in editing mode of the page you would like to add the image to
  2. Click on the media browser icon in the editing toolbar
  3. Click on the 'Browse' button, underneath 'upload a new file'
  4. Locate your image and click on it to select it - ensure you have copyright for the image!
  5. Click on 'Open'
  6. Click on 'Upload' and then on 'Next'
  7. You are now asked to put in the 'alt text' - this is text used to describe the image and will be read out by software that allows people with a visual impairment to listen to the content of web pages - make it descriptive. It can also be used for keywords used to describe the content of the page.
  8. If you would like a caption heading - this will appear below the image - fill this in and choose a page to link to either by clicking on Search and finding the relevant page or by completing the URL. Any text to go with the link will need to be put in the 'Caption' box
  9. Leave 'Float left or right' and anything else till later
  10. Click on 'Save'

Adding a new image - Step 3

  1. Now that you've added the image and saved it, it is asking you how you want to display it:
    Image displayed asMeaning of display size
    Smallgenerally used because the image will be part of text
    Mediumgenerally used with text but a bit larger
    Largeyou would like to draw attention to the image - it will take up quite a bit of space
    XL, Super XLthe images will be displayed as very large, not used very often
    Non-responsivegenerally used for passport sized images, icons and logos
  2. Decide on the alignment of the image - 'None' will leave the image by default left-aligned
  3. You can change the 'Alt' text if so required
  4. Click on 'Submit'
  5. Depending on your role:
    if you are a Senior Editor: click on 'Publishing options - Draft (Current)' in the left-hand menu, choose 'published' from the drop-down menu
    if you are an Editor: click on 'Revision information' in the left-hand menu, choose 'published' from the drop-down menu
    if you are an Author: click on 'Revision information' in the left-hand menu, choose 'needs review' from the drop-down menu
  6. Save

Adding an existing image: 

It is very important that you only use images for which you have copyright and remember, if you have bought an image, as a rule it can only be used once!

  1. Ensure you are in editing mode of the page you would like to add the image to
  2. Click on the media browser icon in the editing toolbar
  3. Click on the 'Library tab' to the right
  4. Search for the image by typing in the title or part of it - you can limit your search by setting the 'Type' i.e. 'Image' and click on 'Apply'
  5. Select the image by clicking on it
  6. Click on 'Submit'
  7. Depending on your role:
    if you are a Senior Editor: click on 'Publishing options - Draft (Current)' in the left-hand menu, choose 'published' from the drop-down menu
    if you are an Editor: click on 'Revision information' in the left-hand menu, choose 'published' from the drop-down menu
    if you are an Author: click on 'Revision information' in the left-hand menu, choose 'needs review' from the drop-down menu
  8. Save

    Help and support

    web-support@ucl.ac.uk

    Feedback

    We are continually improving our site, so please provide us any feedback on this web page using the form below. It would also be really useful if we could discuss your feedback with you, so if you are happy to be contacted please include your UCL email address in 'Email' field below.

    Please note: We can only respond to UCL email addresses

    Help us improve this page