Media
Media is a shared subcomponent used by Page Headers, Banners, and other media-based components.
#Media
Source type
| Media type | What to provide |
|---|---|
| Image | Upload an image and add meaningful alternative text. |
| Vimeo | Enter the Vimeo video ID only, such as 1153456150. |
| YouTube | Enter the YouTube video ID only, such as dQw4w9WgXcQ. |
Do not paste a full Vimeo or YouTube URL into an ID field. Confirm that the video's privacy settings allow it to be embedded.
Image optimisation
Keep Optimize Image enabled for most images. The site will create responsive sizes and formats. Disable it only for a suitably sized, pre-optimised asset that must be served unchanged, such as the homepage WebP.
Display and animation
| Setting | Options | Purpose |
|---|---|---|
| Border Shape | Rounded, Circle, None | Changes the media outline. Circle works best with square images. |
| Aspect Ratio | Standard, Square, Widescreen, Landscape | Sets the visible media frame. Use a consistent ratio for related items. |
| Animate | On or off | Enables media animation settings. |
| Media Animation | None, Zoom on hover, Zoom on scroll | Selects the effect when animation is enabled. |
Background Media
Some components use the older Background Media subcomponent rather than Media.
Set: image and alternative description, image or video mode, Vimeo/YouTube/other video source, the matching video ID or file URL, video description, overlay strength, and parallax effect.
Only complete the fields for the selected source. For a background video, provide a useful description because background motion may not communicate the same information to every visitor.