Contactez-nous

1

Recadrer une image avec image_masque

27 février 2006
par ARNO*

[SPIP 1.9 et GD2] On veut recadrer toutes les vignettes de documents (pour la navigation dans un portfolio par exemple), c’est-à-dire en forcer les dimensions.

Le filtre reduire_image permet, en donnant une des valeurs, de forcer toutes les images à une certaine hauteur (idéal pour un alignement horizontal, les vignettes les unes à côté des autres), ou à une certaine largeur (pour un alignement vertical, les vignettes les unes sous les autres). Nous voulons aller plus loin et forcer la hauteur et la largeur en même temps.

Nous allons pour cela utiliser le filtre image_masque de SPIP 1.9. Ce filtre ne fonctionne que si GD2 est présent sur le serveur (c’est désormais le cas sur la plupart des hébergeurs).

Voici une image installée en tant que document joint à un article (c’est la méthode pour réaliser un portfolio) :

Nous avons installé, dans le même dossier que notre squelette (par exemple dans le dossier /squelettes), l’image PNG suivante :

Les caractéristiques de cette image sont les suivantes :
— c’est une image sauvegardée au format PNG 24 ;
— ses dimensions sont exactement les dimensions que nous visons pour notre recadrage ; ici, nous voulons des vignettes carrées après recadrage ;
— elle est entièrement remplie de gris à 50% ;
— elle n’a aucune transparence ;
— nommons ce fichier mon-masque.png (rappel : nous l’installons dans le dossier du squelette).

Nous pouvons ensuite créer une boucle pour afficher nos documents joints :

(Nous omettons ici les critères permettant de sélectionner uniquement les images parmi les documents joints ; si vous prévoyez d’installer d’autres formats que des images, il faut ajouter les critères pertinents.)

Ce filtre va ainsi s’appliquer à chaque image attachée à l’article.

Dans un premier temps, l’image (le bâtiment) est réduite de telle manière à adopter une des dimensions de l’image, l’autre dimension « dépassant ». Ensuite, les zones qui « dépassent » sont simplement supprimées.

Nous obtenons l’image finale ayant exactement les dimensions du fichier mon-masque.png.

N.B. Nous avons appliqué le filtre directement sur la balise #FICHER du document joint, et non sur une vignette. Il est en effet impératif que le document auquel on applique le filtre soit plus grand que le masque (ce qui, avec les vignettes déjà réduites, n’est pas garanti).

N.B.2. Ce genre de recadrage automatique est essentiellement destiné à créer des vignettes de navigation. L’effet s’applique en effet au centre de l’image, donc il y a toujours le risque de couper un élément intéressant de la photo, ce qui est acceptable sur des vignettes de navigation, mais pas sur des grandes images.

N.B.3. Dans notre exemple, nous avons pris un masque carré. Mais on peut très bien imaginer, selon les besoins de l’interface graphique, systématiquement recadrer avec un masque quatre-tiers (façon télévision), ou seize-neuvièmes pour évoquer un écran de cinéma (ou de PSP).

  • Maitre Dedoy
    Mai 2006

    Bonjour,

    Chapeau pour ce tutorial. Cela nous montre les possibilités de SPIP 1.9.

    J’ai une question toutefois par rapport à ce filtre. Est-il possible de l’adapter pour SPIP 1.8.3 ? Si oui où le trouver ? Ou comment l’adapter ?

  • Baptiste
    Septembre 2006

    C’est tout de même extremement regrettable de ne pas avoir d’option pour choisir la place du masque (coin haut gauche du masque à 0,0 par exemple, pour ne garder que le haut) :-(

  • Baptiste
    Septembre 2006

    Aaaah. C’est intégré en partie dans SPIP 1.9.1 avec vertical-align et horizontal-align, mais mentionné nulle part excepté dans la page SPIP 1.9.1 !

    Vraiment dommage que ce soit boggué :-(

  • Laurence
    Novembre 2006

    Il y a sûrement quelque chose que je ne fait pas bien mais avec certains masques ce qui est coupé se retrouve tout noir... Merci de votre aide, merci pour votre site ( tout est très beau et rafiné) laurence

  • Robert Caron
    Janvier 2007

    Est-il possible d’avoir un cadre par exemple de 2px noir ? Quand j’essaie mon cadre est aussi avec des niveaux de transparence...

    Merci

  • Swearengen
    Avril 2007

    Bonjour !

    Est-il possible d’appliquer ce filtre sur les LOGOS des articles ?

  • Fanny
    Mars 2008

    Est-ce possible avec une forme de masque autre que carrée ou rectangle ? Genre une fleur, une étoile ? Si on crée une image masque.png de cette forme comme dans photoshop ?

  • Fanny
    Mars 2008

    mais c’est quoi la différence d’avec image_recadre ? il me semble que ça fait la même chose non ?

  • ARNO*
    Mars 2008

    Fanny,

    — Oui, il est possible de créer d’autres formes, et c’est bien tout l’intérêt de ce filtre.

    — La technique exposée sur cette page est, évidemment, en doublon avec image_recadre. Simplement, le filtre image_recadre a été introduit beaucoup plus tard dans SPIP.

  • Abou33
    Juillet 2008

    Bonjour, Mon idée est de passer par cette fonction pour insérer un copyright automatique sur les images du site et ceci en passant par le modèle <img>.

    Ainsi, les rédacteurs n’ont pas a l’insérer eux-même. Ils rajoutent juste l’image ou la photo.

    Seul soucis, je ne sais pas comment modifier le modèle.

    Pouvez-vous m’aider ?

  • Novembre 2008

    Bonjour,

    Etant newby, bien évidemment, j’ai dû mal à faire fonctionner votre filtre image.

    Où dois-je mettre le code ? Dans modier le squelette, page article.html ?

    N’y connaissant rien en code, j’ai un peu peur de le modifier, d’autant que j’ai déjà un code avec documents_joints

    Merci d’avance de votre aide

Qui êtes-vous ?
Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.