Image/Icon
A 'Image/Icon' element can be used to include graphics or rendered HTML code in forms. The Image URL parameter specifies the path to an image file or contains HTML mark-up.
Image URL: Relative references (see example above) are interpreted starting from the 'web' folder on the server. Image files can be uploaded to this location or contained sub-folders, e.g. using File manager.
Image files that should be available via the image browser (via the '[...]') icon, must be placed in the sub-folder 'assets' or in one of its sub-folders.
It is also possible to reference images by external links, which must be available from the server.
►NOTE◄ While a portal (see Portals) allows the assignment of a data field for an Image/Icon element to determine the value for Image URL, this is not possible in input forms. However, the value of the property Image URL may be updated at runtime in both cases by assigning a valid path for an image file by the action Set value with the Image/Icon element as a target. If the Image/Icon element is placed inside a Repeatable element, the 'Data field' option 'Skip' should be selected, to ensure the image assigned by Set value appears at runtime, instead of being reset by mechanisms of the Repeatable element container.
Tip: In addition to URLs and HTML markup, an object of the 'FileInfo' type is also supported as an element value. This is supplied by a File element, for example.
Zoomable: By activating the Zoomable option, it is possible for the user to zoom in on the displayed image. On desktop PCs, zooming can be achieved by holding down the CTRL (Mac: CMD) key and simultaneously pressing the mouse wheel. It is also possible to double-click on the desired position of the image or to use a 'pinch' gesture on the touchpad.
►NOTE◄ The zoom function is not available in HTML mode!
The Show zoom hint option displays a zoom hint to the user. This option is not available if the Zoomable option is not activated.
Scaling images
Images will be displayed in their original size if the properties 'Width' and 'Height' (see the properties section 'Layout') are set to 'Auto'.
If 'Fix' is selected for exactly one of these properties, this dimension is sized by the fix setting, while the other is automatically scaled to maintain aspect ratio.
If 'Fix' is selected for both properties, the image is automatically scaled to fit a rectangle of the specified size, while maintaining aspect ratio. Typically, this will create white space left/right or above/below the image.
The image will always appear in its original aspect ratio and never stretched 'out of shape'.
Appearance in an input form
►NOTE◄ The Image/Icon element supports the Click event (similar to the Button element).
Font Awesome icons
Besides typical image file formats 'Font Awesome' icons, popular for web context, can be defined as images. They are located in a virtual folder 'Font Awesome' and can be addressed by URLs of the following structure:
fa://fa-<icon name>
The main advantage of this set of icons is that its elements are available without upload and can be resized without loss of quality thanks to vectorization.
Besides, multiple icons can be combined in the same Image/icon element using the techniques described in Working with image resources (Icons).
'Font Awesome' icons are not actually images, but a special font, so for technical reasons the size is always based on the height of the image/icon element, which then adjusts the internal font size accordingly.
►NOTE◄ With an 'auto' height, the symbol size falls back to the currently valid font size.
Example of using a 'Font Awesome' icon:
|
|
|
HTML mark-up
If HTML code is specified as the Image URL instead of a URL to an image, then this markup code is rendered in an IFRAME element:
<table style="border:3px solid black; text-align:center; font-family:sans-serif; font-weight:bold"> <tr> <td style="background-color:red;color:white">I</td> <td style="background-color:green;color:white">II</td> </tr> <tr> <td style="background-color:blue;color:white">III</td> <td style="background-color:yellow">IV</td> </tr></table> This HTML code generates an HTML table object within the IFRAME object created as an image/icon element:
|
|
|
|
