Vega Image Component
Overview
The Vega Image component lets you display images in your Front-End modules. With this component, you can specify image dimensions, alternate text A screen reader is a browser accessibility tool that plays an audio description of the text and alternate text on a website., or apply a custom CSS class Cumulative Layout Shift (CLS) measures how much elements in a webpage shift while using it. Some search engines use the CLS metric to rate a website's accessibility in their search rankings.. Use this component by specifying the URL of external image files, or image files stored in Managed Assets.
You can find the Vega Image component under the Display & Layout group to the left of the Module Builder.
About the Configuration Window
TIP To learn more about general component settings, view our General Component Settings article.
Display Panel
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:
NOTE 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 |
|---|---|
|
Hidden |
Shows or hides the component from view. Setting the Hidden toggle to (ON) hides the component in By default, the Hidden toggle is set to (OFF). |
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
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. |
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. |
Preview your module in Express View Express View is how your end-user views you application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.. The image displays at its original size.
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.
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:
Resources
