Trabalhando com imagens responsivas no WordPress

Até recentemente, trabalhar com imagens responsivas no WordPress era um verdadeiro desafio. A menos que os usuários estivessem dispostos a escrever a funcionalidade eles mesmos, eles estavam sem sorte. A outra opção era comprar um plug-in ou encontrar alguma outra solução alternativa, mas não havia nenhuma funcionalidade principal disponível que os desenvolvedores pudessem aproveitar. Os temas criados sem suporte para imagens responsivas geralmente tinham desempenho lento e a usabilidade às vezes era instável em vários tamanhos de tela. Esses não são exatamente atributos que clientes e usuários associam a uma boa funcionalidade.

Felizmente, tudo isso mudou com o lançamento do WordPress 4.4. Agora, a funcionalidade para imagens responsivas está incluída diretamente no WordPress, permitindo que os desenvolvedores trabalhem com ela também em temas. Isso foi feito pegando um plugin de imagens responsivo e tornando-o parte do núcleo do WordPress.

Como tudo funciona

Obviamente, a menos que você já tenha feito isso, seu primeiro passo é atualizar para o WordPress 4.4. Depois de concluir a atualização, se você visualizar o código-fonte do seu site, notará que as imagens em seu site agora possuem dois novos atributos: sizes e srcset . Esses atributos são filtrados, o que significa que todos os tamanhos de imagem disponíveis estão presentes, mas as dimensões permanecem consistentes com a imagem original. O atributo srcset não permitirá o corte personalizado nos casos em que a proporção não for a mesma da versão original da imagem. Isso é para garantir que a qualidade da imagem não seja comprometida quando for exibida na tela do usuário.

Ficando sob o capô e fazendo mudanças

O WordPress adicionou imagens responsivas como recurso de plano de fundo, o que significa que o processo acontece automaticamente. Quando você carrega uma imagem usando o carregador de mídia, os atributos são aplicados a essas imagens sem nenhuma intervenção de sua parte. Isso também é útil para otimização de imagem.

Por ser um recurso em segundo plano, as imagens responsivas não vêm com uma interface de usuário – elas simplesmente acontecem. Como desenvolvedor, você pode modificar o arquivo functions.php em cada um de seus temas para ter certeza de que suas imagens recebem um atributo de sizes que seja preciso. Lembre-se: Quando você deseja se referir a imagens responsivas, isso significa os atributos da tag de imagem de sizes e srcset .

Atributos padrão

Ao começar a trabalhar com esse recurso, você notará que o WordPress é muito bom em encontrar todos os tamanhos possíveis e adicioná-los ao atributo srcset . Infelizmente, podem surgir problemas quando se trata da previsibilidade do atributo de sizes . Este é o atributo que é usado para comunicar a largura da imagem aos navegadores para que as imagens estejam disponíveis e visíveis em qualquer tela de exibição.

Configurar este atributo como padrão funciona de duas maneiras. A primeira é que força o atributo de sizes a ser aplicado a cada imagem. Isso é útil, considerando que agora é um requisito obrigatório. A segunda é que ele não permite que os navegadores usem uma fonte de imagem maior que o tamanho original da imagem. O código CSS usado para ajustar o tamanho da imagem dependendo das larguras da tela de exibição (como consultas de mídia) pode, infelizmente, tornar esse padrão muito menos útil.

Ganchos de filtro para desenvolvedores de temas

Como esse atributo padrão funciona apenas com imagens que não foram modificadas pelo código CSS, o WordPress criou ganchos de filtro para os desenvolvedores de temas usarem. Você apenas ajusta o atributo de sizes para todas as imagens usando este gancho. Como resultado, você pode ter certeza de que o atributo de sizes fornecido será ideal em todas as situações.

Uma advertência

