You have to go through a two-step form wizard to enable this
Control, i.e., Design & Advance. Let’s explain these steps
below:
1st Step – Design
This is the first step of
the “Image” control form wizard. Here
you are required to fill in the following details:
Database Field Name (mandatory): Defines the name of the database field to which the component's data will be mapped and stored.
Image URL: Provide image URL
Column Width: Specifies the width of a column in a layout or grid system, allowing control over how much space the column occupies relative to others.
Image CSS Class: Specifies the CSS class to style or apply specific formatting to an image.
Alt Text: Provides alternative text for the image, used for accessibility and displayed when the image fails to load.
Picture Width: Sets the width of the image in pixels or percentage.
Picture Height: Sets the height of the image in pixels or percentage.
2nd Step – Advance
Design
Show Image In Circle: Displays the image within a circular frame or shape, typically used for profile pictures or icons.
Is Background Image: Indicates whether the image should be used as a background for a component or section.
Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
Image Placeholder Field: Here you enter API Field.
Others
Enable Slider View: Activates the slider functionality for displaying items in a carousel format.
Default Card Image: Specifies a default image to display on slider cards if no image is provided.
Enable Slider Navigation: Adds navigation controls (e.g., arrows) for moving through slider items.
Enable Slider Pagination: Enables pagination indicators (e.g., dots) for the slider.
Slider Size: Defines the dimensions of the slider container.
Center Class: Specifies a CSS class for centering the slider or its items.
Center Padding: Sets the padding for centering slider items.
Rows: Determines the number of rows displayed in the slider.
Auto-play Speed: Controls the speed of automatic transitions in the slider.
Speed: Sets the transition speed between slider items.
Is Auto-play: Toggles automatic sliding of items in the carousel.
Swipe to Slide: Enables users to swipe to navigate slider items.
Is Vertical: Toggles the vertical orientation of the slider.
Vertical Swiping: Enables vertical swiping for navigating slider items.
Pause on Hover: Stops auto-play when the slider is hovered over.
Large Image Width: Defines the width of large images within the slider.
Large Image Height: Defines the height of large images within the slider.
No Data Configuration: Settings to configure the display when no data is available.
No Data Image URL: Specifies the URL of the image to display when no data is available.
Background Color: Sets the background color for the no-data state.
Image Width: Specifies the width of the image in the no-data state.
Ourt Height
Title: Defines the title text displayed in the no-data state.
Message: Provides a message to display in the no-data state.
Is Image Base64string: Indicates whether the image is provided as a Base64-encoded string.
Mobile
Margin Left: Defines the space or gap on the left side of an element, controlling its position relative to adjacent elements.
Margin Top: Specifies the space or gap at the top of an element, determining its vertical position relative to elements above it.
Margin Right: Sets the space or gap on the right side of an element, influencing its horizontal positioning relative to adjacent elements.
Margin Bottom: Defines the space or gap at the bottom of an element, controlling its vertical positioning relative to elements below it.
Enable Zoom: Allows users to zoom in on an image for a closer view.
Image Node (Multiple Files): Supports uploading or displaying multiple image files within a single node or component.
Click “Confirm” and “Image” control is
configured.