SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribs sur SPIP-Zone, 116 visiteurs en ce moment

Accueil > Documentation > Pastille rouge : un exemple de filtre d’image avec la lib GD

Pastille rouge : un exemple de filtre d’image avec la lib GD

19 août 2009 – par davux – commentaires

6 votes

Ceci est une « contribution pédagogique », qui montre par l’exemple comment développer une nouvelle fonctionnalité pour SPIP.

En PHP, la bibliothèque de fonctions GD, familièrement appelée « la lib GD », fournit de nombreuses possibilités de manipulation d’images. En alliant cette bibliothèque avec les fonctions usuelles fournies par SPIP, on peut créer très facilement ses propres filtres d’images.

Si j’ai bien compris, dans le domaine de l’art, pour indiquer qu’un tableau en exposition est vendu, on lui colle une pastille rouge en bas à droite. À titre d’exercice, on va donc faire un filtre d’image nommé image_pastillerouge qui rajoute cette pastille sur une image au format JPEG (comme c’est un tableau et un exercice, on va supposer que c’est du format JPEG, ça simplifie les traitements).

Dans notre fichier squelettes/mes_fonctions.php, on ajoute la fonction suivante [1].

  1. function image_pastillerouge($url, $diametre=20, $distance=5) {
  2.         $nom_fichier = extraire_attribut($url, 'src');
  3.         $hachage = md5($nom_fichier.'+PastilleRouge');
  4.         $tmp = sous_repertoire(_DIR_VAR, "cache-gd2");
  5.         $cache = $tmp.$hachage.'.jpg';
  6.         if (!file_exists($cache)) {
  7.                 $image = imagecreatefromjpeg($nom_fichier);
  8.                 $rouge = imagecolorallocate($image, 255, 0, 0);
  9.                 $centre_x = imagesx($image) - $diametre/2 - $distance;
  10.                 $centre_y = imagesy($image) - $diametre/2 - $distance;
  11.                 imagefilledellipse($image, $centre_x, $centre_y, $diametre, $diametre, $rouge);
  12.                 imagejpeg($image, $cache);
  13.         }
  14.         return "<img src=\"$cache\" />";
  15. }

Télécharger

Les explications, ligne par ligne :

  1. Étant un filtre d’image, SPIP va donner à cette fonction, en premier argument, une balise HTML img. On définit aussi un diamètre de pastille par défaut et une distance au bord par défaut.
  2. On extrait le nom de fichier de la balise image.
  3. On calcule un nom de fichier unique pour garder le résultat en cache, histoire de ne pas avoir à refaire le calcul à chaque fois.
  4. On détermine le répertoire dans lequel le résultat sera gardé en cache.
  5. On détermine le chemin du fichier de cache d’après le répertoire et le nom unique.
  6. Si on n’a pas encore de cache pour cette image, on fait les calculs, sinon non.
  7. On charge les données de l’image de base en mémoire.
  8. On fait notre petit mélange, comme les peintres : 255 de rouge (la valeur maximale), 0 de vert, 0 de bleu, et on touille.
  9. On calcule les coordonnées du centre de la pastille sur l’axe horizontal : largeur de l’image moins le rayon voulu, moins une distance pour que la pastille ne soit pas collée au bord.
  10. Idem sur l’axe vertical.
  11. On applique une ellipse sur l’image aux coordonnées calculées. Comme on veut un rond, l’ellipse a une largeur et une hauteur égales.
  12. On enregistre dans le fichier cache dont on a préparé le nom.
  13. ...
  14. On reconstruit une balise img qu’on renvoie à SPIP.

Comment utiliser ce filtre ?

Pour utiliser ce filtre, il suffit de l’appeler comme n’importe quel filtre d’image dans un squelette. Par exemple :

Vous pouvez ajouter des arguments optionnels de diamètre et de distance si vous voulez changer ponctuellement les valeurs par défaut, ce qui donne par exemple :

Si ça concerne tout le site, vous pouvez aussi changer ces valeurs directement dans la déclaration de la fonction (première ligne).