Antes de avançar, vamos tomar um minuto para afirmar que a opção de atributos padrão não é a melhor maneira de fornecer uma boa funcionalidade de imagem responsiva. Na verdade, você deve trabalhar para evitar criar temas que dependam desse padrão. A razão para isso é que o atributo default impede que os navegadores modifiquem a fonte da imagem quando a área de exibição não for tão grande quanto o tamanho da imagem original. Os navegadores também não podem modificar a fonte se ela tiver sido ajustada por CSS e uma imagem maior for necessária.

Filtragem de imagem

Como desenvolvedor de temas, você pode usar a filtragem em suas imagens para obter um atributo de sizes que seja preciso. Isso pode ser feito usando um gancho para a função do WordPress, wp_calculate_image_sizes . Você pode usar esta função para que ela funcione com seu tema atual. Você pode fazer alterações que aplicam um atributo de sizes diferentes a diferentes tipos de imagens.

Novas funções que vêm com esta versão agora possibilitam que os sizes e atributos srcset sejam aplicados a todas as imagens que você adicionou usando o carregador de mídia do WordPress. Ele também permite que você adicione os atributos às imagens em suas postagens. Dê uma olhada em wp_get_attachment_image_sizes . Isso retorna um atributo de sizes que você pode capturar e alterar por meio de um filtro no arquivo functions.php do seu tema. Da mesma forma, wp_get_attachment_image_srcset faz a mesma coisa, apenas para o atributo srcset .

Imagens responsivas e seu tema personalizado

As novas funções que vieram com esta versão mais recente são acompanhadas por muitos ganchos que você pode usar para fornecer suporte eficaz para imagens responsivas em seu tema. Esses ganchos incluem o seguinte:

Wp_calculate_image_sizes – Um gancho que os desenvolvedores de temas podem usar para ajustar o atributo de sizes para trabalhar com os pontos de interrupção presentes em seu tema.

Max_srcset_image_width – Um gancho que um desenvolvedor de tema poderá usar para filtrar de acordo com a largura máxima das imagens que estão no atributo srcset .

W_calculate_image_srcset – Um gancho que dá aos desenvolvedores a capacidade de filtrar de acordo com os atributos srcset .

Saiba mais sobre o suporte a imagens responsivas

O manual do desenvolvedor do WordPress pode fornecer mais orientações quando se trata de usar esses ganchos de maneira eficaz. A pesquisa que você precisa fazer varia dependendo do seu nível de conforto ao fazer esses tipos de ajustes nos bastidores. Se você é um desenvolvedor de temas que busca isso estritamente como um hobby, pode optar por fazer um pouco de experimentação. Por outro lado, se você for um desenvolvedor de temas de carreira, talvez queira investir no tempo e nos recursos necessários para realmente dominar essa atualização.

Benefícios da atualização

Se você ainda não atualizou o WordPress (ou se o seu host gerenciado do WordPress ainda não foi atualizado para você), seus usuários se beneficiarão de algumas ótimas vantagens quando você fizer isso. O suporte a imagens responsivas pode melhorar o desempenho da página, pois suas páginas não perderão tempo puxando imagens muito grandes. Os usuários também notarão uma melhoria muito impressionante na qualidade das imagens. Eles não verão a 'fabricação de salsichas' que entra em tudo. Em vez disso, eles apenas verão que funciona bem.

Como desenvolvedor, você terá que ajustar o atributo de sizes em cada um dos arquivos functions.php para todos os seus temas. No entanto, depois de ter feito esse esforço inicial, as coisas se tornam muito mais fáceis. Depois de enfrentar a curva de aprendizado, você descobrirá que trabalhar com essa nova funcionalidade é natural.

Pode levar alguma pesquisa e prática para entender essa nova funcionalidade e obter suporte de imagem responsivo para trabalhar com seus temas personalizados. No entanto, se você estiver disposto a pesquisar no manual do desenvolvedor e descobrir as coisas, seus clientes realmente apreciarão a melhoria no desempenho e na funcionalidade. Isso já faz muito tempo, e desenvolvedores de temas experientes e aqueles encarregados de manter temas personalizados estão empolgados com esta atualização.