Information Services Division


Drupal CMS: Add a hero image

Learn about adding a hero image in Drupal.

Before you start 

  • When editing use Chrome, Firefox or Safari but NOT Internet Explorer
  • Ensure the image is the right size. Guidance on image sizes can be found on the Resize an image how-to guide


A hero image is a large image at the top of a landing page. Because it is an image that spreads across the page, make sure it is 1400x300 pixels and landscape!


We recommend you don't use both a banner image and a hero image as they would take up too much web-'estate'.
A hero image must have text - absence of text means the image will NOT be shown in full.

Text on the hero image will appear in white, so a light image will not do the text justice!

  1. Make sure you are in editing mode of the landing page in question
  2. Click on 'Browse' under HERO to find your image in the Library or upload a new image - see above for dimensions - and submit the image
  3. Add the text you want to appear on the image
  4. Save

Help and support


We are continually improving our website. Please provide any feedback using the feedback form.

Please note: This form is only to provide feedback. If you require IT support please contact the IT Services Help desk. We can only respond to UCL email addresses.

Give feedback