J3ZZ

Modular Layout System

The modular layout system allows you to create custom work detail pages by combining different section types in any order. This provides complete control over the presentation of each work.

Using Modular Layouts

Add a sections array to your front matter instead of content below it:

---
layout: work
title: Project Title
work_id: project-title
categories: [installations, commissions]
primary_category: installations
image: /assets/img/preview.jpg
order: 28
sections:
  - type: metadata
    year: "2025"
    client: "Client Name"
    location: "City, Country"

  - type: hero-image
    image: /assets/img/main.jpg
    caption: "Optional caption"

  - type: text
    title: "Section Title"
    content: |
      Your content here with **bold**, *italic*, and [links](https://example.com).
---

Centralized Metadata System

NEW: You can define metadata once in the front matter and have it automatically used across all modules (metadata, split-hero-metadata, split-bandcamp-metadata). This prevents duplication and makes maintenance easier.

How It Works

Define a metadata field in your front matter with all your project metadata:

---
layout: work
title: Album Title
work_id: album-title
category: releases
image: /assets/img/album-preview.jpg
order: 30

# Define metadata once here
metadata:
  year: "2024"
  location: "Paris, France"
  role: "Composer, producer"
  isrc: "USRC17607839"
  mastering_by: "Abbey Road Studios"
  mastering_by_link: "https://www.abbeyroad.com/"
  technology: "Ableton Live, Max/MSP"
  collaborators: "Visual Artist Name"
  custom:
    - label: "Format"
      value: "Digital, Vinyl"

sections:
  # This module automatically uses the front matter metadata
  - type: split-bandcamp-metadata
    embed_code: '<iframe src="..."></iframe>'
    caption: "Listen on Bandcamp"
    text_title: "About the Album"
    text_content: |
      Album description here.

  # This also uses the same front matter metadata
  - type: split-hero-metadata
    content_type: "image"
    image: /assets/img/live-photo.jpg
    caption: "Live performance"

  # Display metadata as a standalone section (optional)
  - type: metadata
---

Priority System

All metadata-aware modules check for metadata in this order:

  1. Front matter metadata field (highest priority) - defined once, used everywhere
  2. Section-level parameters (fallback) - for one-off overrides

This means:

Benefits

Example: Before vs After

Before (duplicated metadata):

sections:
  - type: split-hero-metadata
    content_type: "image"
    image: /assets/img/photo.jpg
    year: "2024"
    location: "Paris"
    role: "Composer"

  - type: split-bandcamp-metadata
    embed_code: '<iframe...>'
    year: "2024"          # ❌ Duplicate!
    location: "Paris"     # ❌ Duplicate!
    role: "Composer"      # ❌ Duplicate!

After (centralized metadata):

metadata:
  year: "2024"
  location: "Paris"
  role: "Composer"

sections:
  - type: split-hero-metadata
    content_type: "image"
    image: /assets/img/photo.jpg
    # ✅ Automatically uses metadata from above

  - type: split-bandcamp-metadata
    embed_code: '<iframe...>'
    # ✅ Automatically uses metadata from above

Available Module Types

1. Hero Image Module

Large featured image with optional caption.

- type: hero-image
  image: /assets/img/image.jpg
  caption: "Optional caption text"  # Optional

2. Text Module

Rich text content with full Markdown support.

- type: text
  title: "Section Title"  # Optional
  content: |
    Your content here supports:

    - **Bold text** with `**bold**`
    - *Italic text* with `*italic*`
    - External links: <a href="https://example.com" target="_blank" rel="noopener">Link text</a>
    - Bulleted and numbered lists
    - `Inline code`
    - ***Bold italic*** with `***text***`

    Multiple paragraphs are supported.

Markdown Features:

3. Description Module

NEW: Displays the work’s description from the front matter. This is a required field that provides a concise overview of the work, distinct from the abstract (which appears in the portfolio grid).

# Front matter
description: |
  This is a comprehensive description of the work that will be displayed
  on the work detail page. It supports Markdown formatting including
  **bold text**, *italic text*, and can span multiple paragraphs.

sections:
  # Display the description - no parameters needed
  - type: description

Key Differences from Text Module:

Usage:

Example:

---
description: |
  An immersive installation exploring human-plant interaction through
  bioelectrical sensors. The work transforms **plant bio-signals** into
  real-time audiovisual responses, creating a unique sensory experience.

sections:
  - type: description  # Shows the description above
  - type: metadata
  - type: text
    content: |
      Additional detailed information...
---

4. Image Grid Module

Grid of images with 1-6 column layouts, square thumbnail cropping, lightbox viewing, and custom captions.

- type: image-grid
  columns: 3  # Options: 1, 2, 3, 4, 5, or 6
  images:
    - /assets/img/image1.jpg
    - /assets/img/image2.jpg
    - /assets/img/image3.jpg
  captions:  # Optional, one per image
    - "Caption for first image"
    - "Caption for second image"
    - "Caption for third image"

Features:

5. Metadata Module

Display project metadata in a clean grid layout. All fields are optional - include only what’s relevant for your project.

IMPORTANT: This module automatically uses metadata from the front matter metadata field (see Centralized Metadata System above). You can optionally include metadata fields directly in the module for overrides or if not using centralized metadata. If using centralized metadata, you can simply use - type: metadata without any fields.

- type: metadata
  # Temporal Information
  year: "2025"
  date: "March 15-20, 2025"

  # Industry Identifiers
  isrc: "USRC17607839"
  upc: "123456789012"
  iswc: "T-345.246.800-1"

  # Location Information
  location: "Paris, France"
  performed_in: "Europe"
  places: "Venue 1, Venue 2"

  # Production Information
  produced_by: "Production Company"
  client: "Client Name"
  commissioned_by: "Festival Name"
  curated_by: "Curator Name"

  # Role and Technology
  role: "Sound designer, performer"
  technology: "Max/MSP, TouchDesigner, Ableton Live"

  # Collaborators and Credits
  collaborators: "Visual artist Name, Dancer Name"
  credits: "Person 1 (role), Person 2 (role)"
  partners: "Organization 1, Organization 2"
  supporters: "Foundation Name"

  # Specific Roles
  composer_performer_producer: "Artist Name"
  mastering_by: "Studio Name"
  artwork_by: "Designer Name"

  # Additional Resources
  interview: "Available on SoundCloud"
  press_kit: "Download PDF"
  socials: "@username on Instagram, Twitter"

  # Acknowledgements
  special_thanks: "To everyone who supported this project"

  # Custom fields for any additional metadata not covered above
  custom:
    - label: "Duration"
      value: "45 minutes"
    - label: "Materials"
      value: "Mixed media"

Available Fields:

Industry Identifier Information:

Features:

Adding Links to Metadata Fields:

Any metadata field can be made clickable by adding a _link suffix to the field name. Links can point to external URLs or internal pages.

- type: metadata
  # External links (use full URLs with https://)
  year: "2025"
  year_link: "https://festival-website.com/2025"

  location: "Paris, France"
  location_link: "https://maps.google.com/?q=Paris,France"

  mastering_by: "Abbey Road Studios"
  mastering_by_link: "https://www.abbeyroad.com/"

  # Internal links (use site-relative paths)
  client: "Previous Client"
  client_link: "/works/previous-project/"

  collaborators: "Artist Name"
  collaborators_link: "/bio/"

  # Custom fields with links
  custom:
    - label: "Streaming"
      value: "Available on Spotify"
      link: "https://spotify.com/artist/name"
    - label: "Related Work"
      value: "See other project"
      link: "/works/other-project/"

Link Examples:

6. Quote Module

Blockquote with optional attribution.

- type: quote
  text: "The quote text goes here."
  author: "Author Name"  # Optional

7. Spacer Module

Add vertical spacing between sections.

- type: spacer
  height: "60px"  # Any CSS height value

8. Linked Events Module

Display events linked to this work, using the same design as the main Events page.

- type: linked-events
  title: "Upcoming Events & Performances"  # Optional, defaults to no title

Features:

Linking Events to Works:

  1. Add work_id to the work’s front matter (alphanumeric, hyphens, underscores only): 
    ---
layout: work
title: My Project Title
work_id: my-project-title  # Unique identifier (A-Z, a-z, 0-9, -, _)
# ... other fields ...
---
  2. Add matching work_id to event files in _events/: 
    ---
title: Event Name
date: 2025-03-15
# ... other event fields ...
work_id: my-project-title  # Must match the work's work_id exactly
---

9. Universal Iframe Module

Universal iframe embed module that accepts any embed code from any platform (YouTube, Vimeo, Bandcamp, SoundCloud, etc.). Supports both responsive (aspect ratio-based) and fixed-height modes.

Fixed-Height Mode (Default):

- type: iframe
  embed_code: '<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>'
  caption: "Optional caption text"  # Optional

Responsive Mode (Maintains Aspect Ratio):

- type: iframe
  embed_code: '<iframe src="https://player.vimeo.com/video/VIDEO_ID" frameborder="0" allowfullscreen></iframe>'
  responsive: true
  aspect_ratio: "16:9"  # Options: "16:9", "4:3", "1:1", "21:9"
  caption: "Optional caption text"  # Optional

Parameters:

How It Works:

Fixed-Height Mode:

Responsive Mode:

Supported Height Formats: The module automatically detects height from these formats in embed codes:

Features:

When to Use:

10. Split Hero-Metadata Module

Two-column responsive layout with hero content (image or iframe) on the left (2/3 width) and metadata on the right (1/3 width). Perfect for showcasing visual or video content alongside project details.

IMPORTANT: This module automatically uses metadata from the front matter metadata field (see Centralized Metadata System above). You can optionally include metadata fields directly in the module for overrides or if not using centralized metadata.

With Image:

- type: split-hero-metadata
  content_type: "image"
  image: /assets/img/main-image.jpg
  caption: "Optional image caption"  # Optional
  # Metadata fields (optional if using front matter metadata)
  year: "2025"
  location: "Paris, France"
  client: "Client Name"
  role: "Sound designer, performer"
  technology: "Max/MSP, Ableton Live"
  # ... any other metadata fields

With Iframe (Fixed-Height):

- type: split-hero-metadata
  content_type: "iframe"
  embed_code: '<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>'
  caption: "Optional video caption"  # Optional
  # Metadata fields
  year: "2025"
  location: "Berlin, Germany"
  commissioned_by: "Festival Name"

With Iframe (Responsive):

- type: split-hero-metadata
  content_type: "iframe"
  embed_code: '<iframe src="https://player.vimeo.com/video/VIDEO_ID" frameborder="0" allowfullscreen></iframe>'
  responsive: true
  aspect_ratio: "16:9"  # Options: "16:9", "4:3", "1:1", "21:9"
  caption: "Optional caption"  # Optional
  # Metadata fields
  year: "2025"
  role: "Artist, composer"

Parameters:

Layout:

When to Use:

11. Split Bandcamp-Metadata Module

Two-column responsive layout with iframe on the left (1/3 width) and metadata plus optional text on the right (2/3 width). Designed specifically for music releases with Bandcamp players (or similar narrow embeds) alongside comprehensive release information.

IMPORTANT: This module automatically uses metadata from the front matter metadata field (see Centralized Metadata System above). You can optionally include metadata fields directly in the module for overrides or if not using centralized metadata.

- type: split-bandcamp-metadata
  embed_code: '<iframe style="border: 0; width: 350px; height: 786px;" src="https://bandcamp.com/EmbeddedPlayer/album=123456/size=large/bgcol=ffffff/linkcol=0687f5/transparent=true/" seamless></iframe>'
  caption: "Available on Bandcamp"  # Optional
  # Metadata fields (optional if using front matter metadata)
  year: "2024"
  location: "Budapest, Hungary"
  role: "Producer, composer"
  isrc: "USRC17607839"
  mastering_by: "Studio Name"
  mastering_by_link: "https://studio.com"
  custom:
    - label: "Format"
      value: "Digital, Vinyl"
    - label: "Tracks"
      value: "12 tracks, 45 minutes"
  # Optional text content
  text_title: "About the Album"  # Optional
  text_content: |
    Album description with **markdown** support.

    Multiple paragraphs and formatting work here.

Parameters:

Layout:

Features:

When to Use:

Module Order and Layout

Example Works

See these portfolio works for complete working examples: