Inside the UI editor images are another type of element that you can add onto the UI canvas. The purpose of the image element is as you have probably guessed to be able to add an image onto the UI canvas and consequently your future website.

How do you add an image into the UI canvas?

Unlike with the basic layout elements like blocks and rows there is an extra step in adding an image element as you must first upload an image to the asset library. Review the uploading to the asset library section of the how to prepare content for Peachworlds page to see everything with regards to uploading assets. Also don’t forget that we only support jpeg and png formats and the max file size is limited to 128mb.

1. Make the switch to the UI editor
2. Click on the Add elements button in the top left corner
3. On the pop up hover over the “basic” section to open another pop up
4. On the new pop up you should see a “other” section with 3 elements
5. Click on the “Image” element to be one step closer to adding an image into the UI editor
6. Now the asset library will open as well as an image pop up. Click on an image you have uploaded to the asset library OR click on the upload button in the top right corner of the asset library panel and then proceed to upload an image of your choosing
7. Once you click on an image in the asset library it will be uploaded onto the UI canvas and you can proceed to edit its size, position, style ect.

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

Once you have added an image into the UI canvas there are some specific image only settings you can edit. To view these you must click on the added image element and then proceed to scroll down to the last section on the right-side inspector panel called image. There you will see a dropdown menu with a couple of options:

• Fill: The image covers the entire image box, while maintaining the aspect ratio.
• Contain: The entire image will be visible, possibly leaving empty space around it.
• Cover: The image will cover the entire background, possibly cropping parts of it to fit.
• None: The image will be zoomed in to the middle.

👉 Want to learn about adding videos to the UI canvas?