Geekographie Maïeulesque

Jouons un peu avec |image_masque

Maïeul — 2012-08-13T18:04:23Z

Les lecteurs réguliers de ce site auront remarqué, outre le changement de style, que désormais les logos des articles possèdent une petite images dans le coin inférieur droit.

L'image principale correspond au logiciel dont il est question en priorité : par exemple SPIP. L'image secondaire correspond à la rubrique principale de l'article. Ainsi pour notre article, il s'agit de la rubrique Images. Enfin, dans certains cas, une image est mise dans le coin supérieur gauche : il s'agit de l'image correspondante au logiciel utilisé de manière secondaire dans l'article. Par exemple l'article "Gérer beaucoup de sites SPIP en local sous MacOsX" parle d'abord du logiciel SPIP, et ensuite du logiciel SVN. On a donc le logo de SVN en petit dans le coin supérieur gauche.

La composition de ces images est effectuée automatiquement par SPIP à partir des logos des différentes rubriques, grâce au filtre |image_masque. Cependant ce filtre manque de documentation, et j'ai du fouiller le code pour le comprendre. En attendant une documentation plus complète, voici déjà un tutoriel expliquant comment j'ai procédé dans le cas présent.

Principe

Il n'y a pas de logo sur les articles.
Les logos d'articles sont calculés à l'aide de l'arborescence de l'article :
- Le logo principal correspond au logo du secteur.
- Le logo en bas à droite correspond au logo de la rubrique
- Le logo en haut à gauche correspond au logo du premier secteur secondaire configuré avec le plugin polyhierarchie.
Comme il s'agit d'un logo, je n'ai pas jugé utile d'ajouter une balise alt autre que vide.
Nous allons faire un squelette inclure/logo-rubriques que nous appellerons via la balise #INCLURE. Ce squelette calculera le logo, pour l'afficher, sans le réduire
Le logo sera réduit au cas par cas en filtrant #INCLURE grâce à image_reduire.

Mise en œuvre

Dans notre boucle ARTICLES, à l'endroit où nous souhaitons afficher notre logo, nous mettons :

