0
835

SHARE

Erro ao Carregar Imagens por causa de Encoding

Se você está tendo problemas ao carregar imagens após uma migração ou re-upload, pode ser uma questão de encoding.

Encoding – ou codificação de caracteres – é um padrão de relacionamento entre um conjunto de caracteres com um conjunto de outra coisa, segundo a Wikipedia.

Em outras palavras, Encoding é o mecanismo que define como representamos diversos símbolos e letras de diferentes alfabetos de maneira binária.

Basicamente, um erro de encoding deve mostrar caracteres “estranhos” na tela ou, no caso das imagens, simplesmente não carregá-las.

Um exemplo disso, é quando usamos caracteres especiais ou acentuação no nome dos arquivos, por exemplo:

Plataforma-Gestão-de-Disponibilidade.jpg

Um arquivo com esse nome, se codificado, poderia ficar assim:

Plataforma-Gesta%CC%83o-de-Disponibilidade.jpg

Na tabela de UTF-8 Encoding, “CC 83”, representaria o til (tilde) – a representação Unicode seria U+0303.

Desse modo, pode ser que essa imagem não carregue, porque o nome do arquivo com acento teria agora caracteres codificados.

Ou seja, se você inspecionar a página deverá encontrar diversos erros 404 para as imagens e, na biblioteca, algumas não carregarão as miniaturas.

Portanto, não vai adiantar você usar um plugin para regenerar as miniaturas (thumbnails) porque ele simplesmente não encontrar o arquivo.

Mas, o arquivo deve estar lá, como no meu caso aqui, mas ele entende o nome do arquivo de outro modo.

Na verdade, existe um bug no WordPress em relação a isso e já foi muito discutido nesse link: https://core.trac.wordpress.org/ticket/22363

Contudo, há como resolver isso de diversas maneiras e vou começar dizendo o que eu fiz que deve ter provocado isso e como fiz para resolver.

O que deve ter provocado o erro?

Bem, eu fiz a migração do site de um dos nossos clientes, para isso usei o plugin All-in-One WP Migration.

Nem sempre uso esse plugin, especialmente pelas limitações de tamanho, mas, nesse caso, fiz o backup sem incluir as mídias.

Quando você faz isso, precisa depois subir as mídias manualmente usando FTP ou algum modo de transferência de arquivos.

Como eram muitas, resolvi compactar os arquivos por ano, ou seja, cada ano da biblioteca gerou um arquivo zipado.

Em seguida, depois de ter feito a restauração desse backup no novo servidor, eu subi cada arquivo zipado para a pasta wp-content/uploads.

Depois, obviamente, extraí todo o conteúdo dos arquivos compactados, carregando todas as imagens no diretório uploads.

Contudo, essa extração foi feita pelo gerenciador de arquivos da hospedagem.

Isso, de alguma forma, fez com que os nomes de arquivos fossem codificados, mas é difícil identificar porque mostra como se tivesse o acento normal.

Contudo, as imagens simplesmente não carregam e, se você simplesmente redigitar o nome dos arquivos e der “enter”, você verá as imagens.

Como eu resolvi o erro de encoding nas imagens

Depois de pesquisar um pouco, chegue a duas soluções mais simples:

  1. Renomear os arquivos manualmente, removendo os acentos; Mas, isso exigiria um atualização também no banco de dados – bem perigoso isso!

    Se optar por esse caminho, certifique-se de fazer um bom backup do seu banco de dados.

    Eu não quis seguir por essa solução porque eram muitas imagens.
  2. Fazer o re-upload dos arquivos, mas forçando a codificação UTF.

Se você quiser forçar isso no FileZilla, precisa ir até o Gerenciador de Sites, selecionar o site e ir até Mapa de Caracteres:

Eu fiz isso e subi novamente um dos arquivos zipados para testar, descompactando-o assim que subiu.

No entanto, nada mudou, continuava o problema de encoding nas imagens e ainda estavam com erro 404 no frontend e não carregando na biblioteca.

Então, fiz um novo teste, mas agora enviando os arquivos por FTP, forçando UTF-8, um a um, sem estarem num arquivo compactado.

Desse modo, sim, funcionou bem e os arquivos estavam sendo carregados novamente, sem erro.

Outra solução para corrigir Codificação de Caracteres

Algumas pessoas que tiverem problemas de Character Encodig conseguiram resolver o problema através do arquivo “wp-config.php”.

Nesse arquivo de configuração que fica na raiz da instalação do WordPress, você tem duas linhas que atuam sobre o encoding:

define('DB_CHARSET', 'utf8');
define('DB_COLLATE', '');

Nesse caso, você teria que comentar essas duas linhas usando duas barras “//”, e ficariam assim:

//define('DB_CHARSET', 'utf8');
//define('DB_COLLATE', '');

Você pode baixar esse arquivo usando FTP e depois fazer o upload, ou pode fazer a edição direta pelo gerenciar de arquivos do seu painel de hospedagem.

Substituir ou renomear os arquivos problemáticos

Em alguns casos, você pode pensar substituir esses arquivos ou renomeá-los para remover os acentos, por exemplo.

Bem, no meu caso, eu tentei usar o plugin Phoenix Media Rename para renomear, mas como ele não achava o arquivo, não funcionou.

Contudo, vale dizer que esse plugin é muito bom e cumpre o que se espera de sua função.

