Contente
- Conhecimento necessário: PHP e CSS básicos
- Requer: Instalação do WordPress, editor de texto de escolha
- Hora do projeto: 10 minutos
Se você assina a versão impressa da revista .net (se não, por que não !?), verá que a edição deste mês traz um excelente artigo sobre “Design Responsivo com WordPress”.
No artigo, o autor Jesse Friedman descreve uma série de técnicas realmente úteis para aproveitar ao máximo e superar a funcionalidade inerente do WordPress a fim de produzir um site responsivo verdadeiramente eficaz. Se você está pensando em produzir um site responsivo com WordPress, você definitivamente deveria pegar uma cópia do artigo dele. É uma leitura obrigatória.
Tendo reconstruído recentemente meu blog pessoal no WordPress usando uma abordagem responsiva que prioriza os dispositivos móveis, eu estava familiarizado com algumas das técnicas abordadas no artigo. No entanto, o único item que realmente se destacou para mim foi a abordagem de Jesse para habilitar imagens fluidas via jQuery.
O problema com WordPress e “imagens fluidas”
Como tenho certeza de que todos vocês sabem, 'imagens fluidas' - que fazem uso de largura máxima: 100% - exigem que as imagens não tenham largura ou altura fixas para que possam ser dimensionadas para o tamanho de seu contêiner. Infelizmente, o WordPress calcula automaticamente as dimensões das imagens geradas da biblioteca de mídia e adiciona os atributos de largura e altura correspondentes a quaisquer tags img>.
Isso é ótimo para a velocidade de renderização da página, mas gera um maciço chave em andamento quando se trata de criar layouts responsivos, pois as dimensões da imagem não são mais restritas ao tamanho de seu contêiner.
Isso é um problema.
A solução não jQuery
Em seu artigo, Jesse 'sugere o uso de jQuery para remover os atributos de largura e altura de todas as tags img> na página depois de carregada. Isso certamente funciona, mas ao construir meu site, não gostei da ideia de depender do JavaScript para fazer isso, especialmente se houvesse muitas imagens na página em questão.
É aqui que os filtros do WordPress vieram para o resgate.
O códice do WordPress define um filtro como:
“... ganchos que o WordPress lança para modificar o texto de vários tipos antes de adicioná-lo ao banco de dados ou enviá-lo para a tela do navegador.”
Acontece que isso é exatamente o que precisamos. Configurando um filtro para ser executado em todas as imagens como a ação final antes de serem renderizadas na página, podemos usar o PHP para remover os atributos de largura e altura, evitando assim a necessidade de manipulação (potencialmente) cara de DOM via JavaScript.
O código
- /**
- * FUNÇÕES DE IMAGEM RESPONSIVA
- */
- add_filter (’post_thumbnail_html’, ’remove_thumbnail_dimensions’, 10);
- add_filter (’image_send_to_editor’, ’remove_thumbnail_dimensions’, 10);
- function remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (largura
No código acima, estamos adicionando dois filtros usando a função add_filter. O primeiro argumento é o filtro que queremos conectar e o segundo especifica a função que queremos executar quando o filtro é chamado.
Em nosso código, nos conectamos a duas funções obscuras:
- post_thumbnail_html - imagens recuperadas com o post_thumbnail ()
- image_send_to_editor - imagens adicionadas ao editor
Em seguida, usamos uma expressão regular para remover os atributos de largura e altura das tags de imagem. Agora, quando nossas imagens são enviadas para o navegador, elas podem ser totalmente 'fluidas', assim como o Sr. Marcotte nos disse que deveriam.
Uma confissão
Devo confessar que tive a ideia de usar add_filter para remover atributos que não consegui por nada, localizar os filtros corretos do WordPress para me conectar.
Depois de muita pesquisa, finalmente encontrei este post extremamente útil no Wordpress Stack Exchange de Nathaniel Taintor, que forneceu as informações sobre os dois filtros que eu precisava.
Ressalvas
Pelo que eu sei, a única grande desvantagem dessa abordagem é que ela não remove os atributos de largura e altura de todas as imagens em seu site. Achei isso um problema, especificamente com as imagens do Gravatar que o WordPress usa nos comentários.
Se alguém tiver uma solução para este problema, deixe um comentário para que todos possamos nos beneficiar.
Espero que isso tenha sido útil e demonstrado uma alternativa ao uso de JavaScript para implementar “imagens fluidas” em sites WordPress.
Palavras: David Smith
Dave Smith é designer de front-end baseado perto da bela cidade de Bath, no Reino Unido. Quando ele não está trabalhando em novos e empolgantes projetos da web, ele pode ser encontrado tocando trompete em tudo, desde grupos de jazz de Big Band a orquestras sinfônicas. Você pode conversar com Dave no Twitter como @get_dave.
