Work Template

The work template renders pages for creative works such as plays, musical compositions, films, or other artistic productions. It displays information about the work itself, separate from any specific event or performance of that work.

Location

└── theme
    └── templates
        └── work.liquid

The work Object

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

Core Properties

Property	Type	Description
id	string	Unique identifier
title	string	Work title
description	string	Work description/synopsis
slug	string	URL-safe identifier
image	media	Main work image

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

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

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

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

Working with Theme-Specific Fields

The work template typically relies on theme-specific fields for detailed information about the creative work. Access these via work.theme:

{# Template schema defines: author, composer, year_created, duration, genre #}

<div class="work-details">
  {% if work.theme.author %}
    <p class="work-author">
      <strong>By:</strong> {{ work.theme.author }}
    </p>
  {% endif %}

  {% if work.theme.composer %}
    <p class="work-composer">
      <strong>Composer:</strong> {{ work.theme.composer }}
    </p>
  {% endif %}

  {% if work.theme.year_created %}
    <p class="work-year">
      <strong>Year:</strong> {{ work.theme.year_created }}
    </p>
  {% endif %}

  {% if work.theme.duration %}
    <p class="work-duration">
      <strong>Duration:</strong> {{ work.theme.duration }}
    </p>
  {% endif %}

  {% if work.theme.genre %}
    <p class="work-genre">
      <strong>Genre:</strong> {{ work.theme.genre }}
    </p>
  {% endif %}
</div>

Synopsis and Program Notes

{% if work.theme.synopsis_html %}
  <section class="work-synopsis">
    <h2>Synopsis</h2>
    {{ work.theme.synopsis_html }}
  </section>
{% endif %}

{% if work.theme.program_notes_html %}
  <section class="work-program-notes">
    <h2>Program Notes</h2>
    {{ work.theme.program_notes_html }}
  </section>
{% endif %}

Original Cast/Premiere Information

{% if work.theme.premiere_info %}
  <section class="work-premiere">
    <h2>World Premiere</h2>
    {% if work.theme.premiere_info.date %}
      <p><strong>Date:</strong> {{ work.theme.premiere_info.date }}</p>
    {% endif %}
    {% if work.theme.premiere_info.venue %}
      <p><strong>Venue:</strong> {{ work.theme.premiere_info.venue }}</p>
    {% endif %}
    {% if work.theme.premiere_info.cast %}
      <p><strong>Original Cast:</strong> {{ work.theme.premiere_info.cast }}</p>
    {% endif %}
  </section>
{% endif %}

Complete Template Example

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

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

    <div class="work-hero__content">
      {% if work.theme.genre %}
        <span class="work-hero__genre">{{ work.theme.genre }}</span>
      {% endif %}

      <h1>{{ work.title }}</h1>

      {% if work.theme.author or work.theme.composer %}
        <p class="work-hero__creator">
          {% if work.theme.author %}
            By {{ work.theme.author }}
          {% endif %}
          {% if work.theme.composer %}
            {% if work.theme.author %}<br>{% endif %}
            Music by {{ work.theme.composer }}
          {% endif %}
        </p>
      {% endif %}

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

  <div class="work-content">
    <div class="work-main">
      {# Synopsis #}
      {% if work.theme.synopsis_html %}
        <section class="work-section">
          <h2>Synopsis</h2>
          <div class="work-section__content">
            {{ work.theme.synopsis_html }}
          </div>
        </section>
      {% endif %}

      {# Content blocks #}
      {% stageblocks work %}

      {# Program notes #}
      {% if work.theme.program_notes_html %}
        <section class="work-section">
          <h2>Program Notes</h2>
          <div class="work-section__content">
            {{ work.theme.program_notes_html }}
          </div>
        </section>
      {% endif %}
    </div>

    <aside class="work-sidebar">
      {# Details card #}
      <div class="work-details-card">
        <h3>About This Work</h3>

        <dl class="details-list">
          {% if work.theme.author %}
            <dt>Written by</dt>
            <dd>{{ work.theme.author }}</dd>
          {% endif %}

          {% if work.theme.composer %}
            <dt>Music by</dt>
            <dd>{{ work.theme.composer }}</dd>
          {% endif %}

          {% if work.theme.lyricist %}
            <dt>Lyrics by</dt>
            <dd>{{ work.theme.lyricist }}</dd>
          {% endif %}

          {% if work.theme.year_created %}
            <dt>Year</dt>
            <dd>{{ work.theme.year_created }}</dd>
          {% endif %}

          {% if work.theme.duration %}
            <dt>Duration</dt>
            <dd>{{ work.theme.duration }}</dd>
          {% endif %}

          {% if work.theme.genre %}
            <dt>Genre</dt>
            <dd>{{ work.theme.genre }}</dd>
          {% endif %}

          {% if work.theme.language %}
            <dt>Language</dt>
            <dd>{{ work.theme.language }}</dd>
          {% endif %}
        </dl>
      </div>

      {# Premiere info #}
      {% if work.theme.premiere_date or work.theme.premiere_venue %}
        <div class="work-premiere-card">
          <h3>World Premiere</h3>
          {% if work.theme.premiere_date %}
            <p>{{ work.theme.premiere_date }}</p>
          {% endif %}
          {% if work.theme.premiere_venue %}
            <p>{{ work.theme.premiere_venue }}</p>
          {% endif %}
        </div>
      {% endif %}

      {# Content advisory #}
      {% if work.theme.content_advisory %}
        <div class="work-advisory-card">
          <h3>Content Advisory</h3>
          <p>{{ work.theme.content_advisory }}</p>
        </div>
      {% endif %}
    </aside>
  </div>

  {# Media gallery #}
  {% if work.theme.media_gallery.size > 0 %}
    <section class="work-gallery">
      <h2>Gallery</h2>
      <div class="gallery-grid">
        {% for image in work.theme.media_gallery %}
          <figure class="gallery-item">
            <img
              src="{{ image | image_url: width: 400, height: 300 }}"
              alt="{{ image.alt | default: work.title }}"
              loading="lazy"
            >
            {% if image.caption %}
              <figcaption>{{ image.caption }}</figcaption>
            {% endif %}
          </figure>
        {% endfor %}
      </div>
    </section>
  {% endif %}

  {# Navigation #}
  <nav class="work-nav">
    <a href="/works" class="back-link">
      &larr; All Works
    </a>
  </nav>
</article>
{% endcapture %}

{% schema %}
{
  "name": "work",
  "settings": [
    {
      "type": "text",
      "name": "author",
      "label": "Written By"
    },
    {
      "type": "text",
      "name": "composer",
      "label": "Composer"
    },
    {
      "type": "text",
      "name": "lyricist",
      "label": "Lyricist"
    },
    {
      "type": "text",
      "name": "year_created",
      "label": "Year Created"
    },
    {
      "type": "text",
      "name": "duration",
      "label": "Duration"
    },
    {
      "type": "text",
      "name": "genre",
      "label": "Genre"
    },
    {
      "type": "text",
      "name": "language",
      "label": "Language"
    },
    {
      "type": "richText",
      "name": "synopsis",
      "label": "Synopsis"
    },
    {
      "type": "richText",
      "name": "program_notes",
      "label": "Program Notes"
    },
    {
      "type": "group",
      "name": "premiere",
      "label": "Premiere Information",
      "fields": [
        { "type": "text", "name": "date", "label": "Premiere Date" },
        { "type": "text", "name": "venue", "label": "Premiere Venue" }
      ]
    },
    {
      "type": "textarea",
      "name": "content_advisory",
      "label": "Content Advisory"
    },
    {
      "type": "array",
      "name": "media_gallery",
      "label": "Media Gallery",
      "fields": [
        {
          "type": "upload",
          "name": "image",
          "label": "Image",
          "relationTo": "media"
        }
      ]
    }
  ],
  "blocks": [
    "accordion",
    "content",
    "image-gallery",
    "video-gallery",
    "well"
  ]
}
{% endschema %}

Using Works in Components

Create a reusable work card component:

{# components/work-card.liquid #}
{#
  Required: work (work object)
  Optional: show_creator (boolean)
#}
{% assign show_creator = show_creator | default: true %}

<a href="/works/{{ work.slug }}" class="work-card">
  {% if work.image %}
    <img
      src="{{ work.image | image_url: width: 400, height: 250 }}"
      alt="{{ work.title }}"
      class="work-card__image"
      loading="lazy"
    >
  {% endif %}

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

    {% if show_creator %}
      {% if work.theme.author %}
        <p class="work-card__creator">By {{ work.theme.author }}</p>
      {% elsif work.theme.composer %}
        <p class="work-card__creator">Music by {{ work.theme.composer }}</p>
      {% endif %}
    {% endif %}

    {% if work.theme.genre %}
      <span class="work-card__genre">{{ work.theme.genre }}</span>
    {% endif %}
  </div>
</a>

Usage:

<section class="works-section">
  <h2>Our Repertoire</h2>
  <div class="work-grid">
    {% for work in all_works %}
      {% render 'components/work-card' work: work %}
    {% endfor %}
  </div>
</section>

Linking Works to Events

When an event is associated with a work, you can display work information on the event page:

{# In event.liquid template #}
{% if event.work %}
  <aside class="event-work-info">
    <h3>About the Work</h3>
    <div class="work-summary">
      {% if event.work.image %}
        <img
          src="{{ event.work.image | image_url: width: 200 }}"
          alt="{{ event.work.title }}"
        >
      {% endif %}
      <div>
        <h4>{{ event.work.title }}</h4>
        {% if event.work.theme.author %}
          <p>By {{ event.work.theme.author }}</p>
        {% endif %}
        <a href="/works/{{ event.work.slug }}">Learn more about this work</a>
      </div>
    </div>
  </aside>
{% endif %}

Alternate Work Templates

Create variations for different work types:

templates/
├── work.liquid           # Default work template
├── work.play.liquid      # Theater/drama layout
├── work.opera.liquid     # Opera with libretto info
├── work.musical.liquid   # Musical with songs list
└── work.symphony.liquid  # Orchestral work layout

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