Image

Image element

Available under the 'Media' category, the Image element allows you to display images.

---

Sizing the image

By default, the image element adjusts its width based on the parent element it is contained within. The height of the image is automatically adjusted to preserve its aspect ratio.

You can change the size of the image using the following ways:

Border dragging

You can resize images by using the rectangular notches that appear when you select the element. The aspect ratio of the image is maintained during the resizing process.

Resizing Images

Custom CSS Classes

Set Custom CSS classes in the Options tab in the element settings for the Image element.

Design Tab

Set the values for Width, Maximum Width, Height, Maximum Height in the Sizing category.

---

Options

The Options tab settings for this element are described below:

Image Location

Specifies the URL of the image you want to display. You can set this to an external URL or the URL of an image from the app's Media Library (see Select from Media Library below).

Image Description

Provide a textual description of the image. This is useful for scenarios where the browser does not display the image.

Select from Media Library

Allows you to select an image from the app's Media Library. It automatically sets the Image Location to the URL of the image selected.

Auto Sizing

Ensures that the image width fits in the area of the parent element it is inside. The height of the image is adjusted to maintain its aspect ratio.

Dynamic Content

NOTE: This setting only appears for Image elements inside a Data Design element.

When this setting is ON, it enables you to set the name of the placeholder field (see Field Name setting below) with which the value of the Image Location setting will be dynamically provided using Page Flow.

Field Name

NOTE: This setting only appears for Image elements inside a Data Design element.

When the Dynamic Content setting is ON, this setting contains the name of the placeholder field with which the value of the Image Location setting will be dynamically provided using Page Flow.

For a general information about images see:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img