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)
`duration`	`number`	Duration in minutes

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 (e.g., "Cast", "Creative Team")
participantGroup - Array of participants with participant (person or organization), and role

Event Instances

Property	Type	Description
`eventInstances`	`array`	Individual performances/showings

Each instance contains:

id - Unique identifier
startDate - Performance date/time
endDate - End date/time (optional)
venue - Venue override (optional)
customAttributes - Instance-specific attributes

Content

Property	Type	Description
`blocks`	`array`	Content blocks
`customAttributes`	`object`	Custom attribute values
`theme`	`object`	Theme-specific field values

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="/venues/{{ event.venue.slug }}">{{ event.venue.name }}</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:

{# 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.size > 0 %}
  <section class="performances">
    <h2>Performance Dates</h2>
    <ul class="performance-list">
      {% for instance in event.eventInstances %}
        <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.name }}
            </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 %}
    <div class="related-series">
      <h4>Part of</h4>
      <a href="/series/{{ event.series.slug }}">{{ event.series.title }}</a>
    </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="/works/{{ event.work.slug }}">{{ event.work.title }}</a>
      {% if event.work.author %}
        <p>by {{ event.work.author }}</p>
      {% endif %}
    </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' }}
            {% if event.endDate and event.endDate != event.startDate %}
              – {{ event.endDate | date: '%B %d, %Y' }}
            {% else %}
              , {{ event.startDate | date: '%Y' }}
            {% endif %}
          </span>
        {% endif %}

        {% if event.venue %}
          <span class="venue">{{ event.venue.name }}</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.size > 0 %}
        <div class="sidebar-section">
          <h3>Performances</h3>
          <ul class="performance-list">
            {% for instance in event.eventInstances limit: 5 %}
              <li>
                <time datetime="{{ instance.startDate }}">
                  {{ instance.startDate | date: '%a, %b %d – %I:%M %p' }}
                </time>
              </li>
            {% endfor %}
          </ul>
          {% if event.eventInstances.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.name }}</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 %}

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.

On this page