Event Teaser List
Mit dem Element Event Teaser List können Sie Veranstaltungen, die Sie auf einer Eventseite angelegt haben, auf einer anderen Content-Seite Ihrer Website darstellen. Das Element ermöglicht das gesammelte Darstellen mehrerer Veranstaltungen als Listenansicht auf einer Seite. Dabei werden die einzelnen Events untereinander dargestellt.
Beispielansicht Anleitung Verhalten
Beispielansicht
Jan.
29
2026
Event 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
FürthGustav-Weißkopf-Str. 5
DetailsJan.
30
2026
Event 2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
toujou.deGustav-Weißkopf-Str. 5, Fürth
DetailsJan. Feb
31 02
2026
Event 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
FürthGustav-Weißkopf-Str. 5
DetailsAnleitung
Bevor Sie das Element Event Teaser List anlegen, müssen Veranstaltungen zwingend mittels Eventseiten angelegt sein. Wie Sie Veranstaltungen in toujou anlegen, haben wir in einem separaten Tutorial aufbereitet.
Element erstellen
- Klicken Sie auf den Button Inhalt, um das Element Event Teaser List anzulegen.
Element auswählen
- Im Reiter Widgets wählen Sie das Element Event Teaser List.
Darstellungsoption einstellen
- Im Event element type wählen Sie, nach welchen Kriterien die Event Teaser List Veranstaltungen darstellt. Voreingestellt ist die Auflistung der nächsten Events.
- Aktivieren Sie den Regler Display past events, um vergangene Veranstaltungen weiterhin anzuzeigen.
Mögliche Darstellungsformen der Veranstaltungen
- Next events: Hier werden immer die nächsten Veranstaltungen (nach Datum) angezeigt, limitiert durch die Anzahl der Veranstaltungen, die Sie darstellen möchten.
- Selected events: Mit dieser Darstellungsform wählen Sie einzelne Veranstaltungen manuell aus.
- Manual defined date range: Es werden nur die Veranstaltungen angezeigt, die innerhalb des von Ihnen manuell festgelegten Zeitraums liegen.
- Fixed period: Hier legen Sie einen bestimmten Zeitraum mit vordefinierten Angaben fest. Zur Auswahl stehen: heute, morgen, diese Woche, nächste Woche, diesen Monat, nächsten Monat.
Next events
- Im Textfeld Limit geben Sie an, wie viele Veranstaltungen maximal angezeigt werden.
- Speichern Sie die Einstellungen.
Selected events
- Tippen Sie zum manuellen Auswählen einzelner Events den Eventnamen im Suchfeld der Events selection ein und klicken anschließend auf das Event.
- Speichern Sie die Einstellungen.
Manual defined date range
- Tragen Sie das Start- und das Enddatum ein. Klicken Sie hierfür in das Feld oder auf das Kalender-Icon.
- Im Textfeld Limit geben Sie die maximal angezeigten Veranstaltungen an.
- Speichern Sie die Einstellungen.
Fixed period
- Wählen Sie unter Fixed period per Klick auf das Dropdown-Menü die gewünschte Zeiteinheit unter den verschiedenen Optionen.
- Speichern Sie die Einstellungen.
Verhalten
Das Element bezieht sich auf Daten der Event-Seite. Der Name der Veranstaltung (in der Beispielansicht Event 1, Event 2 und Event 3) generiert sich aus dem jeweiligen Seitennamen. Datum, Medium, Beschreibung, Ort und Adresse kommen aus den Informationen, die Sie in den Seiteneigenschaften der Event-Seite im Reiter Event Data hinterlegt haben. Eine ausführliche Beschreibung dazu finden Sie im TYPO3-Tutorial »Events«.
Besonderheit: Sie können von der Event Teaser List direkt auf eine andere Seite zu verlinken, indem Sie einen externen Link in den Event Data der Eventseite setzen (siehe Beispielansicht Event 2).
Responsive: Beachten Sie in der mobilen Ansicht, dass das angezeigte Textfeld (Description) kleiner ausfällt und das hinterlegte Medium in einem anderen Verhältnis ausgespielt wird. Gewünschte Anpassungen können Sie mittels Bildeditor vornehmen. Das TYPO3-Tutorial »Bildbearbeitung« leitet Sie durch die einzelnen Schritte.
Verknüpfte Tutorials
Tutorials, die mit diesen Einstellungen in Verbindung stehen.