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

Instructions

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!

Tips

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!

Make sure you are in editing mode of the landing page in question
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
Add the text you want to appear on the image
Save

Help and support

Web support team (web-support@ucl.ac.uk)
Drupal training and support
Digital Experience website

Feedback

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