Skip to content
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 10 additions & 15 deletions editor/media.mdx
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
title: "Add media"
description: "Upload, organize, and use images and assets in your documentation."
description: "Upload and manage 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.
Use the media manager to upload and manage 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.
Access the media manager by clicking **Assets** at 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" />
Expand All @@ -17,32 +17,28 @@

## Upload assets

To upload files, drag them into the media manager or click the **Add** button to select files from your computer.
To upload files, click the **Upload** button and select files from your computer.

**Supported file types:**

- **Images**: PNG, JPG, JPEG, SVG, GIF, WebP

Check warning on line 24 in editor/media.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

editor/media.mdx#L24

Use 'png' instead of 'PNG'.

Check warning on line 24 in editor/media.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

editor/media.mdx#L24

Spell out 'PNG', if it's unfamiliar to the audience.

Check warning on line 24 in editor/media.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

editor/media.mdx#L24

Spell out 'JPG', if it's unfamiliar to the audience.

Check warning on line 24 in editor/media.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

editor/media.mdx#L24

Spell out 'JPEG', if it's unfamiliar to the audience.

Check warning on line 24 in editor/media.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

editor/media.mdx#L24

Spell out 'GIF', if it's unfamiliar to the audience.
- **Videos**: MP4, WebM
- **Fonts**: TTF, WOFF, WOFF2

Check warning on line 26 in editor/media.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

editor/media.mdx#L26

Spell out 'TTF', if it's unfamiliar to the audience.

Check warning on line 26 in editor/media.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

editor/media.mdx#L26

Spell out 'WOFF', if it's unfamiliar to the audience.
- **Other**: PDF, ICO (favicons)

Check warning on line 27 in editor/media.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

editor/media.mdx#L27

Spell out 'ICO', if it's unfamiliar to the audience.

## Organize assets
## Manage assets

Use folders to group related images, separate light and dark mode assets, or organize by feature area.
### Configure assets

To create a new folder, click **Add**.
To configure an asset, right-click on it or click the **...** button and select **Configure**. You can rename the file and view its size.

Check warning on line 33 in editor/media.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

editor/media.mdx#L33

Use 'click' or 'click in' instead of 'click on'.

Check warning on line 33 in editor/media.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

editor/media.mdx#L33

In general, don't use an ellipsis.

### Move assets
### Copy asset path

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.
To copy an asset's path, right-click on it or click the **...** button and select **Copy path**.

Check warning on line 37 in editor/media.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

editor/media.mdx#L37

Use 'click' or 'click in' instead of 'click on'.

Check warning on line 37 in editor/media.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

editor/media.mdx#L37

In general, don't use an ellipsis.

### Delete assets

To delete an asset, click the **...** button beside the asset name and then click **Delete**.
To delete an asset, right-click on it or click the **...** button and select **Delete**.

Check warning on line 41 in editor/media.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

editor/media.mdx#L41

Use 'click' or 'click in' instead of 'click on'.

Check warning on line 41 in editor/media.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

editor/media.mdx#L41

In general, don't use an ellipsis.

## Use media in documentation

Expand All @@ -55,12 +51,11 @@

### Add alt text

1. Click the **...** button that appears when you hover over the image.

Check warning on line 54 in editor/media.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

editor/media.mdx#L54

In general, don't use an ellipsis.
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.

Check warning on line 61 in editor/media.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

editor/media.mdx#L61

Use 'png' instead of 'PNG'.

Check warning on line 61 in editor/media.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

editor/media.mdx#L61

Spell out 'PNG', if it's unfamiliar to the audience.

Check warning on line 61 in editor/media.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

editor/media.mdx#L61

Spell out 'JPG', if it's unfamiliar to the audience.