Performances Section - Content Management Guide

This directory contains all performance entries for Pi-hsien Chen’s concert schedule. Each concert is stored as a page bundle (a folder containing the concert details and associated media).

Automatic Sorting

Concerts are automatically split into two sections based on their date:

• Upcoming Concerts: date >= today (sorted by date ascending - soonest first)
• Past Performances: date < today (sorted by date descending - most recent first)

The website automatically handles this splitting—you just need to set the correct date in the frontmatter.

Adding a New Concert

Step 1: Create the Page Bundle

Create a new folder with this naming convention:

YYYY-MM-DD-venue-slug/

Example:

2025-03-30-hong-kong-academy/

The date prefix ensures chronological sorting in your file system. Use lowercase and hyphens for the venue slug.

Step 2: Prepare the Concert Image

1. Find or create a 1:1 square image (minimum 800x800px, recommended 1200x1200px)
2. Save as featured.jpg or featured.png in the concert folder
3. The image should be high quality but web-optimized (under 500KB if possible)
4. Hugo will automatically generate optimized versions for the website

Image Requirements:

• Aspect ratio: 1:1 (square)
• Format: JPEG or PNG
• Minimum size: 800x800px
• Recommended size: 1200x1200px
• File name: featured.jpg or featured.png

Step 3: Create the Concert Content File

Create index.md in the concert folder with the following structure:

---
title: "Concert Title"
date: 2025-03-30T19:30:00+08:00  # Use ISO 8601 format with timezone
venue: "Venue Name"
location: "City, Country"

# Optional fields (include only if available):
program:
  - composer: "Composer Name"
    work: "Work Title"
  - composer: "Another Composer"
    work: "Another Work"

ticket_link: "https://example.com/tickets"

review_links:
  - title: "Review Title"
    url: "https://example.com/review"
  - title: "Another Review"
    url: "https://example.com/another-review"

videos:
  - "https://youtube.com/watch?v=VIDEO_ID"
  - "https://youtu.be/VIDEO_ID"

photo_gallery:
  - "photo1.jpg"
  - "photo2.jpg"
  - "photo3.jpg"

tags: ["solo-recital", "chamber-music", "beethoven", "contemporary"]
---

Write the concert highlights and description here. This text will appear:
1. As an excerpt on the performances list page
2. As the main content on the concert detail page

Use markdown formatting for rich text (bold, italics, links, etc.).

Include special notes, collaborations, program notes, or any other relevant information.

Field Reference

Required Fields

Date Format Notes:

• Use ISO 8601 format: YYYY-MM-DDTHH:MM:SS+TZ:TZ
• Include timezone offset (e.g., +08:00 for Hong Kong, -05:00 for New York EST)
• Use 24-hour time format
• If time is unknown, use T19:30:00 as a default

Optional Fields

All optional fields can be omitted if not available. The concert page will render gracefully without them.

Program Structure

program:
  - composer: "Johann Sebastian Bach"
    work: "Goldberg Variations, BWV 988"
  - composer: "Ludwig van Beethoven"
    work: "Piano Sonata No. 32 in C minor, Op. 111"

Review Links Structure

review_links:
  - title: "A Masterful Performance - New York Times"
    url: "https://nytimes.com/review"
  - title: "Review in The Guardian"
    url: "https://theguardian.com/review"

Video Formats Supported

• YouTube URLs (full or shortened):
  • https://youtube.com/watch?v=VIDEO_ID
  • https://youtu.be/VIDEO_ID
• Videos are automatically embedded with responsive 16:9 aspect ratio

Photo Gallery

Place additional photos in the concert bundle folder and reference them by filename:

photo_gallery:
  - "rehearsal1.jpg"
  - "backstage.jpg"
  - "audience.jpg"

Photos will be displayed as a responsive grid with lightbox functionality.

Complete Example

Here’s a full example of a concert entry:

Folder structure:

content/en/work/performances/2025-03-30-hong-kong-academy/
├── index.md
├── featured.jpg
├── photo1.jpg
└── photo2.jpg

index.md content:

