El blog de ASPgems

Siguiendo el día a día de ASPgems

Imágenes responsive en Drupal 7 con Picture

Imágenes responsive en Drupal 7 con Picture

Hoy en día es necesario optimizar las imágenes de tu sitio web y para ello tenemos el módulo picture en drupal.

Este módulo nos va a permitir optimizar diferentes imágenes a diferentes resoluciones. Todo ello mediante media queries de CSS y utilizando la etiqueta <imagen> de html.

Módulo Picture  https://www.drupal.org/project/picture

Funcionamiento general

Cuando trabajamos con vistas y utilizamos un tipo imagen estamos asociando un tamaño en este caso asociaremos un picture.  El picture está definido por un grupo y ese grupo tiene una serie de breadkpoints en el que indicamos las diferentes saltos y tipos de imágenes que queremos añadir.

Módulo picture tiene dos dependencias importantes:

  • Módulo Breakpoints que nos permite definir diferentes tipos de tamaño 
  • Módulo Chaos Tool Suite es un módulo de API con varias herramientas para desarrolladores.  

Configuración Picture y Breakpoints

Para llegar a hacer un picture antes tenemos que haber definido otros elementos.  Saltos de imágenes, grupos, ..

Configurando los Saltos de pantalla o Breakpoints

Para configurar los saltos debemos ir a Configuración -> Multimedia -> Saltos de Pantalla

Aquí vamos a configurar los saltos que queramos. Por ejemplo si usaramos bootstrap lo normal sería tener 3 saltos. 
Ejemplos de saltos:

  • mobile - (min-width: 0) and (max-width: 767px)
  • tablet - (min-width: 768) and (max-width: 1023px)
  • desktop - (min-width: 1024)

Como veréis en la imagen que tenéis a continuación podéis definir los saltos que necesiteis para vuestro proyecto.  Además si veis en la columna Breakpoint, @media … lo que ponemos son queries css.

 

Grupos de Saltos

 
Los grupos  nos van a permitir definir el conjunto de saltos que va a tener nuestro picture. 
Si vamos a la opción de Añadir nuevo grupo nos aparecerán los saltos declarados anteriormente. 
 

Estilos de Imágenes

Los estilos de imagen nos va a proporcionar recortes o miniaturas de las imagenes. Por cada estilo de imagen tendremos un recorte o miniatura. Y por cada tipo de salto que hemos declarado deberíamos tener un estilo de imagen propio. 
Configuración -> Multimedia -> Estilos de Imagen
si ya tenemos los estilos no hace falta que vayamos a este paso.  

Creando nuestro Picture

Nos vamos a la opción Configuracion -> Multimedia -> Picture Mappings. 
 
Si le damos a agregar nuevo picture mappings lo primero que nos pide es el Grupo de salto. 
 

Ahora vamos a ir definiendo un recorte o estilo de imagen por cada salto que hemos elegido. En este caso hemos elegido un grupo con 4 saltos asi que tendremos que asignar un recorte por cada uno de ellos.  

 

Una vez que teneis declarado vuestro picture podeis asociarlos a vuestros nodos, usarlos en las vistas, … 

 

 

Ejemplo practico donde tenemos formateado los nodos y las vistas. 
Por último os dejo un ejemplo de html que genera. Antes solo pintaba una imagen ahora pinta un picture con diferentes “source” uno por cada salto que habeis definido con los recortes de cada salto.  
 
<picture title="xxxx>
 
<source srcset="https://ejemplodeprueba.jpg?itok=CpPs_4IS&amp;timestamp=1475761295 1x" media="(min-width: 0) and (max-width: 500px)">
<source srcset="https://ejemplodeprueba.jpg?itok=4jq0Oycm&amp;timestamp=1475761295 1x" media="(min-width: 501px) and (max-width: 767px)">
<source srcset="https://ejemplodeprueba.jpg?itok=aWCeyrBh&amp;timestamp=1475761295 1x" media="(min-width: 768px) and (max-width: 1023px)">
<source srcset="https://ejemplodeprueba.jpg??itok=IYL9G5PX&amp;timestamp=1475761295 1x" media="(min-width: 1024px) and (max-width: 1199px)">
<source srcset="https://ejemplodeprueba.jpg?itok=WjVfj-8l&amp;timestamp=1475761295 1x" media="(min-width: 1200px)">
 
</picture>
 

 

Añadir nuevo comentario

Artículos relacionados

Nuestra revista

View my Flipboard Magazine