{"section":"tutorials","requestedLocale":"en","requestedSlug":"media-overview","locale":"en","slug":"media-overview","path":"docs/en/tutorials/storefront/headless-cms/media-overview.md","branch":"main","content":"Media is a feature responsible for managing your store's media files, such as images and videos. For images, you can upload and organize files up to 5 MB in the following formats: `png`, `jpg`, `gif`, `svg` and `webp`. For videos, you can add a URL to the externally hosted video provider, e.g. YouTube or Vimeo.\n\n> ⚠️ For upload, files must have a lowercase extension (e.g., `store.png`) and be up to **5 MB**.\n\n![Media Overview](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/headless-cms/media-overview_1.png)\n\nIn addition, Media is integrated with **Site Editor** and **Headless CMS**. This integration allows you to access and manage Media directly through VTEX CMS solutions.\n\nIn this guide, you will learn how to:\n\n- [Access Media](#accessing-media)\n- [Manage files in Media](#managing-files-in-media)\n\n## Accessing Media\nThere are three ways to access Media:\n\n- **Media**: In the VTEX Admin, go to **Storefront > Media**.\n\n- **Site Editor** (for stores using the Store Framework): In the VTEX Admin, go to **Storefront > Site Editor**, choose a block that contains an image (e.g. Carousel), and click `Add`. A Media panel will open.\n\n- **Headless CMS**: In the VTEX Admin, go to **Storefront > Headless CMS**. Choose one of the created pages, such as a product page. From the available sections, select one to which you can add an image, e.g. , [Hero](https://developers.vtex.com/docs/guides/faststore/organisms-hero), and click the Hero image component. A Media panel will open.\n\n> ⚠️ Note that the section must use the [media-gallery](https://developers.vtex.com/docs/guides/faststore/headless-cms-3-adding-content-types-and-sections#step-3-adding-sections-to-the-headless-cms) to leverage Media. For [FastStore](https://developers.vtex.com/docs/guides/faststore/docs-what-is-faststore) projects, the sections that use the *media-gallery* widget are [Navbar](https://developers.vtex.com/docs/guides/faststore/organisms-navbar) and [Hero](https://developers.vtex.com/docs/guides/faststore/organisms-hero).\n\nIn the following image, you can see an overview of the Media interface and the actions available for managing your media files:\n\n![Media Features](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/headless-cms/media-overview_2.png)\n\n| Field | Description |\n| ---------- | ------------- |\n| **I - Search Field** | Search for available files in Media. |\n| **II - Sort by** | Sort how files are displayed in the interface based on the filters: `Newest`, `Oldest`, `Name (A-Z)`, and `Name (Z-A)`. |\n| **III - Pages** | Browse the available file pages. |\n| **IV - View Mode** | Choose the view mode for the files: `List View` or `Grid View`. |\n| **V - Add Image** | Upload a new file from your device. |\n\n## Managing files in Media\nSee in the sections below the actions available for managing files in Media:\n\n### Uploading images \nIn Media, you can upload images, and the feature supports the following formats: `png`, `jpg`, `gif`, `svg` and `webp`, with a file size limit of 5 MB. To start uploading your store’s image, follow these steps:\n\n1. On the **Media** page or panel, click `Add New` and click `Image`.\n\n> ⚠️ In the Media panel available in the Headless CMS and Site Editor, you can drag and drop images.\n\n2. Choose the image you want to upload and click `Open`.\n\n> ⚠️ Please note that Media accepts the following formats: `png`, `jpg`, `gif`, `svg`, and `webp`, in lowercase and with a file size limit of 5 MB.\n\n3. After the image is loaded, a success message will be displayed.\n\nNow, you can perform other actions by clicking `More actions` (three vertical dots) on the image thumbnail and choosing one of the following actions:\n\n| Field | Description |\n| ---------- | ------------- |\n| **Preview** | Opens the image on a new page. |\n| **Copy URL** | Copies the URL of the image so that you can use it in other sections of your store. |\n| **Download** | Downloads the image to your computer. |\n| **Delete** |\tDeletes the image from the repository. |\n\n> ⚠️ Deleting the image will only remove it from the Media repository. If you have added the image to a Hero component, for example, the image will continue to be used in that component. However, you will not be able to use it in other components.\n\n### Adding videos\nBesides images, in Media, you can also store videos and then use them in your store to create visual appeal for users navigating the store.\n\n1. On the **Media** page, click `Add New` and choose `Video`.\n2. In the modal, enter the video’s name and its URL accordingly.\n\n- **Video Name:** Add a name for the video that helps you better identify it in the gallery.\n- **Video URL:** Add the video’s URL.\n\n3. Click `Add Video`. \n\nWith the video added, you can choose what to do with the video by clicking on the menu `⋮` in the video’s thumbnail:\n\n- **Copy URL**: Get the video’s URL address to use in your store through the Headless CMS.\n- **Open Video**: See a preview of the video in a new browser tab.\n- **Delete**: Delete the video from your Gallery.\n\n### Adding a video to content in Headless CMS\nIntegrating multimedia content, such as videos, into your Headless CMS can enhance the user experience of your website. Follow the steps below to add videos to your store.\n\n1. In the VTEX Admin, go to **Storefront > Headless CMS**.\n2. Select the [Project](/en/docs/tutorials/managing-projects) where you want to add the video.\n3. Choose a page to add the video, e.g. **Home**.\n4. With the **Home** page open, in the **Sections** tab, add (`+`) a section that has the `media-gallery` Widget, e.g. Hero.\n5. In the Hero fill the following fields:\n\n- **URL address**: paste the URL that you copied from the Media.\n- **Video description**: Image description for accessibility.\n\n6. Click `Save`. \n7. If you want to check your changes before publishing it, click `Preview`.\n\n### Canceling an upload\n\n- **Images**\n\nIf you are uploading a new image and do not want to continue, you can cancel the upload by clicking the `X` overlay on the image thumbnail.\n\n- **Videos**\n\nOnce you have uploaded the video, hover over the video's thumbnail, click on the menu (`⋮`), and choose **Delete**. If this video is already in use somewhere in your store, it will remain there, but it won't be available for future use."}