toujou
+49 911 23980-870

Event Teaser List

The Event Teaser List gives you the opportunity to display events that you have created on an event page for your website. The element allows you to display multiple events as a list view within one page. The individual events are displayed one below the other.

Sample View Step by step guide Screen adaption


Sample view


Step by step guide

Before you can use the Event Teaser List element for the Frontend of your website, the events must be created by using the event pages. We have described how to create events in toujou in this tutorial.

  TYPO3-Tutorial »Events«

Create element

  • Click the button + Content to create the Event Teaser List element.

Select element

  • Select the Event Teaser List element in the Widgets tab.

Choose settings

  • Select the settings of your element in the Event element type according to the way you want the events to be displayed. The listing of the next events is preconfigurated.
  • To display past events activate the button Display past events.

Possibilities of displaying the events 

  • Next events: With the option the next events are always displayed by date, limited by the number of events you want to display.
  • Selected events: With this type of display you select individual events manually.
  • Manual defined date range: Only those events within the manually defined date range are displayed.
  • Fixed period: With this type you can define a specific period with predefined duration. Your options are: today, tomorrow, this week, next week, this month, next month.

Next events

  • Specify the number of events that should be displayed by typing the amount in the textfield limit.
  • Save your settings.

Selected events

  • For a manual selection of individual events, type the event name in the events selection search field and then click on the event. 
  • Save the settings.

Manual defined date range

  • Enter the start date and the end date. Therefore click in the field or on the calendar icon.
  • Enter the maximum number of events displayed in the text field limits.
  • Save your settings.

Fixed period

  • To select the desired time unit from the various options click on the drop-down within fixed period click.
  • Save the settings. 

Screen adaption

The element refers to data of the event page. The name of the event (in the example above event 1, event 2 and event 3) is generated from the respective page name. Date, medium, description, location and address come from the information you have stored in the event data tab in the page properties of the event page. A detailed description can be found in the TYPO3 tutorial »Events«. 

Worth noting: You can link directly from the event teaser list to another page by placing an external link in the event data of the event page (i.e. event 2). 

Responsive: In the mobile view the displayed text field (description) is smaller and the stored medium is played out in a different ratio. You can make any desired adjustments using the image editor. The TYPO3 tutorial »image editing« guides you through the individual steps.