Collection Template

import { Aside } from ‘@astrojs/starlight/components’;

The collection template renders Smart Collection pages. Smart Collections are dynamic, filtered groupings of content (currently events) based on automated queries or manual selections.

Location

└── theme
    └── templates
        └── collection.liquid

URL Structure

Smart Collections are accessible at:

• /collections/:slug
• /smart-collections/:slug (alias)

The collection Object

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

Core Properties

Property	Type	Description
id	string	Unique identifier
title	string	Collection title
description	string	Collection description
slug	string	URL-safe identifier
image	media	Collection image

Collection Configuration

Property	Type	Description
type	string	query (automated) or manual (hand-picked)
targetCollection	string	Content type (events)
conditionType	string	all (match all) or any (match any)
limit	number	Maximum items to display
sort	string	Sort order

Items

Property	Type	Description
items	array	Resolved content items (events)

Content

Property	Type	Description
blocks	array	Content blocks
theme	object	Theme-specific field values

Metadata

Property	Type	Description
createdAt	string	Creation timestamp
updatedAt	string	Last update timestamp

Smart Collections currently support events only. Additional content types will be supported in future releases.

Basic Template Example

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

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

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

      {% if collection.description %}
        <p class="lead">{{ collection.description }}</p>
      {% endif %}
    </div>
  </header>

  <div class="collection-items">
    {% if items.size > 0 %}
      <div class="event-grid">
        {% for event in items %}
          {% render 'components/event-item' event: event %}
        {% endfor %}
      </div>
    {% else %}
      <p class="no-results">No items found in this collection.</p>
    {% endif %}
  </div>

  {% stageblocks collection %}
</div>
{% endcapture %}

Working with Collection Items

Direct Items Access

The resolved items are available as both collection.items and the shorthand items:

{# Both work the same #}
{% for event in items %}
  {{ event.title }}
{% endfor %}

{% for event in collection.items %}
  {{ event.title }}
{% endfor %}

Events Access

For convenience, events are also available as the events variable:

{% for event in events %}
  <article class="event-card">
    <h3><a href="/events/{{ event.slug }}">{{ event.title }}</a></h3>
    {% if event.startDate %}
      <time>{{ event.startDate | date: '%B %d, %Y' }}</time>
    {% endif %}
  </article>
{% endfor %}

Item Count

<p class="results-count">
  {{ items.size }} {% if items.size == 1 %}event{% else %}events{% endif %} found
</p>

Working with Collection Types

Display Collection Type

{% case collection.type %}
  {% when 'query' %}
    <span class="badge">Dynamic Collection</span>
  {% when 'manual' %}
    <span class="badge">Curated Collection</span>
{% endcase %}

Type-Based Messaging

{% if items.size == 0 %}
  {% if collection.type == 'query' %}
    <p>No events match the current criteria. Check back as new events are added.</p>
  {% else %}
    <p>This collection is being curated. Check back soon for events.</p>
  {% endif %}
{% endif %}

Complete Template Example

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

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

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

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

      <p class="collection-meta">
        {{ items.size }} {% if items.size == 1 %}event{% else %}events{% endif %}
      </p>
    </div>
  </header>

  {# Content blocks (before items) #}
  {% stageblocks collection %}

  {# Events listing #}
  <section class="collection-items">
    {% if items.size > 0 %}
      <div class="event-grid">
        {% for event in events %}
          <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.name }}</p>
              {% endif %}

              {% if event.series %}
                <span class="event-card__series">{{ event.series.title }}</span>
              {% endif %}
            </div>
          </a>
        {% endfor %}
      </div>
    {% else %}
      <div class="collection-empty">
        <h2>No Events Available</h2>
        {% if collection.type == 'query' %}
          <p>No events currently match this collection's criteria. New events will appear here automatically.</p>
        {% else %}
          <p>This curated collection is being updated. Check back soon!</p>
        {% endif %}

        <a href="/events" class="btn btn--secondary">View All Events</a>
      </div>
    {% endif %}
  </section>

  {# Navigation #}
  <nav class="collection-nav">
    <a href="/events" class="back-link">
      &larr; All Events
    </a>
  </nav>
</div>
{% endcapture %}

{% schema %}
{
  "name": "collection",
  "settings": [
    {
      "type": "select",
      "name": "layout_style",
      "label": "Layout Style",
      "options": [
        { "value": "grid", "label": "Grid" },
        { "value": "list", "label": "List" },
        { "value": "calendar", "label": "Calendar" }
      ],
      "defaultValue": "grid"
    },
    {
      "type": "checkbox",
      "name": "show_filters",
      "label": "Show Filter Options",
      "defaultValue": false
    }
  ],
  "blocks": [
    "content",
    "well"
  ]
}
{% endschema %}

Smart Collection Use Cases

Smart Collections are useful for creating dynamic, curated views of events:

Collection Name	Type	Purpose
”Upcoming Concerts”	Query	Auto-filters future concert events
”Family Events”	Query	Events tagged for families
”This Weekend”	Query	Events in the next 7 days
”Editor’s Picks”	Manual	Hand-selected featured events
”Holiday Season”	Query	Events during Dec 1 - Jan 1

Query-Based Collections

Automated collections that update dynamically based on:

• Date ranges (upcoming, this month, etc.)
• Series membership
• Season association
• Venue location
• Event status

Manual Collections

Hand-curated collections where editors select specific events. Useful for:

• Featured events
• Staff picks
• Themed collections
• Special promotions

Linking to Collections

{# In navigation or page content #}
<a href="/collections/upcoming-concerts">Upcoming Concerts</a>
<a href="/collections/family-events">Family Events</a>

{# Or with smart-collections path #}
<a href="/smart-collections/editors-picks">Editor's Picks</a>

Alternate Collection Templates

Create variations for different collection presentations:

templates/
├── collection.liquid           # Default collection template
├── collection.calendar.liquid  # Calendar view
├── collection.featured.liquid  # Featured/hero layout
└── collection.minimal.liquid   # Simple list view

Editors select templates per collection in the CMS.