Notes

[1Toutes les fonctions de traitement d’images sont documentées dans le chapitre de la documentation PHP traitant de la lib GD.

Dernière modification de cette page le 19 août 2009

Retour en haut de la page

Vos commentaires

  • Le 20 août 2009 à 18:15, par davux En réponse à : Pastille rouge : un exemple de filtre d’image avec la lib GD

    Merci pour ces explications. J’ai cherché en vain de la documentation sur comment écrire un filtre d’image (d’où la motivation de cet article), du coup ces explications tombent très bien. Mais est-ce que ça ne vaudrait pas le coup de documenter tout ça « officiellement » ? (mes excuses par avance si cette doc existe et que je l’ai loupée)

    • Le 16 février 2010 à 15:05, par Hélias En réponse à : Pastille rouge : un exemple de filtre d’image avec la lib GD

      Effectivement, comme l’auteur de cet exemple, c’est en recherchant de la doc que...

      Existe-t-il une documentation de référence chez SPIP sur les normes à respecter pour écrire des filtres d’image, sans avoir à décortiquer les exemples de nos bons maîîîîtres.... ? (encore que l’on a ici des explications claires)

      ... plus peut-être qq exemples de mise en oeuvre dans squelettes / modèles / textes d’articles...

      Merci à tous pour ces travaux communautaires.

    Répondre à ce message

  • Le 20 août 2009 à 17:32, par Cerdic En réponse à : Pastille rouge : un exemple de filtre d’image avec la lib GD

    Attention, cette contribution montre un exemple erroné.
    Les filtres images dont le nom commence par image_ doivent tous suivre et respecter la construction de ceux du core, à savoir :

    Il est donc obligatoire :
    -  d’utiliser image_valeur_trans en entrée pour analyser l’image source et recuperer ses propriétés, en donnant comme information le nom et les arguments de la fonction
    -  de finir par image_ecrire_tag pour produire le html de l’image.

    Ces contraintes sont nécessaires pour permettre à SPIP de gèrer la suppression automatique des images temporaires intermédiaires.

    A défaut, si vous ne voulez pas respecter cette écriture, il faut nommer la fonction autrement, sans la faire commencer par le prefixe image_

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Passer un site SPIP sous https://

    23 février 2017 – 42 commentaires

    Comment migrer simplement votre site SPIP de http:// vers https:// Le protocole https:// devient de plus en plus courant : C’est mieux pour la vie privée de tous La plupart des grands sites l’a déjà adopté Certains navigateurs commencent à afficher (...)

  • SPIP 3.2, Agenda et FullCalendar

    6 juin – 20 commentaires

    Nous avions publié un article sur la manière d’utiliser FullCalendar avec SPIP 3.0 afin d’afficher des évènements sous forme d’Agenda. La version de FullCalendar a changé avec SPIP 3.2. Le présent article est donc un tutoriel adapté à SPIP 3.2. Pour (...)

  • Grappes 1.0

    23 novembre 2012 – 36 commentaires

    Présentation et nouveautés Cette version 1.0 du plugin Grappes est un portage pour SPIP 3.x. Le plugin permet de grouper des objets de SPIP dans des grappes. Les objets du core (articles, rubriques, auteurs, etc.) sont pris en charge, ainsi que (...)

  • PHANTOM (HTML5UP)

    18 juillet – commentaires

    Squelette SPIP pour intégrer le modèle Phantom de HTML5UP. https://html5up.net/phantom Installation A l’activation, le plugin installe aussi les plugins suivants : crayons, favicon, metasplus+, Couleur d’objet, champs extras, SPIP reset centre (...)

  • Cycle2

    7 août 2014 – 119 commentaires

    La seconde version de la librairie Javascript « jQuery Cycle », qui permet de produire des diaporamas, se nomme « Cycle2 » : http://jquery.malsup.com/cycle2/. Voici cette nouvelle librairie mise en plugin pour SPIP. Si vous utilisez déjà « jQuery (...)