Image

Content

Image page component has one mandatory content parameter:

• Picture - a picture or an image.

One optional:

• Link - a URL to another page or website.

Picture

Picture element that has two mandatory content parameters:

• Image - a single image which supports a variety of media formats and image transparency.
• Content Description - a description of the uploaded image. It is very important to add a detailed image description for the website to be accessible for people who use screen readers.

Link

A link to another page or a different website. Adding an optional Link to the Image component will make the component clickable and will give an image a hover effect.

Settings

Image page component has the following settings:

• Hide - hides the component.
• Hide Mobile - hides the component on mobile devices (device width less than 992px).
• Hide Desktop - hides the component on desktop devices (device width more or equal to 992px).
• Picture Corners - sets the corner style of the image.
• Hide Image Shadow - hides clickable image shadow.
• Disable Lazy Loading - disables image lazy loading.
• Horizontal Position - sets the Image horizontal position on the containing layout column.
• Image Size - sets the maximum Image size.

Hide Mobile

Toggling this setting will stop showing the component on the page on mobile devices (device width less than 992px). The component will still be visible on the page on desktop devices (device width more or equal to 992px). Combining this setting with Hide Desktop setting will completely hide the element from the page similarly as Hide setting.

Hide Desktop

Toggling this setting will stop showing the component on the page on desktop devices (device width more or equal to 992px). The component will still be visible on the page on mobile devices (device width less than 992px). Combining this setting with Hide Mobile setting will completely hide the element from the page similarly as Hide setting.

Picture Corners

Toggling this setting will change the corner style of the Image. There are two options - rounded (default) or squared.

Hide Image Shadow

Toggling this setting will hide the shadow on the image that have a link applied.

Disable Lazy Loading

Toggling this setting will disable media lazy loading.

If the Image is the first image on the page and is visible straight after the page loads, it should be set not to lazy load and this toggle should be active.

Images with lazy loading attribute will be downloaded after the page has been loaded and the image is visible on the user's screen. While images without the lazy loading attribute will be downloaded when the page is being initially loaded.

Ideally all the images should be lazy loaded since this improves the website speed and performance. However, all images that are shown on the page 'above the fold' - seen immediately without having to scroll, should be set not to lazy load.

Horizontal Position

Sets the Image horizontal position in the containing layout column.

Image Size

Sets the maximum Image size. To get the default size, leave Image Size dropdown empty.