CUI Editor · LESSON 2 / 5
Add an image and progress bar
Add an illustration and progress bar to your card.
Before you start
- A browser and the CUI editor. No server is needed to follow this lesson.
- Continue with the previous lesson’s project or import its example JSON.
Video and chapters
On screen
Add an image to the content
Select Content, add an image and check its direct HTTPS URL and preview before confirming.
Descriptive transcript and files
This video is silent. The transcript describes actions and visual results; captions repeat the on-screen instructions.
- 0:00
Add an image to the content — Select Content in Layers, then open Add.
- 0:06
Paste an HTTPS image URL — Check the address in Image URL and the image in the preview.
- 0:09
Check the image and its proportions — The image is 1600 × 900 pixels. Click Add image.
- 0:12
Keep the image proportions — Contain without distortion prevents the image from stretching.
- 0:15
Set the image size — W: 320 pixels. H: 180 pixels, for a 16:9 image.
- 0:22
Place the illustration in the card — X: 304 pixels. Y: 310 pixels.
- 0:26
The image keeps its proportions — Now add a progress bar beside the illustration.
- 0:31
Customize the label — Replace Progress with Community objective.
- 0:36
Set progress to 75% — The value updates both the percentage and the length of the bar.
- 0:39
Place progress beside the image — Layout: W 280, H 104, X 660, Y 330.
- 0:46
Check the result with Test — The image and progress bar should fit inside the card without overlapping.
- 0:50
Image and progress are in place — The bar displays 75% and the image keeps its 16:9 ratio.
Follow the steps
- Continue with the project from tutorial 1.
- Add an HTTPS image and keep its proportions with Contain without distortion.
- Add the Progress component, then change its value and label.
A button won’t respond, or an image won’t load?
- For a manually added button, set an action in Interaction, then choose Test. Composed windows have a shared frame close control; a kit or custom button may need its own Close interface action.
- For an image, use a direct HTTPS URL and check the loading status below the field. Some hosts block browser previews.
- If the canvas seems lost, use Fit. To revert an edit, use Undo or Ctrl / Cmd + Z.
Test simulates local interactions. Checking file structure is not proof of in-game behavior; plugin commands and actions also need server testing.
Which data is dynamic?
In components offering Source, Fixed value keeps your text or number. Native data uses information offered by the inspector, such as the player’s name or online players. Owner data expects a field supplied by the owning integration: entering a name does not create that data.
Previews use example data and may simulate some actions. They do not automatically read a server’s accounts or inventory and do not verify its permissions.
The four videos and their projects show the standalone workflow recorded in October 2026; their images and former labels are retained. For current Window/Page settings, format and ZIP export, follow the Server windows guide.