mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
Ethan Palm
67 lines
2.2 KiB
Plaintext
67 lines
2.2 KiB
Plaintext
---
|
|
title: "Add media"
|
|
description: "Upload, organize, and use images and assets in your documentation."
|
|
keywords: ["editor", "media", "images", "assets"]
|
|
---
|
|
|
|
Use the media manager to upload and organize images and other assets in your documentation.
|
|
|
|
## Access the media manager
|
|
|
|
Access the media manager from the bottom of the left panel in the editor.
|
|
|
|
<Frame>
|
|
<img src="/images/editor/images-and-media-light.png" alt="Media manager in the sidebar in light mode" className="block dark:hidden" />
|
|
<img src="/images/editor/images-and-media-dark.png" alt="Media manager in the sidebar in dark mode" className="hidden dark:block" />
|
|
</Frame>
|
|
|
|
## Upload assets
|
|
|
|
To upload files, drag them into the media manager or click the **Add** button to select files from your computer.
|
|
|
|
**Supported file types:**
|
|
|
|
- **Images**: PNG, JPG, JPEG, SVG, GIF, WebP
|
|
- **Videos**: MP4, WebM
|
|
- **Fonts**: TTF, WOFF, WOFF2
|
|
- **Other**: PDF, ICO (favicons)
|
|
|
|
## Organize assets
|
|
|
|
Use folders to group related images, separate light and dark mode assets, or organize by feature area.
|
|
|
|
To create a new folder, click **Add**.
|
|
|
|
### Move assets
|
|
|
|
Drag and drop assets to move them between folders. File paths update automatically when you move assets.
|
|
|
|
### Rename assets
|
|
|
|
To rename an asset, click the **...** button beside the asset name and then click **Rename**. References to renamed assets update automatically.
|
|
|
|
### Delete assets
|
|
|
|
To delete an asset, click the **...** button beside the asset name and then click **Delete**.
|
|
|
|
## Use media in documentation
|
|
|
|
### Insert images
|
|
|
|
1. Position your cursor where you want the image to appear.
|
|
2. Press <kbd>/</kbd> to open the component menu.
|
|
3. Select **Image**.
|
|
4. Choose the image from the media manager.
|
|
|
|
### Add alt text
|
|
|
|
1. Click the **...** button that appears when you hover over the image.
|
|
2. Add descriptive alt text in the **Edit Image Attributes** panel.
|
|
|
|
## Best practices
|
|
|
|
- **Use descriptive names**: Name files clearly. For example, `api-dashboard-light.png` instead of `img1.png`.
|
|
- **Add alt text**: Always provide descriptive alt text for accessibility and SEO.
|
|
- **Organize folders**: Group related assets in folders for easier management.
|
|
- **Use appropriate formats**: PNG for graphics with transparency, JPG for photos, SVG for icons and logos.
|