TECHNIQUES SPIP
TECHNIQUES SPIP

Vous trouverez ici des trucs et astuces destinés aux développeurs de sites sous SPIP.

La majorité de ces trucs est consacrée aux filtres graphiques introduits dans SPIP 1.9. Il y a là en effet un vaste champ d’expérimentation pour les webmestres et les graphistes.

Chaque truc est suivi d’un forum auquel nous vous invitons à participer.

N.B. La présence de ces trucs et astuces sur notre site professionnel est destinée à faire connaître notre activité de création de sites sous SPIP. Vous pouvez librement utiliser les morceaux de code fournis ici dans vos propres squelettes. Vous pouvez reprendre ces exemples sur votre site ou dans les forums d’un autre site ; dans ce cas, nous vous demandons simplement d’avoir la courtoisie de référencer la page d’où est tiré le code repris.

[SPIP 1.9 et GD2] Une habitude très utile lorsqu’on construit l’interface graphique d’un site Web consiste à choisir un nombre restreint de couleurs (par exemple, 3 couleurs), ce qui revient à définir une palette de couleurs, et à réaliser le site en n’utilisant que ces couleurs. Cela garantit au site un grande cohérence graphique, même lorsque les contenus et les maquettes sont différentes d’une page à l’autre.
Pour créer et manipuler les couleurs, SPIP 1.9 fournit un ensemble de filtres destinés à (...)
[SPIP 1.9 et GD2] La puissance des effets que l’on peut obtenir en quelques lignes de code avec GD2 ne cesse de m’épater. Si vous avez suivi la présentation de quelques uns des filtres précédents, vous aurez compris que l’essentiel du code des filtres graphiques de SPIP sert à gérer la création et le cache des fichiers graphiques ; les transformations induites par les fitres reposent en général sur une poignée de lignes PHP particulièrement simples.
Dans cette logique, voici un filtre particulièrement (...)
[SPIP 1.8] Voici une technique très simple : nous allons profiter de la possibilité de « joindre » un document « distant » (introduite dans SPIP 1.8) pour intégrer dans un article une vidéo installée sur YouTube.
Il est souvent difficile d’installer de la vidéo sur son propre site : espace disque insuffisant, bande passante limitée. Pour la plupart des gens, installer de la vidéo sur son propre site revient à espérer que personne n’ait l’idée de visiter le site... Plusieurs services permettent désormais (...)
[SPIP 1.9 et GD2] Cet article va vous présenter la création d’un filtre qui convertira les informations de couleurs RVB (Rouge Vert Bleu) en HSV (Hue Saturation Value), avant d’appliquer l’effet désiré. Technique plus fréquente dans les filtres Photoshop que dans un CMS...
Commençons par expliquer notre réalisation graphique : notre filtre va saturer ou désaturer les couleurs d’une image. La luminosité de l’image et le contraste sont inchangés, mais la couleur est « affadie » ; l’effet, utilisé (...)
[SPIP 1.9 et GD2] Vous voulez faire de l’e-art digitalo-conceptuel ? Vous voulez vous marier en direct-live de tous les modems 28,8 bauds de la planète ? Vous voulez requestionner des trucs dans l’optique du machin quelquepart ? Vous voulez toucher des droits d’auteur sans trop vous fouler ? Vous avez toujours rêvé de rencontrer André Santini ?
SPIP va vous aider à réaliser vos rêves (rien que ça).
Au niveau concept, je vous renvoie à mon petit filtre image_podpod ; grâce à lui, nous allons (...)
[SPIP 1.8] Dorian explique sur SPIP-Contrib comment créer des liens « article précédent », « article suivant ».
Mais comment présenter non pas un, mais plusieurs articles précédents et suivants ?
#DATEn-3,3> #TITRE
#TITRE
#TITRE
La boucle meme_rub_avant est très simple, il s’agit simplement de l’extension de ce que faisait Dorian : au lien d’afficher uniquement un seul article, on affiche les trois premiers. La seule difficulté logique est de considérer (...)
[SPIP 1.9 et GD2] À moins de vivre dans une cave, vous ne pouvez pas avoir manqué la nouvelle campagne d’affichage pour le podPod de la marque à la pomme : fond bleu « moucheté », ombres détourées et podPod blanc.
Le présent article va illustrer l’intérêt, notamment pour un graphiste pas trop manchot avec PHP, de créer son propre filtre graphique pour traiter automatiquement les images dans SPIP. Les rédacteurs se contentent d’installer des photographies, et les squelettes fabriquent automatiquement des (...)
[SPIP 1.8] Le filtre reduire_image a été conçu pour réduire les dimensions d’une image selon les dimensions maximales de l’image réduite. L’utilisation principale dans une page Web d’une telle réduction d’image a, en effet, généralement besoin de valeurs maximales :
limiter les dimensions lors d’un affichage, pour éviter qu’une trop grande image fasse exploser la maquette ;
forcer une des dimensions de vignettes alignées, de façon à obtenir un bel alignement (par exemple, si l’on place les vignettes (...)
[SPIP 1.9 et GD2] L’article suivant complète l’article sur l’habillage irrégulier des images. Celui-ci étant déjà relativement lourd, je préfère le compléter par un nouvel article, ce qui me permettra d’insister sur les détails qui ont évolué. Dans tous les cas, avant de lire le présent article, consultez le précédent qui, lui, contient les grands principes de cette méthode (ou bien copiez-collez le code du filtre sans vous demander comme ça fonctionne).
Dans la version précédente, le filtre (...)
[SPIP 1.9 et GD2] Voici un nouveau filtre SPIP qui vous permettra de réaliser un effet que nous attendons depuis des années en HTML (et qui n’est pas prêt d’arriver sous la forme d’un style facile à utiliser), réalisable en bidouillant mais pour lequel il n’existait pas encore d’automatisme (à ma connaissance).
(Attention : cet article est désormais complété par un second article ; les explications qui suivent sont nécessaires à la compréhension de ce nouvel article.)
Le but est de réaliser un (...)
[SPIP 1.8] La technique du timbre, telle que nous l’avons exposée précédemment, fonctionne très bien à la condition que toutes les images ainsi manipulées soient en format « paysage », c’est-à-dire plus larges que hautes. En effet, notre « timbre-masque » étant lui-même plus large que haut, si on découpe une image ayant des proportions très différentes, on risque des découpes désastreuses.
Par exemple, sur une image verticale, on obtient ceci :
La technique suivante consiste à déterminer, directement avec une (...)
[SPIP 1.9 et GD2] L’astuce qui suit n’a rien de bien compliqué, il s’agit d’une nouvelle variation dans l’utilisation du nouveau filtre image_masque. Nous allons, tout bonnement, placer nos vignettes dans des timbres.
Commençons par réaliser notre « masque » :
Ce fichier (timbre-horizontal.png), que nous installons dans notre dossier de squelettes, est un fichier PNG 24, où la zone grise (gris 50%) au centre laissera l’image d’origine intacte, la zone blanche devra devenir parfaitement blanche, (...)
[SPIP 1.8] SPIP ne permet pas de définir des liens de traduction entre rubriques (seulement entre articles). Or, certains sites ont une structure correspondant exactement à ce besoin, car leur structure multilingue est basée sur une séparation des rubriques par langues.
La méthode suivante permet d’établir assez simplement des liens entre les rubriques, tout en facilitant le classement des rubriques dans la gestion dans l’espace privé.
Principe
Le principe consiste, tout simplement, à numéroter (...)
[SPIP 1.9 et GD2] Voici un effet particulièrement à la mode : le texte et le fond peu contrastés, une légère lueur autour des caractères adoucissant encore la typo. On va dans ce qui suit réaliser l’effet suivant :
Afin de régler notre choix de couleur, et pour avoir une version de notre titre qui fonctionne même sans charger les images, commençons en mode texte.
#TITRE
Voici un style qui approche l’effet recherché, directement en CSS :
body background-color : #eeeeee ; h1 font-size : 50px ; (...)
[SPIP 1.9 et GD2] Vous avez toujours rêvé d’un site sous SPIP avé la moquette sur le volant ? Le pare-soleil Pioneer sur la plage arrière ? La sono qui crache le Mia ? Et la peau de zèbre sur les sièges en skaï ?
Pour la peau de zèbre, lisez ce qui suit...
Il faut tout d’abord réaliser une image typographique de notre titre. Récupérons une police plutôt typée. Pour l’exemple, j’ai récupéré la police African chez 1001freefonts mais, comme souvent avec les polices en freeware, il manque les accents... (...)
Voilà bien le genre d’astuce qui ne va certainement pas servir tous les jours...
Si, pour une raison quelconque, vous ressentez le besoin de créer un comportement (behavior) HTC (pour Microsoft Explorer) en tant que squelette SPIP, c’est tout à fait faisable (puisqu’un fichier « .htc » est essentiellement du Javascript).
Cependant, votre fichier d’appel n’ayant pas une terminaison « .htc » (mais, plus sûrement, « .php »), il n’enverra pas le bon type MIME, et Microsoft Explorer refusera de le faire (...)
[SPIP 1.9 et GD 2] On veut créer et placer une ombre portée derrière une image. Cette image peut être une photographie rectangulaire (JPEG et non transparente), une image détourée (idéalement, un PNG 24 transparent, car placer une image derrière un GIF transparent est toujours risqué), ou encore une image typographique (du texte transformé en image).
Une ombre portée est une duplication de l’image, entièrement noircie, floutée, semi-transparente (une ombre entièrement noire n’est pas jolie, on préfère (...)
[SPIP 1.8] Il est possible de faire afficher des images au format PNG 24 à MSIE, et cela en respectant la transparence (couche alpha). Pour réaliser cela, on applique un comportement (behavior), système propre à Microsoft Explorer, à une feuille de style.
Cela est indispensable, au passage, pour afficher correctement :
les images typographiques,
les images passées par certains filtres graphiques de SPIP qui fabriquent de la transparence en PNG 24,
les fichiers GIF transparents réduits par GD 2 (...)
[SPIP 1.9 et GD 2] On veut transformer des images (documents joints de portfolio, logos...) au format PNG 24. Le but de la manipulation est de pouvoir ensuite appliquer une batterie complète de filtres (redimensionnements, recadrages, rotations, inversions, etc.), sans accumuler les recompressions JPEG (qui sont à chaque fois destructives).
En passant les images, dès le début des opérations, au format PNG, on travaillera tout au long de la chaîne, dans ce format non destructif.
Si l’image est en (...)
[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 (...)
Les administrateurs système gérant les comptes sur Apache (VHOST) veulent attribuer le minimum d’autorisations pour les reconfigurations de type htaccess par les utilisateurs hébergés sur ces comptes.
Aurélien Requiem (UNGI) me fait savoir que la configuration minimale de « AllowOverride » permettant de définir les redirections d’adresse (mod_rewrite) est : FileInfo.
Ce qui donne par exemple : AllowOverride FileInfo Order deny,allow Allow from all Options (...)
[SPIP 1.8] On souhaite récupérer la largeur d’une image et l’attribuer à un ... (qui, lui, pourrait contenir un texte descriptif). L’interface s’adapte ainsi à l’image.
Cela peut se coder ainsi, avec le filtre largeur :
...
Plus fréquemment, on veut récupérer la valeur de l’image, une fois celle-ci réduite (avec reduire_image. Le traitement de la partie #LOGO_ARTICLE du code devient :
[(#LOGO_ARTICLE ; reduire_image100,80 ; largeur)]
Voici désormais la petite subtilité de cet article : il est (...)
[SPIP 1.9] J’ai réalisé en quelques jours, pour notre magazine de mode en ligne, Flip-Zone, une version adaptée à la consultation sur iPhone (et iPod Touch).
La caractéristique qui m’intéresse ici est la suivante : il suffit de se connecter à l’adresse habituelle de Flip-Zone pour que SPIP détecte automatiquement que l’on est sur iPhone et utilise des squelettes adaptés. Il s’agit, ici, de ne pas recourir à une URL différente, mais d’afficher des squelettes différents selon que le visiteur est sur (...)
[SPIP 1.8] On a généralement l’habitude d’afficher, pour la navigation, la liste des brèves ou des articles « dans la même rubrique » ou « du même auteur » (pour les articles).
Pour la refonte du site Bakchich.info, nous voulions grouper les brèves (« Confidentiels », dans le jargon de Bakchich) par journées. C’est-à-dire afficher les brèves publiées le même jour.
Cette technique est valable pour les brèves, mais sans aucune difficulté pour les articles. Il suffit d’utiliser le critère : jour_relatif = 0. (...)
Rien à voir avec SPIP : je voudrais présenter le site que viennent de lancer deux de mes anciens étudiants de l’École Estienne, Jonathan Perez et Laurent Bourcellier, Typographies.fr.
Jonathan avait, pour son remarquable projet de fin d’études, développé une méthode graphique pour la réalisation d’une fonte hiéroglyphique. Il poursuit ce travail, dont on peut voir quelques ébauches sur le site.
Laurent, lui, avait proposé une police pour le Copte. Ce travail, Unicopte, est visible en ligne.
Signalons (...)
[SPIP 1.9.1] Voici une technique que j’ai développée pour notre site Flip-Zone ; dans les pages rubriques, je ne souhaitais pas afficher systématiquement, en grand, le dernier article publié, mais un article pris au hasard parmi les cinq derniers articles publiés.
#SET et #GET
Pour cela, j’utilise les balises #SET et #GET introduites dans SPIP 1.9.1.
La balise #SETvariable,valeur et son pendant #GETvariable ont été introduites par SPIP 1.9.1. La balise #SETxxx,yyy affecte une valeur yyy à une (...)
Si vous savez faire ça :
alors vous n’aurez pas de mal à faire cela :
 ; Un beau graphique ; 1992 ; 1993 ; 1994 ; Valeur 1 ; 12.5 ; 13.6 ; 15 ; Valeur 2 ; 13.6 ; 11.12 ; 9 ; Valeur 3 ; 14.7 ; 12.5 ; 13 ; Pour rappel, le tableau se code dans SPIP avec les barres verticales (pipes) ainsi : ; Un beau tableau ; 1992 ; 1993 ; 1994 ; Valeur 1 ; 12.5 ; 13.6 ; 15 ; Valeur 2 ; 13.6 ; 11.12 ; 9 ; Valeur 3 ; 14.7 ; 12.5 ; 13 ; vous pouvez facilement transformer ce tableau en (...)
[SPIP 1.9.2] Voici un plugin pour graphiste fainéant.
Vous n’avez pas envie de choisir une palette de couleurs pour votre site ? Ce plugin vous permet de créer des squelettes dont les couleurs ne sont pas choisies par vous, mais récupérées automatiquement sur le site d’Adobe Labs, Kuler.
Toutes les heures, le plugin récupère le flux RSS des palettes les plus populaires, et en sélectionne une au hasard par la dizaine fournie. De cette façon, un squelette utilisant les couleurs fournies par ce plugin (...)
[SPIP 1.8] Une demande fréquente pour la présentation de la navigation dans un site Web consiste à présenter, dans une même liste classée, les articles et les sous-rubriques d’une rubrique.
Voici par exemple ce que j’ai sur un site sur lequel je travaille actuellement (c’est un site religieux...) :
Article : 10. Horaires des messes et offices
Article : 20. Rencontrer un prêtre
Article : 60. Musique et lithurgie
Article : 90. Encore un article
Rubrique : 40. Lithurgie
Rubrique : 50. Les acteurs (...)
[SPIP 1.9 et GD2] Voici une technique qui répond à un besoin d’un site sur lequel je suis en train de travailler. Le site en question est multilingue : en français, en anglais, en chinois et en japonais. Pour les besoins de notre démonstration, je me contentera de travailler avec le français et le chinois.
Dans chaque page d’article, le titre est transformé en image typographique, ce qui permet notamment d’utiliser la police de mon choix. Pour le français, pas de problème, nous utilisons le l’ITC (...)
[SPIP 1.9 et G2] Cela fait des semaines que je cherche un algorithme pour renforcer la netteté d’une image. Quelqu’un m’avait dit « La netteté, c’est comme le flou, mais dans l’autre sens »... D’accord, mais ça ne fait pas un algorithme...
Et aujourd’hui, je suis tombé sur l’excellente classe ImageFilter de Mathieu Delestre. J’y ai trouvé le principe d’un filtre simplifié permettant d’accentuer la netteté.
Adapté pour fonctionner avec SPIP, cela donne :
function image_renforcement($im, $k=0.5) $image (...)
[SPIP 1.9 et GD2] Nous allons ici exploiter deux techniques présentées récemment : l’analyse de l’histogramme et la modification de la courbe d’une image. Les filtres présentés ici vont réaliser l’automatisme suivant :
dans un premier temps, analyser l’histogramme d’une image,
en fonction de ces résultats, corriger la courbe, de façon à « rééquilibrer » les couleurs de l’image.
Dans Photoshop, cette fonctionnalité se nomme « Niveaux automatiques » (Auto Levels). Lorsque l’on retouche des (...)
[SPIP 1.9 et GD2] Dans la plupart des effets présentés précédemment, j’ai mis en avant la possibilité d’utiliser les filtres pour modifier assez fortement les images, dans le but de donner un aspect graphique très marqué à l’interface de notre site. En effet, il est beaucoup plus délicat de vouloir réaliser des effets plus subtiles d’amélioration des images, puisqu’on ne connaît justement a priori pas la qualité des images installées par les rédacteurs.
Nous allons ici tenter la réalisation d’un effet (...)
[SPIP 1.9 et GD2] Nous allons ici réaliser un filtre qui reproduit une des plus utiles fonctions de Photoshop : la modification des courbes.
Si vous ne connaissez pas cette commande, je vous invite à lire cette présentation qui me semble très claire.
Le principe général consiste à prendre les valeurs de couleur (ou de niveau de gris), de 0 à 255 (en codage RVB), et à faire correspondre d’autres valeurs.
Dans la transformation ci-dessus, la courbe permet de décrire visuellement le passage des (...)
[SPIP 1.9 et GD2] Toujours à la recherche d’applications inédites des filtres de SPIP, je vous propose aujourd’hui de franchir une nouvelle étape : un filtre qui ne sert rigoureusement à rien !
À rien pour traiter une image, certes, mais dans une galerie de photos, ça peut produire un petit effet assez pro... Et il n’est pas impossible que, par la suite, nous trouvions un usage à la méthode développée ici.
L’idée est d’extraire d’une photographie les informations de couleur de tous ses pixels et de les (...)
[SPIP 1.8] Après YouTube et DailyMotion, voici une troisième méthode pour intégrer des vidéos distantes dans vos articles : Google Video. La logique est identique aux deux exemples déjà exposés, je vous laisse donc relire ces articles.
Une fois la vidéo en ligne, la seule subtilité consiste à récupérer :
l’adresse du fichier distant,
ses dimensions.
Dans Google Video, recherchez le nom de votre chanteur préféré : عمرو دياب. (Non, je plaisante.)
Rendez-vous sur la page de la vidéo qui vous intéresse. (...)
[SPIP 1.8] Comme nous l’avons déjà dit dans notre article sur YouTube, il n’est pas toujours possible d’installer des vidéos sur son propre site : espace disque et bande passante limités. Divers services gratuits permettent, aujourd’hui, d’installer des vidéos sur le Web.
Une fois ces fichiers vidéo installés en ligne, nous souhaitons pouvoir les intégrer directement dans les articles de notre propre site. Les documents joints distants permettent de réaliser cela très simplement.
Nous avons déjà (...)
SPIP 1.9 introduit une collection de filtres graphiques :
la création d’images typographiques, c’est-à-dire d’images représentant du texte avec la police de caractères de son choix,
la possibilité d’utiliser une couleur extraite d’une image et de l’appliquer à d’autres éléments de la page ;
l’application d’effets graphiques sur les images (modifier les couleurs, passer en noir et blanc, en sépia, faire tourner l’image, la découper, la flouter, etc.).
Si vous suivez les présents trucs et (...)
[SPIP 1.9 et GD2] Voici un filtre technique qui, dans son usage le plus immédiat, ne provoque aucun effet graphique : il se contente de supprimer la transparence d’une image et de sauvegarder l’image dans un format déterminé.
Nous en aurons certainement une utilité nettement plus créative par la suite, mais pour l’instant, contentons-nous de l’utiliser pour aplatir une image et, surtout, la convertir dans un certain format graphique.
Notez bien : ce filtre est désormais inclus en standard dans SPIP (...)
[SPIP 1.9 et GD2] Nous avons déjà réalisé des filtres manipulant la couche alpha (les informations de transparence d’une image PNG 24) :
image_contour_alpha « sélectionne » les zones de transition de transparence et leur applique une couleur (on « dessine » ainsi les zones entre les pixels visibles et les pixels transparents d’une image d’origine) ;
image_podpod créé des zones différenciées de transparence à partir d’une image qui n’a pas forcément de couche alpha ;
le filtre d’estampage (...)
[SPIP 1.9 et GD2] Si vous suivez ces trucs et astuces depuis un moment, vous avez pu constater que l’utilisation des filtres graphiques devient réellement impressionnante lorsqu’on combine plusieurs filtres successifs. Dans l’exemple du titre en relief, le code SPIP devient interminable, dès lors que non seulement on applique une série de filtres mais que de plus on « fusionne », avec image_masque, deux images calculées.
Et plus votre maîtrise des filtres graphiques progressera, plus vous aurez des (...)
[SPIP 1.9 et GD2] Après notre filtre de dispersion, voici un nouveau filtre inspiré des effets Photoshop et Gimp : un filtre d’estampage (emboss). Le but de ce filtre est de pouvoir réaliser ce genre de mise en relief :
Afin, comme d’habitude, de nous laisser un maximum de liberté en combinant différents filtres SPIP, notre nouveau filtre aura un effet très spécifique (ou limité), et c’est en utilisant plusieurs filtres successifs que nous obtiendrons le bon résultat.
Voici le code de ce nouveau (...)
[SPIP 1.9 et GD2] On a souvent besoin de faire ressortir les contours entre différentes zones à l’intérieur d’une image : il s’agit notamment de « dessiner » les frontières entre deux couleurs. Notre but est un peu plus modeste aujourd’hui : nous allons dessiner les frontières entre deux zones de niveau transparence.
L’utilisation principale est de pouvoir dessiner les contours d’un lettrage réalisé avec image_typo. Comme le filtre travaillera sur les différences de transparence, ces images (...)
[SPIP 1.9 et GD2] Adapté de la bande dessinée de Frank Miller, le film Sin City présente des images lourdement retravaillées en post-production : l’image est entièrement passée dans un noir et blanc très contrasté, à l’exception des zones rouges apparaissent comme des taches colorées au milieu d’une image totalement désaturée.
Voici comment réaliser un effet similaire, automatiquement, avec un filtre de SPIP.
Notre filtre se nomme image_sincity, et voici son code :
function image_sincity($im) $image (...)