XClose

Information Services Division

Home
Menu

Drupal CMS: Add a hero image

Learn about adding a hero 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
  • 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!

  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. Continue adding content to the landing page
  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

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