Media Library

The Media Library stores all the images and files that appear in your content. Instead of uploading the same image multiple times in different editors, you upload it once and reference it from anywhere. This keeps file storage efficient and makes it easy to update an image across many pages.

Browsing Media

The Media Library shows all uploaded files in a grid or list view. You can filter and search to find what you need.

Key fields shown per file:

• Preview: Thumbnail for images, file icon for other types.
• Filename: The original uploaded file name.
• Type: Image, video, document, or other.
• Size: File size in KB or MB.
• Uploaded by: Who uploaded the file.
• Uploaded at: When the file was uploaded.
• Alt text: The accessibility description for images.

Filtering and search:

• Filter by file type (images, documents, video).
• Search by filename or alt text.
• Sort by date, name, or size.

Folders

The Media Library supports a nested folder structure to organize your files. The folder tree is shown in the left sidebar.

• Create folder: Click the + button next to "Folders" in the sidebar. Subfolders are created under whichever folder you currently have selected.
• Expand / Collapse: Click the chevron arrow next to a folder to expand or collapse its children.
• Rename / Delete: Hover over a folder to reveal rename and delete buttons. Deleting a folder moves its files to the root level.

Drag-and-drop organization:

• Move files to a folder: Drag one or more media items from the grid onto any folder in the sidebar. In select mode, dragging a selected item moves all selected items.
• Move folders: Drag a folder onto another folder to nest it. Drag onto "All media" to move it back to the root.
• Upload to a specific folder: Drag files from your desktop directly onto a folder in the sidebar to upload them into that folder.

Uploading Files

Click Upload or drag files directly onto the media grid to upload. You can also drag files from your desktop onto a specific folder in the sidebar to upload directly into that folder.

Supported file types:

• Images: JPG, PNG, GIF, WebP, SVG
• Documents: PDF, DOCX, XLSX, PPTX, CSV, TXT
• Archives: ZIP

File size limit: 10 MB per file.

Image Optimization

When you upload an image (JPEG, PNG, GIF, or WebP), Foundaro automatically generates optimized WebP variants at four sizes:

• Thumbnail: 200px wide (quality 70)
• Small: 400px wide (quality 75)
• Medium: 800px wide (quality 80)
• Large: 1200px wide (quality 82)

If the source image is smaller than a variant size, that variant is skipped. SVGs are not processed (they're already scalable). The original file is always preserved.

The image dimensions (width and height) are also read and stored on upload, which helps with layout and SEO.

Tips:

• You don't need to compress images before uploading — optimization happens automatically.
• WebP variants are generated alongside the original, so older browsers still get the original format.
• Name files descriptively before uploading — filenames are used in the generated URL.

Alt Text

Alt text is the text description of an image used by screen readers and search engines. It appears when an image fails to load and is indexed by search engines.

Why it matters:

• Accessibility: Screen reader users depend on alt text to understand image content.
• SEO: Descriptive alt text helps search engines understand and index your images.
• Performance fallback: Alt text is displayed when images cannot load.

Tips:

• Write alt text as a brief, descriptive sentence. Describe what the image shows, not what it represents.
• Do not start alt text with "Image of" or "Photo of" — screen readers already announce it as an image.
• For decorative images with no informational content, use an empty alt attribute.

Inserting Media in the Editor

From the content editor, use the image button in the toolbar or the media picker to insert files from the library.

When inserting an image:

1. Click the image icon in the editor toolbar.
2. Choose From Library to browse the Media Library.
3. Select the file and click Insert.
4. Optionally resize or align the image within the editor.

The alt text stored on the media file is automatically used when inserting. You can override it for a specific use in the editor.

Deleting Media

Select files and click Delete to remove them from the library.

Important: Deleting a media file removes it permanently. Any content that references the deleted file will show a broken image. Check where a file is used before deleting.

Tips:

• Use the filter by type to find unused images before bulk deleting.
• If a file is embedded in published content, archive the content before deleting the media.