We gaan een tabel maken die bestaat uit 3 kolommen waarin we de titels van artikelen weergeven. We gaan uit van een rubriek en het aantal rijen dat de tabel bevat, gaat naturrlijk afhangen van het aantal geselecteerde artikelen in die rubriek. Het principe van de tabel is alsvolgt:
artikel 1 | artikel 2 | artikel 3 |
artikel 4 | artikel 5 | artikel 6 |
artikel 7 | artikel 8 | artikel 9 |
Het is duidelijk dat we uit moeten gaan van een lus ARTICLES, maar de moeilijkheid zit hem in de plaatsing van de HTML tags <tr>
en </tr>
die om drie artikelen een nieuwe regel moeten aanmaken.
De truc die we gaan gebruiken is het baken #COMPTEUR_BOUCLE
, samen met het filter |alterner
. Het baken is een teller die aangeeft hoeveel keren de lus al is rond gegaan (resultaten heeft geselecteerd): bij iedere derde telling moet een tag <tr>
worden geplaatst en er hoort natuurlijk ook een </tr>
bij om de rij af te sluiten.
We hoeven er geen wiskundige berekeningen voor toe te passen, want dat laten we over aan het filter |alterner
, dat meerdere argumenten accepteert en deze bij toerbeurt toepast. We moeten er dus voor zorgen dat het filter op het juiste moment de HTML tags voor de rij invoegt.
Willen we een perfecte HTML code, dan moeten mogelijk aan het einde enkele lege cellen aan de tabel worden toegevoegd wanneer het aantal artikelen geen veelvoud is van 3.
Hiervoor kunnen we opnieuw het filter |alterner
gebruiken, maar nu toegepast op het baken #TOTAL_BOUCLE
, wat het totaal aantal resultaten bevat.
We krijgen dus:
<B_art>
<table>
<BOUCLE_art (ARTICLES) {id_rubrique} {par titre}>[
(#COMPTEUR_BOUCLE|alterner{'<tr>','',''})]
<td width="33%">
<a href="#URL_ARTICLE">#TITRE</a>
</td>[
(#COMPTEUR_BOUCLE|alterner{'','','</tr>'})
]</BOUCLE_art>
[(#TOTAL_BOUCLE|alterner{
'<td> </td><td> </td></tr>','<td> </td></tr>', ''})]
</table>
</B_art>
Om de leesbaarheid te verbeteren kunnen we de rijen van de tabel om beurten een andere achtergrondkleur geven met het attribuut style
in de tag <tr>
. We moeten dus '<tr>'
vervangen door een volgende toepassing van de combinatie #COMPTEUR_BOUCLE|alterner
, dat we als argument van zichzelf gaan toevoegen. Het skelet krijgt dan de volgende inhoud:
<B_art>
<table>
<BOUCLE_art (ARTICLES) {id_rubrique} {par titre}>[
(#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_art>
[(#TOTAL_BOUCLE|alterner{'<td> </td><td> </td></tr>','<td> </td></tr>', ''})]
</table>
</B_art>
Om de juiste werking van het skelet te testen en met name of de laatste rij van de tabel steeds volledig wordt opgebouwd, kun je de te selecteren artikelen beperken. Daarvoor voeg je bijvoorbeeld
{0,7}
toe aan de lus:<BOUCLE_art (ARTICLES) {id_rubrique} {par titre}{0,7}>