Image
Last updated
Last updated
Available under the 'Media' category, the Image element allows you to display images.
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:
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.
Set Custom CSS classes in the Options tab in the element settings for the Image element.
Set the values for Width, Maximum Width, Height, Maximum Height in the Sizing category.
The Options tab settings for this element are described below:
Image LocationSpecifies 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 DescriptionProvide a textual description of the image. This is useful for scenarios where the browser does not display the image.
Select from Media LibraryAllows 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 SizingEnsures 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 ContentNOTE: 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 NameNOTE: 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
