En un diseño Responsive debemos tener en cuenta el tamaño de las imágenes que cargamos en cada dispositivo. En los dispositivos móviles el ancho de banda suele ser más reducido que en un equipo de escritorio, velocidades módem, 3G o similares.
El caso concreto que os propongo es para las imágenes que en WordPress llama imagen destacada, featured-image, que sale en la cabecera de nuestro mensaje, por defecto tomará las medidas de los previos que tengamos marcada en los ajustes Media del administrador.
Para un móvil no interesa mostrar un previo, thumbnail, más pequeño que en una tablet o un equipo escritorio. Para eso:
1. Descargar el plugin Mobble
2. Instalar: copiar en la carpeta Plugins de WordPress. Activar desde el administrador de plugins.
3. Modificar los PHP donde se muestra la featured-imagen (post-thumbnail) por ejemplo:
- loop.php
- single.php
Pasos a seguir:
1. Editar el fichero php
2. Buscar la función post_thumbnail
3. Reemplazar:
<?php //the_post_thumbnail(); // Declare pixel size you need inside the array ?>
Por:
<?php
if (is_mobile()) {
the_post_thumbnail('small');
} else {
the_post_thumbnail('large');
}
?>
Podemos usar en los if los dispositivos genéricos:
is_handheld(); // any handheld device (phone, tablet, Nintendo)
is_mobile(); // any type of mobile phone (iPhone, Android, etc)
is_tablet(); // any tablet device
is_ios(); // any Apple device (iPhone, iPad, iPod)
La lista completa de dispositivos:
is_iphone();
is_ipad();
is_ipod();
is_android();
is_blackberry();
is_opera_mobile();
is_symbian();
is_kindle();
is_windows_mobile();
is_motorola();
is_samsung();
is_samsung_tablet();
is_sony_ericsson();
is_nintendo();
SaludoX