Front Matter Guide for The Sprout Fund Website

This guide explains how the website uses YAML front matter in markdown files to control page rendering through Liquid templates. The architecture separates content (front matter) from presentation (Liquid templates), enabling consistent, maintainable page structures.

Table of Contents

Overview

The Sprout Fund website uses a data-driven templating system where:

  1. Content lives in YAML front matter within markdown files (program/*.md)
  2. Structure is defined by Liquid templates (_layouts/*.html, _includes/**/*.html)
  3. Project data is pulled from _data/grants.csv and linked via grant-id references

This separation allows:

Architecture

File Structure

program/
├── community-connections.md    # Content (front matter only)
├── 100-days.md                 # Content (front matter only)
└── ...

_layouts/
└── program.html                # Page structure

_includes/
└── page_parts/
    ├── cover.html              # Hero section
    ├── introduction.html       # Context + sidebar
    ├── context.html            # Program description
    ├── by-the-numbers.html     # Statistics sidebar
    ├── video.html              # Video section
    ├── highlights.html         # Main content sections
    ├── highlight_feature.html  # Individual project cards
    └── acknowledgements.html   # Supporters/staff

_data/
└── grants.csv                  # Project database

Program Layout Template

The program layout (_layouts/program.html) includes these sections in order:


<section class="switchable switchable--switch bg--secondary">
  <div class="container">
    <div class="row justify-content-between">
      <div class="col-md-8 col-lg-7">
        
      </div>
      <div class="col-md-4 col-lg-3"></div>
    </div>
  </div>
</section>

Each include reads specific front matter fields and renders them accordingly.

Program Page Front Matter Reference

Required Fields

layout: program                # Must be "program" for program pages
title: "Program Name"          # Page title (used in <h1>, <title>, etc.)
subtitle: "Brief description"  # Subtitle displayed on cover
description: "Full desc"       # Meta description (SEO, social sharing)

Optional Core Fields

logo: "/logos/program-name.png"           # Program logo (shown in sidebar)
superprogram: "Community" | "Learning"    # Category grouping
program: "Short Name"                     # Program identifier
keywords: "keyword1, keyword2"            # SEO keywords (comma-separated)
years: 2017                               # Single year
years:                                    # Or multiple years
  - 2007
  - 2008
  - 2009
redirect_from:                            # Legacy URL redirects (jekyll-redirect-from)
  - /old-url
  - /another-old-url

Cover Image Section

Displays full-screen hero image with overlay text.

Front Matter:

cover-image:
  source: "/photos/covers/program.jpg"    # Required: image path
  caption: "Main caption text"            # Required: photo caption
  subcaption: "Additional context"        # Optional: secondary caption
  credit: "photo: Photographer Name"      # Optional: photo credit

Template: _includes/page_parts/cover.html

Maps to:

page.cover-image.source      → Background image
page.title                   → Main <h1> heading
page.subtitle                → <h3> subtitle
page.cover-image.caption     → <h5> in bottom overlay
page.cover-image.subcaption  → <span> next to caption
page.cover-image.credit      → Fine print after subcaption

Video Section

Full-width video player with modal popup.

Front Matter:

video:
  url: "https://www.youtube-nocookie.com/embed/VIDEO_ID?rel=0&controls=1&showinfo=0&autoplay=1"
  thumbnail: "/photos/video_thumbnails/program.jpg"
  title: "Video Title"                    # Can include <em> tags
  caption: "Description of video content"
  duration: "5 minutes"

Template: _includes/page_parts/video.html

Renders: Full-screen section with thumbnail background, modal video player, watch button, and duration indicator.

Context Section

Program description and history, displayed in the left column of the introduction section.

Front Matter:

context:
  heading: "Section Heading"
  details:
    - "First paragraph of program description."
    - "Second paragraph with more details."
    - "Each array item becomes a separate <p> tag."
    - "Can include <em>HTML</em> formatting within strings."

Template: _includes/page_parts/context.html

Maps to:

page.context.heading  → <h2>
page.context.details  → Array of <p class="lead"> paragraphs

By-the-Numbers Section

Statistics sidebar displayed in the right column of the introduction section.

Front Matter:

by-the-numbers:
  - heading: "Years Active"
    data: "2007–2009"
  - heading: "Total Investment"
    data: "$982,000"
  - heading: "Funded Projects"
    data: "100"
  - heading: "Geography"
    data: "14 counties of Southwestern PA"
  - heading: "Linked Stat"              # Optional: with link
    data: "View Report"
    link: "local://downloads/report.pdf"  # or external URL

Template: _includes/page_parts/by-the-numbers.html

Link Handling:

Highlights Section

The main content area displaying project features, programmatic activities, or other structured content.

Structure:

highlights:
  - title: "Section Title"              # <h1> heading
    description:                        # Optional lead paragraphs
      - "Description paragraph 1"
      - "Description paragraph 2"
    sections:                           # Optional subsections
      - title: "Subsection Title"       # <h2> heading
        description:
          - "Subsection description"
        features:                       # Project cards or content blocks
          - [feature definition]
    features:                           # Or features directly in highlight
      - [feature definition]

