Image Viewer

Last modified: February 13, 2024

1 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.

2 Properties

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

Image Viewer Properties

Image viewer properties consist of the following sections:

2.1 Common Section

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

2.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.

2.3 Data Source Section

2.3.1 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.

2.4 Events Section

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

2.5 General Section

2.5.1 Default Image

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

2.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.

2.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

2.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.

2.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

2.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

2.5.7 Show

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

Default: Thumbnail

2.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.

3 Read More