Responsive images con dirección de arte en Drupal

Hace unos meses tomé conciencia de lo afortunados que somos en Drupal por las soluciones que tenemos para las imágenes responsive. Mientras buscaba información para una sesión sobre Responsive Web Design repasé las diferentes herramientas que hay fuera el mundo de Drupal. Vi que hay infinidad de soluciones, pero pocas de ellas incorporan el concepto de la dirección artística, o dicho de otro modo, la capacidad de decidir cómo se deben adaptar las imágenes a cada dispositivo.

Empezando por el principio

Si nos basamos en el marcado HTML en sí, hay 2 maneras de trabajar con imágenes responsive: con la etiqueta img o con la recién incorporada picture.

Con la misma etiqueta img podemos crear imágenes responsiva gracias al atributo srcset. Este nos permite cargar una imagen u otra dependiendo del tamaño y densidad de pantalla.

<img
  srcset=”image-large.jpg  1920w,
         image-medium.jpg  960w,
          image-small.jpg   480w”						
  sizes=”50vw”
  src=”quilt_2/detail/medium.jpg”
  alt=”Detail text.”
/>

Pero aquesta solución está pensada para usar la misma imageb escalada. ¿Pero qué pasa si en móvil nos interesa poner el foco en un punto y al hacerla demasiado pequeña se pierde el detalle que queremos destacar? Aquí es donde entra en juego la dirección de arte de las imágenes.

 

Un paso más allá: automatizando la dirección de arte

Imagen escalada vs imagen recortada

En la versión móvil izquierda del ejemplo de la imagen superior vemos la misma imagen del escritorio, pero solo escalada. En la de la derecha, en cambio, hemos puesto el foco en la parte que realmente nos interesa para ilustrar el artículo. Y así sería el marcado que obtendríamos con Drupal:

<picture title=”Image title”>
  <source srcset=”image-big.jpg 1x” 
          media=”(min-width: 0px) and (max-width: 29.99em)”>
  <source srcset=”image-small.jpg 1x”
          media=”(min-width: 30em)”>
  <img srcset=”image-big.jpg 180w”>
</picture>

Aquí entra en juego Focal Point, un módulo creado por bleen que actualmente está vinculado a la iniciativa Media, concretamente con Crop API.

La función de este módulo es permitir al usuario que crea contenidos definir cuál es la parte más importante de una imagen. Esta información se utiliza para recortar la imagen automáticamente (o recortarla y escalarla) una vez se visualiza y no perder la zona más importante durante el proceso. Lo que hace el módulo en sí es ofrecernos dos nuevos filtros para configurar los estilos de imagen que posteriormente se utilizarán cuando visualicemos nuestras entidades, ya sea con el formateador predeterminado para Imagen o el de Responsive Images. El punto fuerte de este módulo es que se nos da una solución muy sencilla para el usuario final que lo va a usar en su día a día, pero también una solución muy rápida de configurar para quien está creando la web.

Para empezar a trabajar con imágenes responsive deberemos haber decidido cuáles son los breakpoints que necesitamos y deberemos tenerlos disponibles en nuestro Drupal. Si queréis saber cómo se configuran los puntos de corte podéis acceder a la página de Documentación de Drupal.

En primer lugar, habilitaremos el módulo del núcleo Responsive Images. También descargaremos y habilitaremos el módulo Focal Point y su dependencia, el módulo Crop API.

Entonces crearemos los estilos de imagen para cada punto de los breakpoints en Administración > Configuración > Media > Estilos de imagen.

Selección estilo de recorte

En este caso crearemos un estilo de imagen correspondiente a cada uno de los puntos de corte que nos proporciona Bartik: Wide, Narrow y Mobile. Por ejemplo, para el breakpoint Mobile crearemos un estilo de imagen de 420px x 420px

Creación estil de imagen

Una vez tengamos los 3 estilos de imagen creados iremos a Administración > Configuración > Media > Responsive image styles y crearemos un nuevo estilo de imagen responsive con el botón “+ Añadir una nueva imagen responsive”. En este caso lo llamaremos “Header” y seleccionaremos el grupo de breakpoints de Bartik. Para cada uno de ellos seleccionaremos el estilo de imagen correspondiente entre los que hemos creado

El siguiente paso ya es configurar el campo en el modo de visualización que nos interese, que en este caso se trata del modo Predeterminado del tipo de contenido Artículo. Navegaremos a Administración > Estructura > Tipos de contenidos > Artículo e iremos a la pestaña “Gestiona la presentación”. Allí cambiaremos el formato que viene por defecto "Imagen" y lo pasaremos a "Responsive Image". Ésto nos dará la posibilidad de introducir las configuraciones del campo, donde seleccionaremos nuestra imagen responsive si no se ha seleccionado por defecto.

Configuració del camp

Hasta aquí ya tenemos configurado el estilo de imagen. Ahora ya podremos empezar a usar el Focal Point. Crearemos un nuevo contenido yendo a Administración > Contenido > “+ + Añadir contenido” y añadiremos un nuevo nodo de tipo Artículo. Al introducir contenido en el campo Imagen veremos que se nos añadirá una miniatura con una cruz encima que nos permitirá seleccionar el punto más importante de la imagen.

Selecciona el punto de foco

Además tenemos la opción de previsualizar cómo se aplicará a los diferentes estilos de imagen pulsando en "Previsualizar".

Previsualitzación de los resultados

Una vez guardamos el nodo que acabamos de crear ya podemos ver el resultado si cambiamos el tamaño del navegador.

Resultados de la visualitzación

 

Conclusiones

Como en muchos otros casos, Drupal nos ofrece una solución out of the box para gran parte de las situaciones y es fácilmente configurable mediante la propia interfaz de usuario (lo que en Drupal conocemos como site-building). Pero lo que destaco de esta solución es lo sencillo y transparente que es para el usuario final que terminará usando esta funcionalidad porque con un esfuerzo mínimo adquiere control sobre sus contenidos.

Resumiendo, creo que el balance entre el esfuerzo que nos supone el añadir esta funcionalidad vs el valor añadido que damos al usuario final hace Focal Point imprescindible. Os animo a añadirlo a vuestros proyectos!