--- title: "Image Control" slug: "image-control" updated: 2025-12-11T01:28:10Z published: 2025-12-11T01:28:10Z canonical: "docs.processmaker.com/image-control" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.processmaker.com/llms.txt > Use this file to discover all available pages before exploring further. # Image Control The Image control has the following functionality: - The Image control displays a specified image that is GIF, JPG, or PNG file types. - The image control may reference another control's [Variable Name](/v1/docs/request-variable) setting to display its value, such as to display the signature saved in a [Signature](/v1/docs/signature-control) control. The Signature control saves the signature as a PNG image. > This control is only available for the following Screen types: > > - Display type > - Form type > > See [Screen Types](/v1/docs/screens#screen-types). Watch the following product tour to learn how to use a Image control. [Embedded content](https://app.supademo.com/embed/dLjwEMFl5dkToFcYg0lSS) --- ## Add the Control to a Screen **Permissions** Your user account or group membership must have the following permissions to design a Screen unless your user account has the **Make this user a Super Admin** setting selected: - Screens: Edit Screens - Screens: View Screens See the [Screens](/v1/docs/permission-descriptions-for-users-and-groups#screens) permissions or ask your Administrator for assistance. Follow these steps to add this control to the Screen: 1. [Create a new Form-type or Display-type Screen](/v1/docs/create-a-new-screen) or [edit an existing one.](/v1/docs/manage-screens#edit-a-screen) 2. From the Controls Menu on the left, expand the **Content Fields** category and then locate the **Image** icon ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/824311b9-7475-4404-ad2d-72f7cf4da087.png). 3. Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/0e45c8e1-5f6e-4cb2-971c-bec66d8b60a9.png) 4. Configure the Image control. See [Settings](/v1/docs/image-control#settings). 5. Validate that the control is configured correctly. See [Validate Your Screen](/v1/docs/validate-and-publish-a-screen#validate-a-processmaker-screen). Below is an Image control used in the top bar and configured in three columns. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/c338b136-54e7-41f4-9a9f-a07c9d3eaa40.png) --- ## Settings The Image control has the following configurable settings in the Properties Panel: - [**Configuration** panel](/v1/docs/image-control#configuration-panel-settings) - [**Design** panel](/v1/docs/image-control#design-panel-settings) - [**Advanced** panel](/v1/docs/image-control#advanced-panel-settings) --- ### Configuration Panel Settings Expand the **Configuration** panel from the Properties Panel on the right to configure the following properties: #### Name Enter the alphanumeric name that identifies the image in this [Screen](/v1/docs/screens). ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/7a616242-481b-4191-b105-9cb9f59d6740.png) #### Upload Click the **Upload** button to browse for the GIF, JPG, or PNG file type image to upload to the Image control. **Preview** Preview the uploaded image. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/7487adbe-24bd-4565-875a-8711af239ab8.png) #### Render Image from a Variable Name Select the **Render image from a variable name** setting to render as an image the content of another control by referencing that control's **Variable Name** setting value. For example, render an image of a signature from the [Signature](/v1/docs/signature-control) control. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/5350ae81-2aa8-48aa-b1b2-47e28b1902a7.png) Do not use this setting to display a file referenced from a [File Upload](/v1/docs/file-upload-control) control. After selecting the **Render image from a variable name** setting, the **Variable Name** setting displays. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/b8970b6f-aedf-4e9a-aabf-a15cc20db94c.png) In the **Variable Name** setting, enter the [Request variable](/v1/docs/request-variable) name setting value of the content to display as an image in the Image control. This Request variable must contain the content of the image. For example, to display a digital signature entered into a [Signature](/v1/docs/signature-control) control with a **Variable Name** setting of `SignDocument`, enter `SignDocument`. If the Signature control has been signed, that digital signature displays in the Image control when it displays. #### Helper Text Enter text that provides additional guidance on this control's use. This setting has no default value. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/b2b53b58-aae6-4611-878f-3ef4b18298ab.png) --- ### Design Panel Settings Expand the **Design** panel from the Properties Panel on the right to configure the following properties: #### Height Enter the height of the uploaded image in pixels. If the [**Width**](/v1/docs/image-control#width) setting has no value, the Image control adjusts the uploaded image to the **Height** setting value. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/16f86d84-3b7b-4678-bad4-52afaaea01df.png) #### Width Enter the width of the uploaded image in pixels. If the [**Height**](/v1/docs/image-control#height) setting has no value, the Image control adjusts the uploaded image to the **Width** setting value. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/c1ecb353-6d21-4c43-bc0c-5e81d8cef246.png) --- ### Advanced Panel Settings Expand the **Advanced** panel from the Properties Panel on the right to configure the following properties: #### Visibility Rule Specify an expression that indicates the condition(s) under which this control displays. See [Expression Syntax Components](/v1/docs/feel-expression-syntax#show-or-hide-screen-builder-controls). If this setting does not have an expression, then this control displays by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/3b926c85-e4b7-4904-a54f-4d2f2bde52be.png) For example, this control displays if the variable value **tip** is **1**. For a detailed example of the Visibility Rule setting, see [Show or Hide Controls Based on Button Selection](/v1/docs/example-show-or-hide-controls-based-on-button-selection). Note the following regarding how to use visibility rules: - To make this control hidden until another control contains a value, enter the **Variable Name** setting value of that control to this control's **Visibility Rule** setting. - [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings). #### Device Visibility Select on which device types this control displays: - **Desktop:** The control displays only on desktop devices. Enable the **Show for Desktop** toggle key. - **Mobile:** The control displays only on mobile devices. Enable the **Show for Mobile** toggle key. - **Both:** The control displays on both desktop and mobile devices. Both toggle keys are enabled by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/b2629a1e-04ae-445f-8130-4d19a708c14f.png) #### CSS Selector Name Enter the value to represent this control in custom CSS syntax when in [Custom CSS](/v1/docs/custom-css#add-custom-css-to-a-processmaker-screen) mode. As a best practice, use the same **CSS Selector Name** value on different controls of the same type to apply the same custom CSS style to all those controls. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/5d0881c5-434f-428f-9382-27f5e1f13088.png) Then, use this name in the [Custom CSS](/v1/docs/custom-css#apply-css-to-specific-processmaker-screen-controls) feature to apply CSS styling to this control as follows: ```plaintext [selector='Submit Form'] {    color: blueviolet; } ``` See the following best practices regarding custom CSS in Screens: - [Editing a CSS name to represent this control in custom CSS syntax](/v1/docs/screen-design-best-practices#css-selector-naming-best-practice) - [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings)