With this tool, the desired picture can be added in the form.
Picture tool icon at Toolbox
How it looks like on the Canvas
Compatibility
| Free Form | Responsive Form | Mobile |
Properties
Properties of the form tool;
-
Name: The name of the tool will be written here.
-
Picture Path: Adds a URL of an image of the picture.
-
Help Text: It is the text that is entered for comment when the mouse is placed on the tool.
-
Height / Width: Adjusts the height and width of the tool (The width field has been removed from Responsive Forms).
-
From Left / Top: Adjusts the distance of the tool from the left and top (This field has been removed from responsive forms).
-
Store in File: When the feature is activated, the inserted image is stored in a local folder on the server where Xpoda is installed, instead of being stored in the table in SQL.
-
Display: Makes the tool not appear on the screen.
-
Form Only: The information entered in the tool is not saved to SQL, but only in form.
Action
-
Picture Change: Assign an “Action” as on picture changes handler. For more information please click here.
Example Used
After adding the image tool, click on the tool to add an image to the client, and select the desired image from the opened tab. Once the desired image is selected, the client view is as follows. Once the form is saved, the image will be saved in the database.
Client view on screen
Adding a CSS Property to the Picture Tool
(object-fit and object-position )
This section explains the object-fit and object-position CSS properties, which control how images are aligned and scaled within a container (Picture element). The impact of different values on image behavior is illustrated with examples.
object-fit CSS Property
The object-fit property allows you to control how an image is displayed within a Picture element. This property is used to determine how images are aligned and scaled.
Below are descriptions of object-fit values:
object-fit: fill;
The image is resized to completely fill the Picture container. The original aspect ratio is not preserved; the image is stretched or compressed horizontally or vertically as needed.
object-fit: cover;
The image is enlarged while preserving its aspect ratio so that it does not overflow the Picture container. Any overflowing parts are cropped if necessary. The entire image may not be visible.
object-fit: contain;
The image is resized to fit inside the Picture container while preserving its aspect ratio. The image is fully visible, but gaps may appear in the Picture container.
object-fit: scale-down;
The image is scaled down to whichever is smaller between none and contain. That is, the image either remains at its original size or is scaled down to fit within the Picture container.
object-fit: none;
The image remains at its original size; no resizing is performed. It is not checked whether it fits within the Picture container.
object-position CSS property
Controls the positioning of an image within the Picture tool. It is often used in conjunction with the object-fit property.
It allows you to specify where to place an image within the Picture container. Especially when using object-fit: cover or contain, this property can be used to adjust which part of the image is in the foreground.
object-position: <horizontal> <vertical>;
- <horizontal>: Horizontal alignment (e.g., left, center, right, 10%, 30px)
- <vertical>: Vertical alignment (e.g., top, center, bottom, 20%, 5px)
Note: If only one value is provided, the second value is automatically assumed to be center.
Example Usage:
object-position: center center; /* Centers (default) */
object-position: top right; /* Top right corner */
object-position: 20% 80%; /* 20% horizontally, 80% vertically */
object-position: 10px 15px; /* 10px and 15px away from the top left */