Season template

The season template renders season pages that organize events into time-based groupings. A season typically represents a programming year (e.g., "2024-25 Season") and contains events that occur within that timeframe.

Location

└── theme
    └── templates
        └── season.liquid

The `season` Object

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

Core Properties

Property	Type	Description
`id`	`string`	Unique identifier
`title`	`string`	Season name (e.g., "2024-25 Season")
`description`	`string`	Season description
`slug`	`string`	URL-safe identifier
`image`	`media`	Main season image

Date Properties

Property	Type	Description
`startDate`	`string`	Season start date (ISO 8601)
`endDate`	`string`	Season end date (ISO 8601)

Relationships

Property	Type	Description
`events`	`object`	Joined event list; iterate `events.docs`

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="season">
  <header class="season-header">
    {% if season.image %}
      <img
        src="{{ season.image | image_url: width: 1200, height: 600 }}"
        alt="{{ season.image.alt | default: season.title }}"
        class="season-header__image"
      >
    {% endif %}

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

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

      {% if season.startDate %}
        <p class="season-dates">
          {{ season.startDate | date: '%B %Y' }} – {{ season.endDate | date: '%B %Y' }}
        </p>
      {% endif %}
    </div>
  </header>

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

Working with Season Dates

Season Year Range

{% # Display as "2024-25 Season" format %}
{% assign start_year = season.startDate | date: '%Y' %}
{% assign end_year = season.endDate | date: '%y' %}

<span class="season-year">{{ start_year }}-{{ end_year }} Season</span>

Full Date Range

<p class="season-dates">
  {{ season.startDate | date: '%B %d, %Y' }} – {{ season.endDate | date: '%B %d, %Y' }}
</p>

Duration Check

{% # Check if season is current %}
{% assign now = 'now' | date: '%s' %}
{% assign season_start = season.startDate | date: '%s' %}
{% assign season_end = season.endDate | date: '%s' %}

{% if now >= season_start and now <= season_end %}
  <span class="badge badge--current">Current Season</span>
{% elsif now < season_start %}
  <span class="badge badge--upcoming">Upcoming</span>
{% else %}
  <span class="badge badge--past">Past Season</span>
{% endif %}

Working with Season Events

List All Season Events

{% if season.events.docs.size > 0 %}
  <section class="season-events">
    <h2>{{ season.title }} Events</h2>

    <div class="event-grid">
      {% for event in season.events.docs %}
        <article class="event-card">
          {% if event.image %}
            <img
              src="{{ event.image | image_url: width: 400, height: 250 }}"
              alt="{{ event.title }}"
              loading="lazy"
            >
          {% endif %}

          <div class="event-card__content">
            <h3>
              <a href="/events/{{ event.slug }}">{{ event.title }}</a>
            </h3>

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

            {% if event.venue %}
              <p class="venue">{{ event.venue.title }}</p>
            {% endif %}
          </div>
        </article>
      {% endfor %}
    </div>
  </section>
{% endif %}

Events Grouped by Month

{% if season.events.docs.size > 0 %}
  <section class="season-calendar">
    <h2>Season Calendar</h2>

    {% assign current_month = '' %}
    {% for event in season.events.docs %}
      {% assign event_month = event.startDate | date: '%B %Y' %}

      {% if event_month != current_month %}
        {% unless current_month == '' %}
          </div>
        {% endunless %}
        <h3 class="month-header">{{ event_month }}</h3>
        <div class="month-events">
        {% assign current_month = event_month %}
      {% endif %}

      {% render 'components/event-item' event: event %}

      {% if forloop.last %}</div>{% endif %}
    {% endfor %}
  </section>
{% endif %}

Show series labels

{% if season.events.docs.size > 0 %}
  <section class="season-events">
    {% for event in season.events.docs %}
      <article>
        <h3><a href="{{ event.url }}">{{ event.title }}</a></h3>
        {% for series in event.series %}
          <span>{{ series.title }}</span>
        {% endfor %}
      </article>
    {% endfor %}
  </section>
{% endif %}

Working with Theme-Specific Fields

Access custom fields defined in the template schema via season.theme.settings:

{% # Template schema defines: season_brochure, subscription_packages, season_announcement_html %}

{% if season.theme.settings.season_announcement_html %}
  <div class="season-announcement">
    {{ season.theme.settings.season_announcement_html }}
  </div>
{% endif %}

{% if season.theme.settings.season_brochure %}
  <a href="{{ season.theme.settings.season_brochure | file_url }}" class="btn btn--secondary" download>
    Download Season Brochure
  </a>
{% endif %}

{% if season.theme.settings.subscription_packages.size > 0 %}
  <section class="subscription-packages">
    <h2>Subscription Packages</h2>
    {% for package in season.theme.settings.subscription_packages %}
      <div class="package-card">
        <h3>{{ package.name }}</h3>
        <p>{{ package.description }}</p>
        {% if package.link %}
          <a href="{{ package.link }}" class="btn">Learn More</a>
        {% endif %}
      </div>
    {% endfor %}
  </section>
{% endif %}

Complete Template Example

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

{% capture content_for_layout %}
<article class="season-page">
  {% # Hero section %}
  <header class="season-hero">
    {% if season.image %}
      <picture class="season-hero__image">
        <source
          media="(min-width: 768px)"
          srcset="{{ season.image | image_url: width: 1920, height: 700 }}"
        >
        <img
          src="{{ season.image | image_url: width: 800, height: 500 }}"
          alt="{{ season.image.alt | default: season.title }}"
        >
      </picture>
    {% endif %}

    <div class="season-hero__content">
      <h1>{{ season.title }}</h1>

      {% if season.startDate %}
        <p class="season-hero__dates">
          {{ season.startDate | date: '%B %Y' }} – {{ season.endDate | date: '%B %Y' }}
        </p>
      {% endif %}

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

      <div class="season-hero__actions">
        {% if season.theme.settings.subscription_link %}
          <a href="{{ season.theme.settings.subscription_link }}" class="btn btn--primary">
            Subscribe Now
          </a>
        {% endif %}

        {% if season.theme.settings.season_brochure %}
          <a href="{{ season.theme.settings.season_brochure | file_url }}" class="btn btn--secondary" download>
            Season Brochure
          </a>
        {% endif %}
      </div>
    </div>
  </header>

  {% # Season announcement if present %}
  {% if season.theme.settings.season_announcement_html %}
    <section class="season-announcement">
      {{ season.theme.settings.season_announcement_html }}
    </section>
  {% endif %}

  {% # Content blocks %}
  <div class="season-content">
    {% stageblocks season %}
  </div>

  {% # Events listing %}
  {% if season.events.docs.size > 0 %}
    <section class="season-events">
      <header class="season-events__header">
        <h2>Season Events</h2>
        <p class="event-count">{{ season.events.docs.size }} events this season</p>
      </header>

      <div class="event-grid">
        {% for event in season.events.docs %}
          <a href="/events/{{ event.slug }}" class="event-card">
            {% if event.image %}
              <img
                src="{{ event.image | image_url: width: 400, height: 250 }}"
                alt="{{ event.title }}"
                class="event-card__image"
                loading="lazy"
              >
            {% endif %}

            <div class="event-card__content">
              <h3 class="event-card__title">{{ event.title }}</h3>

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

              {% if event.venue %}
                <p class="event-card__venue">{{ event.venue.title }}</p>
              {% endif %}

              {% if event.series %}
                <span class="event-card__series">{{ event.series.title }}</span>
              {% endif %}
            </div>
          </a>
        {% endfor %}
      </div>
    </section>
  {% endif %}

  {% # Navigation %}
  <nav class="season-nav">
    <a href="/seasons" class="back-link">
      &larr; All Seasons
    </a>
  </nav>
</article>
{% endcapture %}

{% schema %}
{
  "name": "season",
  "settings": [
    {
      "type": "text",
      "name": "subscription_link",
      "label": "Subscription Link"
    },
    {
      "type": "upload",
      "name": "season_brochure",
      "label": "Season Brochure (PDF)",
      "relationTo": "media"
    },
    {
      "type": "richText",
      "name": "season_announcement",
      "label": "Season Announcement"
    },
    {
      "type": "array",
      "name": "subscription_packages",
      "label": "Subscription Packages",
      "fields": [
        { "type": "text", "name": "name", "label": "Package Name" },
        { "type": "textarea", "name": "description", "label": "Description" },
        { "type": "text", "name": "link", "label": "Link" }
      ]
    }
  ],
  "blocks": [
    "accordion",
    "content",
    "feature-panel",
    "image-gallery",
    "well"
  ]
}
{% endschema %}

Alternate Season Templates

Create variations for different season presentations:

templates/
├── season.liquid           # Default season template
├── season.archive.liquid   # Past season archive view
├── season.preview.liquid   # Upcoming season preview
└── season.calendar.liquid  # Calendar-focused layout

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

Season template

On this page