Dynamic Image

Last modified: February 20, 2024

1 Introduction

A dynamic image can be used to display an image or its thumbnail. For example, you can show a profile picture:

2 Defining an Image Entity

To correctly configure a dynamic image (for more information, see the Data Source section below), you first need to create an entity in your domain model and define that it is an image entity. This is done by the concept of inheritance, sometimes called generalization. By inheriting from System.Image your entity gets all the properties of the system image entity.

Do the following:

  1. Open your domain model and create an entity that you would like to define as an image entity.

  2. Double-click the entity to open its properties.

  3. In the Generalization property, click Select.

  4. In the Select Entity dialog box, choose System.Image and click the Select button.

  5. Click OK.

Your entity now inherits all properties from the System.Image entity you selected:

3 Properties

An example of dynamic image properties is represented in the image below:

Dynamic Image Properties

Dynamic image properties consist of the following sections:

3.1 Common Section

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.

3.2 Design Properties Section

The Design Properties allow you to change spacing and alignment of the widget and hide it on phone, tablet, or desktop, if needed. Design properties may vary depending on the type of the widget. For example, for the text widget you can change its font weight, color, alignment, and letter case.

3.3 Data Source Section

3.3.1 Entity (Path)

The Entity (path) property specifies which object will be shown in the dynamic image. It must be a System.Image or a specialization thereof. If the object in the data view is (a specialization of) System.Image you can use this object in the dynamic image as well.

3.4 Events Section

For more information on properties of this section, see the Event Actions section of On Click Event & Events Section.

3.5 General Section

3.5.1 Default Image

This is the image that is displayed if no image is uploaded.

3.5.2 Width Unit

The table below describes possible ways to specify the width of an image:

Value Definition
Pixels The width is specified in a number of pixels. If you specify both width and height, the image will be scaled automatically: the proportions will be kept, the picture will not be stretched.
Percentage (default) The width is specified in a percentage of the original width. It can be larger than its original width in which case the image is stretched.
Auto The width of the given image is used.

3.5.3 Width

This property is displayed only when the Width unit property is set to Pixels or Percentage. This property determines the width of the image, either in pixels or a percentage.

Default: 0

3.5.4 Height Unit

The table below describes possible ways to specify the height of an image:

Value Definition
Pixels The height is specified in a number of pixels. If you specify both width and height, the image will be scaled automatically: the proportions will be kept, the picture will not be stretched.
Percentage The height is specified in a percentage of the original height. It can be larger than its original height in which case the image is stretched.
Auto (default) The height of the given image is used.

3.5.5 Height

This property is displayed only when the Height unit property is set to Pixels or Percentage. This property determines the height of the image, either in pixels or a percentage.

Default: 0

3.5.6 Responsive

This property determines how the image scales. If the value is set to Yes, the image will never get bigger than its original size, but it can become smaller. If the value is set to No, the image can become both larger and smaller than its original size.

Default: Yes

3.5.7 Show

This property indicates whether the generated thumbnail or the full image is shown.

Default: Thumbnail

3.6 Visibility Properties

Visibility determines whether a widget is displayed to the end-user as part of the page.

For more information on properties of this section, see the Visibility Section section in Properties Common in the Page Editor.

4 Read More