Dynamic Image
The Dynamic Image widget, which is not supported by the React client added to Mendix in 10.7, can be converted to an Image widget through the context menu of the widget when the React client is enabled.
For more information, see the Mendix React Client’s Migration Guide.
Introduction
A dynamic image can be used to display an image or its thumbnail. For example, you can show a profile picture:
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:
-
Open your domain model and create an entity that you would like to define as an image entity.
-
Double-click the entity to open its properties.
-
In the Generalization property, click Select.
-
In the Select Entity dialog box, choose System.Image and click the Select button.
-
Click OK.
Your entity now inherits all properties from the System.Image entity you selected:
Properties
An example of dynamic image properties is represented in the image below:
Dynamic image properties consist of the following sections:
Common Section
Design Properties Section
Data Source Section
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.
Events Section
General Section
Default Image
This is the image that is displayed if no image is uploaded.
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. |
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
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. |
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
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
Show
This property indicates whether the generated thumbnail or the full image is shown.
Default: Thumbnail
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.