Event template

The event template renders individual event pages. It has access to the event object containing all event data, including dates, venue, participants, and custom theme fields.

Location

└── theme
    └── templates
        └── event.liquid

The `event` Object

The event template has access to the event object with these properties:

Core Properties

Property	Type	Description
`id`	`string`	Unique identifier
`title`	`string`	Event title
`description`	`string`	Short description
`slug`	`string`	URL-safe identifier
`image`	`media`	Main event image

Dates & Duration

Property	Type	Description
`startDate`	`string`	Event start date (ISO 8601)
`endDate`	`string`	Event end date (ISO 8601). Optional, so it can be empty.
`startDateLocalAsUTC`	`string`	The start date's local wall-clock time, encoded as UTC
`endDateLocalAsUTC`	`string`	The end date's local wall-clock time, encoded as UTC. Empty when there is no end date.
`duration`	`number`	Duration in minutes

End Date is optional, so check event.endDate != blank before you use it. A filter such as date returns nothing for an empty value. To test for a one-day event, compare calendar days, not full timestamps. The LocalAsUTC values give the day in the venue's timezone:

{% assign start_day = event.startDateLocalAsUTC | date: '%Y-%m-%d' %}
{% assign end_day = event.endDateLocalAsUTC | date: '%Y-%m-%d' %}
{% if event.endDateLocalAsUTC != blank and end_day != start_day %}
  {% comment %} A multi-day run {% endcomment %}
{% endif %}

Relationships

Property	Type	Description
`venue`	`venue`	Associated venue
`work`	`work`	First associated creative work (virtual field)
`works`	`array`	All associated creative works
`season`	`season`	Associated season
`series`	`array`	Associated series (can have multiple)
`company`	`organization`	Production company

Participants

Property	Type	Description
`participants`	`array`	Groups of participants (cast, crew, etc.)

Each participant group contains:

group - Group name (for example, "Cast", "Creative Team")
participantGroup - Array of participants with participant (person or organization), and role

Event Instances

Property	Type	Description
`eventInstances`	`object`	Joined performance list; iterate `eventInstances.docs`

Each instance contains:

id - Unique identifier
startDate - Performance date/time
venue - Venue override (optional)
attributes.custom - Instance-specific custom data

Booking links

The Booking app adds external booking fields. Without the app installed, events and instances have no booking values.

Property	Admin field	Description
`event.booking.bookingLinkURL`	External Booking URL	The event's default booking URL
`event.booking.bookingLinkLabel`	External Booking Button Label	The event's default button label
`instance.booking.bookingLinkURL`	External Booking URL (Instance)	Overrides the event's URL for one date
`instance.booking.bookingLinkLabel`	External Booking Button Label (Instance)	Overrides the event's label for one date

A blank instance value means "use the event's value". Basker does not fill it in, so the theme must fall back itself. An instance with no booking values can still have a booking object with empty fields, so test the values with != blank. On a performance page, where both instance and event are set:

{% assign booking_url = instance.booking.bookingLinkURL %}
{% if booking_url == blank %}
  {% assign booking_url = event.booking.bookingLinkURL %}
{% endif %}
{% assign booking_label = instance.booking.bookingLinkLabel | default: event.booking.bookingLinkLabel | default: 'Book now' %}
{% if booking_url != blank %}
  <a href="{{ booking_url }}" class="btn">{{ booking_label }}</a>
{% endif %}

Content

Property	Type	Description
`blocks`	`array`	Content blocks
`attributes.custom`	`object`	Custom attribute values keyed by their configured names
`theme.settings`	`object`	Per-record settings from the selected template schema

Metadata

Property	Type	Description
`meta.title`	`string`	SEO title
`meta.description`	`string`	SEO description
`meta.image`	`media`	SEO/OG image
`createdAt`	`string`	Creation timestamp
`updatedAt`	`string`	Last update timestamp

Basic Template Example

{% layout 'layouts/default.liquid' %}

{% capture content_for_layout %}
<article class="event">
  <header class="event-header">
    {% if event.image %}
      <img
        src="{{ event.image | image_url: width: 1200, height: 600 }}"
        alt="{{ event.image.alt | default: event.title }}"
        class="event-header__image"
      >
    {% endif %}

    <div class="event-header__content">
      <h1>{{ event.title }}</h1>

      {% if event.description %}
        <p class="lead">{{ event.description }}</p>
      {% endif %}

      <div class="event-meta">
        {% if event.startDate %}
          <time datetime="{{ event.startDate }}">
            {{ event.startDate | date: '%B %d, %Y' }}
          </time>
        {% endif %}

        {% if event.venue %}
          <span class="venue">
            at <a href="{{ event.venue.url }}">{{ event.venue.title }}</a>
          </span>
        {% endif %}
      </div>
    </div>
  </header>

  <div class="event-body">
    {% stageblocks event %}
  </div>
