How to add a hero image to a page header

This is a step-by-step guide to adding a hero image to a landing page or publication page.

For some pages, you may need to add a large image to the header section.

1. Preparing your image

Resize your image using the image ratios, sizes and component use guide.

When selecting an image:

• avoid complex images

• ensure people in focus sit on the right side of the image. This is because the page title sits on the left

• do not include text in the image as this will fail an accessibility check.

2. Adding the image

1. Navigate to the page that you’d like to add the image to.

2. In the Customised Header tab, select Full-width background image.

3. Select Select images

4. Browse and select your image from the Library tab if uploading an existing image.

5. Select Add image.

6. Select Choose file and browse for your image.

7. Complete the Name field. Make sure the filename is meaningful, so it's findable using Media search. For example, a photo of a teenage girl laughing could be 'Teenage-girl-laughing'. If it’s a photo of a well-known person, include their name and position in the title. For example, 'Joan-Kirner-former-Premier-of-Victoria'.

8. Complete the Alternative text field for your image. This is a description of the image for users who can’t see it. It’s an important accessibility requirement. If the image is decorative, add two double quotes in the alt text field, which tells the screen reader to skip it.

3. Setting the focal point

It’s always important to set the image's focal point as our users view our pages on all kinds of devices and screen sizes.

Setting the focal point ensures the important or meaningful part of the image (such as faces) is visible on all screen sizes. You can only set 1 focal point per image.

1. When an image is added, the focal point will be set in the centre of the image. You’ll see a small cross.

2. Change the focal point by dragging and dropping the cross.

3. Test how the image displays on different screen sizes and keep adjusting until the display is optimal.

4. Setting the theme

After adding a hero image, you can select a Light or Dark theme. This will apply a style to the banner heading and subheading text so that it is still legible.

The light theme is best suited to images with light colours. This theme puts text on top of the image. The heading text is blue and the sub heading text is black.

The dark theme is best suited to images with dark colours. This theme places text on a blue background with white sub heading text.

To select a theme:

1. go to the Page Header tab

2. select Theme dropdown box

3. select Light or Dark.

Examples

Light theme

Dark theme

No theme

5. Save and check image

You need to check if the image renders on the page without error:

1. Save and preview your campaign page.

2. Use preview to check how the Hero Image looks on the page. 

3. Try different browser sizes. This checks how the image responds across different devices.

Ripple design system

Read about the design of the header component on the Ripple website.