Chemin principal : Accueil > SPIP > Images > Jouons un peu avec |image_masque

Autres chemins : (Aller directement au contenu de l'article)

Jouons un peu avec |image_masque

lundi 13 août 2012, mise à jour dimanche 27 octobre 2013, par Maïeul
Suivre la vie du site RSS 2.0 Forum

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 :

  1. [(#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 :

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

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

  1. <BOUCLE_article(ARTICLES){id_article}>
  2. </BOUCLE_article>

Télécharger

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

  1. <BOUCLE_rubrique(RUBRIQUES){id_rubrique}>
  2. #SET{rubrique,#LOGO_RUBRIQUE}
  3. </BOUCLE_rubrique>
  4.  
  5. <BOUCLE_secteur(RUBRIQUES){id_secteur}{racine}>
  6. #SET{secteur,#LOGO_RUBRIQUE}
  7. </BOUCLE_secteur>
  8.  
  9. <BOUCLE_autre_secteur(RUBRIQUES){parents_indirects}>
  10. <BOUCLE_racine(RUBRIQUES){id_rubrique}{racine}>
  11. #SET{autre_secteur,#LOGO_RUBRIQUE}
  12. </BOUCLE_racine>
  13. </BOUCLE_autre_secteur>
  14.  

Télécharger

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 :

  1. #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 :

  1. [(#GET{rubrique}|=={#GET{secteur}}|non)
  2. [(#GET{autre_secteur}|non) [(#REM)<!--cas 1-->]
  3. [(#GET{secteur}|image_masque{
  4. #GET{rubrique}|image_reduire{#GET{largeur},#GET{hauteur}},
  5. mode=normal,
  6. text-align=right,
  7. vertical-align=bottom})]
  8. ]
  9. [(#GET{autre_secteur}|oui) [(#REM)<!--cas 2-->]
  10. [(#GET{secteur}|image_masque{
  11. #GET{rubrique}|image_reduire{#GET{largeur},#GET{hauteur}},
  12. mode=normal,
  13. text-align=right,
  14. vertical-align=bottom
  15. }|image_masque{
  16. #GET{autre_secteur}|image_reduire{#GET{largeur},#GET{hauteur}},
  17. mode=normal,
  18. text-align=left,
  19. vertical-align=top})]
  20. ]
  21. ]
  22.  
  23. [(#GET{rubrique}|=={#GET{secteur}}|oui)
  24. [(#GET{autre_secteur}|non) [(#REM)<!--cas 3-->]
  25. #GET{secteur}
  26. ]
  27. [(#GET{autre_secteur}|oui) [(#REM)<!--cas 4-->]
  28. [(#GET{secteur}|image_masque{
  29. #GET{autre_secteur}|image_reduire{#GET{largeur},
  30. #GET{hauteur}},
  31. mode=normal,
  32. text-align=left,
  33. vertical-align=top})]
  34. ]
  35. ]

Télécharger

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

  1. <BOUCLE_article(ARTICLES){id_article}>
  2. [(#REM)<!-- extraire les logos -->]
  3. <BOUCLE_rubrique(RUBRIQUES){id_rubrique}>
  4. #SET{rubrique,#LOGO_RUBRIQUE}
  5. </BOUCLE_rubrique>
  6.  
  7. <BOUCLE_secteur(RUBRIQUES){id_secteur}{racine}>
  8. #SET{secteur,#LOGO_RUBRIQUE}
  9. </BOUCLE_secteur>
  10.  
  11. <BOUCLE_autre_secteur(RUBRIQUES){parents_indirects}>
  12. <BOUCLE_racine(RUBRIQUES){id_rubrique}{racine}>
  13.  
  14. #SET{autre_secteur,#LOGO_RUBRIQUE}
  15. </BOUCLE_racine>
  16. </BOUCLE_autre_secteur>
  17.  
  18.  
  19. [(#REM)<!-- calcul des dimensions -->]
  20.  
  21. #SET{hauteur,#GET{secteur}|hauteur|div{3}|round}
  22. #SET{largeur,#GET{secteur}|largeur|div{2}|round}
  23.  
  24.  
  25.  
  26. [(#REM)<!-- fabrication des images réduites-->]
  27. [(#REM)<!-- Fabrication de l'image finale-->]
  28. [(#GET{rubrique}|=={#GET{secteur}}|non)
  29. [(#GET{autre_secteur}|non) [(#REM)<!--cas 1-->]
  30. [(#GET{secteur}|image_masque{
  31. #GET{rubrique}|image_reduire{#GET{largeur},#GET{hauteur}},
  32. mode=normal,
  33. text-align=right,
  34. vertical-align=bottom})]
  35. ]
  36. [(#GET{autre_secteur}|oui) [(#REM)<!--cas 2-->]
  37. [(#GET{secteur}|image_masque{
  38. #GET{rubrique}|image_reduire{#GET{largeur},#GET{hauteur}},
  39. mode=normal,
  40. text-align=right,
  41. vertical-align=bottom
  42. }|image_masque{
  43. #GET{autre_secteur}|image_reduire{#GET{largeur},#GET{hauteur}},
  44. mode=normal,
  45. text-align=left,
  46. vertical-align=top})]
  47. ]
  48. ]
  49.  
  50. [(#GET{rubrique}|=={#GET{secteur}}|oui)
  51. [(#GET{autre_secteur}|non) [(#REM)<!--cas 3-->]
  52. #GET{secteur}
  53. ]
  54. [(#GET{autre_secteur}|oui) [(#REM)<!--cas 4-->]
  55. [(#GET{secteur}|image_masque{
  56. #GET{autre_secteur}|image_reduire{#GET{largeur},
  57. #GET{hauteur}},
  58. mode=normal,
  59. text-align=left,
  60. vertical-align=top})]
  61. ]
  62. ]
  63. </BOUCLE_article>

Télécharger

Qui êtes-vous ?

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
  • Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

À propos

Titulaire d’un doctorat en théologie et d’un doctorat en histoire, sous la direction conjointe de Frédéric Amsler et d’Élisabeth_Malamut, je commence à partir du 1er août 2017 un travail d’édition critique des Actes de Barnabé.

Dans le cadre de la rédaction de mon mémoire de master puis de ma thèse de doctorat, j’ai été emmené à utiliser LaTeX, et j’ai donc décider de partager mes techniques. En effet, au cours de mes premiers apprentissages, j’ai découvert que les ressources indiquant les outils pour l’utilisation de LaTeX en sciences humaines étaient rares. Ceci m’a conduit à maintenir ou créer plusieurs packages LaTeX et à donner plusieurs formations.

Par ailleurs, je suis membre actif de la communauté SPIP, au sein de laquelle j’administre le site Spip-Contrib. Je propose sur ce site quelques notes sur SPIP, en général à destination de webmestre.

Il m’arrive également de faire un petit peu de Python, de temps en temps.

Enfin, je tiens un blog de réflexions politiques et religieuses.

Maïeul