Image widgets are used to show images to the users.
There are two image widgets in Mendix Studio:
- Image – allows you to show a static (non-changing) image in your app
- Dynamic image – allows you to show a dynamic image (for example, a relevant profile picture that is different for each customer) in your app
You can switch between static and dynamic image in widget’s properties. For more information, see the General Section.
2 General Section
You can switch between static and dynamic image in the General section, as well as set the image itself, configure its width and height, etcetera.
Before configuring settings in the General section for the Dynamic Image, keep in mind that it can only function inside a data container (a list view or a data view). You can either place widget in an existing data container; or click Wrap with a new data view in Properties to create a data view automatically and place an input element inside it.
Settings available for Static Image and Dynamic Image are described in the table below:
|Property||The property applies to||Description|
|Image Source||Static and Dynamic Images||Switches between static and dynamic image.|
|Entity||Dynamic Image||Specifies which entity will be shown in the dynamic image. You can only set an entity for the dynamic image if the entity has been configured as image in Studio Pro. For more information, see section General Properties in Entities in the Studio Pro Guide and Dynamic Image (document template) in the Studio Pro Guide.|
|Image||Static Image||Sets an image that will be shown to the end-user.|
|Default Image||Dynamic Image||This is the image that is displayed if no image is uploaded.|
|Width Unit||Static and Dynamic Images||The width of an image can be specified in the following ways:
Default value for Width Unit: Auto
|Width||Static and Dynamic Images||The Width option is only displayed when Pixels or Percentage are selected for the Width Unit. It specifies the width of the image in pixels or percentage.|
|Height Unit||Static and Dynamic Images||The height of an image can be specified in the following ways:
Default value for Height Unit: Auto
|Height||Static and Dynamic Images||The Height option is only displayed when Pixels or Percentage are selected for the Height Unit. It specifies the height of the image in pixels or percentage.|
3 Events Section
You can choose the On Click Action in the Events section. The On Click Action defines what action is performed when the user clicks an image.
3.1 Common Properties
The static image and the dynamic image share the properties in the Events section, except for one property that is specific for the dynamic image.
For more information on the Events section for static and dynamic images, see Events Section in Widgets.
3.2 Dynamic Image Specific Property
The dynamic image has a specific on-click action Enlarge on Click. The full-size image will be displayed when the user clicks it. This property overrides other on-click actions.
4 Design Section
For information on the Design section and its properties, see Design Section in Widgets.