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.

On this page