Imatges responsives amb direcció d’art al Drupal

Fa uns mesos vaig prendre consciència de lo afortunats que som al Drupal per les solucions que tenim per a les imatges responsives. Mentre buscava informació per a una sessió sobre Responsive Web Design vaig repassar les diferents eines que hi ha fora el món del Drupal per a imatges responsives. Vaig veure que hi ha infinitat de solucions, però poques d’elles incorporen el concepte de la direcció artística, o dit d’una altra manera, la capacitat de decidir com s’han d’adaptar les imatges a cada dispositiu.

Començant pel principi

Si ens basem en el marcat HTML en si, hi ha 2 maneres de treballar amb imatges responsives: amb l’etiqueta img o amb la recentment incorporada picture.

Amb la mateixa etiqueta img podem crear imatges responsives gràcies a l’atribut srcset. Aquest ens permet carregar una imatge o una altra depenent de la mida i densitat 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.”
/>

Però aquesta solució està pensada per a fer servir la mateixa imatge escalada. Què passa si en mòbil ens interessa posar el focus en un punt i al fer-la massa petita es perd el detall que volem destacar? Aquí és on entra en joc la direcció d’art de les imatges.

 

Una passa més enllà: automatitzant la direcció d’art

Imatge escalada vs imatge retallada

A la versió mòbil de l’exemple esquerra de la imatge superior veiem la mateixa imatge de l’escriptori escalada. A la de la dreta, en canvi, hem posat el focus a la part que realment ens interessa per a il·lustrar l’article. I així seria el marcat que obtindríem amb el 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 joc el Focal Point, un mòdul creat per bleen que actualment està vinculat a la iniciativa Media, concretament al Crop API.

La funció d’aquest mòdul és permetre a l’usuari que crea continguts el seleccionar la part més important d’una imatge. Aquesta informació es fa servir per a retallar-la (o retallar-la i escalar-la) automàticament i no perdre’n la zona més important. El que fa el mòdul en si és oferir-nos dos nous filtres per a configurar els estils d’imatge que posteriorment es faran servir quan visualitzem les nostres entitats, ja sigui amb el formatejador per defecte per a imatge o el de Responsive Image. El punt fort és que se’ns dóna una solució molt senzilla per a l’usuari final que ho farà servir al seu dia a dia, però també una solució molt ràpida de configurar per a qui està creant el web.

Per començar a treballar amb imatges responsives haurem d’haver decidit quins són els punts de tall o breakpoints que necessitem i els haurem de tenir disponibles al nostre Drupal. Si voleu saber com es configuren els punts de tall podeu accedir a la pàgina de Documentació del Drupal.

En primer lloc, habilitarem el mòdul del nucli Responsive Images. També descarregarem i habilitarem el mòdul Focal Point i la seva dependència, el mòdul Crop API.

Llavors crearem els estils d’imatge per a cada punt de tall a Administració > Configuració > Media > Estils d’imatge.

Selecció estil de retallat

En aquest cas en crearem un estil d’imatge corresponent a cada un dels punts de tall que ens proporciona Bartik: Wide, Narrow i Mobile. Per exemple, per al punt de tall Mobile crearem un estil d’imatge de 420px x 420px.

Creació de l'estil d'imatge

Un cop tinguem els 3 estils d’imatge creats navegarem a Administració > Configuració > Media > Responsive image styles i crearem un nou estil d’imatge responsive amb el botó “+ Afegir una nova imatge responsiva”. En aquest cas l’anomenarem “Header” i seleccionarem el grup de punts de tall de Bartik. Per a cada un d’ells seleccionarem l’estil d’imatge corresponent dels que hem creat.

El següent pas ja és configurar el camp al mode de visualització que ens interessi, que en aquest cas es tracta del mode Predeterminat del tipus de contingut Article. Navegarem a Administració > Estructura > Tipus de continguts > Article i anirem a la pestanya “Gestiona la presentació”. Allà canviarem el format que ve per defecte “Imatge” i el passarem a “Responsive Image”. Això ens habilitarà la possibilitat d’introduir les configuracions del camp, on seleccionarem la nostra imatge responsiva si no s’ha seleccionat per defecte.

Configuració del camp

Fins aquí ja tenim configurat l’estil d’imatge i ja podrem començar a fer servir el Focal Point. Crearem un nou contingut anant a Administració > Contingut > “+ Afegir contingut” i afegirem un nou node de tipus Article. Quan introduïm contingut al camp Imatge veurem que se’ns afegirà una miniatura amb una creu a sobre que ens permetrà seleccionar el punt més important de la imatge.

Selecciona el punt de focus

A més a més tenim l’opció de previsualitzar com s’aplicarà als diferents estils d’imatge prement a “Preview”.

Previsualització dels resultats

Un cop desem el node que acabem de crear ja podem veure el resultat si canviem la mida del navegador.

Resultats a la visualització

 

Conclusions

Com en molts altres casos, Drupal ens ofereix una solució out of the box per a una gran part dels casos i que és fàcilment configurable mitjançant la pròpia interfície d’usuari (el què al Drupal coneixem com a site-building). Però el què destaco d’aquesta solució és lo senzill i transparent que és per a l’usuari final acabar utilitzant aquesta funcionalitat, que amb un esforç mínim adquireix control sobre els seus continguts.

Resumint, crec que el balanç entre l’esforç que ens suposa el fet d’afegir aquesta funcionalitat vs el valor afegit que donem a l’usuari final fa Focal Point imprescindible. Us animo a afegir-lo als vostres projectes!