Image

4 minutes to read Download PDF Edit

The image widget can be used to show a predefined image on a page, layout or snippet.

Common properties

Name

The internal name of the widget. You can use this to give sensible names to widgets. The name property also appears in the generated HTML: the widget DOM element automatically includes the class ‘mx-name-{NAME}’, which can be useful for Selenium testing.

Class

The class property allows you to specify a cascading style sheet (CSS) class for the widget. This class will be applied to the widget in the browser and the widget will get the corresponding styling. The class should be a class from the theme that is used in the project. It overrules the default styling of the widget.

Style

The style property allows you to specify additional CSS styling. If a class is also specified, this styling is applied after the class.

Events properties

On click

This property specifies what action is executed when the element is clicked. There are three options:

ActionEffect
Call a microflowThe specified microflow is executed.
Open a pageThe specified page is opened.
Do nothingNothing happens. This is useful for setting up a page without defining the underlying functionality yet.

_Default value:_ Do nothing

Page (only for “Open a page”)

The page that should be opened.

See Opening Pages.

Microflow (only for “Call a microflow”)

The microflow that should be executed.

Microflow settings (only for “Call a microflow”)

The microflow settings specify what parameters will be passed to the microflow, whether to show a progress bar or not, and more.

See Starting Microflows.

General properties

Image

The actual image that this widget shows.

See Images.

Width Unit

The width of an image can be specified in three ways: pixels, percentage or auto. 

ValueDefinition
PixelsThe width is specified in a number of pixels. If you specify both width and height, the image will be scaled proportionally in the rectangle you define.
PercentageThe width is specified in a percentage of the container of the image. It can be larger than its original width in which case the image is stretched.
AutoThe width of the given image is used.

Default value: Auto

Width

The width of the image in pixels or percentage (see width unit). In the case of ‘Auto’, no value needs to be specified.

Default value: not applicable

Height Unit

The height of an image can be specified in three ways: pixels, percentage or auto. 

ValueDefinition
PixelsThe height is specified in a number of pixels. If you specify both width and height, the image will be scaled proportionally in the rectangle you define.
PercentageThe height is specified in a percentage of the container of the image. It can be larger than its original height in which case the image is stretched.
AutoThe height of the given image is used.

Default value: Auto

Height

The height of the image in pixels or percentage (see height unit). In the case of ‘Auto’, no value needs to be specified.

Default value: not applicable

Responsive

This property influences how the image scales. If the value is ‘Yes’, the image wil never get bigger than its original size. It can become smaller. If the value is ‘No’, the image can become both larger and smaller than its original size.

Default value: Yes

Visibility properties

Visible

By default, whether or not an element is displayed in the browser is determined by how the page is designed and the user’s roles within the application. However, the page can be configured to hide the element unless a certain condition is met. 

Attribute Condition

Attribute

When checked, this setting hides the widget unless a particular attribute has a certain value. Only boolean and enumeration attributes can be assigned to this purpose.

A practical example would be a web shop in which the user must submit both billing and delivery information. In this case you might not wish to bother the user with a second set of address input fields unless he or she indicates that the billing and delivery address are not the same. You can accomplish this by making the delivery address fields conditionally visible based on the boolean attribute SameBillingAndDeliveryAddress.

Module roles

The widget can be made visible to a subset of the user roles available in your application. When activated, this setting will render the widget invisible to all users that are not linked to one of the selected user roles. Please note that this does not override project security. Any restrictions due to microflow, form, or entity access will remain in effect.