SPIP 1.9.2
Par exemple, à côté du logo d’un article, nous allons afficher le titre du même article dans une couleur tirée de ce logo. De cette façon, tout en rendant l’affichage plus varié (d’un article à l’autre, la couleur utilisée change en fonction du logo), le fait que la couleur soit extraite de l’image assure une certaine cohérence graphique.
Cette fonction consistant à récupérer une couleur dans une image est complétée par toute une série de fonctions permettant de manipuler cette couleur, principalement éclaircir et foncer la couleur. La liste de fonctions est longue, de façon à permettre un nombre très important d’effets.
couleur_extraire
À partir d’une image (logo d’article, logo de rubrique..., mais aussi images de portfolio), on demande à SPIP de tirer une couleur.
Attention : il ne s’agit pas pour SPIP de déterminer la couleur dominante de l’image, mais d’extraire une couleur de l’image. Pour que cette couleur soit réellement « représentative », l’image est réduite à une taille de 20 pixels maximum ; ainsi les différentes couleurs de l’image sont relativement « moyennées ». Cette valeur de 20 pixels est expérimentale : elle est suffisamment basse pour éviter d’extraire une couleur très peu présente dans l’image ; elle est suffisamment élevée pour éviter que la couleur soit systématiquement grisâtre.
Utilisée sans paramètres, la fonction couleur_extraire retourne une couleur située légèrement au-dessus du centre de l’image. Il est possible d’indiquer un point préféré pour le sondage, en passant deux valeurs (x et y) comprises entre 0 et 20 (conseil : entre 1 et 19 pour éviter les effets de marges).
Par exemple :
retourne une couleur située en haut à droite du centre de l’image.
Pour bien comprendre le principe, appliquons ce filtre sur un logo de couleur uniforme :
Le résultat est : ff9200.
Notez bien : les valeurs retournées sont systématiquement en codage RVB hexadécimal, en omettant le « # » qui précède habituellement ces codes. On pensera donc à insérer ce dièse quand on utilise ces valeurs.
On peut, par exemple, appliquer cette couleur au fond d’un pavé :
Appliquons ce filtre à une photographie :
En bas à gauche, la couleur extraire sans paramètres, c’est-à-dire présente un peu au dessus du centre de l’image (marron clair de la pierre du bâtiment). En bas à droite, on force une couleur située en haut à droite de l’image (bleu clair du ciel).
L’utilisation de ce filtre est, techniquement, très simple. En revanche, créativité et inventivité seront nécessaires pour l’exploiter... Voici quelques utilisations :
— couleur de texte ;
— couleur de fond d’un pavé ;
— couleur d’une image typographique ;
— modifier la couleur d’une image (image_sepia)...
Modifier la couleur
Une fois la couleur extraite, il est utile de la manipuler, afin de jouer avec différentes variantes de la couleur, tout en respectant la cohérence graphique.
- couleur_foncer, couleur_eclaircir
À partir de la couleur extraite d’une image, nous souhaitons afficher des couleurs plus foncées et plus claires.
Appliqué aux couleurs extraites des exemples précédents, cela donne :
On constate qu’on a ainsi des camaïeux de couleurs faciles à obtenir, l’ensemble étant très cohérent.
- couleur_foncer_si_claire, couleur_eclaircir_si_foncee
Si nous appliquons la couleur extraite au fond d’un pavé de texte, il faut déterminer dans quelle couleur nous voulons écrire ce texte (par exemple : noir sur orange ou blanc sur orange ?) ; c’est ce que nous verrons avec les fonctions suivantes.
Pour l’instant, nous décidons que le texte sera d’une certaine couleur. Nous voulons par exemple que le texte soit noir. Il faut donc choisir la couleur du fond en fonction de ce texte noir : il faut que la couleur du fond soit claire (donc : texte noir sur fond clair).
Si nous appliquons le filtre couleur_eclaircir à notre couleur extraite, nous avons deux cas :
— si la couleur est foncée, alors elle est éclaircie et nous obtenons l’effet voulu ;
— si la couleur est déjà claire, alors nous l’éclaircissons encore, et nous obtenons un fond qui peut devenir quasiment blanc. Or, la couleur étant déjà claire , nous aurions voulu l’utiliser telle quelle.
C’est ici que nous appliquons le filtre couleur_eclaircir_si_foncee :
— si la couleur est foncée, nous l’éclaircissons ;
— si la couleur est claire, nous l’utilisons telle quelle.
Le filtre couleur_foncer_si_claire a la logique exactement inverse. Il est très utile, par exemple, pour écrire en blanc sur un fond systématiquement foncé, mais en évitant de rendre ce fond quasiment noir quand la couleur d’origine est déjà foncée.
— couleur_extreme, couleur_inverser
Le filtre couleur_extreme passe une couleur foncée en noir, et une couleur claire en blanc. Cela est utile pour écrire en noir ou blanc sur un fond coloré.
En réalité, récupérer la couleur « extrême » est habituellement utilisé avec couleur_inverser, il inverse la couleur RVB. Elle transforme notamment du noir en blanc, et du blanc en noir.
En pratique, cela permet d’assurer un bon contraste, quelle que soit la couleur du fond du bloc (alors que, dans l’exemple précédent, nous choisissions la couleur du fond du bloc en fonction d’une couleur de texte).
Appliquons, en couleur de fond, la couleur extraite de l’image :
On obtient donc, selon le logo de l’article, soit un fond foncé, soit un fond clair.
Appliquons, pour la couleur du texte, la couleur extraite, rendue « extrême » :
— Si la couleur est foncée, la couleur extrême est noire ; nous écrivons en noir sur fond foncé.
— Si la couleur est claire, la couleur extrême est blanche ; nous écrivons en blanc sur fond clair.
Dans les deux cas, c’est peu lisible. On pourra utiliser cette couleur pour un autre effet (par exemple : une bordure autour du div).
Il nous reste à inverser cette couleur pour l’appliquer au texte ;
— Si la couleur extraite est foncée, la couleur extrême est noire, et l’inverse est alors blanche. On écrit en blanc sur fond foncé.
— Si la couleur extraite est claire, la couleur extrême est blanche, et l’inverse est noire. On écrit en blanc sur fond clair.
Dans les deux cas, le contraste assure une bonne lisibilité.