WordPress es una plataforma útil, eficiente y con un gran nivel de usabilidad. Hacer un diseño web responsive desde esta plataforma es bastante fácil si ya sabemos las bases de su funcionamiento.
Aún así las imágenes responsive no son algo que WordPress gestione por defecto.
Hay la opción de generar manualmente el tamaño de cada una de las imágenes de la web, ir al editor de HTML i teclear la etiqueta de la imagen, los atributos srcset. El problema es que esto no solamente nos llevará mucho tiempo sino que será un trabajo difícil para los que no están acostumbrados al lenguaje HTML.
Por suerte hay una manera. Se puede programar WordPress de tal modo que haga él mismo el trabajo duro. Subiendo las imágenes generará todos los tamaños de las imágenes a partir de un plugin que implementará la etiqueta del atributo srcset en los sitios que el autor del blog o página quiera.
Ahora, nos encontramos en pleno proceso de diseño web y nos preguntamos ¿Cómo lo hago y por dónde empiezo?
Paso 1: Modifica las funciones .PHP para generar más tamaños de imágenes
Cada vez que subes una imagen a WordPres se guarda con su tamaño inicial o nativo. A la vez también se generan 3 copias de las imágenes en tamaños estandarizados
- Thumbnail (150×150)
- Medium (300×300)
- Large (1024×1024)
Es una característica en la que nos tenemos que fijar por su gran utilidad. Se puede customizar para crear cualquier tamaño de imagen. Esto significa que no tienes que hacer diferentes copias de una imagen en diferentes tamaños. Simplemente subes una sola imagen y WordPress te crea distintos tamaños.
¿Cómo se hace? Modificando el archivo de functions.php. Para añadir nuevos tamaños en las imágenes necesitas poner la función de add_image_size. Aquí tenemos un ejemplo:
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 función incluye un nombre (para que WordPress pueda identificar el tamaño de la imagen) y una anchura. Los nuevos tamaños serán de 300, 600, 1200 & 2400 pixeles de anchura.
Esto es posible con los sets que os hemos dicho anteriormente.
Los ejemplos de arriba sólo muestran cuatro tamaños nuevos de imágenes pero si quieres más o menos eso se basará en el tema de tu diseño web.
Ahora cada vez que subamos una imagen a WordPress se generarán nuevos tamaños de imagen. El siguiente paso es incluirlos en el HTML.
Paso 2: Instalar el plugin de imágenes responsive RICG
Para agilizar este proceso con todas las imágenes y sus tamaños tenemos que instalar un plugin: RICG responsive images. Una vez instalado y activado todas las imagenes tendrán el atributo srcst.
Normalmente cuando las imágenes se añaden a WordPres el output del HTML queda así:
<img class=”aligncenter wp-image–176 size-full” src=”http://somedomain.co.uk/wp-content/uploads/2015/05/img1.jpg” alt=”App Screenshot”>
Sólo tenemos una imágen con ese atributo.
Una vez instalado el plugin el 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–169×300.jpg 169w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–576×1024.jpg 576w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–300×534.jpg 300w, https://casalsonline.es/SebastianGreen/2015/wp_dev/wp-content/uploads/2015/05/onavo–600×1067.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”>
Todas las imagenes se ven a partir del atributo srcset.
Esto hace que las imágenes de nuestro proceso de diseño web sean responsive.
Ahora que todas tus imágenes son responsive
Ahora que ya sabemos cómo va tenemos que saber que el navegador escogerá la imágen que crea conveniente para mostrar.
Por ejemplo, los usuarios con pantallas más pequeñas verán las imágenes más pequeñas. Tu web cargará más rápidamente esas imágenes, necesitarán robarle menos Internet, ¡se agradece!
Los usuarios con pantallas más grandes tendrán las imágenes más grandes sin píxeles y sin perder calidad.
Hay un problema con este método: sólo funciona con imágenes subidas en WordPress con el RICG ya instalado. Por lo tanto si estás editando una web ya existente, cuidado. Aún así no te preocupes porque con el plugin no tendrás que repetir el proceso.
Paso 3: Instala el plugin para volver a generar los tamaños (opcional)
Éste plugin (Regenerate Thumbnails) irá a través de cada una de las imágenes existentes en tu página para hacer los tamaños nuevos según las functions.php Nos ahorra muchísimo tiempo.
Una vez instalado dirígete a Herramientas -> Regen. Thumbnails y clica “Regenerar todos los Thumbnails” Una barra de estado te informará sobre cuantas imágenes ha incidido.
Ahora, el diseño web se basará en todo esto: menos tiempo y más eficacia, eficiencia y usabilidad.
