Le plugin « image_reponsive » que nous avons documenté ici, introduit un nouveau filtre de manipulation des images : image_proportions. Le filtre permet de recadrer une image selon des proportions (et non des dimensions absolues).
Son intitulé est :
Les trois valeurs obligatoires sont :
- $img, le fichier d’image à recadrer ;
- $largeur et $hauteur, les proportions horizontale et verticale du recadrage.
C’est un outil particulièrement pratique pour assurer l’unité graphique d’un site Web. Par exemple on pourra facilement avoir des vignettes de navigation ayant toutes les mêmes proportions.
On peut ainsi avoir des vignettes recadrées horizontalement :
ou recadrées au carré :
L’idée étant que ces recadrage sont automatiques, réglés directement dans les squelettes, et n’imposent pas au rédacteur qui met en ligne les logos des articles de réaliser le recadrage en amont. Surtout, cela permet de recadrer différemment les images sont l’endroit où on les affiche dans le site (le même logo sera par exemple recadré au carré pour la navigation, mais affiché en quatre tiers en haut de page de l’article).
La limite du recadrage automatique
Mais le problème que rencontrent tous les webmestres avec le recadrage automatique, c’est que ça ne recadre pas forcément sur la partie intéressante de l’image. Ça peut carrément tourner à la catastrophe.
Si je prends une photo de David, et que je la recadre automatique à l’horizontal, le recadrage va se faire sur le centre de l’image. Et, hum…
C’est ainsi qu’on croit faire un site sur l’art de la Renaissance et qu’on se fait virer de Facebook…
Ici, on a utilisé le filtre ainsi :
Je pourrais évidemment décider que toutes les images sont recadrées en ciblant le haut, mais pour les images où le centre d’intérêt n’est, justement, pas en haut, ça ne fonctionnera alors pas. La difficulté, c’est bien qu’on ne peut pas savoir, au moment où l’on conçoit les squelettes du site, comment devra être recadrée chaque image…
C’est ici tout l’intérêt de mon plugin centre_image.
La solution : la « direction artistique »
Le terme est excessif, mais on l’utilise sur le Web pour désigner le fait, pour la personne qui choisit l’image, d’indiquer « manuellement » comment celle-ci doit être recadrée selon les situations.
La plupart des méthodes de « direction artistique » que j’ai vues circuler demandent à l’utilisateur d’indiquer manuellement le recadrage lui-même. Je ne crois pas que ce soit une bonne solution : parce que ça limite les possibilités de recadrage, et parce qu’il faut que l’utilisateur se projette dans une situation qu’il ne voit pas réellement (il doit « imaginer » qu’il y aura un recadrage, ce qui n’est pas très motivant si on ne le voit pas appliqué en direct).
La méthode que j’ai introduite avec le plugin centre_image, c’est de simplement proposer à l’utilisateur d’indiquer, via une petite croix, où se trouve le centre d’intérêt de son image. Le recadrage se fera « intelligemment » en fonction de ce point d’intérêt. (Et on pourra faire autant de recadrages avec autant de proportions différentes qu’on le veut, à partir de ce choix unique.)
Une fois le plugin installé, sur chaque image de l’espace privé (logo ou document joint), une petite croix apparaît sur l’image (parfois avec un petit délai). Si cette image n’est pas positionnée à l’endroit qui convient, il suffit de la faire glisser et de la déposer au bon endroit :
On adapte le squelette pour utiliser ce « centre d’intérêt » dans le recadrage de l’image :
ce qui donne le résultat :
On voit que le recadrage s’est bien fait en se basant sur le visage de David. De fait, lorsqu’on recadre toute une série d’images, chacune sera découpée selon son propre centre d’intérêt, qu’il soit en haut, en bas, à droite, à gauche… On n’a plus, ainsi, le problème de ces vignettes mal recadrées.
Fonctions avancées
Centrer strictement ou en conservant le dynamisme de l’image
Notez, dans l’image précédente, que le visage n’est pas lui-même au centre de l’image recadrée, mais dans la partie haute de l’image. C’est une subtilité du plugin : puisque le point d’intérêt (ici le visage) se trouve dans le haut de l’image d’origine, on recadre en essayant de conserver le visage dans le haut de l’image recadrée, de façon à conserver une partie du dynamisme de l’image d’origine.
On a la possibilité de préférer un recadrage exactement centré sur le point d’intérêt de l’image (autant que possible, si le point d’intérêt est trop proche du bord, on ne va pas recadrer en dehors de l’image), on peut le faire en remplaçant le critère focus par focus-center
Mais généralement, on obtient un effet beaucoup moins dynamique.
Détection automatique du centre d’intérêt
Le plugin tente de détecter automatiquement le centre d’intérêt de chaque image. Cela permet de gagner énormément de temps.
Par défaut, il utilise un calcul relativement rapide basé sur un calcul de changement de densité dans l’image. C’est une méthode plutôt rapide, et qui fonctionne bien en particulier sur les images où le sujet de détache bien du fond (un fond relativement uni par exemple).
Si l’on manipule essentiellement des images de personnes, on peut forcer l’outil à utiliser un autre algorithme, qui tentera de détecter les visages. Pour cela, on pourra forcer la valeur :
Noter que le calcul est alors nettement plus lourd (jusqu’à 10 fois). Il est recommandé sur un serveur particulièrement puissant.
Sur notre magazine de mode Orient Palms, c’est un réglage qui donne des résultats particulièrement impressionnants ; les visages sont correctement détectés pour les trois quarts des images.
Récupérer les valeurs numériques du centre d’intérêt
Si l’on a des besoins spécifiques, on peut obtenir les valeurs x et y du point d’intérêt avec les fonctions centre_image_x et centre_image_y.
Les valeurs sont en pourcentage entre 0 (à gauche ou en haut) et 1 (à droite ou en bas).
On peut par exemple vouloir utiliser ces valeurs dans des CSS pour indiquer le centre d’un effet de « zoom » sur l’image. Par exemple :
Dans image_recadre
La fonction image_recadre native de SPIP permet désormais d’utiliser le recadrage proportionnel basé sur le point d’intérêt (lorsqu’on a activé, évidemment, le plugin centre_image).
Les deux lignes suivantes sont ainsi équivalentes :
