Une technique RWD des images drupal 7 avec Field Formatter Class

Source: http://www.stephanemartinw.com/articles/20-images-responsives-srcset-sizes-drupal

Pour mettre complètement en place 'srcset' et 'sizes', il faut que le navigateur ait 2 types d'infos :

• une liste d'images : chaque image doit être redimentionnée en plusieurs largeurs (selon les breakpoints définis - 480px, 720px, 1024px, 1920px,...)
• les tailles réelles d'affichage des images selon la largeur d'affichage dispo (ie le contexte) -> sizes.
  Ex: on a une liste d'éléments = image et texte ; avec image qui prend 50% de la largeur pour les écrans > 64em mais 100% des petits écrans.

Classifier les images

Avant de pouvoir définir 'srcset' et 'size' d'une image (type image core drupal 7), il faut la classer.
Ici on va associer la classe responsiveimage<-type> aux images qui correspondent à un type d'utilisation.

Pour cela, on utilise sous drupal 7 :

• surcharge des templates (avec la fonction theme_image  on peux attribuer une classe aux images de type image de chaque type de contenu)
• Views: pour associer une classe CSS à chaque champs d'un type de contenu (partie Champs / mon-image/Styles settings/Customize field HTML)
• le module Field Formatter Class (ou autre) pour ajouter des classes CSS à tous les champs définis dans les types de contenus disponibles.
• CKEditor permet aussi d'associer des styles - et donc des noms de classes - aux éléments HTML saisis.
• surcharge des fichiers de thèmes: pour réécrire le rendu des images en leur associant une classe (avec API theme_image).

Une fois ces classes définies, on pourra préparer une image avant son rendu, en lui associant les attributs 'srcset' et 'sizes' (selon la classe).

Les fonctions pré-process à ajouter

function generate_image -> cf pièce jointe.

Créer (avec les styles d'image du core) un ensemble de styles (et les utiliser dans le site, par ex via Views).
Dans son code (get_srcset_for_image), on trouve les styles : thumbnail en 160px, small 320px, medium (480px) et large (1024px).
A partir de là, quand on ajoute une image (via interface) il faut sélectionner le style d'image "original".

La fonction get_srcset_for_image (cf pj) génère l'image dans le style demandé (srcset).
Note: itok est un token de style d'image. L'appel à la fonction generate_image pour chaque style (défini dans Configuration/Styles d'image) nous assure la disponibilité des images redimensionnées.

La fonction get_sizes_for_image génère sizes d'après lka classe attribuée à l'image (cf pj).

On regroupe enfin ces 3 fonctions dans un module (nommé ici responsiveimages) et on les appelle via une surcharge de theme_image (cf hook_theme_registry_alter.txt).
La fonction theme_image (surchargée) est utilisée dans les templates.
Par ex dans node--view--<viewname> on préparera pour field_image:

$field_items = field_get_items('node', $node, 'field_image');
$field_value = field_view_value('node', $node, 'field_image', $field_items[0]);
$image=$field_value['#item']['uri'];
print theme('image',
 array(
    'path' => $image,
    'alt' => $title,
    'title' => $title,
    'attributes' => array('class' => 'image-'.$viewtype)
));

Son module est dispo à https://github.com/stephanemartinw/responsiveimageswithdrupal7