Feature Types

1. Grant-based Feature (auto-populated from grants.csv)
features:
  - title: "Project Name"               # Optional: override project name
    grant-id: "PGH250-321"              # Required: matches grants.csv

Auto-populated from CSV:

Template: _includes/page_parts/highlight_feature.html (lines 19-43)

2. Manual Feature (with image, title, description)
features:
  - title: "Feature Title"
    image: "/photos/programs/program-name/photo.jpg"
    description: "Brief description shown on card."
    link: "local://downloads/document.pdf"  # Optional
3. Feature with Modal Details
features:
  - title: "Feature Title"
    image: "/photos/programs/program-name/photo.jpg"
    description: "Brief description shown on card."
    moretext: "Full detailed text shown in modal popup when card is clicked."

Behavior: Creates clickable card that opens modal with expanded content.

Highlight Styles

highlights:
  - title: "Projects"
    style: "big-features"               # Large layout: image + text side-by-side
    features: [...]

  - title: "Activities"
    # style: (default)                  # 3-column card grid
    features: [...]

  - title: "Quote Section"
    style: "big-text"                   # Centered large text, no features
    description:
      - "Large centered quote or statement"

Acknowledgements Section

Displays supporters, partners, and staff in a dark footer section.

Basic Structure:

acknowledgements:
  - title: "Supporters"
    items:
      - "Organization Name"
      - "Another Supporter"
      - "Person Name|Title/Org"         # Pipe separator for name|affiliation

  - title: "Partners"
    items:
      - "Partner Organization"

  - title: "Staff"
    items:
      - "<strong>Lead Name</strong>"    # HTML allowed
      - "Staff Member"
      - "Contractor Name|role"

Template: _includes/page_parts/acknowledgements.html

Advanced Layouts

Stacked Columns:

acknowledgements:
  - stacked:                            # Multiple sections in one column
      - title: "Partners"
        items: [...]
      - title: "Committee Co-Chairs"
        items: [...]

Divided Columns:

acknowledgements:
  - title: "Major Supporters"
    divided:                            # Split items into sub-columns
      - items: ["Org A", "Org B"]
      - items: ["Org C", "Org D"]

Custom Width:

acknowledgements:
  - title: "Supporters"
    width: "col-12 col-md-6"            # Bootstrap column classes
    items: [...]

Item Rendering:

Front Matter to Template Mapping

Complete Data Flow

program/community-connections.md
    ↓ (front matter parsed by Jekyll)
_layouts/program.html
    ↓ (includes page_parts)
_includes/page_parts/cover.html
    ↓ (accesses page.cover-image.*)
    ↓ (accesses page.title, page.subtitle)
Rendered HTML

Variable Access Patterns

In Templates:

Front Matter Guide for The Sprout Fund Website                        # Direct field access
           # Nested object access
    # Array item access

Filter Usage

Common Liquid filters used in templates:

Front Matter Guide for The Sprout Fund Website             # Smart quotes, em dashes (Jekyll filter)
  # URL transformation
           # Create URL-safe slug
  # Convert newlines to <br>

Data Integration

Linking Front Matter to CSV Data

The highlight_feature.html include automatically pulls data from _data/grants.csv:

Front Matter:

highlights:
  - title: "Featured Projects"
    features:
      - title: "Optional Override Title"
        grant-id: "PGH250-321"          # Key reference to CSV

Liquid Processing:

CSV Columns Used:

Template Location: _includes/page_parts/highlight_feature.html:19-43

Data Fallback Chain

For grant-based features, the template uses this precedence:

  1. Front matter override (if specified)
  2. CSV data (from grants.csv)
  3. Default/empty (if neither available)

Example:

features:
  - grant-id: "PGH250-321"
    title: "Custom Title"               # Overrides CSV project-name
    # image: not specified              # Will use CSV photo column
    # description: not specified        # Will use CSV short-statement column

Examples

Example 1: Community Connections (Multi-Section Program)

File: program/community-connections.md

Key Features:

Front Matter Structure:

highlights:
  - title: "Funded Project Highlights"
    description: ["Overview paragraph"]
    sections:
      - title: "Regional Projects"          # Subsection
        description: ["$50k projects"]
        features:
          - title: "..."
            grant-id: "PGH250-321"          # Auto-populated from CSV

      - title: "Grassroots Projects"        # Subsection
        description: ["$5k projects"]
        features:
          - title: "..."
            grant-id: "PGH250-335"

  - title: "Programmatic Activities"
    description: ["Events overview"]
    features:
      - title: "Ideation Sessions"          # Manual feature
        image: "/photos/programs/community-connections/ideation.jpg"
        description: "Event description"

Template Logic:

Example 2: 100 Days (Single-Section Program)

File: program/100-days.md

Key Features:

Front Matter Structure:

years: 2017                                 # Single value (vs. array)

by-the-numbers:
  - heading: "Crowdfunding Raised"
    data: "$14,846 from 250 donors"         # Multi-part data in one string

