> ## Documentation Index
> Fetch the complete documentation index at: https://newwebsite.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Media

> Upload and manage images and videos for your website projects

## Media Library

Upload and manage images and videos for your projects. The media library helps you organize your visual content and makes it easy to add media to your website.

<Frame>
  <img src="https://mintcdn.com/newwebsite/Z_VRK3RlJdmz2aWE/images/features/media/dashboard.png?fit=max&auto=format&n=Z_VRK3RlJdmz2aWE&q=85&s=6e858eef96912c9d4d3ac156cc7f89e8" alt="Media library dashboard" width="3352" height="1636" data-path="images/features/media/dashboard.png" />
</Frame>

## How to Upload and Use Media

<Steps>
  <Step title="Go to Media">
    Navigate to your project in the new\.website dashboard and click on "Media" in the left sidebar to access your media library.

    <Frame>
      <img src="https://mintcdn.com/newwebsite/Z_VRK3RlJdmz2aWE/images/features/media/step-1.png?fit=max&auto=format&n=Z_VRK3RlJdmz2aWE&q=85&s=f298a61c233146d81c54b9d601b2b978" alt="Navigate to Media section" width="410" height="450" data-path="images/features/media/step-1.png" />
    </Frame>
  </Step>

  <Step title="Upload Media">
    1. Click on the **"Upload Media"** button
    2. Select your images or videos to upload
    3. Add a purpose description to help organize your media (e.g., "Logo", "Hero Image", "Product Photos")
    4. Click **"Upload Media(s)"** to complete the upload

    <Frame>
      <img src="https://mintcdn.com/newwebsite/Z_VRK3RlJdmz2aWE/images/features/media/step-2.png?fit=max&auto=format&n=Z_VRK3RlJdmz2aWE&q=85&s=c1110004173014aea98a4bbefc4f7cc5" alt="Upload media dialog with purpose field" width="1574" height="582" data-path="images/features/media/step-2.png" />
    </Frame>
  </Step>

  <Step title="Add Media to Your Website">
    Once uploaded, you have two ways to add media to your website:

    **Method 1: Use on Website Button**
    Click the **"Use on Website"** button next to any media file to add it directly to your website.

    <Frame>
      <img src="https://mintcdn.com/newwebsite/Z_VRK3RlJdmz2aWE/images/features/media/step-3-1.png?fit=max&auto=format&n=Z_VRK3RlJdmz2aWE&q=85&s=fc65c8d1fa20e9b5ee6583de66d634ae" alt="Use on Website button in actions" width="694" height="224" data-path="images/features/media/step-3-1.png" />
    </Frame>

    **Method 2: Using the Editor**

    1. Go to your website editor
    2. Type `@m:` to see a dropdown of all your media files
    3. Click on the media file you want to add
    4. The media will be inserted at your cursor position

    <Tip>
      Use the `@m:` shortcut in the editor to quickly access and insert any of your media files while building your website.
    </Tip>

    <Frame>
      <img src="https://mintcdn.com/newwebsite/Z_VRK3RlJdmz2aWE/images/features/media/step-3-2.png?fit=max&auto=format&n=Z_VRK3RlJdmz2aWE&q=85&s=088e85e5b4568c1b78d5523bf8a1c48b" alt="Media selector in editor with @m: command" width="778" height="752" data-path="images/features/media/step-3-2.png" />
    </Frame>
  </Step>
</Steps>

## Media Features

### Supported File Types

* **Images**: .png, .jpg, .jpeg formats
* **Videos**: .mp4 format
* **Documents**: .pdf format

### Organization

* Add purpose descriptions to categorize your media
* View all media in an organized library
* Search and filter by purpose or file name

### Easy Integration

* Quick "Use on Website" button for immediate placement
* Editor shortcuts with `@m:` command
* Automatic optimization for web performance

<Note>
  Media storage is included with all new\.website plans.
</Note>