Vega Image Component

About the Configuration Window

To learn more about general component settings, view our General Component Settings article.

Display Settings

Default State Options

A static image displaying the Image component's Display settings.

Setting

Description

Hide Field

Shows or hides the component from view. Setting the Hide Field toggle to  (ON) hides the component in the Module Builder and setting the toggle to (OFF) shows the component. The component is always visible in the Module Builder.

By default, the Hidden toggle is set to (OFF).

Disable User Input

The Disable User Input toggle is used to disable to enable the user inputs for the image component.

Source

Setting

Description

URL

Enter the URL address of the image.

For images stored in Managed Assets, enter the following: {{data.getEnv.REMOTE_ROOT}}assets/[filePathAndName.jpg]. Replace [filePathAndName.jpg] with the folder path and image file. For example, {{data.getEnv.REMOTE_ROOT}}assets/application1/exampleLogo.jpg

Supported image formats include:

  • .avif (supports transparency and animation)

  • .gif (supports transparency and animation)

  • .jpg and .jpeg

  • .png (supports transparency)

  • .webp (supports transparency and animation)

Unsupported images formats do not display, but can still be accessed using UNQENG.tools.getComponentState('propertyId')

 

Alternative Text

Provide a simple description of the image. Screen Readers Screen Readers are a browser accessbility tool used to produce an audio description of a webpage. Screen readers speak the text and alternate text of a webpage. produce an audio description of the alternate text when they reach the image.

Display Settings

Setting

Description

Width

The width of the image in pixels.

Leave this field blank to use the image's original width.

Height

The height of the image in pixels.

Leave this field blank to use the image's original height.

Advanced Settings

Additional Styling

A static image displaying the Image component's Advanced settings.

Setting

Description

Custom CSS Class

Enter a Custom CSS Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules.

Updated CSS styling applies to all components that reference this custom class name.

Adding an Image Component

To use an Image component, you must have a URL address for an image. For this example, use the following image URL: https://docs.unqork.io/Content/Resources/Images/exampleLogo.jpg.

Configure the Image Component

1. In the Module Builder, drag and drop an Image component onto the canvas.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter imageLogo.
3. In the URL field, enter https://docs.unqork.io/Content/Resources/Images/exampleLogo.jpg.
4. In the Alternative Textfield, enter A static image displaying the company logo..
5. Click Save Component.
6. Save your module.

Preview your module in Express View. The image displays at its original size.

A static image displaying the Express View example of an Image component.

Inspect the image using your browser's DevTools The DevTools Console helps you securely store, build, test, and deploy your software. to display the Alternate Text value in the alt attribute.

A static image displaying the Express View example of an Image component, the DevTools console displays the alt attribute text.

 

About the Configuration Window

To learn more about general component settings, view our General Component Settings article.

Display Panel

A static image displaying the Image component's Display settings.

Source

Setting

Description

URL

Enter the URL address of the image.

For images stored in Managed Assets, enter the following: {{data.getEnv.REMOTE_ROOT}}assets/[filePathAndName.jpg]. Replace [filePathAndName.jpg] with the folder path and image file. For example, {{data.getEnv.REMOTE_ROOT}}assets/application1/exampleLogo.jpg

Supported image formats include:

  • .avif (supports transparency and animation)

  • .gif (supports transparency and animation)

  • .jpg and .jpeg

  • .png (supports transparency)

  • .webp (supports transparency and animation)

Unsupported images formats do not display, but can still be accessed using UNQENG.tools.getComponentState('propertyId')

 

Alternative Text

Provide a simple description of the image. Screen Readers Screen Readers are a browser accessbility tool used to produce an audio description of a webpage. Screen readers speak the text and alternate text of a webpage. produce an audio description of the alternate text when they reach the image.

Default State Options

Setting

Description

Hide Field

Shows or hides the component from view. Setting the Hide Field toggle to  (ON) hides the component in the Module Builder and setting the toggle to (OFF) shows the component. The component is always visible in the Module Builder.

By default, the Hidden toggle is set to (OFF).

Disable User Input

The Disable User Input toggle is used to disable to enable the user inputs for the image component.

Display Settings

Setting

Description

Width

The width of the image in pixels.

Leave this field blank to use the image's original width.

Height

The height of the image in pixels.

Leave this field blank to use the image's original height.

Advanced Panel

A static image displaying the Image component's Advanced settings.

Additional Styling

Setting

Description

Custom CSS Class

Enter a Custom CSS Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules.

Updated CSS styling applies to all components that reference this custom class name.

Accessibility Panel

A static image displaying the accessibility settings configuration of the Image component in Classic Designer view.

Accessibility

Setting Description

Hide From Screen Readers

This setting is used to prevent from being announced by screen readers. It is mostly used for decorative or non-essential content.

Custom ARIA Attributes

This is a long example of text in a description. This setting is used to enhance accessibility beyond the built-in settings. You can add ARIA Attributes and their values to define how assistive technologies interpret your component.

Adding an Image Component

To use an Image component, you must have a URL address for an image. For this example, use the following image URL: https://docs.unqork.io/Content/Resources/Images/exampleLogo.jpg.

Configure the Image Component

1. In the Module Builder, drag and drop an Image component onto the canvas.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter imageLogo.
3. In the URL field, enter https://docs.unqork.io/Content/Resources/Images/exampleLogo.jpg.
4. In the Alternative Textfield, enter A static image displaying the company logo..
5. Click Save & Close.
6. Save your module.

Preview your module in Express View. The image displays at its original size.

A static image displaying the Express View example of an Image component.

Inspect the image using your browser's DevTools The DevTools Console helps you securely store, build, test, and deploy your software. to display the Alternate Text value in the alt attribute.

A static image displaying the Express View example of an Image component, the DevTools console displays the alt attribute text.

 

Structure of an Image Component's Data

Using the example above, execute the Vega Console command UNQENG.tools.getComponentState('imageLogo') in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software. to display the component's data structure:

A static image displaying the data structure of an Image component.