Grosse améliation de mon #plugin #SPIP image_responsive : il intègre désormais la gestion de la direction artistique, avec prise en compte (si l’on a envie) du centre d’intérêt automatique de l’image (avec le plugin centre_image :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive
Il y a maintenant une variable supplémentaire (optionnelle), qui doit d’utiliser avec les valeurs de mediaqueries de la variable précédente. Par exemple :
[(#FICHIER|image_responsive{
600/800/1400,
0,
0,
/(min-width:801px) and (max-width:1000px)/(min-width: 1001px),
1x1xfocusx2 / 3x4xtop / 4x2
})]
Ici on a donc :
– soit une image de 600 pixels de large, 800 pixels de large ou 1400 pixels de large
– pas de lazyload (0)
– pas d’alignement vertical (0)
– l’image de 800 est utilisée pour les écrans de 801 à 1000 pixels de large, l’image de 1400 pixels pour les écrans de plus de 1001 pixels (OK, c’est pas dément comme choix…)
La nouvelle variable contient 3 valeurs séparées par des / (avec ou sans espaces), qui correspondent aux valeurs de mediaqueries précédentes. Chaque valeur est de ce type :
– largeurxhauteurxalignementxzoom
Les valeurs alignement et zoom sont optionnelles. Ces quatre valeurs correspondent aux variables de la fonction image_proportions
:
Du coup :
– 1x1xfocusx2, image retaillée au carré (1x1), avec centrage sur le point d’intérêt (focus), et zoom de valeur 2 ; utilisé par défaut ;
– 3x4xtop, image taillée en quatre tiers verticalement, découpe sur le haut de l’aime, et pas de zoom ; utilisé pour les écrans de 801 à 1000 pixels ;
– 4x2, image deux fois plus large que haute, recadrage au centre par défaut, pas de zoom ; utilisé pour les écrans de plus de 1001 pixels de large.
Par ailleurs, ici on a indiqué 3 valeurs correspondant aux 3 media queries. Mais on peut aussi n’utiliser qu’une seule valeur de recadrage, qui sera alors systématiquement utilisée pour toutes les tailles (et cela fonctionnera aussi, dans cas, même si on n’utilise pas les mediaqueries).
Plusieurs intérêts :
– pouvoir utiliser des formats d’images différents selon les tailles d’affichage, et/ou orientations d’écran,
– affiner ces recadrage en utilisant le centre d’intérêt automatique de l’image,
– pouvoir zoomer dans l’image selon la taille d’affichage, éventuellement en centrant sur le point d’intérêt de l’image.