Current staff

Hero banner

  1. Home
  2. Information and services
  3. Information technology
  4. Web and intranet sites
  5. Updating new Drupal websites
  6. Media
  7. Images

This guide is for sites built in the new version of Drupal (Study and Scholarships).
If you're working on a Drupal 7 (UQ Standard) site, see hero banners on Drupal 7.

A hero banner is a large image that:

  • captures the user's attention and sets the tone for the page
  • displays alongside the page's H1 heading (and lead text where relevant).

Together, the image and text should help users understand what the page is about and whether it's relevant to what they're trying to do.

Hero banners change shape depending on what device your user is viewing it on (e.g. mobiles, tablets). It's important to:

  • use the right templates to create your banner, following the guidelines for where to place faces and focus points
  • check your banner resizes as expected on different screen sizes before you publish.

There are different types of hero banners on new Drupal, depending on the type of content you're working on.

Articles and events use the legacy hero banner. Your chosen image displays with a purple gradient.

Example desktop view

Example of a hero banner at the top of a landing page as viewed on a desktop, positioned beside the page heading. The image is overlaid with a purple gradient.
A legacy hero banner in desktop view.

Example mobile view

Example of a hero banner at the top of a landing page, as viewed on a mobile device. The image is positioned above the page heading and is overlaid with a purple gradient.
A legacy hero banner in mobile view.

Step 1: Select your base image

Select an image to feature in your hero banner.

It must be at least 1080px wide x 540px high (this section will display on mobile view).

Step 2: Use the template to create your hero banner

Using the template will ensure the banner displays correctly across various screen resolutions.

  1. Download the legacy hero template (staff login required).
  2. Open both the template and your image in Photoshop.
  3. Copy and paste your image into a new layer on the template.
  4. Ensure the 'Mask layer' is at the top of the 'Layers' panel.
  5. Select 'Edit '> 'Free transform' to resize your image proportionally.
  6. Ensure the base image remains a minimum of 1080px wide (refer to Guide 2 in template guidelines below).
  7. Ensure the main content (such as faces) sits within the guidelines (refer to template guidelines below).
  8. Hide the 'Mask layer' by clicking the eye icon to the left of the layer name.
  9. If the base image isn't at least 1400px wide (refer to Guide 1 in template guidelines below) turn on the purple 'Gradient' layer and drag the 'Gradient' layer above your image layer. If your image is at least 1400px wide, you don't need to add the gradient layer.

When to use the purple gradient

If base image is less than 1400px wide

Turn on the purple gradient layer if your base image is less than 1400px wide.

Don't move the gradient layer further to the right into the 1080px area.

On desktop, the image is positioned at the right of the banner. Its left edge is overlaid by a purple gradient, which transitions to a purple background that covers the rest of the banner. On mobile the image is cropped from the left and sits above the purple background

If base image is 1400px wide or larger

Don't turn on the purple gradient layer if your base image is 1400px wide or larger. It's OK if it doesn't extend the full width of the banner.

On desktop, the image is positioned at the right of the banner and a purple background fills the remaining space at left. On mobile the image is cropped from the left and sits above the purple background

On desktop, the image fills the entire space of the banner. On mobile the image is cropped from the left and sits above the purple background

 

Template guidelines

Use the guidelines to position your image correctly, with the main content (such as faces) inside the indicated guidelines.

An example hero banner overlaid with guidelines indicating how to position an image within the banner template

Step 3: Save your hero banner

  1. When you are happy with your hero banner, in the 'Layers' panel, go to the top-right menu and select 'Flatten image'. (If you are asked to discard hidden layers select 'OK'.)
  2. Go to 'File' > 'Export as'.
  3. Set the 'Format' as JPG and 'Quality' as 70%.
  4. Click the 'Export' button and then save. Follow the UQ file naming conventions when saving your image.

Your image will be saved at the correct specifications:

  • Image size: 2160px x 540px
  • Resolution: 72 DPI

Whether you need to use the purple gradient layer depends on the width of your base image. Only turn on the gradient if necessary.

