{"section":"tutorials","requestedLocale":"pt","requestedSlug":"midia-visao-geral","locale":"pt","slug":"midia-visao-geral","path":"docs/pt/tutorials/storefront/headless-cms/midia-visao-geral.md","branch":"main","content":"O Mídia é uma funcionalidade responsável por gerenciar os arquivos de mídia da sua loja, como imagens e vídeos. Para imagens, você pode fazer o upload e organizar arquivos de mídia de até 5 MB usando o Mídia nos seguintes formatos: `png`, `jpg`, `gif`, `svg` e `webp`. Para vídeos, você pode adicionar uma URL para o provedor de vídeo hospedado externamente, como YouTube ou Vimeo.\n\n> ⚠️ Para upload, os arquivos devem ter uma extensão em minúsculo, por exemplo, `store.png`, e tamanho de até **5 MB**.\n\n![Mídia Visão Geral](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/headless-cms/midia-visao-geral_1.png)\n\nAlém disso, o Mídia está integrado ao **Site Editor** e ao **Headless CMS**, o que permite que ele seja acessado e gerenciado diretamente através de soluções de CMS da VTEX. \n\nNeste guia, aprenda a:\n\n- [Acessar o Mídia no Admin](#acessando-o-midia)\n- [Gerenciar Arquivos no Mídia no Admin](#gerenciando-arquivos-no-midia)\n\n## Acessar o Mídia\nHá três maneiras de acessar o Mídia no Admin:\n\n- **Mídia**: no VTEX Admin, acesse **Storefront > Mídia**. \n\n- **Site Editor** (para lojas que usam o Store Framework): no VTEX Admin, acesse **Storefront > Site Editor**, escolha um bloco que contenha uma imagem (por exemplo, Carrossel), e clique em `Adicionar`.  Um painel do Mídia será aberto.\n\n- **Headless CMS**:  no VTEX Admin, acesse **Storefront > Headless CMS** e escolha uma das páginas criadas, por exemplo, uma Página de Produto. Nas seções disponíveis, selecione uma na qual você possa adicionar uma imagem, por exemplo, [Hero](https://developers.vtex.com/docs/guides/faststore/organisms-hero). Clique no componente de imagem do Hero e um painel do Mídia será aberto.\n\n> ⚠️ A seção disponível deve utilizar o [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) para aproveitar o Mídia. Para projetos [FastStore](https://developers.vtex.com/docs/guides/faststore/docs-what-is-faststore), as seções que utilizam o widget  *media-gallery* são [Navbar](https://developers.vtex.com/docs/guides/faststore/organisms-navbar) and [Hero](https://developers.vtex.com/docs/guides/faststore/organisms-hero).\n\nNa imagem a seguir, confira a visão geral da interface do Mídia e as ações disponíveis para gerenciar seus arquivos de mídia:\n\n![Mídia Features](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/headless-cms/midia-visao-geral_2.png)\n\n| Campo | Descrição |\n| ---------- | ------------- |\n| **I - Campo de busca** | Pesquise os arquivos disponíveis no Mídia. |\n| **II - Ordenar por** | Classifique como os arquivos são exibidos na interface com base nos filtros: `Mais recentes`, `Mais antigos`, `Nome (A-Z)` e `Nome (Z-A)`. |\n| **III - Paginação** | Navegue pelas páginas de arquivos disponíveis. |\n| **IV - Modo de visualização** |\tEscolha o modo de visualização dos arquivos: `Visualizar em lista` ou `Visualizar em grade`. |\n| **V - Adicionar nova imagem ou vídeo** | Carregue um novo arquivo de sua máquina local. |\n\n## Gerenciar arquivos no Mídia\nVeja nas seções abaixo as ações disponíveis para gerenciamento de arquivos no Mídia:\n\n### Upload de imagens\n\nNo Mídia, você pode fazer upload de imagens nos seguintes formatos: `png`, `jpg`, `gif`, `svg` e `webp`, com um limite de tamanho de arquivo de 5 MB. Para fazer o upload da imagem da sua loja, siga estes passos:\n\n1. Na página ou no painel **Mídia**, clique em `Adicionar novo(a)` e clique em `Imagem`.\n\n> ⚠️ No painel Mídia disponível no Headless CMS e no Site Editor, você pode arrastar e soltar imagens.\n\n2. Escolha a imagem que deseja adicionar e clique em `Abrir`.\n\n> ⚠️ Lembre-se, o Mídia aceita os seguintes formatos: `png`, `jpg`, `gif`, `svg`, e `webp`, em minúsculo e com um limite de tamanho de arquivo de 5 MB.\n\n3. Depois que a imagem é carregada, uma mensagem de sucesso será exibida. Agora, você pode executar outras ações clicando em `Mais ações` (três pontos verticais) na miniatura da imagem e escolhendo uma das seguintes ações:\n\n| Campo | Descrição |\n| ---------- | ------------- |\n| **Pré-visualizar** | Abre a imagem em uma nova página. |\n| **Copiar URL** | Copia a URL da imagem para que você possa utilizá-la em outras seções da sua loja. |\n| **Baixar** | Faz o download da imagem para o seu computador. |\n| **Excluir** |\tRemove a imagem do repositório. |\n\n> ⚠️ Excluir a imagem apenas a removerá do repositório do Mídia. Se você adicionou a imagem em um componente Hero, por exemplo, a imagem continuará sendo utilizada neste componente. Porém, você não poderá usá-la em outros componentes.\n\n### Adicionar vídeos\n\nAlém de imagens, no Mídia, você também pode armazenar vídeos e, em seguida, usá-los em sua loja para criar apelo visual para os usuários.\n\n1. Na página **Mídia**, clique em `Adicionar novo(a)` e escolha `Vídeo`.\n2. No modal, preencha o nome e a URL do vídeo conforme necessário.\n\n- **Nome do vídeo:** adicione um nome para o vídeo que o ajude a identificá-lo melhor na galeria.\n- **URL do vídeo:** adicione a URL do vídeo.\n\n3. Clique em `Adicionar vídeo`.\n\nCom o vídeo adicionado, você pode escolher o que fazer com ele clicando no menu `⋮` na miniatura do vídeo:\n\n- **Copiar URL:** obtenha o endereço URL do vídeo para usar em sua loja por meio do Headless CMS.\n- **Abrir vídeo:** veja uma prévia do vídeo em uma nova aba do navegador.\n- **Excluir:** exclua o vídeo da sua galeria.\n\n### Adicionar um vídeo ao conteúdo no Headless CMS\n\nIntegrar conteúdo multimídia, como vídeos, no Headless CMS pode melhorar a experiência do usuário em seu site. Siga os passos abaixo para adicionar vídeos à sua loja.\n\n1. No VTEX Admin, acesse **Storefront > Headless CMS**.\n2. Selecione o [projeto](/pt/docs/tutorials/gerenciando-projetos) ao qual você deseja adicionar o vídeo.\n3. Escolha uma página para adicionar o vídeo, por exemplo, **Página inicial**.\n4. Com a **Página inicial** aberta, na aba **Seções**, adicione (`+`) uma seção que tenha o widget `media-gallery`, ex.: Hero.\n5. No Hero, preencha os seguintes campos:\n\n- **Endereço URL:** cole a URL que você copiou do Mídia.\n- **Descrição do vídeo:** descrição do vídeo para acessibilidade.\n\n6. Clique em `Salvar`.\n7. Se desejar verificar suas alterações antes de publicá-las, clique em `Visualizar`.\n\n### Cancelar um upload\n\n- **Imagens**\n\nSe você estiver carregando uma nova imagem e não quiser continuar, clique no `X` sobreposto na miniatura da imagem para cancelar.\n\n- **Vídeos**\n\nDepois de ter feito o upload do vídeo, passe o mouse sobre a miniatura do vídeo e clique no menu (`⋮`). Selecione **Excluir**.\nSe este vídeo já estiver sendo usado em algum lugar da sua loja, ele permanecerá lá, mas não estará disponível para uso futuro."}