2. Components

Step 1

Hover the mouse pointer over the right-hand corner of the hero banner pane to display the Edit cog (). Click the icon to display the menu and click Edit to open.

Step 2

The configuration form for the hero banner component displays.  

1. Title - the title of the home page can contain a message.  Words on hero banners on other panel pages should be minimised to one single words where possible.
2. Image - the minimum image dimensions should be 2560px X 560px.
3. Caption - for the purposes of attributing the image as per the copyright of the image.
4. Layout - select between the default and thin banner
5. Theme (tint) - choose between none, dark or light tint to overlay the image.
6. Text - depending on the selected tint, choose the text light or dark to ensure sufficient contrast between the text and image to improve legibility.

7. Links - insert relative path links when linking to content on the site. If required, select between 1, 2 or 3 links.
8. Save the changes.

Recommended image dimensions: 2560px wide by 560px high

Best practice

• Apply a dark tint to ensure the white text stands out with enough contrast. Dark tint does not need to be a part of the actual image. It is an option when creating the hero banner component.
• Recommended image size should be adhered to. This will remove the possibility of the image being stretched, which will result in a poor image appearance.
• If possible, choose an image which is free of other distractions, where the person/object or theme is the focal point.

Avoid these mistakes

Too much text

• Banners should contain a short message that is quick and easy to read. Users are more likely to read the text if your messages are short and succinct.

Busy imagery

• Avoid using banner images that are overly bright, which diminishes the ability of the copy to stand out sufficiently.
• Avoid using images which have very busy imagery, which may detract further from the banners messaging.

Too small images

• Images smaller than recommended dimensions will be stretched to fill the space, which will result in a poor image quality.

Conditions and attribution

It is your responsibility to understand and comply with any conditions of use associated with images on your website.  Ideally, attribution appears as a caption under an image or if this is not practical, at the end of the page.

It is recommended that you avoid: 

• original works which do not permit modification as the image in UQ Drupal may display differently on different devices or in a featured view
• photos of people where there is not permission to use their image.

UQ image sources

• UQ Images (uq login required)
• local school or faculty storage drives
• Google search 'UQ' plus your keywords or search UQ news to see if your School or Faculty already has images on your topic.  If in doubt check with the owning organisational unit as to whether you can use it.
• eSpace advanced search using display type 'image'.

Externally sourced images

Stock images should be avoided as they detract from the authenticity of your messages. However, you can purchase stock images from sites such as iStock or Shutterstock. It's possible that there is a stock image account in use in your local marketing and communications unit.

Wikimedia commons

Wikimedia commons is the largest single repository of media which can be reused without charge on the web with over 27 million files.  Wikimedia offers images of art, antiquities, historical events, places, buildings and nature.  The image must be pubilc domain or creative commons licensed for you to use it.  It is recommended that you cite the image using the Wikimedia format which includes a name or short title, the name of the photographer or artist if available, via Wikimedia Commons, and the legal status (expressed as public domain or CC2.0, 3.0 etc).

Examples:

The Young Student by Ozias Leduc, via Wikimedia Commons, Public Domain.

High magnification micrograph of a liver with cirrhosis. Trichrome stain. Nephron via Wikimedia Commons CC 3.0