Check different screen sizes before you publish (mobile, tablet, desktop) to make sure that your banner doesn't crop people's faces or key parts of the image.

Landing pages use One UQ hero banners. These don't have a purple gradient.

Example desktop view

Example of a hero banner at the top of a landing page as viewed on a desktop, positioned beside the page heading.
A landing page hero banner in desktop view.

Example mobile view

Example of a hero banner at the top of a landing page as viewed on a mobile device. The heading sits below the hero image.
A landing page hero banner in mobile view.

Step 1: Select your base image

Select an image to feature in your hero banner.

It must be at least 1528px wide x 672px high.

Step 2: Use the template to create your hero banner

Using the template will ensure the banner displays correctly across various screen resolutions.

  1. Download the One UQ hero template (staff login required).
  2. Open both the template and your image in Photoshop.
  3. Copy and paste your image into a new layer on the template.
  4. Ensure the 'Mask layer' is at the top of the 'Layers' panel.
  5. Select 'Edit '> 'Free transform' to resize your image proportionally.
  6. Use the guidelines to position your image correctly, with the main content (such as faces) inside the indicated guidelines. The space inside the safe zone is what will display on smaller screens.
  7. Hide the 'Mask layer' by clicking the eye icon to the left of the layer name.

Step 3: Save your hero banner

  1. When you are happy with your hero banner, in the 'Layers' panel, go to the top-right menu and select 'Flatten image'. (If you are asked to discard hidden layers select 'OK'.)
  2. Go to 'File' > 'Export as'.
  3. Set the 'Format' as JPG and 'Quality' as Very good.
  4. Click the 'Export' button and then save. Follow the UQ file naming conventions when saving your image.

Your image will be saved at the correct specifications:

  • Image size: 1528x x 672px
  • Resolution: 72 DPI

Check different screen sizes before you publish (mobile, tablet, desktop) to make sure that your banner doesn't crop people's faces or key parts of the image.

The homepage hero banner includes a mandatory CTA button and is only used on the UQ homepage. Homepage content needs to be approved by the Web Audiences Working Group.

Example desktop view

Example of a hero banner at the top of the UQ homepage as viewed on a desktop, positioned beside the page heading.
A UQ homepage hero banner in desktop view.

Example mobile view

Example of a hero banner at the top of the UQ homepage, as viewed on a mobile device. The image is positioned above the page heading.
A UQ homepage hero banner in mobile view.

Step 1: Select your base image

Select an image to feature in your hero banner.

It must be at least 1528px wide x 1000px high.

Step 2: Use the template to create your hero banner

  1. Download the Homepage hero template (staff login required). 
  2. Open both the template and your image in Photoshop.
  3. Copy and paste your image into a new layer on the template.
  4. Ensure the 'SAFE ZONE' is at the top of the 'Layers' panel.
  5. Select 'Edit'> 'Free transform' to resize your image proportionally.
  6. Use the guidelines to position your image correctly, with the main content (such as faces) inside the indicated guidelines. The space inside the safe zone is what will display on smaller screens.
  7. Hide the SAFE ZONE' by clicking the eye icon to the left of the layer name.

Step 3: Save your hero banner

  1. When you are happy with your hero banner, in the 'Layers' panel, go to the top-right menu and select 'Flatten image'. (If you are asked to discard hidden layers select 'Ok')
  2. Go to 'File' > 'Export as'.
  3. Set the 'Format' as JPG and 'Quality' as ‘Very good’.
  4. Click the 'Export' button and then save. Follow the UQ file naming conventions when saving your image.

Your image will be saved at the correct specifications:

  • Image size: 1528x x 672px
  • Resolution: 72 DPI

Check different screen sizes before you publish (mobile, tablet, desktop) to make sure that your banner doesn't crop people's faces or key parts of the image.

On the Scholarships website, you must select from the pre-loaded approved hero banners. To request a new hero banner, contact ugscholarships@uq.edu.au.

View Scholarships website guidelines