{"section":"tutorials","requestedLocale":"pt","requestedSlug":"image-widget","locale":"pt","slug":"image-widget","path":"docs/pt/tutorials/storefront/site-editor/image-widget.md","branch":"main","content":"Image Widget é um repositório modal para blocos que permitem o envio de imagens no [Site Editor](/pt/subcategory/layout--2g6LxtasS4iSeGEqeYUuGW). Com esse modal, você pode enviar, armazenar e gerenciar as imagens de sua loja e usá-las em diferentes páginas, como Home, Product ou Newsletter.\n\nPor exemplo, você pode adicionar uma nova imagem no bloco __Carrossel__ da sua loja. Para fazer o envio dessa imagem, você se beneficia do Image Widget.\n\nNa próxima seção, aprenda como [Acessar o Image Widget](#acessando-image-widget).\n\n## Acessando Image Widget\n\nBlocos no Site Editor, que permitem fazer upload de uma imagem, possuem o modal Image Widget, e neste artigo usaremos o bloco __Carrossel__ como exemplo. As etapas para acessar o Image Widget são as seguintes:\n\n1. No admin VTEX, acesse **Storefront > Site Editor**.\n2. Na coluna da direita, selecione o bloco para o qual deseja enviar uma imagem.\n3. Em __BANNERS__, clique `ADICIONAR.`\n4. Em __Imagem do banner__, clique `Fazer upload.`\n\nDepois de concluídas as etapas anteriores, o modal Image Widget será aberto em sua tela.\n\nAgora que você sabe como acessar o Image Widget, verifique o que você pode fazer a seguir:\n\n- [Adicionando uma imagem](#adicionando-uma-imagem)\n- [Substituindo uma imagem](#substituindo-uma-imagem)\n- [Removendo uma imagem](#removendo-uma-imagem)\n\n### Adicionando uma imagem\n\nDepois de [acessar Image Widget](#acessando-image-widget) e com ele aberto você consegue adicionar imagens:\n\n> ⚠️ Ao adicionar novas imagens no modal Image Widget usando um [development workspace](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-workspace), as configurações performadas serão salvas diretamente em master, ou seja, imediatamente refletirão no modal da sua loja.\n<br />\n> ⚠️ O tamanho máximo que o Image Widget suporta é 4 MB por arquivo.\n\n1. Clique em `Adicionar novo.`\n2. Escolha a imagem que deseja adicionar e clique em `Abrir.`\n3. O modal fecha sozinho e clique em `APLICAR.`\n\nApós completar a etapa anterior, sua imagem está configurada no bloco e também no seu repositório Image Widget e pronta para ser usada nas páginas da sua loja.\n\nDepois de adicionar uma imagem ao modal, você tem outras opções com ela. Verifique o que mais você pode fazer em [Recursos dentro do Image Widget](#recursos-dentro-do-image-widget).\n\n#### Recursos dentro do Image Widget\n\nDentro do modal, alguns dos recursos que você possui são um campo para busca de imagens, filtrá-las por ordem e visualizar suas imagens em lista ou grade.\n\nAlém disso, [adicionando uma imagem](#adicionando-uma-imagem) em seu modal, agora você pode visualizar, copiar a URL de uma imagem, fazer o download e excluí-las de seu repositório.\n\nCom o modal aberto, clique em `mais ações` na miniatura de uma imagem.\n\n| Opções     | Descrição                                          |\n| ---------- | -------------------------------------------------- |\n| __Antevisão__  | Abre uma nova página para mostrar uma prévia da imagem. |\n| __Copiar URL__ | Permite que você copie o URL da imagem e use-a em outras partes da sua loja.    |\n| __Baixar__     | Baixe a imagem para o seu computador.              |\n| __Excluir__    | Remove a imagem do repositório.                    |\n\n### Substituindo uma imagem\n\nNo bloco que você deseja substituir uma imagem:\n\n1. Clique em `Mais ações` na miniatura de uma imagem e selecione __Editar.__\n2. Clique novamente em `Mais ações` e selecione __Substituir.__\n3. Com o modal aberto, clique em uma imagem para substituir.\n4. Clique em `APLICAR`.\n\n### Removendo uma imagem\n\nPara remover uma imagem do bloco desejado, clique em `Mais ações` na miniatura de uma imagem e selecione __remover__. Após esse procedimento, a imagem não estará mais visível no bloco.\n\n> ⚠️ Quando você remove uma imagem, isso não significa que ela seja excluída do repositório. Para isso, verifique a seção [Recursos dentro do Image Widget](#recursos-dentro-do-image-widget)."}