mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
dbdb1a298b
* Fix Vale style warnings across documentation Generated-By: mintlify-agent * Apply suggestion from @ethanpalm * Apply suggestion from @ethanpalm * Apply suggestions from code review * Update guides/automate-agent.mdx * Update integrations/analytics/adobe.mdx --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
75 lines
2.7 KiB
Plaintext
75 lines
2.7 KiB
Plaintext
---
|
|
title: "Add media"
|
|
description: "Upload and use images and assets in your documentation."
|
|
keywords: ["editor","media","images","assets"]
|
|
---
|
|
|
|
## Supported file types
|
|
|
|
- **Images**: PNG, JPG, JPEG, SVG, GIF, WebP (max 20 MB)
|
|
- **Videos**: MP4, WebM (max 100 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>/embed</kbd> to insert embedded content. Paste a YouTube or Loom URL to generate an iframe automatically, or 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.
|