Mehrspaltige Newsliste mit Contao (tl_news)

von Marco Simbürger

Nehmen wir an, wir möchten immer vier News-Einträge auf einer Reihe anzeigen lassen. Contao bietet aber nur die Möglichkeit, die Anzahl Einträge pro Seite zu definieren. Für eine fixe Anzahl pro Reihe gibt es keine Einstellung. Mit ein paar Handgriffen ins News-Template lässt sich das aber einfach realisieren.

Zuerst muss natürlich unter "Nachrichten" ein News-Archiv eröffnet und entsprechende Nachrichten erfasst werden. Weitere Infos dazu in der Contao Anleitung.

Danach unter Themes > Frontend-Module ein neues Modul "Nachrichtenliste" anlegen. Mein Beispiel hier ist mit dem Nachrichtentemplate "news_latest.html5".

Nachdem das Modul erstellt ist, wagen wir uns an das Template von "news_latest.html5". Unter "Templates" das Template "news_latest.html5" einfügen und bearbeiten.

Wir wollen ja vier Spalten. Jede Spalte muss entsprechend mit CSS nach links "gefloatet" werden. Logischerweise muss demnach jedes fünfte Element dieses Floating wieder aufheben. Um das machen zu können, müssen wir jedem fünften Element eine Klasse hinzufügen.

Ganz zu Beginn definieren wir eine globale Variable, welche wir bei jedem Durchlauf um 1 erhöhen. Das Template "news_latest.html5" wird in einer Schlaufe vom "mod_newslist.html5" aufgerufen. Daher müssen wir den Wert in einer globalen Variable speichern.

$GLOBALS['news_count'] = $GLOBALS['news_count'] + 1;

Als nächstes fragen wir im DIV-Bereich ab, bei welcher Spalte wir uns befinden. Erst wenn der Wert == 5 ist, muss die entsprechende Klasse hinzugefügt werden. Hier indemfall die Klasse "break". Wenn die fünfte Spalte erreicht ist, muss unser Counter natürlich auch wieder zurückgesetzt werden. Darum setzen wir ihn hier gleich wieder auf 1.

<div class="layout_latest arc_<?php echo $this->archive->id; ?> block<?php echo $this->class; ?> <?php if($GLOBALS['news_count'] == 5): echo 'break'; $GLOBALS['news_count']=1; endif; ?>">

Das sind eigentlich schon alle Einstellungen im Template. Jetzt fehlt nur noch etwas CSS, um die News-Einträge auch richtig zu "floaten". Wir floaten also alle Einträge nach links mit einer Breite von 25% (Breite + Margin). Bei jedem fünten Element (also dem ersten Element auf der neuen Zeile) definieren wir ein clear:both.

.layout_latest {
	float: left;
	margin-left: 1%;
	width: 24%;
}
.break {
	clear: both;
}

Ja und bereits fertig ist unsere News-Ansicht über vier Spalten pro Reihe.

Zurück

Kommentare

Kommentar von Rusty |

Es ginge auch ohne Template-Änderung ganz flexibel nur per CSS, und zwar mit folgendem Selektor:

.layout_latest:nth-child(4n+1) { clear: both; }

Bei schmaleren Viewports lässt der Selektor dann z.B. auf :nth-child(3n+1) etc. anpassen.

Einen Kommentar schreiben

Bitte addieren Sie 6 und 7.