Contao Tipps und Tricks: News Ansicht ändern.
Mit einem Button-Filter die Anzeige der Nachrichten-Templates news-simple und news-latest beliebig wechseln.
Beispielanwendung: Auf einer Seite sollen News unterschiedlich dargestellt werden. Einmal als Linkliste (news-simple) und einmal als Bild und Text (news-latest). Anhand von zwei Buttons soll zwischen den Darstellungen der News gewechselt werden können.
1) JavaScript:
Kopiere das folgende JavaScript-Snippet in das verwendete Seitenlayout, in den Abschnitt „Eigener JavaScript-Code“. Der Code bietet eine Möglichkeit, zwischen zwei verschiedenen Darstellungen von Contao-News auf einer Seite zu wechseln: einmal als Linkliste (news-simple) und einmal als Bild und Text (news-latest).
// Funktionen zur Anzeigen der News und des aktiven Button-Status
function showNewsSimpleList() {
document.getElementById('news-simple').classList.remove('hidden');
document.getElementById('news-latest').classList.add('hidden');
document.getElementById('news-simpleButton').classList.add('activeButton');
document.getElementById('news-latestButton').classList.remove('activeButton');
}
function showNewsLatestList() {
document.getElementById('news-simple').classList.add('hidden');
document.getElementById('news-latest').classList.remove('hidden');
document.getElementById('news-simpleButton').classList.remove('activeButton');
document.getElementById('news-latestButton').classList.add('activeButton');
}
2) Modul anlegen:
- Lege ein neues Modul vom Typ „Nachrichtenliste“ an und wähle als Nachrichten-Template: news_simple (news-simple).
- Lege ein weiteres Modul vom Typ „Nachrichtenliste“ an und wähle als Nachrichten-Template: news_latest (news-latest).
- Erstelle eine neue Seite, auf der die News angezeigt werden sollen.
3) Buttons um die News-Darstellung zu wechseln:
Füge den folgenden Abschnitt in die Seite ein. Ab Contao 5 zum Beispiel mittels dem "Ungefilterten HTML" Element.
<!-- Buttons zum Wechseln zwischen den Listen -->
<button id="news-simpleButton" onclick="showNewsSimpleList()">News: Simple</button>
<button id="news-latestButton" onclick="showNewsLatestList()">News: Latest</button>
4) News-Module einfügen:
Füge den folgenden Abschnitt unterhalb der Buttons als "HTML-Element" in die Seite ein. Ersetze „neues-modul-1“ und „neues-modul-2“ durch die ID der Module und ändere die normalen Klammern durch geschweifte Klammern.
<!-- News-Module -->
<div id="news-simple">((insert_module::neues-modul-1))</div>
<div id="news-latest" class="hidden">((insert_module::neues-modul-2))</div>
5) CSS-Anweisung:
Setze die Modulansicht standardmäßig auf display: none.
[id="news-simple"].hidden,
[id="news-latest"].hidden {
display: none;
}
3) So siehts aus!
Beispiel: Zwischen mehreren News-Modulen wechseln.