Clicky

Cómo hacer en WordPress imágenes adaptables (responsive)

hacer en WordPress imágenes adaptables (responsive)

Solo se necesitan nuevos tamaños en el archivo functions.php y un plugin (RICG Responsive Images)

WordPress es una plataforma muy potente. Hacer un tema responsive y su integración es bastante fácil una vez que sabes lo básico de la tematización. Imágenes responsives, por otro lado, no es algo que WordPress pueda hacer autamáticamente. Se podría ir por el camino de generar manualmente cada tamaño de la imagen y, a continuación, en el editor de HTML escribir manualmente la etiqueta de imagen con el atributo srcset de cada imagen. Esto no sólo llevaría tiempo, sino que podría ser un problema para los usuarios administradores que no tienen mucho conocimiento de HTML.

Afortunadamente hay una manera de hacer que WordPress realice todo el trabajo pesado. Se puede generar todos los tamaños de imagen desde una sola imagen. Subirla entonces, a través de un plugin, aplicar la etiqueta de imagen y el atributo srcset en la parte en que el autor opta por insertar una imagen.

Paso 1: Modificar funtions.para generar más tamaños de imagen

Cada vez que subes una imagen WordPress la guarda en su tamaño original. También genera automáticamente 3 copias redimensionadas en estos tamaños estándar (el alto o ancho pueden cambiar en función de la relación de la imagen):

Miniatura - Thumbnail (150 × 150)
Medio (300 × 300)
Grande (1024 × 1024)

Esta es una característica muy potente ya que puede ser personalizada para hacer cualquier tamaño de imagen. Esto significa que no es necesario hacer varias copias de una imagen en diferentes tamaños. Subiremos una sola imagen, y WordPress crea las copias redimensionadas.

Esto se hace modificando el archivo functions.php. Para añadir nuevos tamaños de imagen es necesario agregar algunas llamadas a la función add_image_size. He aquí un ejemplo que añade cuatro nuevos tamaños de imagen:

add_image_size( 'sml_size', 300 ); 
add_image_size( 'mid_size', 600 );
add_image_size( 'lrg_size', 1200 );
add_image_size( 'sup_size', 2400 );

Cada llamada a la función incluye un nombre (de modo que WordPress pueda identificar el tamaño) y una anchura. Los nuevos tamaños serán 300, 600, 1200 y 2400 píxeles de ancho. También es posible con la función add_image_size de WordPress establecer la altura o recortar la imagen, pero el ejemplo anterior mantendrá la relación de aspecto de la imagen inicial. (Se puede encontrar más acerca de la función add_image_size en el WordPress Codex).

El ejemplo anterior sólo muestra cuatro nuevos tamaños de imagen que se añaden, pero es posible que desees agregar más o menos... esto se basa en el diseño de tu tema. Ahora cada vez que se sube una imagen, WordPress generará los nuevos tamaños de imagen. El siguiente paso consiste en incluirlos en el código HTML.

Paso 2: Instalar el plugin RICG Responsive Images

Con el fin de que WordPress de salida a todos los tamaños de imágenes, necesita ser instalado un nuevo plugin: el RICG Responsive Images. Una vez instalado y activado se incluyen todos los tamaños de imágenes en la etiqueta de la imagen a través del atributo srcset.

Normalmente, cuando se añade una imagen a una página en WordPress, la salida HTML se ve así:

<img class="aligncenter wp-image"“176 size-full" src="http://somedomain.co.uk/wp-content/uploads/2015/05/img1.jpg" alt="App Screenshot">

Hay una sola imagen con el atributo src.

Una vez instalado el plugin HTML se verá así:

<img class="aligncenter wp-image"“137 size-full" src="http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo.jpg" srcset="http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo"“169x300.jpg 169w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo"“576x1024.jpg 576w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo"“300x534.jpg 300w, http://localhost/SebastianGreen/2015/wp_dev/wp-content/uploads/2015/05/onavo"“600x1067.jpg 600w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo.jpg 600w" alt="onavo" width="600" height="1067" sizes="(max-width: 600px) 100vw, 600px">

Se han añadido todos los nuevos tamaños de imagen a través del atributo srcset.

El plugin también incluye Picturefill.js, un polyfill de imagen sensible que añade soporte para el elemento de imagen y los nuevos atributos responsive para el elemento img. Esto, junto con los atributos srcset que se incluyen en la etiqueta de la imagen es lo que hace que las imágenes sean sensibles.

Tus imágenes son ahora sensibles

Ahora las imágenes en tu sitio web serán sensibles - el navegador elegirá la imagen más apropiada para descargar.

Los usuarios de dispositivos con pantallas más pequeñas recibirán las imágenes más pequeñas. Tu sitio web se cargará más rápido porque estas imágenes se descargarán más rápido ya que van a necesitar menos de ancho de banda de los usuarios. Los usuarios de dispositivos con pantallas más grandes obtendrán las imágenes más grandes. No van a aparecer pixeladas o de menor calidad.

Sólo hay un problema potencial con este método: sólo funciona con imágenes subidas a WordPress después que ha sido instalado el plugin RICG Responsive Images. Si se trata de una nueva página web en la que se está trabajando, entonces esto no será problema, sin embargo, habrá un problema si se trata de un sitio web existente con contenido antiguo donde no se han generado los nuevos tamaños de imagen que se agregaron en functions.php. Afortunadamente, no es necesario volver a agregar todas las imágenes - hay un plugin que puede ayudar.

Paso 3: Instalar el puglin para volver a generar tamaños de imágenes (opcional)

El plugin Regenerate Thumbnails pasará a través de todos los archivos adjuntos de imágenes existentes y volverá a generar los nuevos tamaños de imagen basados en los nuevos creados en functions.php - es es un verdadero ahorro de tiempo y sólo requiere hacer clic en un botón.

Una vez instalado, ve a Herramientas -> Regen. Thumbnails y luego haz clic en el botón "Regenerate All Thumbnails". Aparecerá una barra de estado y podrás ver la información sobre cuántas imágenes han sido redimensionadas.

Ahora, todas las imágenes existentes en tu sitio web se emitirán correctamente con la etiqueta de imagen a través del atributo srcset.

Jesus_Caceres