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 :

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 :

<BOUCLE_article(ARTICLES){id_article}>
</BOUCLE_article>

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

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)<!--cas 1-->]
        [(#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)<!--cas 2-->]
        [(#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)<!--cas 3-->]
	    #GET{secteur}
	]
	[(#GET{autre_secteur}|oui) [(#REM)<!--cas 4-->]
	    [(#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 :

<BOUCLE_article(ARTICLES){id_article}>
[(#REM)<!-- extraire les logos -->]
<BOUCLE_rubrique(RUBRIQUES){id_rubrique}>
    #SET{rubrique,#LOGO_RUBRIQUE}
</BOUCLE_rubrique>

<BOUCLE_secteur(RUBRIQUES){id_secteur}{racine}>
    #SET{secteur,#LOGO_RUBRIQUE}
</BOUCLE_secteur>

<BOUCLE_autre_secteur(RUBRIQUES){parents_indirects}>
<BOUCLE_racine(RUBRIQUES){id_rubrique}{racine}>

#SET{autre_secteur,#LOGO_RUBRIQUE}
</BOUCLE_racine>
</BOUCLE_autre_secteur>


[(#REM)<!-- calcul des dimensions -->]

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



[(#REM)<!-- fabrication des images réduites-->]
[(#REM)<!-- Fabrication de l'image finale-->]
[(#GET{rubrique}|=={#GET{secteur}}|non)
    [(#GET{autre_secteur}|non) [(#REM)<!--cas 1-->]
        [(#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)<!--cas 2-->]
        [(#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)<!--cas 3-->]
	    #GET{secteur}
	]
	[(#GET{autre_secteur}|oui) [(#REM)<!--cas 4-->]
	    [(#GET{secteur}|image_masque{
	    	#GET{autre_secteur}|image_reduire{#GET{largeur},
	    	#GET{hauteur}},
	    	mode=normal,
	    	text-align=left,
	    	vertical-align=top})]
	]
]
</BOUCLE_article>