Appearance
Media
Media is the Project-level library for uploading and managing public frontend files in ioLoop.
Use Media for Project-owned assets that Pages, Forms, Page Elements, Widgets, Page Settings, CSS, and other frontend configuration need to load in a browser. Typical assets include logos, photographs, illustrations, icons, banners, screenshots, thumbnails, social sharing images, PDFs, and video files.
Media files are public frontend assets. They are intended to be accessed through media URLs and should not be used to store confidential documents, credentials, private user information, or files that require user-specific access restrictions.
For configuring an Image, Video, or YouTube Video element on a Page, see Media Elements. This page focuses on managing the underlying Project files.
What Media Is For
Media makes reusable frontend assets available throughout a Project.
Common uses include:
- Displaying a company logo, product photograph, or banner on a Page.
- Selecting an image for a Page Element or supported Widget.
- Providing images for reusable Page Slices and Data Design layouts.
- Supplying a social sharing image through Page Settings.
- Referencing a background image or icon from CSS.
- Linking to a public PDF or another supported file from Page content.
- Providing a directly accessible video file for a Video element.
- Reusing one Project asset across multiple Pages without uploading separate copies.
Media manages files and their accessible URLs. The Page Editor and Element Settings determine how those files appear in the application.
Choosing the Right Place for a File
| Need | Recommended Location |
|---|---|
| Project logo, illustration, banner, or other publicly viewable asset | Frontend → Media |
| Public PDF or video file referenced by a Page | Frontend → Media, when the file and intended use are supported |
| JavaScript or CSS maintained as Project code | Frontend → Code |
| File submitted by an application user and associated with a record | A suitable Database-backed file field or configured user-file workflow |
| Restricted file processing or operations requiring authorization | The appropriate Database and trusted Backend capabilities |
Do not use Media as a substitute for a private file repository. A file does not become private because the Page that displays it is restricted.
Project Media vs. User-Uploaded Files
Project Media and files uploaded by Project Users have different purposes.
| File Category | Typical Owner and Use |
|---|---|
| Project Media | Uploaded by a Creator for public branding, visuals, documents, metadata, or other frontend presentation. |
| User-uploaded files | Submitted through an application Form or workflow and associated with Project data or a business process. |
For example:
- An event banner, application logo, or product image is appropriate for Media.
- An attendee's supporting document, a customer's signed form, or a user's private attachment should not be placed in public Media merely so a Page can link to it.
Database-associated file storage is not automatically private. Access depends on the relevant Database table's rules and the operations used to list, read, upload, or delete those files. Verify the intended access with the relevant Project Users and User Groups.
When a workflow needs controlled server-side file operations, use the appropriate Cloud Flow features or the file capabilities exposed through the Server API. The correct approach depends on the file's purpose and required access controls.
Supported Files and Browser Compatibility
Media is intended for frontend-accessible files, particularly images, PDFs, and video resources that can be used directly by browsers or supported Page Elements.
The file's type must be appropriate for its destination:
| File Use | What to Check |
|---|---|
| Image element | The file is an image format supported by the target browser and the Image element. |
| Video element | The URL points to a directly playable video resource, with a browser-compatible format and codecs. |
| Link to a PDF or other document | The file is intended to be public and opens or downloads appropriately in the target browser. |
| Page sharing image | The file is suitable for image-based metadata and the intended sharing use. |
| CSS background or icon | The resource loads at the copied URL and works with the relevant CSS. |
A file appearing in the Media listing does not guarantee that every Page Element or browser can render it. Some file types may be listed by name and content type without a visual preview.
ioLoop does not need to convert every uploaded file into a different format for frontend use. Prepare files in an appropriate format before uploading and verify them where they will be displayed.
For Video and YouTube-specific configuration, see Media Elements.
Opening Media
To open the Project Media library:
- Open the Project in the Project Editor.
- Select Frontend.
- Open Media.
The Media page lists the Project's uploaded assets. Images can display thumbnails where available, while other files may be identified by their names and content types.
The listing can provide visual and table-style file information, including file name, type, and access. Project frontend Media is marked as Public.
If the library is empty, select Add Files to upload the first assets.
Uploading Files
Use Add Files to add one or more frontend assets to the Project Media library.
Upload Workflow
- Prepare the files on your computer.
- Open Frontend → Media.
- Select Add Files.
- Choose the files to upload, or use drag-and-drop where supported by the browser.
- Complete the upload and confirm that the files appear in Media.
- Verify that the uploaded files can be selected or loaded for their intended use.
After a successful upload, the Media page displays the newly added files. Image thumbnails are shown when the file and preview support allow it.
For assets that will be reused by several Pages, upload once and reference the same file wherever needed.
File Names
Give files clear names before uploading them.
Good examples include:
company-logo.pngspring-event-banner.jpgcheckout-success-icon.svgproduct-backpack-front.webpproduct-demonstration.mp4event-information.pdf
Avoid names such as image.png, download.jpg, or final-final-v3.png when they do not identify the file's purpose.
ioLoop normalizes file names for storage compatibility during upload. Because the stored name may differ from the local name, verify the displayed name and copied URL after upload if another component depends on an exact reference.
Prepare Files for Their Intended Use
Before uploading, check:
- Dimensions: A thumbnail generally does not need the same dimensions as a full-width banner.
- File size: Large images and videos can increase loading time and bandwidth use.
- Aspect ratio: Repeated product, profile, or card images look more consistent when their proportions are planned.
- Format: Use formats supported by the browsers and elements your application targets.
- Content: Ensure that nothing in the file is confidential or inappropriate for public access.
The upload process should not be treated as an automatic image optimizer, video transcoder, or privacy filter. Prepare and review the original asset before making it available through Media.
Finding Media
Use the Media page's Search control to filter uploaded files by name.
Meaningful file names make it easier to find assets for a particular feature, campaign, or Page.
For example, searching for event can help locate related event banners, thumbnails, or public PDF files when their names include that word.
If the expected asset is missing:
- Clear the current Search text.
- Check for a normalized or different uploaded name.
- Confirm that the upload completed successfully.
- Refresh the Media page and check again.
Search helps locate assets in the library; it does not change the files or their public accessibility.
Using Media in Pages and Forms
There are two common ways to use a Media file:
- Select it from the Media Library in a supported setting.
- Copy its URL and use that URL where a frontend-accessible resource is expected.
Prefer direct Media Library selection when the relevant element or widget provides it. Use Copy Link when the destination requires a URL.
Selecting from the Media Library
For example, to use a Project image in an Image element:
- Open the Page or Form in the Page Editor.
- Select the Image element.
- Open Element Settings.
- Choose Select from Media Library.
- Select the intended image.
- Save and Preview the Page or Form.
The Image element also has settings such as Image Description, Auto Sizing, and Lazy Loading. These affect how the image is presented or loaded, rather than how the file is stored in Media.
Some Widgets, including the AI Agent Widget's logo configuration, also support selecting a Project image from Media.
For complete Image settings, see Media Elements.
Copying a Media Link
To obtain a Media URL:
- Open Frontend → Media.
- Select the file you want to use.
- Choose Copy Link.
- Paste the copied URL into the supported destination.
- Save the relevant configuration and test the result.
Typical destinations include:
| Destination | Example Use |
|---|---|
| Image Location | Show an uploaded Project image. |
| Widget image or logo settings | Display a branded image in a supported Widget. |
| Page Settings | Set a social sharing or other metadata image. |
| CSS | Reference an image for a background or icon. |
| Link element | Open a public PDF or another suitable uploaded file. |
| Custom frontend code | Refer to a public asset when the code needs its URL. |
Use the actual Copy Link result rather than constructing a Media URL from an assumed domain, file name, or internal storage path.
Anyone with access to a public Media URL may be able to load the file directly. A copied Media link is not an authenticated download link or a permission check.
Reusing Media Across the Project
A single asset can be used by multiple Pages, Forms, Page Slices, and Widgets.
For example, a Project might use the same company logo in:
- A shared Header Page Slice.
- The Login or Account area of a Page.
- An AI Agent Widget.
- Page branding or another supported visual element.
This reduces duplicate uploads and helps maintain consistent branding.
However, the Media file and the places that reference it are separate. Updating or deleting a file reference in one Page does not automatically update every other Page or CSS rule using that file.
When making significant asset changes, identify each affected reference and test the Pages that use it.
Deleting and Replacing Media
Deleting a File
To delete a Media file:
- Open Frontend → Media.
- Select the file.
- Choose Delete.
- Review affected Page or Project references after removal.
Before deleting, consider whether the file is still referenced by:
- Page or Form Image elements.
- Shared Page Slices.
- Page Settings and social sharing metadata.
- Widgets.
- Data Design content or generated links.
- CSS and JavaScript assets.
- Page Flow or other custom code.
- External websites, documents, or other places where its URL was copied.
Deleting a Media file does not automatically repair references elsewhere. A remaining URL may lead to a missing image or failed resource request.
Replacing an Existing Asset
When an asset is already in use, a safer replacement workflow is:
- Upload the replacement file to Media.
- Locate the Pages, Widgets, metadata, CSS, and other references that use the old file.
- Update those references to the new file or new copied URL.
- Save and Preview affected Pages and Forms.
- Publish the Project when its development changes are ready.
- Verify the published experience with Launch Project.
- Delete the old asset only when it is no longer needed by any Project or external reference.
Do not assume that uploading a file with a similar name automatically replaces the existing asset or updates links that already reference it.
If an old Media URL is also used outside ioLoop, account for those external references before deleting the corresponding asset.
Access and Security
Media is intended for public frontend delivery. Files are served through directly accessible Media URLs so browsers can display them in Pages, Forms, Widgets, CSS, and related frontend contexts.
Do not upload the following to Media:
- API keys, access tokens, passwords, or other secrets.
- Confidential business or internal documents.
- Identity documents, financial records, or private personal information.
- Files that should be available only to particular Project Users or User Groups.
- User-submitted documents that require restricted access.
Restricted Pages Do Not Protect Media URLs
A Page may require authentication or belong to a restricted User Group, but hiding the Page or its Image element does not enforce restrictions on a public Media URL.
Navigation visibility and Page access are separate from file access. Treat every file in Media as suitable for public delivery.
For restricted file workflows, review the data model and permissions under Database and the relevant file-handling capabilities under Cloud Flow and the Server API.
When testing Database-backed user files, remember that built-in Database operations in Preview automatically target the development database. This does not imply that public Media URLs are private or that external services are automatically in test mode.
Previewing and Publishing
After uploading assets or changing their use in Pages, save and Preview the relevant frontend configuration.
Check that:
- The intended images, icons, and files load.
- Page Elements show the correct assets.
- Important images have appropriate Image Description values.
- Images and videos fit desktop, tablet, and mobile layouts.
- Backgrounds and icons appear in the correct places.
- Social sharing image settings reference the intended assets.
- Widgets that depend on Media display the correct images.
- Links to public PDFs and other files open or download as expected.
Preview tests the saved development version of the application. It does not replace Publish Project, which releases the Project's development changes to the published application.
After publishing, use Launch Project to check the live application and verify that its media references work as expected.
Important: The fact that a Media URL is public does not by itself establish when a changed Page or its configuration has been published. Always verify the complete user-facing result after publishing.
For the full development and publishing workflow, see Previewing and Publish Project.
Performance and Accessibility
Media affects both presentation quality and loading performance.
Images
- Resize photographs appropriately for their actual display size.
- Compress files when acceptable without losing needed detail.
- Prefer suitable browser-supported image formats.
- Use consistent image proportions across repeated cards and galleries.
- Configure Lazy Loading for appropriate below-the-fold Image elements; important initially visible images may be better loaded without delay.
- Provide meaningful Image Description text when the image conveys information. Avoid repetitive descriptions for purely decorative images where an empty description is supported.
Videos
- Choose files with browser-compatible formats and codecs.
- Avoid unnecessarily large video files in ordinary Page layouts.
- Supply a useful thumbnail where supported.
- Test actual playback on the intended browsers and devices.
- Do not assume autoplay will work in every browser, especially for videos with audio.
Documents and Linked Files
- Make link labels describe the destination or document.
- Confirm that public documents are appropriate to share with anyone who can access the URL.
- Check whether important information in a document is accessible to its intended audience.
Media settings do not replace good asset preparation. An oversized file remains oversized even if its Image element is displayed at small dimensions.
Example: Preparing Media for an Event Page
Suppose a Project includes an event information Page, a registration Form, and an administrative Page.
A practical setup could be:
- Prepare an optimized event banner and any publicly shareable event information PDF.
- Upload them through Frontend → Media.
- Use Select from Media Library to place the banner into the event Page.
- Use a Link element with Copy Link to offer the public PDF.
- Add an appropriate sharing image through the event Page's Page Settings.
- Reuse an event logo on the registration-related Pages or supported Widgets.
- Save and Preview the event Page on desktop and mobile.
- Publish the changes and verify the released Page.
If attendees upload private documents during registration, keep those uploads out of public Project Media. Use a suitable Form field and controlled data/file workflow instead.
Troubleshooting
| Problem | What to Check |
|---|---|
| An uploaded file is missing from the listing | Clear Search, check the uploaded name, confirm the upload succeeded, and refresh Media. |
| An Image is blank or broken | Verify the selected asset or pasted URL, ensure the file still exists, and Preview the saved Page. |
| An image looks stretched or cropped | Review the image's proportions, the parent layout, and the Image element's sizing settings. |
| A video does not play | Check that the URL points to a video resource, browser format and codec support, access, and playback settings. |
| A media link stopped working after deletion | Identify remaining references and replace them with a valid asset URL. |
| A Widget or Page metadata image is incorrect | Review the Widget or Page Settings that select the image, then save and Preview. |
| The published Page shows an older asset | Check that the intended references were updated, the Project was published, and the published Page is using the expected URL. |
| A Page loads slowly | Check oversized image or video files, repeated downloads, and image-loading choices. |
If the problem involves how an Image, Video, or YouTube Video element displays a valid file, review Media Elements rather than changing the Media library unnecessarily.
Good Practices
- Use Media for public, Project-owned files. Keep confidential or user-specific material in appropriately controlled workflows.
- Use descriptive file names. Name assets by their actual purpose before upload.
- Choose the correct file for each element. Image, Video, metadata, and document links have different requirements.
- Prefer Media Library selection where supported. It reduces manual URL entry.
- Use one asset where it should be reused. Avoid duplicate uploads without a clear reason.
- Optimize files before uploading. Pay attention to image dimensions, compression, and video size.
- Check dependencies before deletion. A Media file may be referenced by multiple Pages or external destinations.
- Preview and verify after publishing. Test both the development version and the released application.
Common Mistakes
Avoid these patterns:
- Uploading private documents, credentials, or restricted files to public Media.
- Assuming a restricted Page makes its Media files private.
- Using a generic input or Database file field as if it were the public Media library.
- Copying a media URL into many places without tracking the references.
- Deleting an asset before updating affected Pages, Widgets, metadata, and CSS.
- Assuming a same-named upload automatically repairs old references.
- Uploading oversized photographs or videos for small frontend uses.
- Assuming a file that appears in Media is supported by every browser or Page Element.
- Checking a file only in the editor rather than Previewing and verifying the published application.
Media is most effective when Project assets are organized, public-safe, reusable, and optimized for their intended frontend use. Treat the file library and the Pages that reference its URLs as related but separately managed parts of the Project.