Image Widget é um repositório modal para blocos que permitem o envio de imagens no Site Editor. 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.

Por 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.

Na próxima seção, aprenda como Acessar o Image Widget.

Blocos 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:

1. No admin VTEX, acesse Storefront > Site Editor.
2. Na coluna da direita, selecione o bloco para o qual deseja enviar uma imagem.
3. Em BANNERS, clique ADICIONAR.
4. Em Imagem do banner, clique Fazer upload.

Depois de concluídas as etapas anteriores, o modal Image Widget será aberto em sua tela.

Agora que você sabe como acessar o Image Widget, verifique o que você pode fazer a seguir:

• Adicionando uma imagem
• Substituindo uma imagem
• Removendo uma imagem

Depois de acessar Image Widget e com ele aberto você consegue adicionar imagens:

Ao adicionar novas imagens no modal Image Widget usando um development workspace, as configurações performadas serão salvas diretamente em master, ou seja, imediatamente refletirão no modal da sua loja.

O tamanho máximo que o Image Widget suporta é 4 MB por arquivo.

1. Clique em Adicionar novo.
2. Escolha a imagem que deseja adicionar e clique em Abrir.
3. O modal fecha sozinho e clique em APLICAR.

Apó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.

Depois 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

Dentro 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.

Além disso, 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.

Com o modal aberto, clique em mais ações na miniatura de uma imagem.

No bloco que você deseja substituir uma imagem:

1. Clique em Mais ações na miniatura de uma imagem e selecione Editar.
2. Clique novamente em Mais ações e selecione Substituir.
3. Com o modal aberto, clique em uma imagem para substituir.
4. Clique em APLICAR.

Para 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.

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.