Media Blocks
Media block page components serve as a way to create media and image content on the page.
There are 5 media block page components to choose from:
- Image - a single image that fills the width of the containing layout.
- Responsive Image - an image that switches between the mobile and desktop image versions and that fills the width of the containing layout.
- Image Row - a list of images with an optional text and a link.
- YouTube Video Player - a video player element that takes a YouTube URL and displays a stylized video player.
- Image Banner - a full screen width image which acts as the cover image for the page. It can only be created in the root of the content (similarly as Section Layouts).
Common Content
All media block page components have a Picture element that needs an image and a content description (alt text). Picture element accepts most of the image formats, such as PNG, JPEG, WebP, SVG and GIF, however, to read more about the available formats and image sizes, please go to the Media page
It is important to add a detailed image content description (alt text) for the website to be accessible for people who use screen readers, thus, this needs to be filled in. It is the only way some people are able to use the web so it is really important to do this. Some additional information about alt text:
Common Settings
All media block content is set to lazy load by default, thus, all media block page components have one setting in common - Disable Lazy Loading.
Disable Lazy Loading
It is a toggle which once toggled turns off the media lazy loading.
Lazy loading is a practice of delaying load or initialization of the media resources or objects until they're actually needed. This means that the media is not downloaded from the servers and will not be visible on the page until it is scrolled to or visible on the user's screen.
Having most of the media lazy loaded makes the website load faster, improves the website performance score and saves user's bandwidth, thus, it is a good practice to lazy load media resources most of the time. However, it is a bad practice to lazy load media resources that are initially visible on the page or is the main picture of the page, thus, it is important to activate this toggle and disable the lazy loading for the first visible media on the page. If unsure when to toggle this setting, please contact the website administrators and they will be happy to help to set up your page media correctly.