highlights:
  - title: "Funded Project Highlights"
    description: ["Projects represented 12 issue areas..."]
    features:                               # Features directly in highlight
      - title: "#PGHYouthVision"
        grant-id: "3119-100DAYS"

  - title: "Community Events"
    description: []                         # Empty description
    features:
      - title: "Applicant Support"
        image: "/photos/programs/100-days/applicant-support.jpg"
        description: "Support description"

Example 3: Feature Rendering Variations

3-Column Card Grid (Default):

highlights:
  - title: "Projects"
    features:
      - grant-id: "ABC-123"     # Clickable card with modal
      - grant-id: "ABC-124"     # 3 cards per row
      - grant-id: "ABC-125"
      - grant-id: "ABC-126"     # Next row

Renders: Cards in col-md-4 Bootstrap columns (3 per row)

Big Features Layout:

highlights:
  - title: "Major Initiatives"
    style: "big-features"
    features:
      - grant-id: "ABC-123"     # Full-width: image left, text right
      - grant-id: "ABC-124"     # Full-width: image right, text left (alternates)

Renders: Full-width sections with image and text side-by-side, alternating left/right

Text-Only Section:

highlights:
  - title: "Our Vision"
    style: "big-text"
    description:
      - "Large centered statement about the program's impact."
      - "Second paragraph of the vision statement."

Renders: Centered text section with no feature cards

Creating a New Program Page

Step-by-Step Guide

  1. Create markdown file: program/new-program.md

  2. Add minimal front matter:

---
layout: program
title: "New Program Name"
subtitle: "Brief description of the program"
description: "Full description for SEO and social sharing"
logo: "/logos/new-program.png"
superprogram: "Community"
program: "New Program"

cover-image:
  source: "/photos/covers/new-program.jpg"
  caption: "Photo caption"
  subcaption: "Photo context"
  credit: "photo: Photographer"

years: 2020

by-the-numbers:
  - heading: "Total Investment"
    data: "$100,000"
  - heading: "Funded Projects"
    data: "25"

context:
  heading: "Program Overview"
  details:
    - "First paragraph describing the program."
    - "Second paragraph with more background."

highlights:
  - title: "Funded Projects"
    description:
      - "Overview of the projects we supported."
    features:
      - grant-id: "PROG-001"
      - grant-id: "PROG-002"

acknowledgements:
  - title: "Supporters"
    items:
      - "Supporter Name"
  - title: "Staff"
    items:
      - "Staff Member"
---
  1. Build and preview: 
    bundle exec jekyll serve --config "_config.yml,_config_dev.yml" --livereload
  2. View at: http://localhost:4000/website_evergreen/program/new-program/

Tips

Common Patterns

No video: Simply omit the video: section entirely

No by-the-numbers: Omit by-the-numbers: section (logo will display instead if present)

External links in features:

features:
  - title: "External Resource"
    image: "/photos/resource.jpg"
    description: "Description"
    link: "https://external-site.com/page"    # Opens in new tab with icon

Download links in features:

features:
  - title: "Program Report"
    image: "/photos/report-cover.jpg"
    description: "Download our final report"
    link: "local://downloads/program-report.pdf"  # Download icon, new tab

Multi-level nesting:

highlights:
  - title: "Main Section"                   # <h1>
    sections:
      - title: "Subsection A"               # <h2>
        features: [...]
      - title: "Subsection B"               # <h2>
        features: [...]
  - title: "Another Section"                # <h1>
    features: [...]

Advanced Topics

Custom Includes

You can reference custom include files within highlights:

highlights:
  - include_file: "custom/special-section.html"

Template check: _includes/page_parts/highlights.html:2-5

Modal Content

Features with moretext automatically become clickable modals:

features:
  - title: "Project Name"
    image: "/photos/project.jpg"
    description: "Brief description on card"
    moretext: "Full detailed text in modal popup"

Template: _includes/page_parts/highlight_feature.html:92-130

Video in Highlights

Individual highlights or sections can have embedded videos:

highlights:
  - title: "Project Showcase"
    video: "https://www.youtube-nocookie.com/embed/VIDEO_ID"
    description: ["Video description"]

Renders: Section title becomes clickable to open video modal

Template: _includes/page_parts/highlights.html:35-43, 85-93

Background Color Alternation

Highlights sections automatically alternate background colors using Liquid’s cycle tag:

<section class="bg--white">

This creates visual separation between sections without configuration needed.

Troubleshooting

Common Issues

Front matter not rendering:

Images not showing:

Grant features not loading:

Modal not opening:

Acknowledgements formatting wrong:

Debugging Tips

  1. Enable development mode: 
    JEKYLL_ENV=development bundle exec jekyll serve --config "_config.yml,_config_dev.yml"

  2. View feature slugs: In development mode, feature slugs appear at bottom of modals

  3. Check generated HTML: 
    open _site/program/program-name/index.html
  4. Validate front matter: 
    ruby -ryaml -e "puts YAML.load_file('program/program-name.md')"
  5. Test specific includes: Temporarily comment out includes in _layouts/program.html to isolate issues

Additional Resources

Summary

The Sprout Fund website’s front matter system provides:

By understanding the mapping between front matter fields and Liquid template variables, you can create rich, consistent program pages without writing HTML.