Uso de Mobile-Detect para mostrar imágenes destacadas personalizadas

He estado trabajando en un tema de fotografía recientemente y una de las cosas que he estado implementando es un “estilo” móvil. A diferencia de los temas de respuesta comunes que se ajustarán al tamaño de su navegador sin importar el dispositivo, lo he estado configurando para que css / js móvil se cargue solo en tabletas y dispositivos portátiles. Bueno, en las versiones de escritorio / portátil quiero mantener un cierto diseño que requiere que algunas imágenes tengan una altura fija pero cualquier ancho, sin embargo, en la versión móvil quiero que estas mismas imágenes tengan una altura ilimitada pero un ancho fijo.

¿Solución?

Recientemente encontré un script bastante atractivo llamado “Mobile Detect” que he estado usando para cargar mi css / js solo en dispositivos móviles, así que ¿por qué no usar el mismo script para mostrar diferentes tamaños de imagen para dispositivos móviles? A continuación, le mostraré cómo puede usar este increíble script junto con la función de cambio de tamaño de agua para cambiar el tamaño de las imágenes y crear dos tamaños de imagen diferentes: uno para computadoras normales y otro para dispositivos móviles.

¿Cómo hacerlo?

Lo primero que debe hacer es agregar la función Aqua Resizer y la clase php Mobile Detect en su tema / complemento. Ya sea a través de functions.php o en un archivo separado usando la función require ().

Aqua Resizer

La función Aqua Resizer es muy fácil de usar. A continuación puede ver un ejemplo de cómo se agregaría a un tema para mostrar la imagen destacada de una publicación:


Detección móvil

La clase Mobile es realmente simple de usar, aquí hay un ejemplo de cómo probar si un visitante está en cualquier dispositivo móvil:

isMobile() ) {
   // Any mobile device.
} ?>

Combine Aqua Resizer y Mobile Detect

Ahora digamos que quería mostrar una imagen que es mucho más pequeña (la mitad del tamaño) para todos los usuarios de dispositivos móviles, puedo hacerlo así:

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 ); 
} ?>

Como puede ver, es realmente bastante simple y abre muchas ventanas a las posibilidades. Puede usarlo para proporcionar imágenes más grandes para pantallas retina (Mobile Detect es muy extenso, incluso puede probar dispositivos individuales, sistemas operativos, lotes de dispositivos y más), para mostrar imágenes más pequeñas para una navegación móvil más rápida o mientras lo estoy usando , para mostrar diferentes proporciones de imágenes en dispositivos móviles.

Nota: Obviamente, también puede usar Post Thumbnails para esto definiendo el tamaño de la imagen a usar. Fui con el aqua resizer porque es la función que he estado usando últimamente en mi tema porque no requiere que regeneres miniaturas cuando agregas nuevos tamaños de imagen o cuando cambias los actuales.

Publicaciones relacionadas

Botón volver arriba