FAQ

» Zurück zur Übersicht

Elemente in Spalten auflisten

Inhalt in Spalten aufgelistet

Im Folgenden wird erklärt, wie man mit Template-Befehlen eine mehrspaltige Auflistung erreichen kann. Als Beispiel betrachten wir die Auflistung von Galerie-Bildern, wobei in der Tabelle maximal drei Bilder nebeneinander stehen sollen, danach beginnt eine neue Zeile.

Um Elemente spaltenweise auflisten zu können benötigen Sie einen Zähler. Dieser lässt sich ganz einfach definieren durch:
{++COUNTER}

Setzen Sie diesen Zähler an den Anfang der gewünschten Auflistung, beispielsweise:
{list GALLERY}

   {++COUNTER}
   {GALLERY.PICTURE}

{/list}

Nun kommt der Modulo-Operator "%" zum Einsatz. Dieser ermittelt den Rest einer Division. Geteilt wird jeweils durch die Anzahl der Spalten, in diesem Fall also 3. Zur Verdeutlichung wie der Modulo-Operator arbeitet:
1 Modulo 3 = 1
2 Modulo 3 = 2
3 Modulo 3 = 0
4 Modulo 3 = 1
5 Modulo 3 = 2
6 Modulo 3 = 0
usw.

Wendet man "Modulo 3" auf den Zähler an, so beginnt immer dann eine neue Zeile, wenn das Ergebnis 1 ist. Im Gegensatz dazu ist die Zeile zu Ende, wenn das Ergebnis 0 ist. Für HTML bedeutet dies, dass für "COUNTER Modulo 3"=1 ein "<tr>" ausgegeben werden muss und für "COUNTER Modulo 3"=0 ein "</tr>". Übersetzt in die Template-Sprache sieht das wie folgt aus:

Zeilenanfang ausgeben:
{if COUNTER%3==1}<tr>{/if}

Zeilenende ausgeben:
{if COUNTER%3==0}</tr>{/if}

Die beiden Befehle werden jetzt in die Schleife eingebaut und der HTML-Code der Tabelle vervollständigt:
<table>

{list GALLERY}

   {++COUNTER}
   
   {* Zeilenanfang ausgeben *}
   {if COUNTER%3==1}<tr>{/if}
   
   {* Tabellenzelle ausgeben *}
   <td>{GALLERY.PICTURE}</td>
   
   {* Zeilenende ausgeben *}
   {if COUNTER%3==0}</tr>{/if}

{/list}

</table>

Beachten Sie, dass der Befehl für den Zeilenanfang am Anfang der Liste, direkt nach dem Zähler stehen muss und der Befehl für das Zeilenende am Ende der Liste!

Nach der Auflistung der Elemente fehlt nun noch eine Abfrage, ob die letzte Tabellenzeile vollständig ausgefüllt wurde. Ist dies nicht der Fall, müssen leere Tabellenzellen ausgegeben werden, damit der HTML-Code korrekt ist. Dies lässt sich mit dem folgenden Befehlsblock realisieren:
{if COUNTER%3!=0}
{repeat 3-COUNTER%3}<td>&nbsp;</td>{/repeat}</tr>
{/if}
Der vollständige Code sieht also folgendermaßen aus:
<table>

{list GALLERY}

   {++COUNTER}
   
   {* Zeilenanfang ausgeben *}
   {if COUNTER%3==1}<tr>{/if}
   
   {* Tabellenzelle ausgeben *}
   <td>{GALLERY.PICTURE}</td>
   
   {* Zeilenende ausgeben *}
   {if COUNTER%3==0}</tr>{/if}

{/list}

{* Tabelle vervollständigen => Leere Zellen ausgeben *}
{if COUNTER%3!=0}
{repeat 3-COUNTER%3}<td>&nbsp;</td>{/repeat}</tr>
{/if}

</table>

Sie können natürlich auch eine 4-spaltige/5-spaltige/etc. Auflistung erstellen, indem Sie jede 3 durch den entsprechenden Wert ersetzen.