Adding and Configuring Image Component On a Badge
Overview
The Image component in the Badge Editor allows users to upload, position, resize, and configure images on a badge layout. Users can fully customize how an image appears on the badge, including dimensions, angle, dependencies, and positional coordinates. Additionally, users can expand or collapse the image attributes by clicking on the image thumbnail.
Step-by-Step Approach
-
Drag and drop an image onto the badge design
Users can add an image by dragging and dropping it directly onto the badge canvas. The image will appear at the dropped position and can be further adjusted.
-
Select the image from the local system
Users can upload an image by selecting the Image component and choosing a file from their local device. The selected image is then placed on the badge.
-
Open/close image attributes via thumbnail
Clicking on the image thumbnail in the editor panel will toggle the visibility of the image attributes section. This allows users to expand or collapse settings like width, height, angle, dependency, and coordinates for a cleaner editing workspace.
-
Remove the selected image
Users can delete an existing image by selecting it and clicking the remove or delete option within the editor panel.
-
Select/Unselect “Add new image to the badge at same position”
Users can enable or disable the option to automatically place a newly selected image in the exact position of the previously removed image. When enabled, the editor maintains the placement coordinates for new images.
-
Select/Unselect dependency field
Users can configure whether the image should only appear on the badge when a selected dependency field contains a value. By selecting or unselecting this option, users control conditional visibility.
-
Enter or edit width value
Users can manually type or adjust the width of the selected image. The image resizes on the badge as the value changes.
-
Enter or edit height value
Users can update the height value of the image to adjust scaling or alignment. The badge preview updates instantly.
-
Select angle from the angle select field
Users can rotate the image by choosing a rotation angle from the dropdown. This allows precise orientation of the image.
-
Search and select dependency from the dependency select field
Users can browse or search for a dependency field to link with the image component. This ensures the image appears only when the dependency condition is met.
-
Enter or edit X coordinates for horizontal position
Users can adjust the horizontal placement of the image by entering or editing the X coordinate. Higher values move the image further right.
-
Enter or edit Y coordinates for vertical position
Users can modify the vertical placement of the image by updating the Y coordinate. Higher values move the image downward on the badge.