Add Images In The Web Editor With The Media Manager
Learn how to use the Web Editor media manager to add images by uploading a file or entering an image URL, follow upload progress, handle validation errors, and insert the selected image into your page.
This guide explains how to use the Media Manager in the Admin Web Editor.
Use it when you want to:
- add an image to a page section
- upload an image from your computer
- insert an image from a direct URL
- understand file rules before uploading
- fix upload or URL validation problems
Before You Start
Open the Web Editor from System > Platform Customization.
Then open a page and select the image field, block setting, or media control that opens the Media Manager.
Understand What The Media Manager Does
The Media Manager is the image picker used inside the Web Editor.
When you open it from an image field or media control, it appears in a focused modal window so you can choose or upload an image without leaving the current page editor.
It lets you add an image in two ways:
- upload an image file
- enter an image URL
When an image is accepted, OpenMirai inserts it into the page area you were editing.
After a successful selection, the Media Manager closes automatically and returns you to the page editor.
If you close the Media Manager without choosing an image, the current page stays unchanged.
Use The Upload Tab
Open the Upload tab when you want to add an image file from your device.
The upload area supports both:
- clicking the panel to choose a file
- dragging and dropping a file into the upload area
While the file is dragged over the upload area, the drop zone can highlight so you know the file is ready to be dropped.
Check Supported File Types And Size
The upload area shows the supported image formats.
Supported formats include:
- JPEG
- PNG
- GIF
- WebP
- SVG
The file size limit is 10 MB.
If the file type is not supported or the file is too large, OpenMirai shows an error message instead of uploading the image.
Follow Upload Progress
After you choose a valid file, OpenMirai starts uploading it right away.
During upload, the Media Manager can show:
- an uploading label
- a percentage value
- a progress bar
While the upload is still running, upload actions are temporarily unavailable so the current upload is not interrupted.
If the upload succeeds, the selected image is inserted into the page automatically and the Media Manager closes.
Use The URL Tab
Open the URL tab when your image is already hosted online and you want to insert it by link.
In this tab:
- Enter the image URL.
- Wait for OpenMirai to validate it.
- Select Insert when the URL is accepted.
The Insert button only becomes available after the URL passes validation.
Fix URL Problems
If the URL field is empty, OpenMirai asks you to enter a URL.
If the URL format is not accepted, OpenMirai shows a validation message and keeps Insert unavailable.
This helps prevent broken image links from being added to the page.
Cancel Without Adding An Image
Use Cancel when you want to close the Media Manager without inserting anything.
This is useful when:
- you opened the wrong media field
- the image is not ready yet
- you want to keep the current image as it is
What To Do If An Upload Fails
If OpenMirai cannot finish the upload, the Media Manager shows an error message.
When this happens:
- check that the file is still under 10 MB
- confirm that the file is one of the supported image formats
- try the upload again
- use the URL tab instead if the image is already hosted online
What To Do Next
- review the inserted image in the page area where it was added
- continue editing the block settings if you need to adjust related text or layout
- save the page after confirming the image looks correct
Update Global Page Colors And Theme In The Web Editor
Learn how to use the Theme panel in the Web Editor to apply a style preset, adjust page-wide colors, optionally import a theme, undo a recent theme change, and handle restricted theme-editing states.
Use the Outline Panel to Manage Page Structure
Learn how to use the Outline panel in the Admin Web Editor to manage page structure from the left panel, find blocks faster, select the right section, rename blocks, move blocks, and add content in the correct place.