Eu tenho trabalhado em um tema de Fotografia recentemente e uma das coisas que tenho implementado é um “estilo” mobile. Ao contrário dos temas responsivos comuns que se ajustam ao tamanho do seu navegador, independentemente do dispositivo, eu o configurei para que o css/js móvel seja carregado apenas em tablets e dispositivos portáteis. Bem, nas versões desktop/laptop eu quero manter um certo design que requer que algumas imagens tenham uma altura fixa, mas qualquer largura, no entanto, na versão móvel eu quero que essas mesmas imagens tenham uma altura ilimitada, mas uma largura fixa.
Solução?
Recentemente, encontrei um script muito legal chamado “Mobile Detect” que tenho usado para carregar meu css/js apenas em dispositivos móveis, então por que não usar o mesmo script para mostrar tamanhos de imagem diferentes para dispositivos móveis? Abaixo, mostrarei como você pode usar esse script incrível junto com a função aqua resizer para redimensionar imagens para criar dois tamanhos de imagem diferentes – um para computadores comuns e outro para dispositivos móveis.
Como fazer isso?
A primeira coisa que você quer fazer é adicionar a função Aqua Resizer e a classe php Mobile Detect em seu tema/plugin. Seja via functions.php ou em um arquivo separado usando a função require().
Aqua Resizer
A função Aqua Resizer é muito fácil de usar. Abaixo você pode ver um exemplo de como adicionar a um tema para mostrar a imagem em destaque de uma postagem:
<?php
//get and crop featured image to 600px (width) and 150px (height)
$featured_image = aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ,’full’ ), 600, 300, true ); ?>
<img src=”<?php echo $featured_image; ?>” />
Detecção de celular
A classe Mobile é muito simples de usar, aqui está um exemplo de como testar se um visitante está em algum dispositivo móvel:
<?php
$detect = new Mobile_Detect();
if ( $detect->isMobile() ) {
// Any mobile device.
} ?>
Combine Aqua Resizer e Mobile Detect
Agora vamos dizer que eu queria mostrar uma imagem muito menor (metade do tamanho) para todos os usuários móveis que eu possa fazer assim:
<?php
$detect = new Mobile_Detect();
if ( $detect->isMobile() ) {
// Featured image for mobile users
$featured_image = aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ,’full’ ), 300, 150, true );
} else {
// Featured image for all other users
$featured_image = aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ,’full’ ), 600, 300, true );
} ?>
<img src=”<?php echo $featured_image; ?>” />
Como você pode ver, é realmente muito simples e abre muitas janelas para possibilidades. Você pode usá-lo para fornecer imagens maiores para telas retina (o Mobile Detect é muito extenso, você pode até testar dispositivos individuais, sistemas operacionais, lotes de dispositivos e muito mais), para mostrar imagens menores para navegação móvel mais rápida ou como estou usando , para mostrar diferentes proporções de imagens em dispositivos móveis.
nota: Obviamente, você também pode usar Post Thumbnails para isso, definindo o tamanho da imagem a ser usada. Eu fui com o redimensionador aqua porque é a função que tenho usado ultimamente no meu tema porque não requer que você regenere miniaturas ao adicionar novos tamanhos de imagem ou ao alterar os atuais.
