The “Image” control is used to display an image within the “Visual Interaction Template” which can either be a static image uploaded directly to the template or dynamic and come from the image data of a “Thing”.
Properties
- Title: Enter a label for your image within this field to help you identify the image (e.g. ‘Item Packaging Image’)
- Alt Text: Enter the ALT Text meta tag for the image within this field
- Height: Set the image height in pixels within this field
- Width: Set the image width in pixels within this field
- Scale: Enables you to scale the image size by percentage of its maximum full dimensions. The image can be scaled to 25%,50%,75% or 100% of its original size.
- Alignment: Select the dropdown within this field to set the alignment of the image and position it to the left, right or center of the container its in. If this Alignment property is set, it will take precedence over any Alignment property applied on any section or container the image is placed in.
- Source: This field specifies the source for the image to be displayed and can be set to :
- Upload Image: In order to upload and display a static image within the template uploaded from your device. Select a language code and click on “Browse Images” to select an image from your device or drag and drop an image from your device into the container to upload.
- From Entity Instance: In order to display a dynamic image which comes from the “Thing” / “Entity Instance” data, select this option. Then, specify the path for the image attribute you wish to pull the image URL data from (e.g. data.productImage)
- External URL: In order to display a static image located outside the system, please select this option. Then, add the full URL path for the image (e.g. ‘https://www.image-source.com/product-image.jpg’) A different image URL can be added for each language using the language selector dropdown beside it.
