Blog

Erro ao Carregar Imagens por causa de Encoding

fastcomet-wordpress-404-error
Solução de Problemas

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.

https://br.wordpress.org/plugins/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.

https://wordpress.org/plugins/phoenix-media-rename/

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.

https://wordpress.org/plugins/media-file-renamer/

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:

https://wordpress.org/plugins/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:

https://wordpress.org/plugins/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.

https://wordpress.org/plugins/wpuntexturize/

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

https://wordpress.org/plugins/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,

Deixe seu comentário aqui...

O seu endereço de e-mail não será publicado.

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

Nosso site usa cookies e, portanto, coleta informações sobre sua visita para melhorar nosso site (por meio de análise), mostrar a você conteúdo de mídia social e anúncios relevantes. Por favor, consulte nossa página Termos & Políticas para mais detalhes ou concorde clicando no botão 'Aceitar'. OBS: Ao continuar a navegação, você, automaticamente, concorda.

Configurações de Cookies

Abaixo, você pode escolher os tipos de cookies que quer permitir neste site. Clique no botão "Salvar Configurações de Cookies" para aplicar sua escolha.

FuncionalNosso site usa cookies funcionais. Esses cookies são necessários para permitir que nosso site funcione.

AnalíticoNosso site usa cookies analíticos para permitir a análise de nosso site e a otimização para o propósito de a.o. a usabilidade.

Mídia SocialNosso site coloca cookies de mídia social para mostrar conteúdo de terceiros, como YouTube e Facebook. Esses cookies podem rastrear seus dados pessoais.

PublicidadeNosso site coloca cookies de publicidade para mostrar anúncios de terceiros com base em seus interesses. Esses cookies podem rastrear seus dados pessoais.

OutrosNosso site coloca cookies de terceiros de outros serviços que não são analíticos, mídia social ou publicidade.