When to use the Focus component
Use the Focus component to embed an important image, photo gallery, video, or map at the top of a page below the title.
You can use the Focus component on a:
- Case study
- Corporate information
- Event
- Guide
- Project
Things to avoid
Don't add decorative images in the Focus component. Only use images that help people understand the content on the page.
Read our guidance on using images on the website to help you decide if you need to use an image.
Creating accessible content
You must make sure your content is accessible.
As a public sector body, we're legally required to make the content on our website as accessible as possible. The government checks our content to make sure it complies with the internationally recognised guidelines from the World Wide Web Consortium (W3C).
Find out more about accessibility or contact beta-content@bath.ac.uk if you have any questions.
Finding the Focus component
To find the component:
- Open the drop-down menu under 'Top of page fixed-position components'.
- Select 'Focus'.
- Select 'Add component'.
The Focus component will appear beneath 'Component(s) currently in use'.
Adding content to the Focus component
Adding an image
The image should be 1280 x 720 pixels or larger, in a 16:9 ratio.
To add an image:
- Paste the image URL in the 'Image web address (URL)' field.
- Write a description of the image in the 'Alternative image text (alt text)' field to describe the image to people who can't see it.
- Write a caption for your image in the 'Image caption' field to add explain how the image is relevant to the content on the page.
Adding multimedia
You must only embed multimedia content that is accessible. Make sure you add captions to videos and provide transcripts of audio files so that everyone has access to the same content.
To add multimedia content, paste the embed code for your photo gallery, video, or map into the 'Embed code' field - make sure your iframe embed is accessible.
Find out about embedding:
Working in the template
The Focus component is a fixed-position component, so you can't move it to another part of the page.
Click 'Collapse this section' to hide the Focus component while you work on other areas of the page. The content will still appear on the preview and published pages if you collapse part of the template.