If you would like to upgrade to a newer long-term support version of Studio Pro, see Moving from Mendix Studio Pro 8 to 9.

Image Viewer

Last modified: September 1, 2024

Introduction

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

An image viewer must be placed in a data view or a template grid.

Properties

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

Image viewer properties consist of the following sections:

Common
Data source
Design Properties
Events
General
Visibility

Common Section

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

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.

Data Source Section

Entity (Path)

The Entity (path) property specifies which object will be shown in the image viewer. 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 image viewer as well.

Events Section

For more information on properties of this section, see the Event Actions section of On Click Event & 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.

Not supported on native mobile pages.

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.

This property is not supported on native mobile pages.

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.