toujou
+64 273 868 404

Events

toujou gives you the ability to announce events on your website. All you need to do is to create an event page. To display multiple events in a group, you can use the event teaser. In this tutorial, we will give step by step explanations on creating an event page, adding relevant information to the event page and creating both the event teaser and optional modules.

Step by step guide Pieces of advice


Step by step

Create an event page 

  • By clicking on the page icon in the module overview the page tree of your website will open.
  • The bar with the page icons will be displayed above the page tree. Use drag & drop to place the event page icon (ticket symbol) in the desired place on your page tree.
  • In the content area of the page you have the possibility to edit the page with all of the toujou elements. However, this step is not required to display the event with the event teaser.
  • To enable the page in the frontend, right-click on the page – in this example Event 2. A selection window will open. Click on the Enable button.
  • Then click on the page properties button.

Page title and URL

  • As you may already know from working with other page types in toujou, you can define page-specific values in the page properties under the General tab. The most important of these are the page title and the URL segment.
  • The page title gives the page its name, which also appears in the page tree. Enter a concise and meaningful title here that reflects the content of the page.
  • The URL segment is what appears in the browser’s address bar. It is automatically generated based on the page title. If you'd like to edit the URL manually, click the icon with the eye and chain on the right side of the line to activate the input field.
  • With the alternative page title, you have the option to define an additional title for the page.
  • Use the subtitle field to add a subtitle for event pages. This will be shown when the page is previewed, for example, in the Event Teaser List.
  • For more information on page types and other related topics, refer to the tutorial on Pages.

Audience and external link

  • In the Event Data section, you can enter a short description of the target audience in the target audience text field. This information will then be displayed on the event page.
  • If you want to refer to an event using an external link (not your own website), go to the External Event Link section and activate the checkbox next to Set Value. Once the box is checked (indicated by a blue checkmark), the field will become active, and you can enter the desired external URL in the link field below using the link validator.

Define event details

  • In the Event Description section, you can define additional details for the event.
  • Under Event Format, select one of the available options from the dropdown menu: offline, online, or mixed.
  • Using the dropdown menu for Event Type, you can specify the type of event. If Default "event" is selected, the event format will not be displayed on the frontend.
  • In the Description field, enter a text about the event using the Rich Text Editor.
  • For the Image, upload a meaningful visual related to the event. To do this, click the Add File or Select and Upload File button. Instructions on how to upload and manage media can be found in the TYPO3 tutorial titled "File List."
  • In the Organizer section, you can specify the event organizer. Use the search field (with the magnifying glass icon) or click on the dropdown menu below it. If no options appear in either case, you can also define an event-specific organizer by clicking the + icon. Note that an organizer created via the + icon will only be valid for this particular event.
  • Just like with the organizer, you can also define a Location. Follow the same steps as for setting the organizer.
  • Note: The image, description, and event format are key event page elements used in teaser components such as the Event Teaser List.

Event date and status

  • In the Event Status section, you can define the event's date and status. An event page cannot be saved without entering event data.
  • Click the dropdown menu under Event Status to choose from the available options. Depending on your selection — such as scheduled, postponed, or canceled — the event details will appear differently on the front end.
  • To set the event date, go to the Date section. You are required to enter both a start date and an end date in the corresponding fields. You also have the option to specify start and end times. Additionally, you can provide an optional entry date and entry time to further refine the event details.

Creating sub events

  • In the Event Relations section, you can create sub events. These sub-events reference the main event (or event page) you are currently viewing.
  • To create a sub-event, click the + Create New button. Then, enter at least the event date and any additional event details, if applicable.
  • Note: When creating sub events, they are initially generated as data records only. If you want to assign a separate URL to a sub-event, go to the List module and select the parent event. The sub event will appear in the view. Click the icon with the three dots, then select the option Merge event data into new page.

Pieces of advice

toujou is based on TYPO3 and anyone familiar with TYPO3 knows that there are many different options to use to reach your desired results. We would like to point out important information and little tricks that can assist you when you’re creating and editing your website.

An event page has all the same features that a content page has to offer. You can create a new page with the toujou elements and edit the page properties like SEO or the index search. Please be aware that the information entered in the Event Data tab will only be displayed on an event page if you have also created content elements. 

To create event teasers, the data from the Event Data tab under the page properties is required. Unlike an event page it is not mandatory to create content elements on the page. 

For a clear and organized page tree, we highly recommend creating an event folder with subfolders arranged by years or months, depending on the number of events you will be including on your website.