---
title: "Pi-hsien Chen Piano Recital"
date: 2025-03-30T19:30:00+08:00
venue: "Concert Hall, The Hong Kong Academy for Performing Arts"
location: "Hong Kong"
program:
  - composer: "Johann Sebastian Bach"
    work: "Partita No. 4 in D major, BWV 828"
  - composer: "Ludwig van Beethoven"
    work: "Piano Sonata No. 32 in C minor, Op. 111"
  - composer: "Pierre Boulez"
    work: "Piano Sonata No. 2"
ticket_link: "https://www.hkapa.edu/ticket-office"
photo_gallery:
  - "photo1.jpg"
  - "photo2.jpg"
tags: ["solo-recital", "bach", "beethoven", "contemporary"]
---

An extraordinary evening celebrating the intersection of classical and contemporary piano repertoire. This special recital commemorates the 100th anniversary of Pierre Boulez's birth.

The program opens with Bach's luminous Partita No. 4, establishing a dialogue through time that continues with Beethoven's final piano sonata, Op. 111. Pi-hsien Chen brings her renowned insight to these masterworks, revealing unexpected connections between historical and contemporary music.

Multilingual Support

Currently, the site uses language-neutral concert content. All concerts are created in English only (content/en/work/performances/) and are visible across all language versions of the site.

Future: Fully Translated Concerts

To add translations for a concert:

1. Copy the entire concert folder to other language directories:

content/en/work/performances/2025-03-30-hong-kong-academy/   (English)
content/de/work/performances/2025-03-30-hong-kong-academy/   (German)
content/fr/work/performances/2025-03-30-hong-kong-academy/   (French)
content/zh-tw/work/performances/2025-03-30-hong-kong-academy/ (Traditional Chinese)
content/zh-cn/work/performances/2025-03-30-hong-kong-academy/ (Simplified Chinese)

2. Translate the content in index.md (title, description, program works if needed)
3. Keep the same date, venue, and media files
4. Images can be shared (Hugo will find them automatically)

Tips & Best Practices

Organizing Concerts

1. Use consistent folder naming: Always start with YYYY-MM-DD- for easy chronological sorting
2. Descriptive slugs: Use venue or city name in the slug for clarity
3. One folder per concert: Even for multi-day festivals, create separate entries for each performance

Image Preparation

1. Square crop carefully: Choose the most important part of the image for the 1:1 crop
2. Optimize before uploading: Use tools like Photoshop, GIMP, or online compressors
3. Consider mobile: Images should look good at small sizes too
4. File size matters: Keep images under 500KB for fast loading

Writing Concert Descriptions

1. First paragraph = excerpt: The first 150-200 characters appear on the list page
2. Be concise but engaging: Focus on what makes this concert special
3. Include context: Mention collaborations, anniversaries, or special programs
4. Use markdown formatting: Bold for emphasis, italics for work titles

Date and Time

1. Always include timezone: This ensures correct automatic sorting
2. Use local venue time: Don’t convert to your timezone
3. 24-hour format: Use 19:30:00 not 7:30 PM
4. Unknown time?: Use T19:30:00 as a sensible default

Testing Your Changes

After adding a concert:

1. Save all files
2. Hugo dev server automatically rebuilds (if running)
3. Check http://localhost:1313/en/work/performances/
4. Verify the concert appears in the correct section (upcoming or past)
5. Click through to the detail page to ensure all fields render correctly
6. Test responsive design (resize browser or use mobile device)

Troubleshooting

Concert doesn’t appear

• Check the date format is correct (ISO 8601)
• Ensure index.md exists (not concert.md or other name)
• Verify the file is in the correct directory: content/en/work/performances/

Image not showing

• Ensure image is named featured.jpg or featured.png (case-sensitive)
• Check image is in the same folder as index.md
• Verify image file is not corrupted

Wrong section (upcoming vs. past)

• Check the date is in the future or past relative to today
• Verify timezone offset is included in the date
• Remember: Hugo uses UTC internally, so timezone matters!

Videos not embedding

• Use full YouTube URL format
• Check URL is correctly formatted (no typos)
• Ensure URL is in quotes in YAML

Questions?

For more information about Hugo page bundles, see:

• Hugo Page Bundles: https://gohugo.io/content-management/page-bundles/
• Hugo Image Processing: https://gohugo.io/content-management/image-processing/

For website-specific questions, refer to the main CLAUDE.md documentation.