Image

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:

  1. Database Field Name (mandatory): Defines the name of the database field to which the component's data will be mapped and stored.
  2. Image URL: Provide image URL
  3. 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.
  4. Image CSS Class: Specifies the CSS class to style or apply specific formatting to an image.
  5. Alt Text: Provides alternative text for the image, used for accessibility and displayed when the image fails to load.
  6. Picture Width: Sets the width of the image in pixels or percentage.
  7. Picture Height: Sets the height of the image in pixels or percentage.

2nd Step – Advance

  1. Design
    1. Show Image In Circle: Displays the image within a circular frame or shape, typically used for profile pictures or icons.
    2. Is Background Image: Indicates whether the image should be used as a background for a component or section.
    3. Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
    4. Image Placeholder Field: Here you enter API Field.
  2. Others
    1. Enable Slider View: Activates the slider functionality for displaying items in a carousel format.
      1. Default Card Image: Specifies a default image to display on slider cards if no image is provided.
      2. Enable Slider Navigation: Adds navigation controls (e.g., arrows) for moving through slider items.
      3. Enable Slider Pagination: Enables pagination indicators (e.g., dots) for the slider.
      4. Slider Size: Defines the dimensions of the slider container.
      5. Center Class: Specifies a CSS class for centering the slider or its items.
      6. Center Padding: Sets the padding for centering slider items.
      7. Rows: Determines the number of rows displayed in the slider.
      8. Auto-play Speed: Controls the speed of automatic transitions in the slider.
      9. Speed: Sets the transition speed between slider items.
      10. Is Auto-play: Toggles automatic sliding of items in the carousel.
      11. Swipe to Slide: Enables users to swipe to navigate slider items.
      12. Is Vertical: Toggles the vertical orientation of the slider.
      13. Vertical Swiping: Enables vertical swiping for navigating slider items.
      14. Pause on Hover: Stops auto-play when the slider is hovered over.
      15. Large Image Width: Defines the width of large images within the slider.
      16. Large Image Height: Defines the height of large images within the slider.
    2. No Data Configuration: Settings to configure the display when no data is available.
      1. No Data Image URL: Specifies the URL of the image to display when no data is available.
      2. Background Color: Sets the background color for the no-data state.
      3. Image Width: Specifies the width of the image in the no-data state.
      4. Ourt Height
      5. Title: Defines the title text displayed in the no-data state.
      6. Message: Provides a message to display in the no-data state.
    3. Is Image Base64string: Indicates whether the image is provided as a Base64-encoded string.
  3. Mobile
    1. Margin Left: Defines the space or gap on the left side of an element, controlling its position relative to adjacent elements.
    2. Margin Top: Specifies the space or gap at the top of an element, determining its vertical position relative to elements above it.
    3. Margin Right: Sets the space or gap on the right side of an element, influencing its horizontal positioning relative to adjacent elements.
    4. Margin Bottom: Defines the space or gap at the bottom of an element, controlling its vertical positioning relative to elements below it.
    5. Enable Zoom: Allows users to zoom in on an image for a closer view.
      1. Image Node (Multiple Files): Supports uploading or displaying multiple image files within a single node or component.

Click “Confirm” and “Image” control is configured.