Afficher des éléments par lignes dans un tableau

Soit à créer un tableau de trois colonnes contenant les titres des articles
d’une rubrique, le nombre de lignes dépendant du nombre total d’articles ; sur le principe :

article 1 article 2 article 3
article 4 article 5 article 6
article 7 article 8 article 9

Il faut évidemment utiliser une boucle Articles, mais la difficulté réside dans le placement de balises tr ouvrante et fermante tous les trois passages dans la boucle. L’astuce consiste à utiliser la balise #COMPTEUR_BOUCLE et le filtre alterner. Cette balise indique le nombre de passages déjà effectués dans la boucle : si le reste de sa division par 3 vaut 0 il faut produire une balise tr ouvrante au début du code, s’il vaut 2, il faut produire une balise tr fermante à la fin.

Pour cela, point n’est besoin d’opérations arithmétiques dans le texte du squelette. Il suffit d’utiliser le filtre alterner, qui accepte un nombre quelconque d’arguments, disons n, le premier devant être un entier, appelons-le i. Ce filtre calcule le reste k de la division de n-1 par i et retourne alors son k+unième argument. Il suffit donc de lui donner 3 arguments vides sauf un pour ne produire les balises tr qu’aux passages appropriés.

Si l’on veut un code HTML irréprochable, il faut produire une séquence de <td></td> après la boucle pour compléter la dernière ligne du tableau lorsque le nombre total d’articles n’est pas divisible par 3.
Il suffit à nouveau d’utiliser le filtre alterner, mais appliqué cette fois à la balise #TOTAL_BOUCLE.

Ce qui donne :

<B_ligne>
<table>
<BOUCLE_ligne (ARTICLES) {id_rubrique} {par titre}>[
(#COMPTEUR_BOUCLE|alterner{'<tr>','',''})]
	<td width="33%">
	<a href="#URL_ARTICLE">#TITRE</a>
	</td>[
(#COMPTEUR_BOUCLE|alterner{'','','</tr>'})
]</BOUCLE_ligne>
[(#TOTAL_BOUCLE|alterner{
    '<td></td><td></td></tr>','<td></td></tr>', ''})]
</table>
</B_ligne>

Pour améliorer la lisibilité, on peut colorer différemment les lignes paires et impaires en mettant un attribut style dans la balise tr ouvrante. Il faut alors remplacer '<tr>' ci-dessus par une nouvelle utilisation de #COMPTEUR_BOUCLE|alterner, l’argument d’un filtre pouvant lui-même utiliser des balises et des filtres. Le squelette suivant donnera ainsi le tableau visualisé au début de cet article :

<B_ligne>
<table>
<BOUCLE_ligne (ARTICLES) {id_rubrique} {par titre}{0,7}>[
(#COMPTEUR_BOUCLE|
	alterner{[(#COMPTEUR_BOUCLE|
		alterner{'<tr style="background: #eee;">',
			 '<tr style="background: #ddd;">'})],
	    '',''})]
	<td width="33%">
	<a href="#URL_ARTICLE">#TITRE</a>
	</td>[
(#COMPTEUR_BOUCLE|alterner{'','','</tr>'})
]</BOUCLE_ligne>
[(#TOTAL_BOUCLE|alterner{'<td></td><td></td></tr>','<td></td></tr>', ''})]
</table>
</B_ligne>

Le même type de boucle, en remplaçant l’appel du titre par le logo (avec la balise #LOGO_ARTICLE), permet d’afficher une galerie où chaque logo d’article donne un aperçu (dont la taille sera de préférence fixée afin d’avoir une belle mise en page), et le texte de l’article contient la ou les œuvres exposées.

Auteur L’équipe de SPIP Publié le : Mis à jour : 29/06/23

Traductions : عربي, català, English, Español, français, italiano, Nederlands