mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
309d5c0137
* Remove SVG from editor upload supported file types Generated-By: mintlify-agent * Apply suggestion from @ethanpalm --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
77 lines
2.9 KiB
Plaintext
77 lines
2.9 KiB
Plaintext
---
|
|
title: "Add media"
|
|
description: "Upload, manage, and embed images and other media assets in your documentation pages using the Mintlify web editor's built-in file manager."
|
|
keywords: ["editor","media","images","assets"]
|
|
---
|
|
|
|
## Supported file types
|
|
|
|
- **Images**: PNG, JPG, JPEG, GIF, WebP (max 20 MB)
|
|
- **Videos**: MP4, WebM (max 20 MB)
|
|
- **Fonts**: TrueType (TTF), WOFF, WOFF2
|
|
- **Other**: PDF, ICO (favicons)
|
|
|
|
## Add media to a page
|
|
|
|
### Drag and drop
|
|
|
|
Drag and drop media from your computer or the asset manager onto a page. In visual mode, the image or video inserts inline. In Markdown mode, the editor inserts the path at your cursor position. Images save to the root of your `images/` folder, and videos save to the root of your `videos/` folder.
|
|
|
|
### Slash command
|
|
|
|
Type <kbd>/image</kbd> to open the image menu or <kbd>/video</kbd> to open the video menu. Upload new media or select from existing files.
|
|
|
|
### Embed
|
|
|
|
Type <kbd>/youtube</kbd> to embed a YouTube video or <kbd>/loom</kbd> to embed a Loom video. Paste the video URL and the editor generates an iframe.
|
|
|
|
For other embeds, type <kbd>/embed</kbd> and switch to **Manual embed** to write custom HTML.
|
|
|
|
### Upload files
|
|
|
|
Use the file explorer in the sidebar to upload or search for files. Drag and drop files into a folder to organize media assets.
|
|
|
|
<Frame>
|
|
<img
|
|
src="/images/editor/assets-light.png"
|
|
alt="File explorer open in the editor sidebar menu."
|
|
className="block dark:hidden"
|
|
/>
|
|
|
|
<img
|
|
src="/images/editor/assets-dark.png"
|
|
alt="File explorer open in the editor sidebar menu."
|
|
className="hidden dark:block"
|
|
/>
|
|
</Frame>
|
|
|
|
## Format images
|
|
|
|
After inserting an image in visual mode, hover over it to reveal a toolbar with formatting options.
|
|
|
|
- **Light/dark preview**: Toggle between light and dark mode to see how the image appears in each theme.
|
|
- **Alignment**: Set the image alignment to left, center, right, or full-width.
|
|
- **Frame**: Wrap the image in a `<Frame>` component to add a border and background.
|
|
- **Settings**: Replace the image or update its alt text.
|
|
|
|
## Manage assets
|
|
|
|
### Organize with folders
|
|
|
|
Click the **+** button in the file explorer to create a new folder. Drag and drop files and folders in the file tree to reorganize them.
|
|
|
|
### Rename and edit assets
|
|
|
|
Hover over an asset and click the **...** button to rename the file or update its alt text.
|
|
|
|
### Delete assets
|
|
|
|
Hover over an asset and click the <Icon icon="trash" /> delete button.
|
|
|
|
## Best practices
|
|
|
|
- **Use descriptive names**: Name files clearly, like `api-dashboard-light.png` instead of `img1.png`.
|
|
- **Add alt text**: Provide descriptive alt text for accessibility and SEO.
|
|
- **Organize with folders**: Group related assets, such as light and dark mode variants or assets for a specific feature area.
|
|
- **Use appropriate formats**: PNG for graphics with transparency, JPG for photos, SVG for icons and logos (you cannot upload SVG files through the editor, but you can add them to your repository via Git).
|