Mídias
Bem-vindo ao guia de Mídias do CMS E-commerce! Este manual irá ajudá-lo a gerenciar, organizar e compartilhar todos os arquivos de mídia utilizados no catálogo, incluindo imagens, vídeos, PDFs e arquivos especiais.
Visão Geral
A tela de Mídias permite que você:
- 📁 Visualize todas as mídias cadastradas no sistema
- 🔍 Filtre mídias por título e tipo de arquivo
- ⬆️ Faça upload de novos arquivos em lote (até 20 por vez)
- ✏️ Edite informações de mídias existentes
- 🗑️ Exclua mídias que não são mais necessárias
- 📋 Copie URLs de arquivos para usar em produtos ou páginas
- 🎨 Visualize previews de imagens, vídeos e documentos
As mídias são fundamentais para enriquecer a experiência visual do seu e-commerce, permitindo que você adicione imagens de produtos, vídeos demonstrativos, arquivos de especificação técnica e muito mais.
Acessando a Tela de Mídias
A tela de mídias está localizada no menu de Catálogo do sistema. Ao acessá-la, você verá:
- Título "Mídias"
- Subtítulo "Gerencie as mídias do catálogo"
- Botão "Novas Mídias"
- Barra de busca
- Filtro de Tipo de Mídia
- Seletor de mídias por página
- Tabela com as mídias cadastradas
Como Buscar e Filtrar Mídias
Busca por Título
A barra de busca permite encontrar mídias específicas por título:
Como usar:
- Digite o título da mídia no campo de busca (ex: "Banner principal", "Produto A")
- Pressione Enter para realizar a busca
- Os resultados serão filtrados automaticamente
Use nomes completos ou parciais. Por exemplo, digite "banner" para encontrar todas as mídias com "banner" no título.
Filtro por Tipo de Mídia
O sistema oferece diversos tipos de mídias para organizar seus arquivos:
Tipos de Mídias Disponíveis:
- 🖼️ Imagem: Arquivos de imagem comuns (PNG, JPG, JPEG, GIF, WEBP, SVG)
- 🎥 Vídeo: Vídeos (MP4, WEBM, OGG, MOV)
- 📄 PDF: Documentos PDF para especificações, manuais, catálogos
Como filtrar:
- Clique no seletor "Tipo de Mídia"
- Escolha o tipo desejado na lista
- A tabela será atualizada automaticamente
Mídias por Página
Para facilitar a navegação, você pode ajustar quantas mídias são exibidas por vez:
- Localize o seletor "Mídias por página"
- Escolha entre: 10, 15, 20, 25, 30 mídias por página
- Use a paginação no rodapé da tabela para navegar
Entendendo a Tabela de Mídias
A tabela exibe as seguintes informações:
Colunas da Tabela
| Coluna | Descrição |
|---|---|
| Preview | Miniatura visual da mídia (para imagens) ou ícone do tipo |
| Título | Nome/título da mídia |
| Tipo | Tipo de mídia com badge visual identificador |
| URL | Caminho completo do arquivo |
| Texto Alt | Texto alternativo para acessibilidade (quando preenchido) |
Indicadores Visuais
- Cada tipo de mídia é exibido com um badge cinza para fácil identificação
- Imagens mostram preview em miniatura de 48x48 pixels
- Vídeos e PDFs mostram ícones representativos
- URLs são truncadas para melhor visualização na tabela
- Linhas da tabela são clicáveis para acessar os detalhes da mídia
Como Fazer Upload de Novas Mídias
Passo a Passo para Upload
Passo 1: Clique em "Novas Mídias"
No canto superior direito da tela, clique no botão "Novas Mídias".
Passo 2: Selecione os Arquivos
Um modal será aberto com uma área de upload. Você tem duas opções:
Opção A: Arrastar e Soltar
- Arraste os arquivos do seu computador
- Solte-os na área indicada
Opção B: Selecionar Arquivos
- Clique na área de upload
- Navegue pelas pastas do seu computador
- Selecione um ou mais arquivos (até 20 por vez)
- Clique em "Abrir"
Formatos Aceitos:
- Imagens: .png, .jpg, .jpeg, .gif, .webp, .svg
- Vídeos: .mp4, .webm, .ogg, .mov
- Documentos: .pdf
Você pode fazer upload de até 20 arquivos por vez. Se precisar adicionar mais arquivos, faça múltiplos uploads.
Passo 3: Revise os Arquivos Selecionados
Após selecionar os arquivos, você verá uma lista com:
- Preview (para imagens) ou ícone do tipo de arquivo
- Nome do arquivo
- Tamanho do arquivo (em KB, MB ou GB)
- Botão X para remover arquivos da lista (antes do upload)
Você pode remover arquivos individualmente clicando no botão X ao lado de cada arquivo antes de fazer o upload.
Passo 4: Confirme o Upload
- Revise todos os arquivos selecionados
- Clique no botão "Enviar X arquivo(s)" (onde X é a quantidade de arquivos)
- Aguarde o progresso do upload (barra de progresso será exibida)
- Quando concluído (100%), o modal fechará automaticamente
Após o upload, as mídias aparecerão automaticamente na tabela principal com títulos gerados a partir dos nomes dos arquivos.
Visualizando Detalhes de uma Mídia
Para ver informações completas sobre uma mídia:
- Clique em qualquer linha da tabela
- Você será direcionado para a tela de detalhes
Informações Disponíveis na Tela de Detalhes
1. Cabeçalho
- Título da mídia em destaque
- Badge do tipo de mídia
- Botão "Editar": Para modificar as informações
- Botão "Excluir": Para remover a mídia
- Botão "Voltar": Para retornar à lista de mídias
2. Card de Visualização
Exibe o preview da mídia:
- Imagens: Preview em tamanho ampliado
- Vídeos: Player de vídeo funcional
- PDFs: Visualizador de documento
3. Card de Informações Básicas
Exibe:
- Título: Nome da mídia
- Tipo de Mídia: Badge com o tipo e classificação
- Texto Alternativo (Alt Text): Descrição para acessibilidade (se preenchido)
- Slug: Identificador único em formato URL-friendly (com botão para copiar)
4. Card de URL do Arquivo
- Caminho do Arquivo: URL completo e clicável (abre em nova aba)
- Botão "Copiar URL": Copia a URL para a área de transferência
Use o botão "Copiar URL" para facilmente obter o link da mídia e usar em outros lugares do sistema ou em integrações externas.
5. Card de Identificação
- ID da Mídia: Identificador numérico único (não editável, fundo cinza)
6. Card de Informações de Auditoria
Criação:
- 👤 Criado por: Nome do usuário que fez o upload
- 📅 Data de criação: Data e hora do upload
Última Atualização (quando aplicável):
- 👤 Atualizado por: Nome do usuário que fez a última alteração
- 📅 Data de atualização: Data e hora da última modificação
Como Editar uma Mídia
Passo a Passo para Editar
Passo 1: Acesse os Detalhes
- Clique na mídia desejada na tabela
- Na tela de detalhes, clique no botão "Editar"
Passo 2: Modifique os Dados
Um modal será aberto com os dados atuais preenchidos:
- Título (obrigatório): Altere o título da mídia
- Texto Alternativo (Alt Text) (opcional): Adicione ou edite a descrição para acessibilidade
- Slug (opcional): Modifique o identificador único
Campos Disponíveis:
- ✅ Título: Nome de identificação da mídia (obrigatório)
- 📝 Texto Alternativo: Descrição para leitores de tela e SEO (opcional)
- 🔗 Slug: Identificador em formato URL (apenas letras minúsculas, números e hifens)
O arquivo em si não pode ser alterado. Você só pode editar as informações associadas à mídia. Para trocar o arquivo, é necessário excluir a mídia e fazer um novo upload.
Sempre preencha o texto alternativo para imagens. Isso melhora a acessibilidade do site e ajuda no SEO (otimização para mecanismos de busca).
Passo 3: Salve as Alterações
- Revise as modificações
- Clique no botão "Atualizar Mídia"
- Aguarde a confirmação (você verá "Atualizando...")
- As informações serão atualizadas automaticamente
Como Excluir uma Mídia
Passo a Passo para Excluir
A exclusão de uma mídia é uma ação irreversível. Certifique-se de que a mídia não está sendo usada em produtos, banners ou outras áreas do sistema antes de excluir.
Passo 1: Acesse os Detalhes
- Clique na mídia desejada na tabela
- Na tela de detalhes, clique no botão "Excluir" (vermelho)
Passo 2: Confirme a Exclusão
Um diálogo de confirmação será exibido com:
- Título: "Confirmar exclusão"
- Mensagem: Confirmação com o título da mídia
- Aviso: "Esta ação não pode ser desfeita"
Passo 3: Finalize a Exclusão
- Leia atentamente o aviso
- Clique em "Excluir" para confirmar (ou "Cancelar" para desistir)
- Aguarde o processamento (você verá "Excluindo...")
- Você será redirecionado para a lista de mídias
Como Copiar URLs de Mídias
Copiando da Tela de Detalhes
Copiar URL Completa
- Acesse os detalhes da mídia
- Localize o card "URL do Arquivo"
- Clique no botão "Copiar URL"
- A URL será copiada para a área de transferência
- O botão mudará para "Copiado!" com um ícone de confirmação
Copiar Slug
- Acesse os detalhes da mídia
- Localize o campo "Slug" no card de Informações Básicas
- Clique no botão de cópia ao lado do slug
- O slug será copiado para a área de transferência
- O ícone mudará para um check verde temporariamente
Use a URL copiada para adicionar mídias a produtos, criar links em descrições ou integrar com sistemas externos.
Casos de Uso Práticos
1. Fazer Upload de Imagens de Produtos
Situação: Você precisa adicionar fotos de um novo produto.
Como fazer:
- Clique em "Novas Mídias"
- Selecione todas as fotos do produto (até 20 por vez)
- Aguarde o upload concluir
- Acesse cada mídia para adicionar títulos descritivos e alt text
- Use as URLs copiadas ao cadastrar o produto
2. Organizar Mídias por Tipo
Situação: Você quer ver apenas os vídeos cadastrados.
Como fazer:
- Clique no filtro "Tipo de Mídia"
- Selecione "Vídeo"
- Veja todos os vídeos na tabela
- Clique em X no badge para remover o filtro
3. Adicionar Texto Alternativo para SEO
Situação: Melhorar a acessibilidade e SEO das imagens.
Como fazer:
- Acesse os detalhes de cada imagem
- Clique em "Editar"
- Preencha o campo "Texto Alternativo" com uma descrição clara
- Exemplo: "Tênis esportivo azul modelo Runner Pro, vista lateral"
- Clique em "Atualizar Mídia"
4. Compartilhar URL de Mídia com a Equipe
Situação: Enviar link de uma imagem para outro colaborador.
Como fazer:
- Acesse os detalhes da mídia
- Clique em "Copiar URL"
- Cole o link em um e-mail, chat ou documento
- O colaborador poderá acessar diretamente a imagem
5. Upload de Manual em PDF
Situação: Adicionar manual de instruções de um produto.
Como fazer:
- Clique em "Novas Mídias"
- Selecione o arquivo PDF do manual
- Faça o upload
- Edite o título para algo como "Manual - [Nome do Produto]"
- Copie a URL e adicione à página do produto
6. Buscar Mídia Específica por Nome
Situação: Encontrar rapidamente uma imagem específica.
Como fazer:
- Use a barra de busca
- Digite parte do nome (ex: "banner-natal")
- Pressione Enter
- Clique na mídia encontrada para ver detalhes
Problemas Comuns e Soluções
❌ "Nenhuma mídia cadastrada"
Problema: A tabela está vazia e não há mídias cadastradas.
Soluções:
- Se for seu primeiro acesso, comece fazendo upload clicando em "Novas Mídias"
- Se você aplicou filtros, clique em "Limpar filtro" para ver todas as mídias
- Verifique se você tem permissão para visualizar mídias
❌ "Nenhuma mídia encontrada com esse filtro"
Problema: A busca ou filtro não retornou resultados.
Soluções:
- Verifique a ortografia do termo buscado
- Tente termos mais genéricos
- Remova o filtro de tipo de mídia se estiver ativo
- Clique em "Limpar filtro" para resetar
❌ Erro ao fazer upload de arquivos
Problema: O upload falha ou apresenta erro.
Soluções:
- Verifique se os arquivos estão nos formatos aceitos:
- Imagens: PNG, JPG, JPEG, GIF, WEBP, SVG
- Vídeos: MP4, WEBM, OGG, MOV
- Documentos: PDF
- Certifique-se de que não está tentando enviar mais de 20 arquivos por vez
- Verifique o tamanho dos arquivos (arquivos muito grandes podem causar problemas)
- Tente fazer upload de menos arquivos por vez
- Verifique sua conexão com a internet
❌ Não consigo visualizar o preview da mídia
Problema: A imagem não aparece na tabela ou nos detalhes.
Soluções:
- Verifique se a URL da mídia está acessível
- Tente recarregar a página (F5)
- Limpe o cache do navegador
- Verifique se o arquivo foi enviado corretamente
- Entre em contato com o suporte se o problema persistir
❌ Botão "Copiar URL" não funciona
Problema: Clicar em copiar não copia a URL.
Soluções:
- Verifique se o navegador tem permissão para acessar a área de transferência
- Tente usar um navegador diferente (Chrome, Firefox, Edge)
- Como alternativa, clique no link da URL para abrir em nova aba e copie manualmente
- Atualize o navegador para a versão mais recente
❌ Não consigo editar uma mídia
Problema: O botão "Editar" não aparece ou está desabilitado.
Soluções:
- Verifique se você tem permissão para editar mídias
- Certifique-se de que está na tela de detalhes da mídia
- Recarregue a página e tente novamente
- Entre em contato com o administrador do sistema para verificar suas permissões
❌ Erro ao excluir mídia
Problema: A exclusão falha ou retorna erro.
Possíveis causas:
- A mídia pode estar vinculada a produtos existentes
- Você pode não ter permissão para excluir mídias
- Pode haver referências a esta mídia em outros lugares do sistema
Soluções:
- Verifique se a mídia está sendo usada em produtos
- Remova as referências à mídia antes de excluí-la
- Verifique suas permissões com o administrador
- Entre em contato com o suporte técnico se o problema persistir
❌ Slug não está sendo gerado automaticamente
Problema: O campo slug fica vazio após o upload.
Soluções:
- Edite a mídia manualmente e adicione um slug
- Use apenas letras minúsculas, números e hifens
- Evite caracteres especiais e espaços
- Exemplo correto: "banner-promocional-2024"
Entendendo os Tipos de Mídias
Tipos de Arquivos Suportados
| Tipo | Formatos Aceitos | Uso Recomendado |
|---|---|---|
| Imagem | PNG, JPG, JPEG, GIF, WEBP, SVG | Fotos de produtos, banners, ícones, logos |
| Vídeo | MP4, WEBM, OGG, MOV | Demonstrações, tutoriais, apresentações |
| Manuais, catálogos, especificações técnicas | ||
| AR Code | Formatos de imagem (PNG, JPG) | Códigos QR para realidade aumentada |
| Imagem 3D | Formatos de imagem (PNG, JPG, etc) | Modelos tridimensionais, visualizações em 3D |
Quando Usar Cada Tipo
🖼️ Imagem
Use para a maioria das fotos e gráficos:
- Fotos de produtos (frente, verso, lateral)
- Banners promocionais
- Logos e ícones
- Imagens de categorias
- Gráficos e ilustrações
Formatos recomendados:
- JPG/JPEG: Para fotos com muitas cores
- PNG: Para imagens com transparência ou texto
- WEBP: Para otimização de performance (menor tamanho)
- SVG: Para logos e ícones vetoriais
🎥 Vídeo
Use para conteúdo em movimento:
- Demonstrações de produtos
- Tutoriais de uso
- Vídeos promocionais
- Depoimentos de clientes
- Unboxing e reviews
Formato recomendado:
- MP4: Melhor compatibilidade entre navegadores
📄 PDF
Use para documentos:
- Manuais de instruções
- Catálogos de produtos
- Especificações técnicas
- Certificados e garantias
- Fichas de segurança
Boas Práticas
📝 Nomenclatura de Arquivos
- Use nomes descritivos antes do upload
- Evite caracteres especiais nos nomes de arquivos
- Use hifens em vez de espaços (ex: produto-azul.jpg)
- Inclua informações relevantes no nome (categoria, cor, ângulo)
Exemplos corretos:
- ✅ tenis-esportivo-azul-frente.jpg
- ✅ banner-black-friday-2024.png
- ✅ manual-liquidificador-turbo.pdf
- ✅ video-demonstracao-aspirador.mp4
Exemplos a evitar:
- ❌ IMG_12345.jpg
- ❌ foto com espaços.jpg
- ❌ arquivo@#especial.png
- ❌ video(1)final.mp4
🎯 Organização e Títulos
- Edite os títulos após o upload para torná-los mais descritivos
- Use padrões de nomenclatura consistentes
- Inclua informações chave: nome do produto, cor, ângulo, variação
- Adicione alt text sempre para imagens (acessibilidade e SEO)
Exemplo de bom título:
- "Tênis Runner Pro - Azul Royal - Vista Lateral"
🖼️ Qualidade e Otimização de Imagens
- Use alta resolução para fotos de produtos (mínimo 1200x1200px)
- Otimize o tamanho dos arquivos antes do upload (use ferramentas de compressão)
- Mantenha proporção adequada (quadrado para produtos, retângulo para banners)
- Use fundo branco ou transparente para fotos de produtos
- Prefira WEBP quando possível para melhor performance
Tamanhos recomendados:
- Fotos de produtos: 1200x1200px a 2000x2000px
- Banners principais: 1920x600px a 1920x800px
- Miniaturas: 400x400px
- Logos: 200x200px ou vetorial (SVG)
📄 Texto Alternativo (Alt Text)
- Sempre preencha o alt text para imagens
- Seja descritivo mas conciso
- Inclua informações relevantes: produto, cor, característica
- Não use "imagem de" ou "foto de"
- Pense em SEO: use palavras-chave naturalmente
Exemplos de bom alt text:
- ✅ "Tênis esportivo Runner Pro azul com detalhes brancos, vista lateral"
- ✅ "Liquidificador Turbo Pro 1000W em ação processando frutas"
- ✅ "Banner promocional Black Friday com 50% de desconto em eletrônicos"
Exemplos ruins:
- ❌ "Imagem"
- ❌ "Foto do produto"
- ❌ "banner.jpg"
🔗 Gerenciamento de URLs e Slugs
- Use slugs únicos e descritivos
- Mantenha slugs curtos mas informativos
- Use apenas minúsculas, números e hifens
- Evite alterar slugs de mídias já em uso
- Documente URLs importantes para fácil referência
Exemplos de bons slugs:
- ✅ banner-black-friday-2024
- ✅ tenis-runner-pro-azul
- ✅ manual-liquidificador-turbo
- ✅ video-demo-aspirador-robo
🔄 Manutenção Regular
- Revise periodicamente as mídias não utilizadas
- Exclua arquivos obsoletos para economizar espaço
- Atualize alt text quando necessário
- Verifique links quebrados (URLs inválidas)
- Organize por categorias usando títulos padronizados
- Faça backup de mídias importantes
⚡ Performance e Velocidade
- Comprima imagens antes do upload
- Use formatos modernos (WEBP) quando possível
- Evite arquivos muito grandes (idealmente < 2MB por imagem)
- Use vídeos hospedados externamente quando possível (YouTube, Vimeo)
- Otimize PDFs antes do upload (reduza tamanho mantendo qualidade)
🔒 Segurança e Privacidade
- Não faça upload de informações sensíveis em imagens
- Remova metadados de fotos quando necessário
- Verifique direitos autorais antes de usar imagens
- Use apenas mídias que você tem direito de usar
- Tenha cuidado com informações pessoais visíveis em fotos
Perguntas Frequentes (FAQ)
Quantos arquivos posso fazer upload por vez?
Você pode fazer upload de até 20 arquivos simultaneamente. Se precisar adicionar mais, faça múltiplos uploads em sequência.
Qual o tamanho máximo de arquivo suportado?
O tamanho máximo depende da configuração do servidor, mas recomendamos manter arquivos individuais abaixo de 10MB para melhor performance. Imagens devem idealmente ficar abaixo de 2MB.
Posso substituir uma mídia existente?
Não diretamente. Para "substituir" uma mídia, você precisa excluir a mídia antiga e fazer upload da nova. Considere atualizar o título e alt text em vez de substituir, se possível.
O que acontece se eu excluir uma mídia que está sendo usada?
A exclusão pode causar problemas em páginas e produtos que referenciam essa mídia (imagens quebradas). Sempre verifique onde a mídia está sendo usada antes de excluir.
Posso fazer upload de GIFs animados?
Sim! GIFs são suportados e a animação será mantida. Use GIFs para pequenas animações e efeitos especiais.
O sistema redimensiona automaticamente as imagens?
Sim, porém é recomendável fazer o redimensionamento e otimização das imagens antes do upload para garantir o melhor resultado.
Posso organizar mídias em pastas?
Atualmente não há suporte para pastas, mas você pode usar títulos padronizados e filtros por tipo para organizar suas mídias.
O que é o campo "Slug" e por que é importante?
O slug é um identificador único em formato URL-friendly. Ele pode ser usado para criar links amigáveis e facilita a referência à mídia em integrações e APIs.
Posso editar o arquivo após o upload?
Não. Você só pode editar as informações (título, alt text, slug). Para alterar o arquivo em si, é necessário excluir a mídia e fazer um novo upload.
Suporte
Precisa de Ajuda?
Se você encontrou algum problema ou tem dúvidas:
- Verifique este manual para soluções comuns
- Consulte a seção de Problemas Comuns acima
- Entre em contato com o suporte técnico com as seguintes informações:
- Print da tela ou descrição do problema
- Nome/título da mídia (se aplicável)
- Tipo de arquivo que está tentando fazer upload
- Mensagens de erro exibidas
- O que você estava tentando fazer
Informações Úteis ao Contatar o Suporte
Tenha em mãos:
- Seu nome de usuário
- Título ou ID da mídia relacionada
- Tipo de arquivo e tamanho
- Navegador e versão que está usando
- Prints de tela do problema
- Descrição detalhada do que você tentou fazer
Glossário
| Termo | Significado |
|---|---|
| Mídia | Arquivo de imagem, vídeo ou documento usado no catálogo |
| Upload | Processo de enviar arquivos do seu computador para o sistema |
| Preview | Visualização em miniatura da mídia |
| Alt Text | Texto alternativo para acessibilidade e SEO (descreve a imagem) |
| Slug | Identificador único em formato URL-friendly (apenas letras minúsculas, números, -) |
| URL | Endereço completo do arquivo na internet |
| Badge | Etiqueta visual que identifica o tipo de mídia |
| Auditoria | Registro de quem criou/modificou e quando |
| AR Code | Código para realidade aumentada |
| Área de Transferência | Memória temporária usada para copiar e colar textos/links |
Próximos Passos
Após dominar o gerenciamento de mídias, você pode:
- 📦 Vincular mídias aos produtos do catálogo
- 🎨 Criar banners e campanhas visuais
- 📄 Adicionar manuais e documentação técnica aos produtos
- 🎥 Incorporar vídeos demonstrativos nas páginas de produtos
- 🔍 Melhorar o SEO adicionando alt text descritivo
- 📊 Organizar uma biblioteca visual consistente e profissional
Bom uso da ferramenta de mídias! 🚀