XClose

Information Services Division

Home
Menu

Drupal CMS: Add an image

Learn how to add a new image, including images already in the website's image library to your website

Adding a new image

  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'
  11. Now that you've added the image and saved it, determine how you want it displayed:
    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
  12. Decide on the alignment of the image - 'None' will leave the image by default left-aligned
  13. You can change the 'Alt' text if so required
  14. Click on 'Submit'
  15. 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
  16. 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

    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