</article>
{% endcapture %}

Working with Theme-Specific Fields

Templates can define custom fields that appear in the CMS. Access these via event.theme.settings:

{% # Template schema defines: image, primaryBtn, secondaryBtn %}

{% if event.theme.settings.image %}
  <img src="{{ event.theme.settings.image | image_url: width: 1200 }}">
{% endif %}

{% if event.theme.settings.primaryBtn.title %}
  <a href="{{ event.theme.settings.primaryBtn.link }}" class="btn btn--primary">
    {{ event.theme.settings.primaryBtn.title }}
  </a>
{% endif %}

Working with Event Instances

Display individual performances:

{% if event.eventInstances.docs.size > 0 %}
  <section class="performances">
    <h2>Performance Dates</h2>
    <ul class="performance-list">
      {% for instance in event.eventInstances.docs %}
        <li class="performance">
          <time datetime="{{ instance.startDate }}">
            {{ instance.startDate | date: '%A, %B %d at %I:%M %p' }}
          </time>

          {% if instance.venue and instance.venue.id != event.venue.id %}
            <span class="venue-override">
              at {{ instance.venue.title }}
            </span>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </section>
{% endif %}

Working with Participants

Display cast and crew:

{% if event.participants.size > 0 %}
  <section class="participants">
    {% for group in event.participants %}
      <div class="participant-group">
        <h3>{{ group.group }}</h3>
        <ul>
          {% for member in group.participantGroup %}
            <li>
              {% if member.participant %}
                <a href="/people/{{ member.participant.slug }}">
                  {{ member.participant.name }}
                </a>
              {% endif %}
              {% if member.role %}
                <span class="role">{{ member.role }}</span>
              {% endif %}
            </li>
          {% endfor %}
        </ul>
      </div>
    {% endfor %}
  </section>
{% endif %}

Link to related series, season, or work:

<aside class="event-sidebar">
  {% if event.series.size > 0 %}
    <div class="related-series">
      <h4>Part of</h4>
      {% for series in event.series %}
        <a href="{{ series.url }}">{{ series.title }}</a>
      {% endfor %}
    </div>
  {% endif %}

  {% if event.season %}
    <div class="related-season">
      <h4>Season</h4>
      <a href="/seasons/{{ event.season.slug }}">{{ event.season.title }}</a>
    </div>
  {% endif %}

  {% if event.work %}
    <div class="related-work">
      <h4>About the Work</h4>
      <a href="{{ event.work.url }}">{{ event.work.title }}</a>
    </div>
  {% endif %}
</aside>

Complete Template Example

{% layout 'layouts/default.liquid' %}

{% capture content_for_layout %}
<article class="event-page">
  {% # Header with hero image %}
  <header class="event-hero">
    {% assign hero_image = event.theme.settings.image | default: event.image %}
    {% if hero_image %}
      <picture class="event-hero__image">
        <source
          media="(min-width: 768px)"
          srcset="{{ hero_image | image_url: width: 1920, height: 800 }}"
        >
        <img
          src="{{ hero_image | image_url: width: 800, height: 600 }}"
          alt="{{ hero_image.alt | default: event.title }}"
        >
      </picture>
    {% endif %}

    <div class="event-hero__content">
      {% if event.theme.settings.prefix %}
        <span class="event-hero__prefix">{{ event.theme.settings.prefix }}</span>
      {% endif %}

      <h1 class="event-hero__title">{{ event.title }}</h1>

      {% if event.theme.settings.suffix %}
        <span class="event-hero__suffix">{{ event.theme.settings.suffix }}</span>
      {% endif %}

      <div class="event-hero__meta">
        {% if event.startDate %}
          <span class="date">
            {{ event.startDate | date: '%B %d' }}
            {% assign start_day = event.startDateLocalAsUTC | date: '%Y-%m-%d' %}
            {% assign end_day = event.endDateLocalAsUTC | date: '%Y-%m-%d' %}
            {% if event.endDateLocalAsUTC != blank and end_day != start_day %}
              – {{ event.endDate | date: '%B %d, %Y' }}
            {% else %}
              , {{ event.startDate | date: '%Y' }}
            {% endif %}
          </span>
        {% endif %}

        {% if event.venue %}
          <span class="venue">{{ event.venue.title }}</span>
        {% endif %}

        {% if event.duration %}
          <span class="duration">{{ event.duration }} minutes</span>
        {% endif %}
      </div>

      <div class="event-hero__actions">
        {% if event.theme.settings.primaryBtn.title %}
          <a href="{{ event.theme.settings.primaryBtn.link }}" class="btn btn--primary">
            {{ event.theme.settings.primaryBtn.title }}
          </a>
        {% endif %}

        {% if event.theme.settings.secondaryBtn.title %}
          <a href="{{ event.theme.settings.secondaryBtn.link }}" class="btn btn--secondary">
            {{ event.theme.settings.secondaryBtn.title }}
          </a>
        {% endif %}
      </div>
    </div>
  </header>

  {% # Main content area %}
  <div class="event-content">
    <main class="event-main">
      {% stageblocks event %}
    </main>

    <aside class="event-sidebar">
      {% # Performance dates %}
      {% if event.eventInstances.docs.size > 0 %}
        <div class="sidebar-section">
          <h3>Performances</h3>
          <ul class="performance-list">
            {% for instance in event.eventInstances.docs limit: 5 %}
              <li>
                <time datetime="{{ instance.startDate }}">
                  {{ instance.startDate | date: '%a, %b %d – %I:%M %p' }}
                </time>
              </li>
            {% endfor %}
          </ul>
          {% if event.eventInstances.docs.size > 5 %}
            <a href="#all-performances">View all dates</a>
          {% endif %}
        </div>
      {% endif %}

      {% # Venue info %}
      {% if event.venue %}
        <div class="sidebar-section">
          <h3>Venue</h3>
          <address>
            <strong>{{ event.venue.title }}</strong><br>
            {{ event.venue.addressLine1 }}<br>
            {{ event.venue.city }}, {{ event.venue.state }} {{ event.venue.postalCode }}
          </address>
        </div>
      {% endif %}
    </aside>
  </div>
</article>
{% endcapture %}

{% schema %}
{
  "name": "event",
  "settings": [
    {
      "type": "text",
      "name": "prefix",
      "label": "Title Prefix"
    },
    {
      "type": "text",
      "name": "suffix",
      "label": "Title Suffix"
    },
    {
      "type": "upload",
      "name": "image",
      "label": "Hero Image",
      "relationTo": "media"
    },
    {
      "type": "group",
      "name": "primaryBtn",
      "label": "Primary Button",
      "fields": [
        { "type": "text", "name": "title", "label": "Title" },
        { "type": "text", "name": "link", "label": "Link" }
      ]
    },
    {
      "type": "group",
      "name": "secondaryBtn",
      "label": "Secondary Button",
      "fields": [
        { "type": "text", "name": "title", "label": "Title" },
        { "type": "text", "name": "link", "label": "Link" }
      ]
    }
  ],
  "blocks": [
    "accordion",
    "content",
    "feature-panel",
    "image-gallery",
    "people-panel",
    "video-gallery",
    "well"
  ]
}
{% endschema %}

The `instance` object

Performance pages (/events/instances/<short-id>/<date>/<slug>) render templates/instance.liquid. That template receives two variables:

instance: the performance.
event: its parent event, with the properties listed above, including attributes.custom and theme.settings.

Property	Type	Description
`id`	`string`	Unique identifier
`title`	`string`	Performance title. Uses the event's title when the performance has none.
`description`	`string`	Short description
`image`	`media`	Performance image
`url`	`string`	Public URL of the performance page
`startDate`	`string`	Performance date and time (ISO 8601)
`startDate_tz`	`string`	IANA timezone of the start date
`startDateLocalAsUTC`	`string`	The local wall-clock time, encoded as UTC
`hideStartTime`	`boolean`	Whether to hide the time and show only the date
`venue`	`venue`	Venue for this date
`series`	`array`	Series set on this date
`bookingStatus`	`string`	Booking Status override: `onSale`, `comingSoon`, `soldOut`, `offSale`, `cancelled`, or `waitlist`
`bookingLabel`	`string`	Booking Button Label (Fallback)
`booking`	`object`	Instance booking fields. Requires the Booking app. See Booking links.
`attributes.custom`	`object`	Custom attribute values set on this date
`theme.settings`	`object`	Settings from the instance template's schema
`event`	`object`	The parent event record

A partial rendered with {% render %} sees neither variable unless you pass it: {% render 'instance-card', instance: instance, event: event %}.

Keep templates/instance.liquid rendering visible HTML. A template that outputs nothing, such as one that holds only a {% schema %}, makes the performance page fail with an error.

Alternate Event Templates

Create variations by adding a suffix to the filename:

templates/
├── event.liquid           # Default event template
├── event.concert.liquid   # Concert-specific template
├── event.workshop.liquid  # Workshop template
└── event.gala.liquid      # Gala event template

Alternate templates appear in the CMS for editors to select per event.

Event template

On this page