Templating Language

Creating Custom Event Headers with the Wavecast Templating Language

When organizing an event, it is possible to use a pre-existing event header or designing a unique one that better fits your requirements. For a more tailored approach incorporating the Wavecast Dynamic Templating Language enables the creation of custom event headers that are dynamic and can be re-used. This guide outlines the steps to create a custom header using the Wavecast Templating Language.

Creating a Custom HTML Header

Step 1: Create the Event with a Custom HTML Header

For the event Edit page, Navigate to Pages > Header and set the header to use Custom HTML.

Step 2: Create the HTML Structure and Apply Styles

Your HTML structure serves as the skeleton of your custom header. Here is a simple example that you can modify according to your preferences:

<style>
.custom-event-header {
   padding: 30px 0;
}

.custom-event-header .container {
   position: relative;
}

.custom-event-header .container:before {
   content: " ";
   position: absolute;
   left: -30px;
   top: 0;
   bottom: 0;
   width: 4px;
   background-color: #E60000;
}
</style>

<div class="custom-event-header">
   <div class="container">
      <h1>Event Title</h1>
      <h3>Event Sub-Title</h3>
      <div><p>This is the event summary</p></div>
      <time>Apr 21st, 1pm BST</time> 
      <div><a href="">Add Event to Calendar</a></div>
      
      <a href="#">Register</a>
     
      <!-- If user subscribed for event display this copy -->
      <div>
         You are subscribed to this event
      </div>
   </div>
</div>

Step 3: Incorporate the Wavecast Templating Language to make it dynamic

To make the event header dynamic, you can use the Wavecast Templating Language. This allows you to insert placeholders that will be replaced with dynamic data, or the use of conditionals.

<div class="custom-event-header">
   <div class="container">
      <h1>[event_title]</h1>
      <h3>[event_sub_title]</h3>
      <div>[event_summary]</div>
      <time>[event_date]</time> 
      <div>[event_add_to_calendar_link]</div>
      
      [sign_up_button]
        
      <div>
         [if is_user_subscribed]
               You are subscribed to this event
         [else]
            You are not subscribed to this event
         [/endif]
      </div>
   </div>
</div>

Template tags available

Variables

Templating Tag	Description
[page_sub_title]	The subtitle of the current page.
[page_title]	The title of the current page.
[event_add_to_calendar_link]	Link to add the event to a calendar.
[event_summary]	Summary of the event.
[event_sub_title]	The subtitle of the event.
[event_title]	The title of the event.
[parent_event_add_to_calendar_link]	Link to add the parent event to a calendar.
parent_event_summary]	Summary of the parent event.
[parent_event_sub_title]	The subtitle of the parent event.
[parent_event_title]	The title of the parent event.
[main_event_add_to_calendar_link]	Link to add the main event to a calendar.
[main_event_summary]	Summary of the main event.
[main_event_sub_title]	The subtitle of the main event.
[main_event_title]	The title of the main event.
[sign_up_button]	The sign button for the event.

Conditionals

```
[if is_main_event]
    This content will show if 'is_main_event' is true.
[else]
    This content will show if 'is_main_event' is false.
[/endif]
```

```php
[if content_type === 'article']
    This copy will show the current content type is 'article'.
[else]
    This copy will show the current content type is not 'article'.
[/endif]
```

```
[if is_user_subscribed_to_main_event]
    User is subscribed to main_event
[else]
    User is not subscribed to the event
[/endif]
```

```
[if is_user_subscribed_to_parent_event]
    User is subscribed to parent_event
[else]
    User is not subscribed to the parent_event
[/endif]
```

```
[if is_user_subscribed]
    User is subscribed to event
[else]
    User is not subscribed to the event
[/endif]
```