Inside the UI editor, images represent another element that you can add to the UI canvas. As you might have guessed, the purpose of the image element is to allow you to add an image to the UI canvas, and subsequently, your future website.

How do you add an image into the UI canvas?

Adding an image element involves an extra step compared to adding basic layout elements such as blocks and rows, as you first need to upload an image to the asset library. Refer to the 'Uploading to the Asset Library' section of the How to Prepare Content for Peachworlds page for detailed instructions on uploading assets. Remember, we only support JPEG and PNG formats, and the maximum file size is 128MB.

1. Switch to the UI editor.
2. Click the 'Add Elements' button in the top left corner.
3. Hover over the 'Basic' section in the pop-up to open a secondary pop-up.
4. In the new pop-up, you will see an 'Other' section with three elements.
5. Click on the 'Image' element to get one step closer to adding an image in the UI editor.
6. The asset library and an image pop-up will open. Either click on an image you've previously uploaded to the asset library, or click the 'Upload' button in the top right corner of the asset library panel to upload a new image.
7. Once you select an image in the asset library, it will appear on the UI canvas. You can then adjust its size, position, style, etc.

Untitled

How do you edit image specific settings in the UI canvas?

After adding an image to the UI canvas, you can edit some image-specific settings. To access these, click on the image element. Then, scroll down to the "Image" section in the right-side inspector panel. Here, you'll find a dropdown menu with a few options:

• Fill: The image spans the entire image box, keeping its aspect ratio intact.
• Contain: The entire image is displayed, potentially leaving some empty space around it.
• Cover: The image completely fills the background, with parts potentially being cropped to fit.
• None: The image will be zoomed in to the center.