[(#INCLURE{fond=inclure/logo-rubriques,id_article}|image_reduire{xxx})]

en remplaçant xxx par la taille souhaité du logo au final.

Maintenant, il nous reste à créer notre squelette inclure/logo-rubriques.html.

Dans ce squelette, nous procéderons ainsi :

Extraction des différents logos de rubriques, et stockage dans des variables.
Calcul de la taille des logos secondaires.
Fabrication de l'image finale.

Il ne faut pas oublier de mettre une boucle englobante dans le squelette :

Tout le code qui va suivre devra se mettre dans cette rubrique. Donc, première étape :

 #SET{rubrique,#LOGO_RUBRIQUE}   #SET{secteur,#LOGO_RUBRIQUE}    #SET{autre_secteur,#LOGO_RUBRIQUE}

Commentaires :

L. 1-3 : On sélectionne le logo de la rubrique de l'article (celui qui sera affiché en bas à droite) et on le stocke dans rubrique.
L. 5-7 : On sélectionne le logo du secteur de l'article (celui qui sera affiché en gros) et on le stocke dans secteur.
L. 9-13 : On sélectionne le logo du second secteur de l'article (celui qui sera affiché en haut à gauche), et on le stocke dans autre_secteur. L'imbrication des boucles s'expliques par le fait qu'il n'est pas possible de combiner {racine} et parents_indirects.

Maintenant, nous sommes prêts pour la seconde étape : calculer les hauteurs et largeurs maximales de nos logos secondaires. En ce qui concerne la hauteur, j'ai opté pour 1/3 de l'image principale ; en ce qui concerne la largeur, j'ai opté pour 1/2.

On utilise pour cela les filtres |hauteur, |largeur pour déterminer la hauteur et la largeur de l'image principale, |div pour procéder à une division, et |floor pour arrondir à l'entier inférieur.

Cela donne donc :

#SET{largeur,#GET{secteur}|largeur|div{2}|round}

Il ne nous reste plus qu'à fabrique nos images finales. Pour ce faire nous utiliserons les filtres suivants :

|==, |non et |oui, pour vérifier la présence des différents logos.
|image_reduire qu'on ne présente plus.
|image_masque, qui peut recevoir beaucoup de paramètres en troisième argument, que la documentation ne détaille pas. Ces paramètres sont à séparer par des virgules. Dans le cas présent, ceux qui nous intéressent sont :
- mode=normal pour que l'image du dessus masque totalement l'image du dessous.
- text-align pour le positionnement horizontal.
- vertical-align pour le positionnement vertical.

Au niveau des possibilités de combinaison, nous en avons quatre possibilités :

L'article ne se trouve pas dans une rubrique à la racine. Dans ce cas il nous faut tester s'il dispose d'un secteur secondaire :
- S'il ne dispose pas de secteur secondaire, le logo final correspond au logo du secteur sur lequel on ajoute en bas à droite le logo de la rubrique (cas 1).
- S'il dispose d'un secteur secondaire, le logo final correspond au logo du secteur principal sur lequel on superpose (cas 2) :
  - Le logo de la rubrique en bas à droite.
  - Le logo du secteur secondaire en haut à gauche.
L'article se trouve dans une rubrique à la racine. Dans ce cas, nous testons s'il dispose d'un secteur secondaire :
- S'il n'en dispose pas, alors le logo correspond tout simplement au logo du secteur (cas 3).
- S'il en dispose, alors le logo correspond au logo du secteur, sur lequel on superpose le logo du secteur secondaire (cas 4).

Au final, cela donne :

[(#GET{rubrique}|=={#GET{secteur}}|non) [(#GET{autre_secteur}|non) [(#REM)] [(#GET{secteur}|image_masque{ #GET{rubrique}|image_reduire{#GET{largeur},#GET{hauteur}}, mode=normal, text-align=right, vertical-align=bottom})] ] [(#GET{autre_secteur}|oui) [(#REM)] [(#GET{secteur}|image_masque{ #GET{rubrique}|image_reduire{#GET{largeur},#GET{hauteur}}, mode=normal, text-align=right, vertical-align=bottom }|image_masque{ #GET{autre_secteur}|image_reduire{#GET{largeur},#GET{hauteur}}, mode=normal, text-align=left, vertical-align=top})] ] ] [(#GET{rubrique}|=={#GET{secteur}}|oui) [(#GET{autre_secteur}|non) [(#REM)] #GET{secteur} ] [(#GET{autre_secteur}|oui) [(#REM)] [(#GET{secteur}|image_masque{ #GET{autre_secteur}|image_reduire{#GET{largeur}, #GET{hauteur}}, mode=normal, text-align=left, vertical-align=top})] ] ]

Et donc notre squelette inclure/logos-rubriques final est :

 [(#REM)]  #SET{rubrique,#LOGO_RUBRIQUE}   #SET{secteur,#LOGO_RUBRIQUE}    #SET{autre_secteur,#LOGO_RUBRIQUE}   [(#REM)] #SET{hauteur,#GET{secteur}|hauteur|div{3}|round} #SET{largeur,#GET{secteur}|largeur|div{2}|round} [(#REM)] [(#REM)] [(#GET{rubrique}|=={#GET{secteur}}|non) [(#GET{autre_secteur}|non) [(#REM)] [(#GET{secteur}|image_masque{ #GET{rubrique}|image_reduire{#GET{largeur},#GET{hauteur}}, mode=normal, text-align=right, vertical-align=bottom})] ] [(#GET{autre_secteur}|oui) [(#REM)] [(#GET{secteur}|image_masque{ #GET{rubrique}|image_reduire{#GET{largeur},#GET{hauteur}}, mode=normal, text-align=right, vertical-align=bottom }|image_masque{ #GET{autre_secteur}|image_reduire{#GET{largeur},#GET{hauteur}}, mode=normal, text-align=left, vertical-align=top})] ] ] [(#GET{rubrique}|=={#GET{secteur}}|oui) [(#GET{autre_secteur}|non) [(#REM)] #GET{secteur} ] [(#GET{autre_secteur}|oui) [(#REM)] [(#GET{secteur}|image_masque{ #GET{autre_secteur}|image_reduire{#GET{largeur}, #GET{hauteur}}, mode=normal, text-align=left, vertical-align=top})] ] ]

Sept bonnes pratiques de développement avec SPIP

Maïeul — 2012-01-05T00:39:57Z

Je travaille en ce moment sur un squelette qui n'est pas de moi. Il semble que la personne qui l'a créé n'était pas au courant des bonnes pratiques de développement sous SPIP. Il est vrai que ces bonnes pratiques ne sont pas nécessairement accessibles aux premiers abords de la documentation webmaster de SPIP.

Voici sept règles que je juge indispensables

1. Ne pas mettre de PHP dans les squelettes

Le but de SPIP était de permettre de ne pas avoir à connaître le PHP pour concevoir un site. Tout un système spécifique a été prévu, pour faire des requêtes SQL, mais aussi des tests. C'est parfois perturbant pour les utilisateurs venant du monde PHP.

Mais pour autant, c'est une très bonne pratique de ne quasiment-jamais mettre de PHP dans un squelette. En réalité, c'est une mauvaise pratique d'en mettre.

2. Ne rien mettre dans le dossier IMG

Le dossier IMG ne doit contenir que les images et documents ajoutés par l'utilisateur depuis l'interface privé. En aucun cas il ne doit contenir des images propres aux squelettes, qui doivent se trouver dans le même dossier que les squelettes.

Choisir de mettre les images dans IMG (comme je l'ai vu dans ce squelette), c'est compliquer les réutilisations des squelettes, et mélanger les couches utilisateurs et webmestres de SPIP.

3. Utiliser `#CHEMIN`

La balise #CHEMIN est une balise indispensable de SPIP. Elle permet d'indiquer l'adresse d'un fichier sans se préoccuper du nom du dossier parent. En effet, SPIP va cherche le fichier passé en argument dans l'ordre suivant [1] :

squelettes
plugin B dépendant du plugin A
plugin A
squelettes-dist
prive
ecrire

Exemple : j'ai une image dans le dossier squelettes, je ne fais pas :

mais bien

mieux, je met mon image toto.png dans le dossier img du dossier squelettes.

Je peux alors faire :

L'avantage d'un tel système est évident : permettre d'avoir un dossier squelettes qui ne s'appelle pas squelettes, par exemple lorsqu'on utilise ma sixième recommandation : les squelettes sous forme de plugins. Mais aussi permettre à SPIP de gérer correctement les URLS arborescentes (le cas échéant).

4. Utiliser `|balise_img`

Il est recommandé lorsqu'on insère une balise de lui mettre des attributs height et with pour améliorer les performances du navigateur lors de l'affichage de la page.

On peut bien sûr indiquer cela manuellement :

Mais supposons que je réduise la taille de toto.png : je dois dans ce cas modifier les attributs height et width à chaque fois que je l'utilise.

Pour éviter cela, SPIP prévoit le filtre |balise_img qui, lorsqu'il est appliqué au chemin d'un fichier image, crée automatiquement la balise , avec la hauteur et la largeur du fichier. Ainsi, pas besoin de corriger si on réduit la taille du fichier.

Le filtre s'utilise de manière très simple :

[(#CHEMIN{toto.png}|balise_img)]

On peut même mettre en argument le contenu de l'attribut alt

[(#CHEMIN{toto.png}|balise_img{0+0})]

Voir en deuxième argument la valeur de l'attribut class :

[(#CHEMIN{toto.png}|balise_img{0+0,blague_pour_enfants})]

Ce code au final me produit :

5. Utiliser les chaînes de langues

Bien que cela puisse paraître inutile et fastidieux pour un site monolingue, utiliser les chaînes de langue est quand même utile pour trois raisons :

on ne sait jamais : si le site devient multilingue, c'est toujours cela de fait.
il est plus facile d'uniformiser les textes.
il est plus facile de corriger en cas de faute ou de changement d'avis.

6. Utiliser

C'est un principe de base de l'informatique : dès qu'une séquence d'instructions est utilisée plusieurs fois, il faut non pas la dupliquer, mais la mettre dans un morceau qu'on appelle plusieurs fois.

En SPIP ce morceau, c'est un fichier inclus.

Typiquement supposons que j'affiche sur toutes les pages de mon site les sites amis.

Au lieux de copier-coller le code suivant dans les squelettes :

   #NOM

Je le met dans un fichier sites-amis.html, situé dans un dossier inclure du dossier contenant les squelettes.

Et je met le code suivant là où je souhaite afficher les sites amis :

Cela me permet si je dois modifier les critères de cette liste de ne les modifier qu'à un endroit [2].

La logique est donc : diviser son site en briques réutilisables. Chaque brique correspondant à fichier et à un morceau logique de page. Ensuite assembler ces briques dans des fichiers plus globaux [3].

Le modèle de squelettes Z pousse à l'extrême cette logique des inclusions. Je conseille de le suivre : on gagne largement en maintenance ce qu'on perd en temps d'apprentissage initial.

Une règle importante dans les inclusions : les balises html qui s'ouvrent dans un fichier doivent se fermer dans le même fichier. Il est très mauvais d'ouvrir une balise dans un fichier puis de la fermer dans un autre : on y est perd en lisibilité du code, et donc en maintenance [4].

7. Mettre ses squelettes sous formes de plugins

Cela peut paraître un luxe ou coquetterie, mais cela facilite énormément le déploiement d'un même squelette sur plusieurs sites ou le déménagement depuis la version locale vers la version en ligne :

en indiquant les dépendances aux plugins.
en incluant le fichier mes_options.php dans le même dossier.
en permettant même le cas échéant d'ajouter automatiquement un contenu pré-défini.

Un précédent article détaille comment fabriquer ces squelettes-plugins.

Amis SPIPeurs, j'attends vos remarques et ajouts !

[1] Liste tirée du site Programmer avec SPIP.

[2] En outre, cela diminue les requêtes SQL et donc la charge du serveur SQL, mais la contrepartie est de multiplier les fichiers de caches ainsi que les inclusions PHP.

[3] Pour comprendre comment passer des paramètres lors de ces inclusions, pour par exemple connaître l'article courant, je renvoie à mon article sur la balise #ENV. Cet article devrais être mis à jour pour parler des dernières nouveautés. Mais l'essentiel est là.

[4] J'ai crû à un moment qu'une structure html était incorrecte du fait qu'un fichier avait plus de

ouvrantes que fermantes. En réalité, le dernier

manquant se trouvait ailleurs.