O plugin da Meow Apps chamado Media File Renamer é bem legal também e ainda possui uma versão PRO que oferece diversos recursos extras por $24.

Se fosse o caso, era simples, bastava ir até a biblioteca, clicar para exibir em lista e, em seguida, clicar para editar.

Nesse caso, não resolver meu problema, mas no seu pode resolver, de qualquer modo, é um recurso útil, até em se tratando de SEO.

Agora, outra solução seria trocar o arquivo de mídia, mas confesso que nem testei isso porque eram muitas imagens e baixar todas e subir novamente não parecia boa ideia.

Mas, se você quer testar isso ou saber como fazer, é simples, basta utilizar o plugin Enable Media Replace:

Assim, se você não conseguiu renomear o arquivo, pode baixá-lo, renomear manualmente no seu computador e depois substituir o original.

Você vai até a biblioteca novamente em Painel > Mídia > Biblioteca e agora, depois de instalar e ativar o plugin, verá um link para trocar a media.

O processo é relativamente simples, você terá que selecionar o novo arquivo e selecionar as opções de substituição.

Prevenindo problemas de encoding nas imagens

Como eu disse mais acima, isso é um problema que as vezes acontece e vou até dar mais detalhes abaixo sobre esses motivos.

No entanto, seria melhor você prevenir esse tipo de problema com acentuação em nomes de arquivos de mídia, não é mesmo?

“Prevenir é melhor que remediar”

Já diziam seus pais!

Portanto, há algumas formas de tomar as devidas precauções e já tratar isso assim que você faz o upload da mídia.

Mas, eu vou apenas recomendar um plugin simples, que pode ser usado para converter automaticamente os nomes dos arquivos.

Estou falando do Clean Image Filenames:

Esse plugin tem um funcionamento bem simples e vai converter automaticamente os nomes dos arquivos quando forem upados.

Por que esse estranho problema de codificação de caracteres ocorre?

Esse problema de codificação de caracteres pode ocorrer após a alteração do servidor ou por uma atualização do banco de dados ou apenas pela alteração do tema.

Em se tratando de textos com problemas de codificação, pode ser porque você está copiando ou colando algumas informações do MS Word no editor de conteúdo do WordPress.

O WordPress usa algo chamado “Smart Quotes”, por meio de uma função chamada wptexturize.

Se você estiver copiando / colando, a solução ideal seria voltar por todo o seu conteúdo e substituir todas as aspas simples / duplas usando o teclado.

No entanto, se você estiver trabalhando com CTRL+C e CTRL+V massivamente, pode ser mais complicado.

Nesse caso, você pode usar o plugin wptexturize e verificar se este plugin corrige o seu problema ou não.

Como última solução, você ainda pode tentar simplesmente usar um plugin de pesquisa e substituição como o Search and Replace:

Conclusão

Eu quebrei a cabeça e perdi muitas horas para simplesmente resolver o problema fazendo o upload um a um forçando o UTF-8.

Espero que uma dessas soluções aqui resolva seu problema e que faça você ganhar o máximo de tempo possível.

Se você curtiu esse post, faça a gentileza de comentar abaixo se funcionou e o que fez e compartilhe também no seu facebook.

Grande abraço,

Não perca mais nenhuma atualização aqui!

Ative as Notificações!

Clique aqui e, em seguida, clique em Permitir na caixa que aparecerá na parte superior da janela, próximo à barra de endereços.

Torne-se um Assinante e Eleve seu Conhecimento do WordPress!

Acesso Exclusivo, Suporte Especializado e Muito Mais.

Se você está aproveitando nosso conteúdo gratuito, vai adorar os benefícios exclusivos que oferecemos aos nossos assinantes! Ao se tornar um assinante do WP24Horas, você terá acesso a:

Não perca a oportunidade de maximizar seu potencial no WordPress. Clique no botão abaixo para se tornar um assinante e leve suas habilidades ao próximo nível!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

Não perca mais nenhuma atualização aqui!

Tabela de Conteúdo
PUBLICIDADE
Últimos Posts
Conclusão: Resumo e Próximos Passos no Desenvolvimento WordPress

Conclusão: Resumo e Próximos Passos no Desenvolvimento WordPress

Recursos e Comunidade: Onde Buscar Suporte e Continuar Aprendendo

Recursos e Comunidade: Onde Buscar Suporte e Continuar Aprendendo

Desenvolvimento WordPress como Profissão: Vale a Pena?

Desenvolvimento WordPress como Profissão: Vale a Pena?

Otimização para SEO e Performance no WordPress

Otimização para SEO e Performance no WordPress

Segurança no Desenvolvimento WordPress: Mantendo seu Site Seguro

Segurança no Desenvolvimento WordPress: Mantendo seu Site Seguro

Explorando a REST API do WordPress: Integrações e Funcionalidades Avançadas

Você precisa estar logado para ver esta informação.

Torne-se um Assinante e Eleve seu Conhecimento do WordPress!

Acesso Exclusivo, Suporte Especializado e Muito Mais.

Se você está aproveitando nosso conteúdo gratuito, vai adorar os benefícios exclusivos que oferecemos aos nossos assinantes! 

Não perca a oportunidade de maximizar seu potencial no WordPress. Clique no botão abaixo para se tornar um assinante e leve suas habilidades ao próximo nível!