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 el Detección móvil php 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:
<?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; ?>" />
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:
<?php
$detect = new Mobile_Detect();
if ( $detect->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í:
<?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 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 podrías usar Publicar miniaturas para ello, definiendo el tamaño de la imagen a utilizar. Elegí el aqua resizer porque es la función que he estado usando últimamente en mi tema porque no requiere que regeneres miniaturas al agregar nuevos tamaños de imagen o al cambiar los actuales.