» » Cómo cargar tamaños de imágenes según dispositivos en WordPress: Featured-Images

Cómo cargar tamaños de imágenes según dispositivos en WordPress: Featured-Images

Publicado en: Tecnología | 0

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.