Image Hero

For feature content and landing pages this is the best hero to use when images are available. It provides the most context and visually interesting start to the content. It should not be used with any images under the size.

Keep in mind that when the image hero is used, part of the image will be covered by text element, with limited control responsively, so if possible it is better to use a supporting image and showcase any important imagery within the content itself. Images that are more abstract and/or have a focal point away from the centre point tend to work better.

When using the image hero, you should choose the light or dark theme based on legibility of the text over the image.

Key information

• Full bleed image
• Optional breadcrumbs
• Optional CTA
• Images will cover the largest common screen sizes 
• The Scheme option controls the appearance of the header, breadcrumbs, page type tags and other elements like the 'scroll' indicator
• The Content scheme option controls the appearance of the feature block and the colour of the heading

Image guidance

• Dimensions are 2560 x 1600px or in ThirdLight use 'Image hero' and crop images as required using the 'Constrain proportions' checkbox
• Image heroes should be previewed at several window sizes to ensure that the image is displayed as intended on multiple devices and screen resolutions
• Abstract images are highly recommended as the focal point is usually not as limited, and typically displays more consistently across various devices 
• All images must be optimised using TinyJPG before uploading to T4.

Images with subjects

If having a subject (ie a person) in the image hero is important to the page, this can be achieved by placing the subject in a particular area of the image and putting breaks in the header. You achieve breaks in the header by using soft returns (Shift/Return) and this stops the header running across the image on a desktop/laptop screen.

In our example, the header goes from:

Finding my space to grow

to:

Finding
my space
to grow

In general, the image subject will need to be within the middle third of the image, to the right-hand side of that middle third. This will give room for the header and mean the subject is not lost when the image is cropped for mobile devices such as phones or tablets. You also need to ensure the subject is not too near the top of the image so that it is not obscured by the CTA button on mobile views.

CTA

If the CTA is set to show the content type will look for a sub section called CTA in which you can add a Hero CTA content type. If one doesn't exist it will recurse up the site structure until it finds one.

This negates the need for you to set up a new CTA each time you add a hero and means a CTA can easily be set for a whole area of the site.

Heading

Add the text for your heading into the heading field as a paragraph in standard sentence case.  The text will automatically capitalise and bold, which is the standard, if you would like to emphasise a part of the heading manually bold those words and all other words will un-bold to show contrast. 

You can insert breaks in the header by using a soft return (Shift/Return) so it does not run across the page. This is useful when you have a subject in the image hero you do not want to be obscured by text.

Search

A version of the image hero is available with a search input. The search input replaces the feature block. A search hero needs to be set up by an Administrator.

Images with Copyright Restrictions:

• Avoid using images requiring credit attribution for hero images on our website. This is to avoid potential legal issues.
• Our content system lacks the appropriate attribution functionality in this area and adding credit elsewhere on the page may not comply with copyright law.
• We encourage sourcing images from reputable, appropriately licensed sources (existing images are available from Chorus) or creating original content within our University. This is to adhere to our brand guidelines.
• Ensure proper attribution when using copyrighted images in other sections to maintain a positive online presence which respects copyright laws and upholds our brand's integrity.

Examples

• Light
• Dark
• Subject in image and headline breaks
• Pink