SÓ HOJE 10% DE DESCONTO

USE O CUPOM: DOMINGO.FULL

00
Horas
00
Minutos
00
Segundos

Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Usando o Mobile-Detect para mostrar imagens em destaque personalizadas

Você está em:

Usando o Mobile-Detect para mostrar imagens em destaque personalizadas

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.

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

O meu carrinho
🎁 Faltam 300,00 para liberar o Cupom Secreto
O seu carrinho está vazio.

Parece que ainda não tomou uma decisão.