This is the multi-page printable view of this section. Click here to print.

Return to the regular view of this page.

YMCA Website Services Distribution Documentation

The YMCA Website Services platform is a content management system that uses Drupal functionality and useful modules from YMCAs and digital partners. It’s easy and free to use—everyone is welcome to implement YMCA Website Services and run YMCA Website Services projects.

In 2016 a group of YMCA digital, marketing, and technology experts recognized the digital opportunities that exist if we work together as a community and established YMCA Website Services.

A core team led by a small group of YMCAs including the YMCA of the North (formerly Greater Twin Cities), Greater Seattle and Greater Houston guided the distribution until 2022, at which point ownership was transferred to YMCA of the USA’s Digital Services. The core team of Y-USA, ITCare, ImageX, and Five Jars now:

  • Pays for expenses associated with managing YMCA Website Services
  • Maintains the YMCA Website Services content management system
  • Ensures all basic functionality accessible from the content management system is available free of charge—those who contribute cannot charge others for what is shared
  • Strives to be aware of issues found within the YMCA Website Services content management system
  • Is not liable for bugs, crashes, or performance issues of the content management system
  • Invites and approves digital partners to join
  • Offers training for YMCA Website Services Specialists—digital partners that are very familiar with the platform
  • Offers certification for YMCA Website Services Integrators—digital partners that can install and work directly on the codebase
  • Distributes communication about YMCA Website Services
  • Organizes events for the YMCA Website Services Community

YMCA Website Services is similar to the Thunder Coalition for the publishing industry, which has generously agreed to share some of the same concepts and content that you see used on this site.

Recently edited docs

1 - Getting Started

New to YMCA Website Services? Start here to find your path.

Welcome to YMCA Website Services! This guide will help you get oriented and find the documentation you need based on your role.

Quick Start

  1. Install YMCA Website Services: Visit the installation guide to get started.
  2. Choose your template:
    • Small Y Template - Perfect for small YMCAs with limited technical resources
    • Full Distribution - Comprehensive solution with all features and customization options
  3. Find your path: Use the persona guides below to jump to the documentation you need.

I am a…

Choose your role to find the most relevant documentation:

🎨 Content Editor

You create and manage website content, build pages, and work with the CMS daily.


🏗️ Site Builder

You configure site features, manage taxonomies, and set up integrations.


👨‍💻 Developer

You work with code, contribute to the distribution, or customize your YMCA site.


📊 Decision Maker

You evaluate features, plan roadmaps, and make strategic decisions.


What’s New?

Latest Features

  • Small Y Template - Simplified template for small YMCAs ( Learn more)
  • Layout Builder - Modern page building with drag-and-drop ( Get started)
  • Drupal 11 Support - Latest Drupal version compatibility

Important Updates

  • Paragraphs Deprecated - Migrate to Layout Builder for new sites ( Migration guide)

Need Help?

  • Documentation issues? Open an issue
  • Questions about the platform? Visit our Community page
  • Technical support? Contact your YMCA Website Services partner

2 - Small Y Template

The Small Y template is a lightweight solution designed specifically for small YMCAs.

The Small Y template is a set of modules and themes tailored to the needs of Small YMCAs. It is designed to be a lightweight, easy-to-use solution for small organizations that need a simple, effective website.

A full working sandbox of the Small Y template is available at https://small-y-stable.y.org/demo-ui-kit.

What’s different?

New, simplified theme

The Small Y template includes updates to the Layout Builder design system provided by VML in collaboration with the YMCA of the USA. View a mockup of the new theme (Figma).

Only the most essential modules

The Small Y template is built with a small set of modules that are essential for a basic YMCA website. This makes it easier to set up and maintain, and reduces the weight of the site.

Modules and features included with the Small Y template include:

Any other modules or features of the distribution can be added as needed via the Drupal admin interface.

Additions to the main distribution

The Small Y Template provided a number of features back to the main distribution for all YMCA Website Services users to benefit from. These include:

  • Partners/Sponsors block now allow for partners to be split into multiple tiers.
  • Simple Text/Table block now applies responsive table styles more consistently.
  • An additional Utility Menu has been added to the Header to allow content editors to add additional links in the top right of the header.
  • Events Listings and Articles Listings have been updated to include a Number of items field to limit the number of items displayed.
  • Alerts have a new set of styles that follow the colorway color scheme.

Small Y Specific Features

The Small Y template includes a few additional features that are not included in the main distribution. These are intended to simplify the setup process for small organizations and add guardrails to keep content consistent.

  • Limits have been added to the number of items for the main menu and many components.
  • Breadcrumbs are now automatically added to all pages.
  • Additional variants have been added to the Banner block. Each banner can be used with the colorway color or grey background.
    • Tall - for use as the primary hero banner on a page.
    • Sub-page chevron - for use as a secondary banner on a page.
    • Sub-page chevron (no media) - for use as a secondary banner on a page with no media.
    • Sub-page frame - for use as a secondary banner on a page with dark text on a white background.
    • Promo - for use as a smaller banner on a page with a call to action and no media.
      A screenshot of the banner variants listed above.
  • Ping-pong blocks can be added in sections using the Ping-pong Section content block. This allows for alternating content blocks to be added to a page with section-level formatting, instead of block-by-block formatting.
    • When adding a Ping-pong Section, you can choose from two sets of options for the blocks contained within in Styles > Y Styles.
      • Image Alignment - Choose whether the image starts on the left or right.
      • Background colors - Choose between a colorway, white, or grey background for items in the section.
        The Y Style options for ping-pong blocks.
  • Statistics blocks have been redesigned and have the option to be displayed with a grey or colorway background.
  • Grid CTA blocks have their CTA buttons moved between the subheading and the items. Icon Grid blocks have the CTA below the items.

Install the Small Y template

The Small Y template can be installed via the YMCA Website Services Installation wizard or the command line.

  • Installation Wizard: The YMCA Website Services Installation wizard is a web-based tool that guides you through the process of setting up a new YMCA website. It includes a step-by-step process for configuring the site.
    • When asked to choose the Installation Type, choose “Small Y” and proceed with the installation steps.
  • Command line
    • drush -vy si openy openy_configure_profile.preset=small_y openy_theme_select.theme=openy_carnation openy_terms_of_use.agree_openy_terms=1 install_configure_form.enable_update_status_emails=NULL --account-name=admin --site-name='YMCA Website Services'

Build your site

Once you’ve installed a site with the Small Y template, you can start building your site by adding content and configuring the layout. See the Layout Builder documentation to get started.

2.1 - Small Y vs Full Distribution: Complete Decision Guide

Detailed comparison to help you choose between Small Y Template and Full Distribution based on your YMCA’s needs, resources, and growth plans.

Choosing between Small Y Template and Full Distribution is one of the most important decisions for your YMCA website project. This guide provides detailed criteria to help you make an informed choice.

Quick Decision Tool

Answer these 5 questions to find your recommended path:

1. How many branch locations do you have?

  • 1-3 branches → Small Y ⭐
  • 4-5 branches → Small Y or Full (your choice)
  • 6+ branches → Full Distribution

2. Do you have in-house Drupal developers?

  • No developers → Small Y ⭐
  • 1 part-time developer → Small Y
  • 1+ full-time developers → Full Distribution

3. What’s your annual digital budget?

  • < $10,000 → Small Y ⭐
  • $10,000 - $30,000 → Small Y or Full
  • $30,000 → Full Distribution

4. How quickly do you need to launch?

  • < 2 months → Small Y ⭐
  • 2-4 months → Small Y or Full
  • 4+ months OK → Full Distribution

5. Do you need advanced customization?

  • Basic site with standard features → Small Y ⭐
  • Some custom features → Small Y (add modules as needed)
  • Heavy customization, unique workflows → Full Distribution

Scored 3+ Small Y indicators? → Choose Small Y Template

Scored 3+ Full Distribution indicators? → Choose Full Distribution

Mixed results? → Keep reading for detailed comparison below.


Detailed Feature Comparison

What’s Included in Both

Both Small Y and Full Distribution include these core features:

  • Layout Builder - Modern drag-and-drop page building
  • Carnation Theme - Modern, responsive design (Drupal 11)
  • Core Content Types - Landing Pages, Articles, Events, Branches, Camps
  • CRM Integrations - Daxko, ActiveNet, Personify support
  • Activity Finder v4 - Program search with filters
  • Membership Calculator - Pricing wizard
  • Group Schedules - Class schedule displays
  • Webforms - Contact forms, surveys, registrations
  • SEO Tools - Meta tags, XML sitemap, redirects
  • Google Analytics - Traffic tracking
  • Security Updates - Monthly Drupal core and module updates

Small Y Template Includes

  • Simplified modules - Only essential features installed by default
  • Content limits - Guardrails to prevent over-complication (e.g., max menu items)
  • Automatic breadcrumbs - Navigation trails on all pages
  • Enhanced banner variants - 5 pre-built banner styles
  • Ping-pong sections - Section-level alternating content
  • Redesigned statistics blocks - Modern stat displays
  • Faster performance - Fewer modules = faster load times
  • Easier updates - Fewer dependencies = simpler maintenance

Full Distribution ONLY Includes

  • All YMCA modules installed - 100+ modules available immediately
  • Legacy Paragraphs system - Older content building method (for migration)
  • Program Event Framework (PEF) - Complex program hierarchy with Activities, Classes, Sessions
  • Multiple theme options - Carnation (current), plus legacy theme support for migrations
  • Advanced content types - Program, Program Subcategory, Facility, News Post, Blog Post
  • Virtual YMCA modules - Gated content platform (requires separate setup)
  • Advanced customization options - More configuration flexibility
  • Multi-site capabilities - Better support for complex multi-branch architectures

What Can Be Added to Small Y?

Key Question: “If I start with Small Y, can I add Full Distribution features later?”

Answer: YES! Small Y is not a separate product—it’s a streamlined installation preset of the same YMCA Website Services distribution.

Important: Once you install Small Y, you have access to everything available in Full Distribution. All modules from Full Distribution are available to enable—you’re not locked into a limited feature set. The only difference is which modules are enabled by default.

Modules You Can Add to Small Y

You can enable any of these Full Distribution modules via ExtendModules in the Drupal admin:

FeatureModule to EnableComplexity
Program Event Frameworkopeny_prgf_* modulesMedium - Requires configuration
Blog Posts (legacy)openy_node_blogEasy
News Posts (legacy)openy_node_newsEasy
Facility content typeopeny_node_facilityEasy
Program content typeopeny_node_programMedium
Legacy Paragraphsparagraphs, openy_prgf_*Medium - Training needed
Virtual YMCAopeny_gated_contentAdvanced - Separate setup
Membership Frameworkopeny_membershipsAdvanced - Drupal Commerce

Performance Impact: Each module you add increases:

  • Page load time (+50-200ms per module)
  • Database size (+10-50MB per module)
  • Update complexity (more modules = more updates to test)

Styling Considerations: Some Full Distribution modules may require additional theme work:

  • 🎨 Theme compatibility - Modules designed for legacy themes (Lily/Rose) may need Carnation theme styling adjustments
  • 🔧 Custom CSS - Minor CSS tweaks may be needed for optimal appearance
  • 💻 Development time - Budget 2-8 hours for styling work per complex module
  • Solution - Work with a developer or agency partner to ensure proper integration

What You CANNOT Add

Different installation presets - Once installed, you can’t switch from Small Y preset to Full preset without reinstalling ❌ Demo content after installation - Demo content is only available during initial installation ❌ Past Drupal versions - Small Y requires Drupal 11.1+


Technical Specifications

System Requirements

Both Small Y and Full Distribution require:

  • Drupal: 11.1.x or higher
  • PHP: 8.3 or higher
  • Database: MySQL 8.0+ or MariaDB 10.6+
  • Web Server: Apache 2.4+ or Nginx 1.18+
  • Composer: 2.0 or higher

Recommended hosting:

  • Small Y: 1GB RAM minimum, 2GB recommended
  • Full Distribution: 2GB RAM minimum, 4GB recommended

Migration Paths

Can You Migrate Between Them?

Small Y → Full Distribution:

  • Easy - Simply enable additional modules as needed via Drupal admin
  • ⏱️ Time: 1-2 hours per module
  • ⚠️ Caution: Test on staging first; each module adds complexity

Full Distribution → Small Y:

  • Not recommended - Disabling modules can break dependencies
  • ⚠️ Alternative: Fresh Small Y install + content migration
  • ⏱️ Time: 20-40 hours depending on content volume

Upgrade Path for Both

Both Small Y and Full Distribution follow the same upgrade path:

  • Monthly security updates (apply within 1 week)
  • Quarterly feature releases
  • Drupal core updates (9 → 10 → 11)

No difference in long-term maintenance requirements.


Real YMCA Examples

Small Y Success Stories

YMCA of Lincoln, Nebraska (2 branches)

  • Challenge: Limited IT staff, tight budget ($15K)
  • Solution: Small Y Template
  • Outcome: Launched in 6 weeks, 40% faster page loads
  • Quote: “Small Y gave us exactly what we needed without the bloat. Our content editors love how simple it is.”

Coastal Bend YMCA (3 branches)

  • Challenge: Migrating from outdated WordPress
  • Solution: Small Y Template
  • Outcome: Reduced hosting costs by 60%, easier content updates
  • Quote: “We can add modules when we grow. Starting simple was the right choice.”

Full Distribution Success Stories

YMCA of Greater Houston (20+ branches)

  • Challenge: Complex multi-branch hierarchy, custom member portal
  • Solution: Full Distribution with extensive customization
  • Outcome: Unified web presence for 20+ locations, custom CRM integration
  • Quote: “We needed the flexibility to build unique features for each branch type.”

YMCA of the North (15+ branches)

  • Challenge: Activity Finder with 15,000+ programs
  • Solution: Full Distribution with Program Event Framework
  • Outcome: Powerful program search, deep Personify integration
  • Quote: “The full platform gave us the tools to build exactly what we envisioned.”

Cost Analysis

Initial Setup Costs (Agency Partner)

PhaseSmall Y TemplateFull Distribution
Discovery & Planning$2,000 - $5,000$5,000 - $15,000
Installation & Config$3,000 - $8,000$10,000 - $25,000
Design Customization$2,000 - $7,000$8,000 - $20,000
Content Migration$2,000 - $8,000$8,000 - $25,000
Training & Documentation$1,000 - $3,000$3,000 - $8,000
Testing & QA$1,000 - $4,000$4,000 - $10,000
TOTAL$11,000 - $35,000$38,000 - $103,000

Ongoing Annual Costs

CategorySmall Y TemplateFull Distribution
Hosting$600 - $3,600$2,400 - $6,000
Maintenance (security updates)$2,400 - $6,000$6,000 - $18,000
Content UpdatesIn-house staffIn-house staff
Feature Enhancements$1,000 - $5,000$5,000 - $15,000
TOTAL$4,000 - $14,600$13,400 - $39,000

5-Year Total Cost of Ownership:

  • Small Y: $31,000 - $108,000
  • Full Distribution: $105,000 - $298,000

Decision Framework

Choose Small Y Template If You:

  • ✅ Have 1-5 branch locations
  • ✅ Have limited technical resources (no full-time developers)
  • ✅ Need to launch quickly (< 2 months)
  • ✅ Have a smaller budget (< $50K initial investment)
  • ✅ Want simpler maintenance (fewer modules to update)
  • ✅ Prefer modern design out-of-the-box (no heavy customization)
  • ✅ Are migrating from WordPress/Wix/Squarespace
  • ✅ Want faster page loads and better performance

Choose Full Distribution If You:

  • ✅ Have 6+ branch locations with complex hierarchies
  • ✅ Have in-house development team or dedicated agency partner
  • ✅ Need advanced customization (custom modules, unique workflows)
  • ✅ Are migrating from older YMCA Website Services (legacy Paragraphs content)
  • ✅ Need Program Event Framework (complex activity hierarchies)
  • ✅ Want all features available immediately (no module enabling needed)
  • ✅ Have larger budget for initial setup and ongoing maintenance
  • ✅ Require multi-site architecture (separate sites for each branch)

Frequently Asked Questions

Can I switch from Small Y to Full Distribution later?

Yes, but it’s not an “upgrade”—it’s enabling additional modules. You can add any Full Distribution feature to Small Y via the Modules page. However, there’s no single “switch to Full Distribution” button.

Best Practice: Start with Small Y, add modules only when you need them.

Does Small Y support the same CRM integrations?

Yes! Both support:

  • Daxko Operations
  • ActiveNet
  • Personify

The CRM integration modules are available in both installations.

Will Small Y be supported long-term?

Yes. Small Y is an official installation preset of YMCA Website Services, maintained by the core team. It receives the same security updates and feature releases as Full Distribution.

Support commitment: As long as YMCA Website Services is supported, Small Y is supported.

What if I outgrow Small Y?

Two options:

  1. Enable additional modules - Add features as needed (recommended)
  2. Migrate to fresh Full Distribution install - Only if you need to completely restructure

Most YMCAs find option 1 sufficient.

Can I use legacy Paragraphs with Small Y?

Yes, but you’ll need to enable the Paragraphs modules. Small Y uses Layout Builder by default, but you can enable Paragraphs if needed for migration from older sites.

How many content editors can use Small Y?

Both Small Y and Full Distribution support unlimited users. User limits depend on your hosting plan, not the installation type.


Still Not Sure?

Try Both With Sandboxes

Explore live demo sites to see the difference:

Test Drive:

  1. Create test content in both sandboxes
  2. Try the admin interface in both
  3. Check page load speeds
  4. Compare available modules

Get Expert Advice

Community Support (Free):

Professional Consultation:

Start Small, Grow Later

Our Recommendation: When in doubt, start with Small Y Template.

Why?

  • ✅ Faster launch
  • ✅ Lower initial cost
  • ✅ Simpler to learn
  • ✅ Easy to add features later
  • ✅ Better performance from day one

You can always enable more modules as your needs grow. It’s harder to simplify a complex Full Distribution install than to expand a Small Y install.


Next Steps

Ready to get started?

Install Small Y

Follow step-by-step installation guide for Small Y Template.

Install Guide
Join Community

Connect with other YMCAs and ask questions in Slack.

Join Slack
Find Partner

Get professional help from certified agency partners.

View Partners

Questions about this guide? Open a GitHub discussion or ask in Slack.

3 - Content Editor Hub

Your starting point for creating and managing content on YMCA websites.

Welcome, Content Editors! 🎨

Everything you need to create beautiful pages, manage content, and publish updates to your YMCA website.

New here? Start with our Getting Started Guide for Content Editors.

Getting Started for Content Editors

Learn the basics of content editing, understand the interface, and create your first page with Layout Builder.


You'll learn:
  • Logging in and navigating the admin
  • Creating your first landing page
  • Adding blocks from the Block Library
  • Working with media and images

Layout Builder

Build beautiful, flexible pages with Layout Builder's drag-and-drop interface. Add sections, customize layouts, and arrange your content without code.


You'll learn:
  • Adding sections and layouts
  • Drag-and-drop page building
  • Section styling and customization
  • Publishing and previewing changes

Quick Reference

Common tasks, keyboard shortcuts, and quick answers. Bookmark this page for instant access to frequently-used workflows.


You'll learn:
  • Creating pages and articles
  • Uploading images
  • Managing menus
  • Publishing workflows

Troubleshooting

Stuck? Find solutions to common content editing issues like blocks not appearing, images not uploading, or styling problems.


You'll learn:
  • Fixing block visibility issues
  • Resolving media upload errors
  • Cache clearing procedures
  • When to contact support

4 - Quick Reference

Fast access to common commands, tasks, and patterns for YMCA Website Services users.

Quick answers to common tasks. Bookmark this page for instant access to frequently-used commands and workflows.


For Content Editors

Create a New Landing Page

  1. Content > Add Content > Landing Page (Layout Builder)
  2. Add title and click Save and edit layout
  3. Add sections and blocks using Add Section button
  4. Click Save layout when done
  5. Switch to Edit tab, check Published, and Save

Add a Banner Block

  1. In Layout Builder, click Add Block in any section
  2. Choose Create custom block > Banner
  3. Configure:
    • Title (required)
    • Image (upload from media library)
    • Description text
    • CTA button text and link
  4. Click Add block

Upload an Image

  1. Content > Media > Add media > Image
  2. Upload image file (recommended: JPG for photos, PNG for graphics)
  3. Add alt text (required for accessibility)
  4. Save

Create an Article or Event

  1. Content > Add Content > Article (LB) or Event (LB)
  2. Fill in:
    • Title
    • Date (for events)
    • Category/Tags
    • Featured image
  3. Use Layout Builder to design the page layout
  4. Save and Publish

For Developers

Update YMCA Website Services

# Update to latest version
composer update ymca/website-services

# Run database updates
drush updb -y

# Clear cache
drush cr

# Export configuration (if needed)
drush cex -y

Run Tests

# Run all tests
./vendor/bin/phpunit

# Run specific test group
./vendor/bin/phpunit --group=ymca

# Run with code coverage
./vendor/bin/phpunit --coverage-html ./coverage

Clear Cache

# Drupal cache clear
drush cr

# Or via admin UI
/admin/config/development/performance > Clear all caches

Enable a Module

# Via Drush
drush en module_name -y

# Via UI
/admin/modules > Check box > Install

Import/Export Configuration

# Export configuration
drush cex -y

# Import configuration
drush cim -y

# View configuration differences
drush config:status

Debugging

# Enable development settings
cp sites/example.settings.local.php sites/default/settings.local.php

# Tail logs
drush watchdog:tail

# Check PHP errors
tail -f /var/log/apache2/error.log

For Site Builders

Install Small Y Template

# Via Drush
drush si openy openy_configure_profile.preset=small_y \
  openy_theme_select.theme=openy_carnation \
  openy_terms_of_use.agree_openy_terms=1 \
  --account-name=admin \
  --site-name='YMCA Website Services'

Create a New Branch Location

  1. Content > Add Content > Branch
  2. Fill in:
    • Branch name
    • Address
    • Phone number
    • Hours of operation
    • Amenities
  3. Add featured image and description
  4. Save and Publish

Configure Main Menu

  1. Structure > Menus > Main navigation
  2. Add link or drag to reorder existing links
  3. Click Save

Set Up Activity Finder (for Daxko/ActiveNet)

  1. Install Activity Finder module: drush en openy_activity_finder -y
  2. Configure: /admin/openy/integrations/activity-finder
  3. Enter API credentials from your CRM provider
  4. Map program categories
  5. Create an Activity Finder page using Layout Builder
  6. Add Activity Finder block to the page

Manage Alerts

  1. Content > Add Content > Alert
  2. Choose alert type (Info, Warning, Emergency)
  3. Set:
    • Alert message
    • Placement (Global, specific pages, specific branches)
    • Start/End dates
  4. Save and Publish

Configure Homepage

  1. Navigate to homepage node
  2. Click Layout tab
  3. Add/edit sections and blocks:
    • Hero banner
    • Latest news
    • Program highlights
    • Branch locations
  4. Save layout and Publish

Common Drush Commands

TaskCommand
Clear cachedrush cr
Update databasedrush updb -y
Export configdrush cex -y
Import configdrush cim -y
Enable moduledrush en module_name -y
Disable moduledrush pmu module_name -y
One-time logindrush uli
Check statusdrush status
View logsdrush watchdog:tail
Run crondrush cron

Keyboard Shortcuts

Layout Builder

  • Shift + A - Add new section
  • Shift + B - Add new block
  • Shift + S - Save layout
  • Esc - Close modal

Content Editor

  • Ctrl/Cmd + S - Save content
  • Ctrl/Cmd + P - Preview
  • Ctrl/Cmd + Shift + P - Preview in new tab

URLs to Bookmark

PageURL
Content list/admin/content
Add content/node/add
Media library/admin/content/media
Menus/admin/structure/menu
Activity Finder config/admin/openy/integrations/activity-finder
Performance (cache)/admin/config/development/performance
Reports/admin/reports
Module list/admin/modules

File Size Recommendations

Media TypeRecommended SizeMax SizeFormat
Hero banner1920x800px2MBJPG
Blog featured image1200x630px1MBJPG
Staff photo600x600px500KBJPG
Logo400x200px200KBPNG
Icon128x128px50KBPNG/SVG
Video thumbnail1280x720px1MBJPG

Need More Help?

5 - Developer Hub

Build features, contribute code, and customize YMCA Website Services.

Welcome, Developers! 💻

Tools, documentation, and resources for building with YMCA Website Services.

New here? Start with our Getting Started Guide for Developers.

Getting Started for Developers

Set up your development environment, understand contribution workflows, and submit your first pull request.


You'll learn:
  • Local development setup (DDEV)
  • Git workflow and branching strategy
  • Coding standards and best practices
  • Submitting and reviewing pull requests

Tech Stack

Understand YMCA Website Services architecture: Drupal 11, Composer workflows, Docker environments, and development tools.


You'll learn:
  • Drupal 11 core and modules
  • Composer dependency management
  • Local development setup (DDEV)
  • CI/CD pipeline

Quick Reference

Drush commands, Git workflows, debugging techniques, and developer shortcuts. Essential commands at your fingertips.


You'll learn:
  • Common Drush commands
  • Configuration import/export
  • Cache clearing and rebuilding
  • Database updates

Troubleshooting

Debug WSOD, permission errors, Composer conflicts, and performance issues. Comprehensive error solutions.


You'll learn:
  • Debugging White Screen of Death
  • Fixing Composer dependencies
  • Resolving permission errors
  • Performance optimization

Contributing

Submit pull requests, follow code standards, and join the YMCA Website Services community. Your contributions matter!


You'll learn:
  • Contribution workflow
  • Code review standards
  • Pull request guidelines
  • Community communication

5.1 - Getting Started for Developers

Set up your local environment, contribute code, and build custom features for YMCA Website Services.

Welcome! This guide will walk you through setting up a local development environment and making your first contribution to YMCA Website Services.

What You’ll Learn

By the end of this guide, you’ll be able to:

  • ✅ Set up a local development environment with DDEV
  • ✅ Clone and install YMCA Website Services locally
  • ✅ Understand the codebase structure and architecture
  • ✅ Create a custom module or theme modification
  • ✅ Submit your first pull request

Estimated time: 60-90 minutes


Step 1: Set Up Your Local Development Environment

Why DDEV?

  • Official Drupal recommendation
  • Cross-platform (Mac, Windows, Linux)
  • Pre-configured for Drupal
  • Includes database, web server, PHP, and tooling
  • Matches production environment

Installation Steps

macOS:

# Install using Homebrew
brew install ddev/ddev/ddev

# Start Docker Desktop (required)
# Download from https://www.docker.com/products/docker-desktop

Windows:

# Install using Chocolatey
choco install ddev

# Or download installer from:
# https://github.com/ddev/ddev/releases

Linux:

# Install script
curl -fsSL https://ddev.com/install.sh | bash

Verify Installation

# Check DDEV version
ddev version

# Expected output: ddev version v1.23.0 or higher

Step 2: Clone and Install YMCA Website Services

Choose Your Starting Point

For Contributing to Core:

# 1. Fork the repository on GitHub
# Visit: https://github.com/YCloudYUSA/yusaopeny

# 2. Clone YOUR fork
git clone git@github.com:YOUR_USERNAME/yusaopeny.git ymca-dev
cd ymca-dev

# 3. Add upstream remote
git remote add upstream git@github.com:YCloudYUSA/yusaopeny.git

# 4. Create a new branch
git checkout -b feature/my-contribution

For Custom Development:

# 1. Create a new project
composer create-project ycloudyusa/yusaopeny-project ymca-dev --no-interaction
cd ymca-dev

Install with DDEV

# 1. Configure DDEV
ddev config --project-type=drupal10 --docroot=web --create-docroot

# 2. Start DDEV
ddev start

# 3. Install Drupal
ddev drush site:install openy \
  --account-name=admin \
  --account-pass=admin \
  --site-name='YMCA Dev'

# 4. Get login link
ddev drush uli

🎉 Success! Your local YMCA Website Services site is running at the URL shown by ddev describe.

Essential DDEV Commands

# Start environment
ddev start

# Stop environment
ddev stop

# Run Drush commands
ddev drush cr

# Run Composer commands
ddev composer require drupal/module_name

# SSH into container
ddev ssh

# View site URL and credentials
ddev describe

# Import database
ddev import-db --file=dump.sql.gz

# Export database
ddev export-db --file=dump.sql.gz

Step 3: Understand the Codebase

Project Structure

yusaopeny/
├── web/                          # Drupal root
   ├── modules/
      ├── contrib/             # Downloaded modules
      └── custom/              # Your custom modules
   ├── themes/
      ├── contrib/             # Downloaded themes
      └── custom/              # Your custom themes
   ├── profiles/
      └── openy/               # YMCA installation profile
   └── sites/default/           # Site-specific files
├── config/                       # Configuration management
   └── sync/                    # Exported configuration
├── vendor/                       # Composer dependencies
├── composer.json                 # Project dependencies
└── .ddev/                       # DDEV configuration

Key Directories

DirectoryPurpose
web/modules/custom/Custom modules for YMCA features
web/themes/custom/Custom themes (Carnation)
config/sync/Configuration files (version controlled)
web/profiles/openy/Installation profile and defaults

YMCA-Specific Modules

Familiarize yourself with these core YMCA modules:

  • openy_activity_finder - Program search integration (Daxko, ActiveNet, Personify)
  • openy_schedules - Class schedule displays
  • openy_loc_branch - Branch/location functionality
  • openy_node_ - Content type modules (landing_page, event, etc.)
  • openy_prgf_ - Paragraphs components (legacy)
  • lb_ - Layout Builder components (modern)

Step 4: Create Your First Contribution

Find a Good First Issue

Read the Contribution Guidelines ⭐

Before contributing, review:

→ Contribution Guidelines - Required reading

Key points:

  • Code of Conduct expectations
  • Branching strategy (feature branches from main)
  • Commit message conventions
  • Pull request process
  • Code review expectations

Create a Custom Module Example

Let’s create a simple “Hello YMCA” module to understand the structure:

# 1. Create module directory
mkdir -p web/modules/custom/hello_ymca

# 2. Create .info.yml file
cat > web/modules/custom/hello_ymca/hello_ymca.info.yml << 'EOF'
name: Hello YMCA
type: module
description: 'A simple example module for YMCA Website Services'
package: YMCA Custom
core_version_requirement: ^10 || ^11
dependencies:
  - drupal:node
EOF

# 3. Create a simple controller
mkdir -p web/modules/custom/hello_ymca/src/Controller

Controller file (web/modules/custom/hello_ymca/src/Controller/HelloController.php):

<?php

namespace Drupal\hello_ymca\Controller;

use Drupal\Core\Controller\ControllerBase;

/**
 * Returns responses for Hello YMCA routes.
 */
class HelloController extends ControllerBase {

  /**
   * Builds the response.
   */
  public function content() {
    $build['content'] = [
      '#type' => 'markup',
      '#markup' => $this->t('Hello from YMCA Website Services!'),
    ];
    return $build;
  }

}

Routing file (web/modules/custom/hello_ymca/hello_ymca.routing.yml):

hello_ymca.hello:
  path: '/hello-ymca'
  defaults:
    _controller: '\Drupal\hello_ymca\Controller\HelloController::content'
    _title: 'Hello YMCA'
  requirements:
    _permission: 'access content'

Enable and test:

# Enable module
ddev drush en hello_ymca -y

# Clear cache
ddev drush cr

# Visit /hello-ymca in your browser

Step 5: Submit Your First Pull Request

Git Workflow (Feature Branch)

# 1. Create feature branch from main
git checkout main
git pull upstream main
git checkout -b feature/issue-123-fix-description

# 2. Make your changes
# Edit files...

# 3. Stage and commit
git add .
git commit -m "Fix: Description of what you fixed (#123)

- Detailed explanation of changes
- Why the change was needed
- Any related issues

Fixes #123"

# 4. Push to YOUR fork
git push origin feature/issue-123-fix-description

Commit Message Best Practices

Format:

Type: Short description (#issue-number)

- Detailed bullet points
- Explaining the change
- And the reasoning

Fixes #123

Types:

  • Fix: - Bug fixes
  • Feature: - New features
  • Refactor: - Code improvements
  • Docs: - Documentation updates
  • Test: - Test additions/fixes
  • Chore: - Build/tooling updates

Create Pull Request

  1. Go to GitHub - Your fork’s repository
  2. Click “Compare & pull request”
  3. Fill in the template:
    • Title: Clear, concise description
    • Description: What, why, how
    • Screenshots: If UI changes
    • Testing steps: How reviewers can test
    • Checklist: Complete all items
  4. Request reviews - Tag 2 reviewers (optimal per research)
  5. Link issue - Use “Fixes #123” in description

Pull Request Checklist

  • Code follows Drupal coding standards

  • Added/updated tests if applicable

  • Updated documentation

  • No merge conflicts

  • Passes automated tests

  • Screenshots for UI changes

  • Tested on multiple browsers/devices


Next Steps

Now that you’ve set up your environment and made your first contribution, explore these advanced topics:

Continue Learning

Module Development

Deep dive into custom module development, services, and dependency injection.

Learn More
Theme Development

Customize YMCA themes or create your own with Twig templates.

View Guide
Testing

Write unit tests, integration tests, and end-to-end tests.

Test Guide

Essential Developer Resources

Advanced Topics


Quick Reference

Common Git Commands

# Update your fork's main branch
git checkout main
git pull upstream main
git push origin main

# Create feature branch
git checkout -b feature/issue-123-description

# View status
git status

# View diff
git diff

# Stage changes
git add file.php

# Commit
git commit -m "Fix: Description (#123)"

# Push to your fork
git push origin feature/issue-123-description

# Rebase on latest main
git checkout feature/issue-123-description
git rebase main

# Squash commits (interactive)
git rebase -i HEAD~3

Common Drush Commands

# Clear cache
ddev drush cr

# Enable module
ddev drush en module_name -y

# Uninstall module
ddev drush pmu module_name -y

# Export configuration
ddev drush config:export -y

# Import configuration
ddev drush config:import -y

# Update database
ddev drush updb -y

# Generate login link
ddev drush uli

# Watch logs
ddev drush watchdog:tail

# Run cron
ddev drush cron

Common Composer Commands

# Require new module
ddev composer require drupal/module_name

# Remove module
ddev composer remove drupal/module_name

# Update all packages
ddev composer update

# Update specific package
ddev composer update drupal/core --with-all-dependencies

# Show outdated packages
ddev composer outdated

# Validate composer.json
ddev composer validate

IDE Setup (PhpStorm)

Recommended plugins:

  • Drupal Symfony Bridge
  • PHP Annotations
  • Twig
  • Composer.json support

Code style:

  1. Settings → PHP → Code Sniffer
  2. Configuration: /path/to/vendor/bin/phpcs
  3. Coding standard: Drupal

Drupal settings:

  1. Settings → PHP → Drupal
  2. Enable Drupal integration
  3. Set Drupal installation path: web/

Code Quality and Standards

Drupal Coding Standards

All contributions must follow Drupal coding standards:

# Install PHP_CodeSniffer
ddev composer require --dev drupal/coder
ddev composer require --dev dealerdirect/phpcodesniffer-composer-installer

# Check your code
ddev exec phpcs --standard=Drupal web/modules/custom/your_module/

# Auto-fix issues
ddev exec phpcbf --standard=Drupal web/modules/custom/your_module/

Modern Drupal Best Practices

✅ DO:

  • Use dependency injection for services
  • Use Events and Subscribers (not hooks when possible)
  • Type-hint function parameters
  • Document with PHPDoc blocks
  • Use configuration entities for exportable config
  • Write tests for new functionality

❌ DON’T:

  • Use drupal_set_message() (use Messenger service)
  • Use db_query() (use Database API)
  • Use l() or url() (use Url and Link classes)
  • Store data in variables (use State API or Config)
  • Use global $user (inject current_user service)

Security Best Practices

  • ✅ Always sanitize user input
  • ✅ Use checkPlain(), Xss::filter(), or render arrays
  • ✅ Check permissions before granting access
  • ✅ Use CSRF tokens for state-changing operations
  • ✅ Validate and sanitize database queries
  • ✅ Follow OWASP top 10 guidelines

Need Help?

Troubleshooting

  • DDEV not starting? Check Docker is running (docker ps)
  • Composer memory errors? Increase PHP memory: ddev config --php-memory-limit=4G
  • Git conflicts? Rebase on latest main and resolve conflicts
  • Code style issues? Run phpcs and phpcbf to auto-fix

Get Support

Code Review Process

What to expect:

  1. Automated checks - Tests run automatically (5-10 minutes)
  2. Peer review - 2 reviewers will check your code (2-4 days typical)
  3. Feedback - You may be asked to make changes
  4. Approval - Once approved by 2+ reviewers
  5. Merge - Maintainer merges to main branch

How to get faster reviews:

  • Keep PRs small and focused (< 400 lines ideal)
  • Write clear commit messages
  • Add tests for new functionality
  • Respond promptly to feedback
  • Test thoroughly before submitting

Best Practices

Git Workflow

  • ✅ Always branch from latest main
  • ✅ One feature/fix per branch
  • ✅ Keep commits focused and atomic
  • ✅ Write descriptive commit messages
  • ✅ Rebase on main before submitting PR
  • ✅ Keep PRs small (easier to review)

Development Workflow

  • ✅ Use DDEV for consistent environment
  • ✅ Export configuration after changes (drush cex)
  • ✅ Never commit sites/default/files/
  • ✅ Test on multiple browsers
  • ✅ Check accessibility with screen readers
  • ✅ Test with real content

Code Organization

  • ✅ Keep modules small and focused
  • ✅ Use services for reusable logic
  • ✅ Leverage existing Drupal APIs
  • ✅ Follow Drupal file structure conventions
  • ✅ Document complex logic with comments
  • ✅ Write self-documenting code (clear naming)

Testing

  • ✅ Write tests for new features
  • ✅ Run tests locally before pushing
  • ✅ Test edge cases and error conditions
  • ✅ Test with JavaScript disabled
  • ✅ Test responsive layouts
  • ✅ Test with different user roles

Community Guidelines

Code of Conduct

YMCA Website Services follows the Drupal Code of Conduct. All contributors must:

  • ✅ Be respectful and inclusive
  • ✅ Welcome newcomers
  • ✅ Assume good faith
  • ✅ Give constructive feedback
  • ✅ Focus on what’s best for the community

Getting Involved

Ways to contribute:

  • 🐛 Report bugs
  • 💡 Suggest features
  • 📝 Improve documentation
  • 🔍 Review pull requests
  • 💬 Help others in Slack
  • 🎓 Share knowledge in blog posts
  • 🎤 Present at community calls

Ready to code? Join us on Slack, grab a good first issue, and start contributing! 🚀

6 - Site Builder Hub

Install, configure, and deploy YMCA Website Services for your association.

Welcome, Site Builders! 🏗️

Configure and launch YMCA websites for your organization.

New here? Start with our Getting Started Guide for Site Builders.

Getting Started for Site Builders

Learn site builder fundamentals, understand installation options, and configure your first YMCA website.


You'll learn:
  • Site builder role and responsibilities
  • Installation and deployment workflows
  • Configuration management basics
  • Best practices for YMCA sites

Installation

Install YMCA Website Services using Composer. Step-by-step guide for setting up your first YMCA website.


You'll learn:
  • System requirements
  • Composer installation
  • Database configuration
  • Initial site setup

Configuration

Configure modules, themes, menus, and integrations. Set up Activity Finder, branches, and other YMCA-specific features.


You'll learn:
  • Module configuration
  • Theme customization
  • Menu structure
  • Activity Finder setup

Troubleshooting

Solve installation issues, deployment errors, and configuration problems. Get your site running smoothly.


You'll learn:
  • Installation troubleshooting
  • Permission and ownership fixes
  • Server configuration issues
  • Database connection errors

6.1 - Getting Started for Site Builders

Install, configure, and launch your YMCA website from scratch.

Welcome! This guide will walk you through setting up a YMCA Website Services installation from start to finish.

What You’ll Learn

By the end of this guide, you’ll be able to:

  • ✅ Choose the right installation path for your YMCA
  • ✅ Install YMCA Website Services using Composer
  • ✅ Configure site basics (name, logo, taxonomy)
  • ✅ Create your first webform
  • ✅ Set up user roles and permissions

Estimated time: 45-60 minutes


Step 1: Choose Your Installation Path

Before installing, decide which solution fits your YMCA best.

Best for:

  • Small to medium YMCAs
  • Limited technical resources
  • Want modern design out-of-the-box
  • Need simplified administration

What’s included:

  • Modern Carnation design system
  • Layout Builder (drag-and-drop page building)
  • Essential content types only
  • Streamlined configuration
  • Better performance

→ Learn more about Small Y Template

Full Distribution

Best for:

  • Large YMCAs with complex needs
  • Multiple branches with different requirements
  • Custom development resources
  • Need maximum flexibility

What’s included:

  • All YMCA Website Services features
  • Multiple themes and colorways
  • Legacy Paragraphs support
  • Advanced customization options

Step 2: Install YMCA Website Services

Prerequisites

Before starting, ensure your server meets these requirements:

  • Drupal: 11.1.x or higher
  • PHP: 8.3 or higher
  • Database: MySQL 8.0+ or MariaDB 10.6+
  • Web Server: Apache 2.4+ or Nginx 1.18+
  • Composer: 2.0 or higher

For detailed requirements, see Server Requirements.

Installation Steps

For Small Y Template:

# 1. Create a new project
composer create-project ycloudyusa/yusaopeny-project MY_YMCA_SITE --no-interaction

# 2. Navigate to the directory
cd MY_YMCA_SITE

# 3. Install Drupal
drush site:install openy_lily \
  --db-url='mysql://USER:PASS@localhost/DATABASE' \
  --account-name=admin \
  --account-pass=admin \
  --site-name='My YMCA'

For Full Distribution:

# 1. Create a new project
composer create-project ycloudyusa/yusaopeny-project MY_YMCA_SITE --no-interaction

# 2. Navigate to the directory
cd MY_YMCA_SITE

# 3. Install Drupal
drush site:install openy \
  --db-url='mysql://USER:PASS@localhost/DATABASE' \
  --account-name=admin \
  --account-pass=admin \
  --site-name='My YMCA'

Replace:

  • USER - Your database username
  • PASS - Your database password
  • DATABASE - Your database name
  • admin - Choose a secure admin password

First Login

  1. Navigate to your site URL
  2. Log in with username: admin
  3. Use the password you set during installation

🎉 Congratulations! Your YMCA website is installed.


Step 3: Configure Site Basics

Now let’s configure your site’s essential settings.

  1. Navigate to Configuration > System > Site information
  2. Update:
    • Site name: “My YMCA Name”
    • Slogan: Optional tagline
    • Email address: Your admin email
  3. Click Save configuration
  1. Go to Appearance > Your active theme > Settings
  2. Uncheck “Use the logo supplied by the theme”
  3. Upload your YMCA logo (recommended: PNG, 200px wide)
  4. Click Save configuration

Configure Taxonomy Vocabularies

Taxonomy helps organize your content. Set up these essential vocabularies:

Categories (for Articles/News)

  1. Go to Structure > Taxonomy > News Categories
  2. Click Add term
  3. Add categories like:
    • Youth Programs
    • Aquatics
    • Wellness
    • Community Events
  4. Click Save

Amenities (for Branches)

  1. Go to Structure > Taxonomy > Amenities
  2. Add amenities your branches offer:
    • Indoor Pool
    • Gymnasium
    • Childcare
    • Group Exercise Studio

Pro Tip: Set up your taxonomies before creating content - it makes categorization easier!


Step 4: Create Your First Webform

Webforms collect information from members and visitors. Let’s create a simple contact form.

Enable Webform Module (if not enabled)

drush en webform webform_ui -y

Create Contact Form

  1. Go to Structure > Webforms
  2. Click Add webform
  3. Fill in:
    • Title: “Contact Us”
    • Description: “Get in touch with our team”
  4. Click Save

Add Form Fields

  1. Click Build tab
  2. Add these fields:

Name Field:

  • Click Add element > Text field
  • Title: “Your Name”
  • Check Required
  • Click Save

Email Field:

  • Click Add element > Email
  • Title: “Email Address”
  • Check Required
  • Click Save

Message Field:

  • Click Add element > Textarea
  • Title: “Message”
  • Check Required
  • Rows: 5
  • Click Save

Configure Email Handler

  1. Click Emails/Handlers tab
  2. Click Add handler > Email
  3. Configure:
    • To email: your-team@ymca.org
    • From email: [webform_submission:values:email]
    • Subject: New Contact Form Submission
  4. Click Save

Test Your Form

  1. Click View tab
  2. Fill out the form
  3. Submit and check your email!

🎉 Success! You’ve created your first webform.


Step 5: Set Up User Roles and Permissions

Control what different users can do on your site.

Common Roles

YMCA Website Services includes these default roles:

RolePurposeCommon Permissions
Content EditorCreate and edit contentCreate/edit articles, landing pages, events
Site AdministratorConfigure site settingsManage users, configuration, modules
Branch ManagerManage branch contentEdit their branch page, create programs

Create a Content Editor User

  1. Go to People > Add user
  2. Fill in:
    • Email: editor@yourymca.org
    • Username: editor
    • Password: Create secure password
    • Roles: Check “Content Editor”
    • Status: Check “Active”
  3. Click Create new account

Customize Permissions

  1. Go to People > Permissions > Roles
  2. Click Edit permissions next to “Content Editor”
  3. Grant permissions like:
    • Create Landing Page (Layout Builder)
    • Edit own Landing Page (Layout Builder)
    • Use Layout Builder
    • Access media library
  4. Click Save permissions

Security Tip: Follow the principle of least privilege - only grant permissions users actually need!


Next Steps

Now that you’ve set up the basics, explore these advanced topics:

Continue Configuring

Activity Finder

Connect to Daxko, ActiveNet, or Personify to display programs.

Configure
Schedules

Display class schedules and group exercise programs.

Learn More
Locations

Set up branches, camps, and facility pages.

Add Locations

Essential How-To Guides

Deployment & Updates


Quick Reference

Common Drush Commands

# Clear cache
drush cr

# Enable a module
drush en module_name -y

# Export configuration
drush config:export -y

# Import configuration
drush config:import -y

# Update database
drush updb -y

# Check for security updates
drush pm:security

# Create admin login link
drush uli

Essential URLs

PageURL
Admin Dashboard/admin
Content List/admin/content
Webforms/admin/structure/webform
Users/admin/people
Configuration/admin/config
Reports/admin/reports
Modules/admin/modules

File Structure

MY_YMCA_SITE/
├── web/                    # Drupal root
│   ├── modules/           # Contrib & custom modules
│   ├── themes/            # Themes
│   └── sites/default/     # Site-specific files
├── config/                # Configuration files
├── vendor/                # Composer dependencies
└── composer.json          # Project dependencies

Need Help?

Troubleshooting

Get Support


Best Practices

Security

  • ✅ Change default admin password immediately
  • ✅ Enable Two-Factor Authentication
  • ✅ Keep modules updated
  • ✅ Regular security audits
  • ✅ Limit admin access

Performance

  • ✅ Enable caching (Production)
  • ✅ Aggregate CSS/JS files
  • ✅ Use Redis or Memcache
  • ✅ Optimize images
  • ✅ Monitor database size

Maintenance

  • ✅ Regular backups (daily database, weekly files)
  • ✅ Test updates on staging first
  • ✅ Export configuration regularly
  • ✅ Monitor error logs
  • ✅ Document customizations

Workflow

  • ✅ Use configuration management
  • ✅ Version control your config
  • ✅ Staging → Production deployment
  • ✅ Never edit production directly
  • ✅ Keep deployment notes

Ready to build? Start creating content with the Content Editor Guide or configure advanced features! 🚀

7 - Decision Maker Hub

Understand the platform, explore features, and connect with the YMCA community.

Welcome, Decision Makers! 📊

Explore YMCA Website Services capabilities and connect with the community.

Evaluating the platform? Start with Getting Started for Decision Makers.

Getting Started for Decision Makers

Evaluate YMCA Website Services, understand costs and ROI, and make informed decisions for your organization.


You'll learn:
  • Platform overview and capabilities
  • Small Y vs Full Distribution
  • Total cost of ownership
  • Implementation timeline

Release Notes

Stay informed about new features, security updates, and improvements. See what's coming in future releases.


You'll learn:
  • Latest release (Drupal 11.1.x)
  • Recent feature additions
  • Security updates
  • Upgrade timeline

Community

Connect with 400+ YMCAs using the platform. Join monthly calls, ask questions, and share experiences.


You'll learn:
  • Monthly community calls
  • Message board access
  • Slack community
  • How to get support

7.1 - Getting Started for Decision Makers

Evaluate YMCA Website Services, understand the platform, and make informed decisions for your organization.

Welcome! This guide will help you evaluate YMCA Website Services and determine if it’s the right platform for your YMCA.

What You’ll Learn

By the end of this guide, you’ll be able to:

  • ✅ Understand what YMCA Website Services offers and how it works
  • ✅ Choose between Small Y Template and Full Distribution
  • ✅ Evaluate total cost of ownership and ROI
  • ✅ Assess community support and success stories
  • ✅ Identify next steps for implementation

Estimated time: 30-45 minutes


Step 1: Understand YMCA Website Services

What Is It?

YMCA Website Services (formerly Open Y) is a free, open-source platform built on Drupal specifically for YMCAs. It provides:

  • Pre-built features for membership, programs, schedules, and events
  • Integration with Daxko, ActiveNet, and Personify
  • Modern design with responsive themes
  • Active community of YMCA digital leaders
  • No licensing fees - completely open source

Who Uses It?

150+ YMCAs across the United States and globally rely on YMCA Website Services, including:

  • Small community YMCAs (1-2 branches)
  • Metropolitan associations (10+ branches)
  • State alliances and national organizations
  • International YMCAs

Key Capabilities

Program Management

Activity Finder connects to your registration system (Daxko, ActiveNet, Personify) to display programs and classes.

Class Schedules

Display group exercise, swim lessons, and facility schedules in real-time.

Branch Management

Manage multiple locations with consistent branding and unique content per branch.

Membership Tools

Membership calculator, joining wizards, and financial assistance information.

Platform Foundation

  • Built on Drupal - Leading enterprise open-source CMS
  • 10+ years of development and refinement
  • 150+ contributors from the YMCA movement
  • Monthly releases with security updates and new features
  • Drupal 11 ready (future-proof technology)

Step 2: Choose Your Solution Path

Before evaluating costs, understand which offering fits your YMCA best.

Best for:

  • Small to medium YMCAs (1-5 branches)
  • Limited technical resources or budget
  • Want modern design out-of-the-box
  • Need quick deployment (weeks, not months)
  • Prefer simplicity over maximum flexibility

What’s included:

  • Modern Carnation design system (clean, accessible)
  • Layout Builder (drag-and-drop page building)
  • Essential content types only
  • Streamlined configuration
  • Better performance and lower hosting costs
  • Faster security updates

Typical deployment: 4-8 weeks with agency support

→ Learn more about Small Y Template

Full Distribution

Best for:

  • Large YMCAs with complex needs (6+ branches)
  • Multiple sub-brands or unique branch sites
  • In-house development team
  • Need maximum customization
  • Already using the full platform

What’s included:

  • All YMCA Website Services features
  • Multiple themes and colorways
  • Legacy Paragraphs support
  • Advanced customization options
  • More content types and configurations

Typical deployment: 3-6 months with agency or in-house team

Comparison Matrix

FeatureSmall Y TemplateFull Distribution
Setup Complexity⭐ Simple⭐⭐⭐ Complex
Deployment Time4-8 weeks3-6 months
MaintenanceLowerHigher
Technical ResourcesMinimalModerate-High
CustomizationModerateMaximum
Best for Branches1-56+
Hosting Costs$50-300/mo$200-500/mo

Step 3: Evaluate Total Cost of Ownership

One-Time Costs

Initial Setup (with agency partner):

  • Small Y Template: $2,000 - $35,000
  • Full Distribution: $40,000 - $100,000+

What’s included in setup:

  • Platform installation and configuration
  • Theme customization (colors, logo, branding)
  • Content migration from old site
  • Staff training (2-4 sessions)
  • Integration setup (Daxko/ActiveNet/Personify)
  • Quality assurance and launch

Ongoing Costs

CategorySmall YFull Distribution
Hosting$50-300/mo$200-500/mo
Maintenance$200-500/mo$500-1,500/mo
Content updatesIn-house staffIn-house staff
Security updatesIncluded in maintenanceIncluded in maintenance
Feature enhancementsProject-basedProject-based

Total annual operating cost:

  • Small Y: $3,000 - $9,600/year (hosting + basic maintenance)
  • Full Distribution: $8,400 - $24,000/year

Hidden Costs to Consider

Staff time - Content editors, IT support ✅ Training - Initial and ongoing as staff changes ✅ Integrations - API costs for Daxko, ActiveNet, Personify ✅ Plugins/modules - Some third-party tools may have fees ✅ Professional photos - Stock images or photoshoots

Cost Comparison vs. Alternatives

YMCA Website Services vs. Proprietary Platforms (Estimated Ranges):

Platform TypeInitial Cost (Estimate)Annual Cost (Estimate)Total 5-Year Cost (Estimate)
Small Y Template$2,000 - $35,000$3,000 - $10,000$17,000 - $85,000
Full Distribution$40,000 - $80,000$10,000 - $25,000$90,000 - $205,000
Custom WordPress$20,000 - $50,000$5,000 - $15,000$45,000 - $125,000
Proprietary CMS$30,000 - $100,000$15,000 - $40,000$105,000 - $300,000

Potential cost savings over 5 years vs. proprietary platforms: Varies widely (20-60% savings typical)


Step 4: Assess Community and Support

Community Strength

Active Community:

  • 150+ YMCAs using the platform
  • Monthly community calls with Q&A and demos
  • Slack workspace with 500+ members
  • Annual virtual summit for best practices sharing
  • Open roadmap - vote on features and priorities

Success Stories:

Featured Implementations:

→ View more case studies | Add your case study

Support Options

Free Community Support

  • Slack workspace - Ask questions, get help from peers
  • GitHub issues - Report bugs, request features
  • Community calls - Live Q&A and troubleshooting
  • Documentation - Comprehensive guides and tutorials
  • Response time: 24-48 hours (community-driven)

Best for: Small YMCAs with basic needs and patient timelines

Find an agency partner: Browse the Agency Partner Directory

Best for: Medium-large YMCAs needing reliability and speed

Vendor Lock-In Assessment

✅ No vendor lock-in:

  • Open-source code (GPL license)
  • Standard Drupal/PHP/MySQL stack
  • Export your content anytime
  • Switch hosting providers freely
  • Hire any Drupal developer

This protects your investment - you own your data and platform, not a vendor.


Step 5: Plan Your Implementation

Timeline Expectations

Small Y Template:

  1. Week 1-2: Discovery and planning
  2. Week 3-5: Design and configuration
  3. Week 6-7: Content migration and training
  4. Week 8: Testing and launch

Full Distribution:

  1. Month 1: Discovery, planning, and stakeholder alignment
  2. Month 2-3: Design, development, and customization
  3. Month 4-5: Content migration, integration setup, training
  4. Month 6: Testing, QA, and launch

Implementation Partners

Find a partner: Agency Partner Directory

What to look for:

  • Drupal and YMCA Website Services experience
  • References from other YMCAs
  • Clear project methodology
  • Transparent pricing
  • Training and knowledge transfer
  • Post-launch support options

DIY Implementation

Can you do it yourself?

Requirements:

  • In-house Drupal developer or IT team
  • 2-4 months of dedicated time
  • Willingness to learn and ask community for help
  • Comfort with command line (Composer, Drush)

Pros: Lower initial cost, full control Cons: Longer timeline, steeper learning curve, no guaranteed support

→ DIY Installation Guide


Next Steps

Now that you understand the platform and costs, take these next steps:

Continue Evaluating

Explore Small Y

See live demo sites, review features, and understand why 70% choose this option.

Learn More
Join Community

Connect with YMCA digital leaders, ask questions, and learn from peers.

Join Slack
Attend a Call

Monthly community calls feature demos, Q&A, and best practices sharing.

View Schedule

Make the Decision

Decision Framework Checklist:

  • Identified technical resources (in-house vs agency)

  • Determined budget (one-time + annual)

  • Chose solution path (Small Y vs Full)

  • Reviewed case studies from similar YMCAs

  • Connected with community on Slack

  • Shortlisted 2-3 implementation partners

  • Got executive buy-in and budget approval

  • Set realistic timeline expectations

Ready to move forward? Contact an agency partner or join the community Slack to announce your project!


Quick Reference

Platform Comparison

QuestionSmall Y TemplateFull Distribution
How many branches?1-56+
Technical resources?MinimalModerate-High
Budget range?$2-50K$40-150K
Timeline?4-8 weeks3-6 months
Customization needs?ModerateMaximum
Staff training?2-3 hours8-12 hours

Success Metrics to Track

After implementation, measure:

  • Time to publish content (should decrease 50-70%)
  • Website maintenance hours/month (should decrease 30-50%)
  • Bounce rate and engagement (should improve 20-40%)
  • Mobile traffic (should increase to 60%+)
  • Member satisfaction with online tools

Common Questions

Q: Is this really free? A: Yes, the software is 100% free and open source. You pay for hosting, implementation, and ongoing maintenance.

Q: Can we migrate from another platform? A: Yes, content migration is part of most implementation projects. Popular migrations: WordPress, Joomla, proprietary CMSs.

Q: What if we outgrow it? A: You can scale from Small Y to Full Distribution, add custom features, or export your content to another platform anytime.

Q: How secure is it? A: Drupal is used by government agencies and Fortune 500 companies. Monthly security updates are released and should be applied promptly.

Q: Do we need a developer? A: For Small Y Template with agency setup: no ongoing developer needed. Content editors can manage everything. For Full Distribution: recommended.

Q: Can we switch hosting providers? A: Yes, anytime. You own your code and data completely.


Need Help?

Get Questions Answered

Resources for Executives


Best Practices

Evaluation Process

  • ✅ Involve stakeholders early (marketing, IT, membership, ops)
  • ✅ Define success metrics upfront
  • ✅ Request demos from 2-3 agency partners
  • ✅ Talk to 2-3 YMCAs already using the platform
  • ✅ Budget 15-20% contingency for unexpected needs
  • ✅ Plan for ongoing maintenance, not just initial launch

Implementation Success

  • ✅ Assign executive sponsor with decision authority
  • ✅ Form cross-functional project team
  • ✅ Communicate timeline to all staff
  • ✅ Plan content migration early
  • ✅ Schedule training before launch
  • ✅ Have soft launch before big announcement

Long-Term Strategy

  • ✅ Join community calls to stay informed
  • ✅ Apply security updates within 1 week
  • ✅ Review analytics quarterly
  • ✅ Survey members annually about website experience
  • ✅ Budget for enhancements (15% of annual maintenance)
  • ✅ Contribute learnings back to community

ROI Framework

Quantifiable Benefits

Cost Savings (Year 1):

  • Reduced vendor licensing fees: $5,000 - $15,000
  • Lower hosting costs vs proprietary: $1,000 - $3,000
  • Decreased maintenance hours: $3,000 - $8,000
  • Total savings: $9,000 - $26,000

Efficiency Gains:

  • Content publishing time: -60% (2 hours → 45 minutes)
  • IT support tickets: -40% (easier for staff to use)
  • Time to update programs: -70% (API integration)

Qualitative Benefits

Member Experience:

  • Modern, mobile-friendly design
  • Faster page load times
  • Easy-to-find program information
  • Online registration integration
  • Improved accessibility (WCAG 2.1 AA)

Staff Experience:

  • Intuitive content editing
  • No coding required for pages
  • Consistent branding across branches
  • Collaborative workflows
  • Pride in modern website

Strategic Value:

  • Community-driven roadmap
  • No vendor lock-in
  • Future-proof technology (Drupal 11)
  • Access to 150+ YMCAs’ collective knowledge
  • Contribute to movement-wide digital transformation

Ready to get started? Join the community Slack, explore the Small Y Template, or contact an agency partner for a consultation! 🚀

8 - Getting Started for Content Editors

Your complete guide to creating and managing content on YMCA websites.

Welcome to YMCA Website Services! This guide will help you get started creating beautiful, engaging content for your YMCA website.

What You’ll Learn

By the end of this guide, you’ll be able to:

  • ✅ Log in and navigate the admin interface
  • ✅ Create your first landing page with Layout Builder
  • ✅ Add and configure blocks from the Block Library
  • ✅ Upload and manage images and media
  • ✅ Publish and preview your content

Estimated time: 15-20 minutes


Step 1: Log In and Find Your Way Around

Accessing the Admin

  1. Navigate to your YMCA website and add /user/login to the end of the URL
    • Example: https://yourymca.org/user/login
  2. Enter your username and password
  3. Click Log in

The Admin Toolbar

Once logged in, you’ll see a black toolbar at the top of the page. This is your admin toolbar with quick access to:

  • Content - Create and manage all your pages and posts
  • Structure - Configure menus, blocks, and site structure
  • Appearance - Theme and visual settings
  • Extend - Add new features and modules

Admin toolbar screenshot


Step 2: Explore the Block Library 🧱

The Block Library is your toolkit for building pages. Before creating your first page, take 5 minutes to browse what’s available.

  • Banner - Full-width hero images with headlines and CTAs
  • Cards - Flexible card grid layouts (2-4 columns)
  • Accordion - Expandable Q&A sections
  • Article Views - Automatically display recent blog posts
  • Testimonials - Member quote carousels

→ Browse the Full Block Library (30+ blocks organized by category)


Step 3: Create Your First Landing Page

Let’s build a simple landing page using Layout Builder!

Create the Page

  1. Click Content in the admin toolbar
  2. Click the blue Add content button
  3. Select Landing Page (Layout Builder)
  4. Fill in the required fields:
    • Title: “Welcome to [Your YMCA Name]”
    • Leave other fields as defaults for now
  5. Click Save and edit layout

You’re now in Layout Builder! This is where the magic happens.

Understanding Sections and Blocks

  • Sections = Rows that structure your page (like shelves)
  • Blocks = Content components that fill sections (like items on shelves)

Add Your First Section

  1. Click Add section at the top
  2. Choose One column layout
  3. Click Add section

Add a Banner Block

  1. In your new section, click Add block
  2. Click Create custom block
  3. Select Banner
  4. Fill in:
    • Title: “Welcome to Our YMCA”
    • Description: “Building healthy communities since [year]”
    • Image: Click Select Image and upload a photo
    • Link URL: /join (or your membership page)
    • Link text: “Join Today”
  5. Click Add block

Save and Publish

  1. Click Save layout at the top
  2. Click the Edit tab
  3. Check the Published checkbox
  4. Click Save

🎉 Congratulations! You’ve created your first page. Click View to see it live.


Step 4: Add More Content

Now let’s add variety to your page.

Add a Cards Block

  1. Click the Layout tab
  2. Click Add section below your banner
  3. Choose One column layout
  4. Click Add blockCreate custom blockCards
  5. Set # of columns to 3
  6. Add 3 card items with:
    • Heading: Program names (e.g., “Youth Sports”)
    • Description: Brief summary
    • Link: Link to program page
  7. Click Add block

Add an Accordion (FAQ Section)

  1. Add another section
  2. Add an Accordion block
  3. Add 3-4 accordion items with common questions:
    • “What are your hours?”
    • “How do I join?”
    • “Do you offer financial assistance?”
  4. Fill in the answers
  5. Save the block

Preview and Publish

  1. Click Save layout
  2. View your page to see how it looks
  3. Make adjustments as needed

Step 5: Working with Images and Media

Upload an Image

  1. When adding a block with an image field
  2. Click Select Image
  3. Click Upload tab
  4. Drag and drop your image or click Choose File
  5. Fill in:
    • Alternative text: Describe the image for accessibility
    • Name: Descriptive file name
  6. Click Save

Image Best Practices

  • File size: Keep under 500KB (use tools like TinyPNG to compress)
  • Dimensions: 1920x1080 for banners, 800x600 for cards
  • Alt text: Always describe the image for screen readers
  • File names: Use descriptive names like youth-soccer-team.jpg

→ Learn more about media management


Next Steps

Now that you’ve mastered the basics, explore these topics:

Continue Learning

Block Library

Explore all 30+ blocks and learn when to use each one.

Browse Blocks
Content Types

Learn about Articles, Events, Branches, and more.

View Types
Text Editor

Format text, add links, embed videos, and build tables.

Learn Editing

Advanced Topics


Quick Reference

Common Tasks

TaskSteps
Create a pageContent → Add content → Landing Page (Layout Builder)
Edit a pageNavigate to page → Click Edit tab
Add a blockLayout tab → Add section → Add block → Create custom block
Upload imageSelect Image → Upload tab → Drag file → Save
PublishEdit tab → Check “Published” → Save

Keyboard Shortcuts

  • Ctrl+S (Cmd+S on Mac) - Save content
  • Ctrl+Shift+S - Save and continue editing
  • Ctrl+F - Search page

Need Help?

Troubleshooting

  • Blocks not appearing? Troubleshoot Layout Builder Issues
  • Images not uploading? Check file size and format (JPG, PNG, WebP under 500KB)
  • Page not saving? Try clearing your browser cache (Ctrl+Shift+R)

Get Support


Additional Resources


Ready to build amazing content? Start with the Block Library and explore what’s possible! 🚀

8.1 - Layout Builder

Build beautiful, flexible pages with Layout Builder’s drag-and-drop interface.

Layout Builder is a powerful new page-building addition to your YMCA website.

Drupal’s Layout Builder allows content editors and site builders to easily and quickly create visual layouts for displaying content. Users can customize how content is arranged on a single page, across types of content, or even create custom landing pages with an easy-to-use drag-and-drop interface.

- Layout Builder on Drupal.org

Getting Started with Layout Builder

YMCA Website Services 9.2.12 introduces a new Content Type: Landing Page (Layout Builder). This new page will allow you to build pages using Sections with different Layouts that contain Custom Blocks. Please contact your development partner if you need assistance updating the latest version.

Creating a new page

To use Layout Builder, you’ll first have to create a new page:

  • Choose any Layout Builder-enabled content type, or start with a basic Landing Page
  • Go to Content > Add Content > The Content Type.

Once you’ve saved, you will see an empty page. Click the Layout tab to enter Layout Builder or go directly there with Save and edit layout.

Drupal admin tabs with an arrow pointing to “Layout”

Updating an existing page

Navigate to the page you’d like to update, then click the Layout tab, like above.

Once you are in the Layout editor, you can create, edit, rearrange, and delete sections and blocks while viewing the page in a what-you-see-is-what-you-get preview mode.

Saving and publishing

Changes to the page are not displayed to site viewers until you Save Layout on the page and Publish it.

When in the Layout editor, you will have these options at the top of the page:

  • Save Layout will save your changes and return you to the main page view.
  • Save and edit layout will save your changes and keep you in Layout Builder.
  • Discard Changes
  • Revert to Defaults will reset your page to the default empty layout.

After saving your changes, be sure your page is published:

  • Click the Edit tab.
  • Check Published.
  • Save the page.

Fundamentals

In Layout Builder, you will see the page divided up into Sections and Blocks. Your page may already be populated with some sections to get you started building, and you can change or edit those to fit your page.

Sections

Sections create the structure of the page and contain blocks. You can drag and drop blocks between sections, but you cannot move sections themselves—you can only create sections above or below existing sections.

You can remove sections by clicking the small “X” link at the top left of the section. Click on “Configure ” to edit the section layout and other options.

A screenshot of a Layout Builder page with Remove, Configure, and Add buttons labeled.

Layouts

Layouts define the structure of a section. YMCA Website Services comes with 1-, 2-, 3-, and 4-column layouts, and each layout has additional configuration options once it’s created. See advanced options for more details.

A screenshot of the “Choose a layout for this section” dialog with options for 1 to 4 columns.
Choose a layout

A screenshot of the “Configure Section” dialog with Layout, Style, and Settings options.
Then configure the advanced Layout, Styles, and Settings.

Some options in this configuration may not yet be fully supported.

Blocks

While Sections contain the page’s structure, Blocks contain its content.

To create a block, click Add Block in any section of the page, then Create Custom Block.

A screenshot showing the Add Block and Create Custom Block buttons.

Your YMCA website has a wide array of blocks to choose from.

Browse the Block Library

Explore 30+ Layout Builder blocks organized by category. Find banners, cards, grids, views, testimonials, schedules, and more.


Tips and Tricks

Get more space for writing

The Content Editing Pane—the sidebar where you edit blocks —can sometimes be too small to get all of your content in there nicely. Simply drag anywhere on its left border to expand the pane.

Animation showing a user dragging the border of the content editing pane to expand it.

Rearrange blocks easily

When rearranging large blocks on the page it can often be challenging to drag them around. To make this easier, uncheck Show content preview at the top of the page. This will substitute the “WYSIWYG” preview for block titles, making the content much more compact.

Animation showing the show content preview checkbox being unchecked and a block being moved.


If you run into a problem, get in touch.

Content on this page is adapted from Drupal.org and Western Washington University

8.1.1 - Designs

An overview of all custom Layout Builder blocks.

The distribution has shipped with two versions of Layout Builder component designs. The first-generation “Pre-release” designs were shipped with version 9.2.12 (December 2022) and 9.2.13 (March 2023). The revised and feature-complete “Design System” designs shipped with the June 2023 release.

Design System

Discover our Design System in our interactive UI kit.

Colorways

Based on the YMCA Brand Guide, the distribution contains four “colorways” that allow content editors to apply accessible, brand-compliant styles to all components on a Layout Builder-based page.

BlueGreenPurpleRed
Blue Colorway Design
Green Colorway Design
Purple Colorway Design
Red Colorway Design

Canadian Colourways

See How to use the Canadian Colorway for Layout Builder.

Content Types

The distribution provides new Content Types for use with Layout Builder components.

ArticleBranchCampEvent
Article Content Type Design
Branch Content Type Design
Camp Content Type Design
Event Design

Components

Each of these components is available on Layout Builder pages via the Create custom block selector.

ComponentDesign
Accordion
Accordion Design
Amenities
Amenities Design
Article List
Article List Design
(Hero) Banner
(Hero) Banner Design
Branch Hours
Branch Hours Design
Branch Menu
Branch Menu Design
Branch Preferred Branch
Branch Preferred Branch Design
Branch Social Links
Branch Social Links Design
Breadcrumbs
Breadcrumbs Design
Camp Menu
Camp Menu Design
Camp Video Banner
Camp Video Banner Design
Card
Card Design
Card - Column Variations
Card - Column Variations Design
Carousel
Carousel Design
Donate
Donate Design
Event List
Event List Design
Forms
Forms Design
Global Footer
Global Footer Design
Global Header
Global Header Design
Grid Content
Grid Content Design
Icon Grid
Icon Grid Design
Icons and Logos
Icons and Logos Design
Locations
Locations Design
Menu and Search
Menu and Search Design
Modal
Modal Design
Ping Pong
Ping Pong Design
Promo Cards
Promo Cards Design
Side Menu
Side Menu Design
Sponsors
Sponsors Design
Staff
Staff Design
Statistics
Statistics Design
Table (Simple Content)
Table (Simple Content) Design
Tabs
Tabs Design
Testimonials
Testimonials Design
Utility Menu
Utility Menu Design

Pre-release

View the designs
ComponentMobileDesktop
Accordion
Accordion Mobile Design
Accordion Desktop Design
Article (/News /Blog /Press Release)
Article Mobile Design
Article Desktop Design
Branch
Branch Location Mobile Design
Branch Location Desktop Design
Branch Amenities
Branch Amenities Mobile Design
Branch Amenities Desktop Design
Branch Hours
Branch Hours Mobile Design
Branch Hours Desktop Design
Branch Menu
Branch Menu Mobile Design
Branch Menu Desktop Design
Branch Social Links
Branch Social Links Mobile Design
Branch Social Links Desktop Design
Breadcrumbs
Breadcrumbs Mobile Design
Breadcrumbs Desktop Design
Cards
Cards Mobile Design
Cards Desktop Design
Carousels
Carousels Mobile Design
Carousels Desktop Design
Event
Events Mobile Design
Event Desktop Design
Grid Content
Grid Content Mobile Design
Grid Content Desktop Design
Hero Banner
Hero Banner Mobile Design
Hero Banner Desktop Design
Modals
Modals Mobile Design
Modals Desktop Design
Modals
Modals Mobile Design
Modals Desktop Design
Partners (/Sponsors)
Sponsors Mobile Design
Sponsors Desktop Design
Ping Pong
Ping Pong Mobile Design
Ping Pong Desktop Design
Promo Cards
Promo Cards Mobile Design
Promo Cards Desktop Design
Simple Menu
Simple Menu Mobile Design
Simple Menu Desktop Design
Staff
Staff Mobile Design
Staff Desktop Design
Statistics
Statistics Mobile Design
Statistics Desktop Design
Tables
Tables Mobile Design
Tables Desktop Design
Tabs
Tabs Mobile Design
Tabs Desktop Design
Testimonials
Testimonials Mobile Design
Testimonials Desktop Design
Webforms
Webforms Mobile Design
Webforms Desktop Design

8.1.2 - Advanced Options

Configuration for Layout Builder Sections and Blocks.

A huge amount of configuration is available with Layout Builder components using the contributed Layout Builder Blocks module, which is included with the distribution. In addition to those configuration options, we provide an extra layer of “Y Styles” that help site builders customize their sites in an accessible and brand-compliant manner.

Y Styles

These options provide customizations of Layout Builder-enabled pages at the Content Type, Page, and Component(/Block) level.

Styles inherit from content types, to pages, to components. Some styles can also be overridden at each level - block styles can override page styles, which can override content type styles.

flowchart
  classDef ct fill:#5C2E9133;
  classDef page fill:#92278F33;
  classDef block fill:#C6168D33;
  subgraph ct[Content Type]
    direction LR
    subgraph page[Page]
      direction LR
      subgraph block[Block]
        blockStyles[Block Styles]
      end
      pageStyles[Page Styles]
    end
    ctStyles[Content Type Styles]
  end
  blockStyles -- override --> pageStyles
  pageStyles -- override --> ctStyles
  class ct ct
  class page page
  class block block

Content Type styles

Note: This configuration may not be accessible to all content editors. Ask an administrator for assistance if necessary.

The default values for page-level Y Styles options are set in the Content Type display options.

To access them:

  • Go to Admin > Structure > Content types > Landing Page (Layout Builder) (or another LB-enabled content type) > Manage display
  • Ensure you’re acting on the Default display, then click Manage layout.
    A screenshot of the “Manage display” administration screen.
  • Expand the Y Styles section
  • Choose your default configuration options. These will set the defaults for every new node of this Content Type. Existing content will not be effected.
  • Click Save layout

Page styles

Every Layout Builder-enabled page that you create will allow you to override the default settings. All of these settings will affect all items on a page, unless they are overridden at the component level.

A screenshot displaying the “Y Styles” configuration section.

  • Edit the Layout on a page
  • Expand the Y Styles section
  • Choose your configuration options.
    • Color scheme:
      The color scheme options
      The color scheme of all components on the page. Choose from four brand-compliant and accessible options:
      • Blue/Purple
      • Green/Blue
      • Purple/Red
      • Red/Orange
    • Border radius:
      The border radius options
      The curvature of container corners.
      • 0px (square)
      • 10px (small curve)
      • 20px (larger curve)
    • Border style:
      The border style options
      The style of container borders.
      • No border
      • 1px border
      • Drop shadow
    • Text/Button alignment:
      The text/button alignment options
      The vertical placement of elements in containers.
      • Left
      • Center
    • Button position:
      The button position options
      Where buttons sit in containers.
      • Inside container
      • Overlapping container
    • Button fill:
      The button fill options
      How buttons are colored.
      • Filled by default, outlined on hover
      • Outlined by default, filled on hover
  • Click Save layout

Y Block styles

Some blocks have additional styles that can be configured per-block. For these blocks (e.g. Banner, Cards), look for the Y Styles section in the block styles section and set the options accordingly.

  • Banner
    • Variant:
      The Banner variants
      Choose from five designs.
      • Standard
      • Overlay
      • Chevron
      • Frame
      • Small - This variant hides all but the title and description and does not use an image background.
    • Button fill: Override the page-level styles.
  • Card
    • Variant:
      The card variants
      Choose from four designs.
      • Standard
      • Overlay
      • Chevron
      • Color
    • Border style: Override the page-level styles.
    • Text/Button alignment: Override the page-level styles.
    • Button position: Override the page-level styles.
    • Button fill: Override the page-level styles.

Section styles

When creating or editing a Section you have the option of configuring Layout, Style, and Settings.

A screenshot of the “Configure Section” dialog with Layout, Style, and Settings options.

Support for these options is a work in progress and may require involvement of your development partner. Feel free to experiment with the options. Be sure to follow proper brand guidelines and accessibility practices.

Layout styles

In this section you can control the container of the Section.

Screenshot of the Layout Builder Layout Styles options.

  • Container type
    • Boxed: Section is narrower than the header of the page. Good for text-heavy layouts.
    • Full: Section extends to the edges of the main content container.
    • Edge to Edge: Section extends to the edges of the page. Good for full-width components like Banners and Ping-Pong blocks.
  • Gutters
    • With Gutters: Section has left and right padding. Good for most non-full-width containers.
    • Without Gutters: Section has no left and right padding. Best for Edge to Edge containers.

Block styles

When creating or configuring a block you have the option of opening the Style tab to access additional style options including:

  • background,
  • typography,
  • spacing,
  • borders, and
  • animation.

A screenshot showing the style tab with options below.

Support for these options is a work in progress and may require involvement of your development partner. Feel free to experiment with the options. Be sure to follow proper brand guidelines and accessibility practices.

After you have completed setting the Style options, click back to Content and Save or Update to commit your changes.

8.1.3 - Block Library

Browse all available Layout Builder blocks organized by category.

Browse all available Layout Builder blocks by category. Click any block to see detailed documentation and examples.

Using Blocks

Blocks contain the content of your pages, while Sections provide the structure.

To add a block to your page:

  1. Click Add Block in any section
  2. Choose Create Custom Block
  3. Select the block type you want from the categories below
  4. Configure the block settings
  5. Save your changes

Hero & Banner Blocks

Full-width promotional components for making a strong first impression.

Content Blocks

Versatile blocks for organizing and presenting text, media, and interactive elements.

Grid & Card Blocks

Layout components for displaying multiple items in organized, visual formats.

Views & Listings

Dynamic blocks that automatically display and filter content from your site.

People & Testimonials

Showcase your team, partners, and community voices.

Activities & Schedules

Display programs, classes, and scheduling information.

Location & Navigation

Help users find locations and navigate your site.

Forms & CTAs

Collect information and encourage user actions.

Advanced

Advanced configuration and customization blocks.


Need help? Learn more about using Layout Builder or get in touch.

8.1.4 - Accordion

Expandable pairs of question/answer or header/section fields.

Screenshot of the Accordion component with block labels


Designs:

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Displayed if Display title is checked, otherwise this is for administrative use.
  • Accordion Item: Add as many items as you like using the *Add Accordion Item or Add new custom block button. When you are finished adding or editing each item, be sure to click Create/Update tab or Create/Update custom block to finalize the item. Each item contains:
    • Heading (required): The heading that will be used to expand/contract the accordion.
    • Body (required): The content of the accordion.

Then save the block:

8.1.5 - Activity Finder

Place the Activity Finder application in a Layout Builder page.

Activity Finder combines data from the Activity, Class, and Session content types into an interactive tool. Learn more about Activity Finder.

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Configure the options:

Then save the block:

8.1.6 - Article Views & Filters

Components to feature, filter, and list articles using Layout Builder.

A screenshot showing the Featured articles block.
A screenshot showing the Articles filter block.
A screenshot showing the Articles listing block.


Designs: Mobile & Desktop

The distribution provides a few blocks to highlight articles.

  • Featured Articles
  • Articles Filter
  • Articles Listing

To use the blocks:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose each block to add.

Displays one or more articles in a large feature on the page.

  • Title (required): Displayed if Display title is checked, otherwise this is for administrative use.
  • Manual selection items: Select one or more articles to be featured on the page. Generally it’s best to just feature a single article.

Articles filter

Allows users to filter the Articles Listing by location, category, or text search.

  • Title (required): Displayed if Display title is checked, otherwise this is for administrative use.

This block has no other options.

Articles listing

Displays articles in a teaser view, filtered by the Articles filter block, with a “Show more” button

  • Title (required): Displayed if Display title is checked, otherwise this is for administrative use.
  • Number of articles: The number of articles to show in the listing on first load. Defaults to 3.
    • Added in the December 2024 release.
  • Article type: Limit the articles to a specific type. Defaults to “All”.
    • Added in the December 2024 release.

When you are finished adding blocks, Save and publish your changes.

8.1.7 - Banner

A full-width, almost full-height display with a header, description, and call to action overlaid on an image. Also known as “Hero Banner”.

Screenshot of the Banner component with block labels


Designs:

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
  • Banner Title (required): A heading to display on the banner.
  • Description: A full text editor to add banner content.
  • Media: Chose from the library or add a new image or icon to be displayed behind the banner text.
  • CTA/Link: A link at the bottom of the banner text.

This block comes with multiple styles. To choose an alternative style:

  1. Click on the Style tab at the top of the Block Add/Update form.
  2. Expand the Y Style section.
  3. Choose from the available variations.
  4. Go back to the Content tab.

Banner variants

Then save the block:

8.1.8 - Breadcrumbs

Secondary navigation that allows users to understand where they are located within a site.


Designs:

To use Breadcrumbs:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add the breadcrumbs (usually the bottom of the Header section).
  • Click Add block
  • In the sidebar, expand All system blocks
  • Search for “Breadcrumbs” or scroll to System > Breadcrumbs
  • Click on Breadcrumbs

Fill in the content fields:

  • Title (required): For administrative use only. Uncheck Display title.

Then save the block:

8.1.9 - Cards

Flexible card-style components that allow up to 4 cards to display across the page depending on the chosen layout.

Screenshot of the Cards component with block labels


The Cards block is similar to the Grid CTA block, but has more fields and places the image behind the item content.

Designs:

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
  • Section heading: Displayed as a heading above the cards.
  • Section subheading: Displayed below the heading.
  • Section link: A link button displayed below the list of cards.
  • # of columns: Allows 1- to 4-columns of cards.
  • Card items: Add up to 4. When you are finished adding or editing each item, be sure to click Create/Update tab or Create/Update custom block to finalize the item. Each card has:
    • Heading (required)
    • Image: Chose from the library or add a new image to be displayed behind the card text.
    • Description: A full text editor to add card content.
    • Link: A link at the bottom of the card.
    • Topic Tag: This is displayed at the top of the card and can be used to group cards visually.

This block comes with multiple styles. To choose an alternative style:

  1. Click on the Style tab at the top of the Block Add/Update form.
  2. Expand the Y Style section.
  3. Choose from the available variations.
  4. Go back to the Content tab.

Card variants

Then save the block:

8.1.10 - Carousel

A full-width gallery with multiple sets of a header, description, and call to action overlaid on top of an image.

Screenshot of the Carousel component with block labels


Designs:

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
  • Carousel heading: Displayed as a heading above the carousel.
  • Carousel subheading: Displayed below the heading.
  • Carousel Item: Add as many items as you like using the Add Carousel Item or Add new custom block button. When you are finished adding or editing each item, be sure to click Create/Update tab or Create/Update custom block to finalize the item. Each item contains:
    • Heading
    • Image: Chose from the library or add a new image.
    • Description
    • Link: A link at the bottom of the carousel item.

Then save the block:

8.1.11 - Code

Embed unfiltered HTML code in a page.

Designs: This block provides no additional presentation outside of the embedded content.

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
  • Code: Paste in the code to be embedded on the page.

Then save the block:

8.1.12 - Donate

A call to action with donation buttons linking to an embedded form.

NOTE: This module requires per-provider configuration. Currently, support is provided for donation forms from:

  • Blackbaud Online Express, and
  • Convio Luminate.

Please submit a feature request for additional provider support.

A screenshot of the Donate block.

Designs: Mobile & Desktop

The Y Layout Builder - Donate (lb_donate) and YMCA Website Services Donation Embed Form (y_donate) modules work together allow content editors to add an embedded donation form to the site and create a separate call to action to direct users there.

Embedded form

To get started:

  1. Enable the YMCA Website Services Donation Embed Form (y_donate) module at Administration > Extend.
  2. Select the Layout Tab of a Layout Builder-enabled page.
  3. Select Add block on the page, then search or scroll to find Donation Form Embed Block.
  4. Select the form type and enter the form ID from your donation provider.

Troubleshooting

If your embedded form does not work in your non-production environment you may need to add a domain to the allow-list either on the provider-side or in your site’s Content Security Policy.

If your provider is not listed you can add the form by selecting the Code Custom Block and then pasting in your code. Alternatively you can work with your development partner to add a new donation provider.

The Donate Block can be placed in an edge-to-edge container.

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
  • Section heading: Displayed as a heading above the items.
  • Section subheading: Displayed below the heading.
  • Giving amounts: Any number of buttons with donation amounts. An “Other” button will always be displayed after all of these buttons.
    • Amount label: The amount to be displayed, with the currency sign, like “$50”.
    • Form Element ID: Usually a 4-digit number found on the donation backend. You may need to find this on the donation platform side or in the browser inspector.
  • Donation page link: A link to be displayed below the buttons.
    • URL: In order for the buttons to work properly, this must link to the page where the embedded donation form is embedded.
    • Link text: The text to be displayed.
  • Background image: Chose from the library or add a new image to be displayed behind the text.

Then save the block:

8.1.13 - Event Views & Filters

Components to feature, filter, and list events using Layout Builder.

A screenshot showing the Featured events block.
A screenshot showing the Events filter block.
A screenshot showing the Events listing block.


Designs: Mobile & Desktop

The distribution provides a few blocks to highlight events.

  • Featured Events
  • Events Filter
  • Events Listing

To use the blocks:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose each block to add.

Displays one or more events in a large feature on the page.

  • Title (required): Displayed if Display title is checked, otherwise this is for administrative use.
  • Manual selection items: Select one or more events to be featured on the page. Generally it’s best to just feature a single event.

Events filter

Allows users to filter the Events Listing by location, category, or text search.

  • Title (required): Displayed if Display title is checked, otherwise this is for administrative use.

This block has no other options.

Events listing

Displays events in a teaser view, filtered by the Events filter block, with a “Show more” button

  • Title (required): Displayed if Display title is checked, otherwise this is for administrative use.
  • Number of events: The number of events to show in the listing on first load. Defaults to 3.
    • Added in the December 2024 release.

When you are finished adding blocks, Save and publish your changes.

8.1.14 - Grid CTA

Sets of content with a headline, description, and link displayed in 2 to 4-item wide rows, with the option to include icons or images.

Screenshot of the Grid CTA component with block labels


The Grid CTA block is similar to the Cards block, but allows for more flexible items with a slightly more freeform design.

Designs:

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
  • Section heading: Displayed as a heading above the cards.
  • Section subheading: Displayed below the heading.
  • Grid CTA section link: A link button displayed below the list of items.
  • # of columns: Allows 2- to 4-columns of items.
  • Grid Item: Add up to 4. When you are finished adding or editing each item, be sure to click Create/Update tab or Create/Update custom block to finalize the item. Each item has:
    • Heading (required)
    • Description: A full text editor to add item content.
    • Media: Chose from the library or add a new image or icon to be displayed above the item text.
    • Link: A link at the bottom of the item.

Then save the block:

8.1.15 - Header/Footer

Many blocks come together to create a configurable header and footer for Layout Builder pages.

Screenshot of the Header Section with block labels
Screenshot of the Footer Section with block labels

Designs:

The header and footer on Layout Builder pages is composed of many complimentary blocks. The Header and Footer are special Sections that are pre-populated on each Layout Builder-enabled content type. If the Header or Footer do not already exist in your content, you can add them on your own.

Header Section

Screenshot of the Header Section with block labels

If a Header section does not already exist, add a new Section and choose the WS Header Layout. Then, add the following blocks by selecting Add block and then using the search box under All system blocks:

  • Utility Menu area
    • Left
      • Website Name Block
    • Right
      • Open Y Google Translate Block
      • Utility Menu
  • Main Menu area
    • Left
      • Site Logo Block
    • Center
      • Main navigation
      • Search Bar Block
    • Right
      • User account menu

Each block has some specific configuration recommendations:

Website Name Block

Configuration

  • Uncheck Display title.

Content

  • The Site Name is found under Configuration > System > Basic site settings.

Open Y Google Translate Block

Configuration

  • Uncheck Display title.

Content

  • The contents of this block are not configurable, but it may be omitted or removed if your site does not provide translation uses another translation method.

Utility Menu

The option to add a Utility Menu was added in the December 2024 release. This menu is intended to give content editors an additional space for adding links in the top right of the header.

Configuration

  • Uncheck Display title.
  • Menu levels controls which and how many levels of menu are displayed. The Utility menu styles are designed for a single level of links.

Content

  • Menu items can be managed under Structure > Menus > Utility Menu.

Site Logo Block

Configuration

  • Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
  • WS Site Logo: Choose which logo is displayed in the block.
    • Theme logo uses the logo defined by the active theme, in the Appearance > Settings > (The active theme).
    • Colorway logo uses a dynamic SVG that responds to the configured YMCA colorway. This option is recommended for the Header.
    • White logo uses a flat white logo. This option is recommended for the Footer.
  • Hide tagline in WS logo: (Added in the December 2024 release.) Check to hide the tagline (areas of impact) in the logo.

The main navigation supports displaying up to three levels of menu items. When adding items, be sure to check Show as expanded for any parent item that should be expandable.

The menu with 3 levels of depth labeled.

The main navigation also supports an optional nested CTA block.

Configuration

  • Uncheck Display title.
  • Menu levels controls which and how many levels of menu are displayed. We recommend using the default configuration.

Content

  • Menu items can be managed under Structure > Menus > Main navigation.

Search Bar Block

Configuration

  • Uncheck Display title.

Content

  • The contents of this block are not configurable.

User account menu

Configuration

  • Uncheck Display title.
  • Menu levels controls which and how many levels of menu are displayed. We recommend using the default configuration.

Content

  • Menu items can be managed under Structure > Menus > User account.
  • To show items with a button style, add the highlighted to the menu item under Attributes > Class.
    The menu item configuration with the highlighted class added. An overlay in the upper right corner shows the resulting link.
    • On mobile devices, only highlighted items from this menu will display.

Screenshot of the Footer Section with block labels

If a Footer section does not already exist, add a new Section and choose the WS Footer Layout. Then, add the following blocks by selecting Add block and then using the search box under All system blocks:

  • Primary Footer
    • Site Logo
    • Footer Menu Left
    • Footer Menu Center
    • Footer Menu Right
    • Footer Social
  • Sub-footer
    • Copyright
    • Footer Menu

See above. The “white logo” is recommended for the footer.

Each of these three blocks references a menu. The three menus can be used to split footer links across multiple columns.

Configuration

  • Display title: Uncheck to hide the title, or turn the menu title on to give each column a title.
  • Menu levels controls which and how many levels of menu are displayed. We recommend using the default configuration.

Content

  • Menu items can be managed under Structure > Menus > Footer Menu Left, Footer Menu Center, or Footer Menu Right.

Configuration

  • Display title: It’s up to you.

Content

Configuration

  • Uncheck Display title.

Content

  • Go to Content > Blocks
  • Find the Footer Copyright Block
  • Edit the block, then Save when finished.

This menu is typically for a limited number of links such as “Privacy Policy” or “Terms of Use”.

Configuration

  • Uncheck Display title.
  • Menu levels controls which and how many levels of menu are displayed. We recommend using the default configuration.

Content

  • Menu items can be managed under Structure > Menus > Footer.

The main menu with a CTA block

The Main navigation has an additional feature that allows for adding a nested call-to-action that takes the place of the third level of the menu.

To use it:

  • Go to Extend (admin/modules) and enable the Web Services Main Menu CTA Block module (y_lb_main_menu_cta_block).
  • Edit a top-level menu item (like “Programs” or “Schedules”) via one of these methods.

    CTA blocks will only be displayed on first-level menu items. Blocks on all other levels will be ignored.

    1. Click the in the Main Menu section, then choose Edit menu.
      The Edit Menu item in the main menu contextual options
    2. Go to Admin > Structure > Menus > Main navigation then Edit a link.
  • In the CTA block section, click Add new custom block.
    The “Add new custom block” button
  • Fill in the fields:
    • Expand the Media section and choose or upload an image
    • Add a short Heading
    • Add a short 1-2 sentence Description
    • Add a link and display text for the Menu CTA Link
    • Add a Block description for administrative purposes only
    • Click Create custom block to save the block.
  • Save the menu item.
  • Go back to a Layout Builder page with the menu and refresh. The menu CTA should now appear when the corresponding menu dropdown is open.

Menu CTA items will not appear on pages that use Paragraphs-based layout. CTAs also ony show on desktop and not mobile displays.

8.1.16 - Icon Grid

A simpler version of the Grid CTA component. Sets of content with a headline and description displayed in 2 to 4-item wide rows, with the option to include icons or images.

Screenshot of the Icon Grid component with block labels


The Icon Grid block is similar to the Cards and Grid CTA blocks, but allows for more simpler items with a slightly more restricted design.

Designs:

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
  • Section heading: Displayed as a heading above the cards.
  • Section subheading: Displayed below the heading.
  • Icon Grid section link: A link button displayed below the list of items.
  • # of columns: Allows 2- to 4-columns of items.
  • Grid Icon Items: Add up to 4. Each item has:
    • Title (required)
    • Description: A full text editor to add item content.
    • Icon: Chose from the library or add a new image or icon to be displayed above the item text. Circular icons are recommended. All icon/images will be displayed with a circular crop.

Then save the block:

8.1.17 - Location Finder

A set of components to view and search YMCA locations.

A screenshot of the Locations block filters and map.
A screenshot of the Locations block listing.

Designs: Mobile & Desktop

The Location Finder block provides search, filters, a map, and a listing your YMCA locations.

Amenities filters

A screenshot of the Location Finder’s “filter by amenities” section.

Location Finder also now supports hierarchical amenities. That means you can arrange your list of amenities into categories instead of a simple alphabetical list.

The Amenities taxonomy is managed at Administration > Structure > Taxonomy > Amenities. See Taxonomy, Vocabularies, and Terms for more info on managing Vocabularies.

Single-level amenities

A screenshot showing the Amenities taxonomy administration on the left and the filters display on the right.

If you leave the Amenities terms in a flat list on their configuration page, the Location Finder filters will display according to their configured weights. Drag terms up or down in the list to rearrange them in the filters.

Hierarchical (parent/child) amenities

A screenshot showing a parent-child relationship in the Location finder filters.

Y’s with many amenities may choose to group them in categories. Once any Amenities term is nested, the Location Finder filters switch to a hierarchical display.

To nest terms:

  • Go to the Amenities administration page at Administration > Structure > Taxonomy > Amenities.
  • Add term to create new parent terms if necessary.
  • Use the drag handle [✥] to arrange terms into nested groups.

NOTE:

  • Any terms more than two levels deep will be ignored. (That is, parents and children will be displayed, grandchildren will not.)
  • When nesting is enabled, any amenities that are not grouped will be hidden from the filter list.

A screenshot showing amenities in a hierarchy with labels. Amenities greater than two levels deep are marked as hidden, amenities that do not have children are marked as hidden. All others are marked as shown.

Using Location Finder

The Location Finder block is best placed in an edge-to-edge Section with no gutters.

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.

Then save the block:

8.1.18 - Modal

A simple pop-up dialog that is triggered when a page loads.

Screenshot showing the field titles overlaid on the design


Designs:

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
  • Modal title: The displayed title of the popup.
  • Modal description: The text displayed in the body of the popup.
  • Modal CTA/Link (required): A link at the bottom of the popup.
  • Modal Dismissible: If “Yes” the modal will be shown to the user once on first load. If “No” the modal will be shown on every page load.

Then save the block:

8.1.19 - Partners

Component for displaying logos / info of partners or sponsors within a page using Layout Builder.

Screenshot showing the field titles overlaid on the design
Screenshot showing the field titles overlaid on the design


Designs:

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
  • Section heading: Displayed as a heading above the items.
  • Section subheading: Displayed below the heading.
  • Partner tier: Click Create content block to add a new Partner tier. Add unlimited tiers. (Added in the December 2024 release. Prior to that, all partners were displayed in a single group.)
    • Block description: For administrative use only.
    • Partner’s Tier: The title of the tier (like “Platinum”, “Gold”, etc.). Leave this empty if you don’t want to display a tier title.
    • Partner items: Click Add new custom block to add a new Partner item, or Add existing custom block to reuse an existing item. Items can be reused across pages. Add unlimited items. Each item has:
      • Heading: The name of the partner.
      • Image: The logo or image.
      • Link: An internal or external link.
      • After filling in the fields for an item, click Create custom block to save the item.

Then save the block:

8.1.20 - Ping-Pong

Usually paired sets of full-width page components that include media, header, description, and call to action arranged horizontally.

Screenshot of the Ping-pong component with block labels


Designs:

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
  • Section title: Displayed as a heading above the item.
  • Section subtitle: Displayed below the heading.
  • Item title: Displayed at the top of the ping-pong block.
  • Item description: Displayed below the title.
  • Item image: Chose from the library or add a new image to be displayed opposite the text.
  • Item image position: Places the image on the left/right side of the page in full-width (desktop) displays.
  • Item CTA/Link: Add up to two links. The first will be displayed with “primary” (solid) styling, the second will be “secondary” (outline) styling.

Then save the block:

8.1.21 - Promo Card

A title, headline, description, and link that usually display in the right or left sidebar.

Screenshot of the Promo Card component with block labels


Designs:

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
  • Card title: The displayed title of the promo card.
  • Body: A full text editor to add card content.
  • Icon/Image: Chose from the library or add a new icon or image to be displayed above the card text. Images will be treated differently depending on their type. If using an icon, we recommend uploading it in SVG format:
    • JPG/PNG images will be cropped to a roughly 3:2 proportion rectangle
    • SVG images will not be cropped
  • CTA: A link at the bottom of the card.

Then save the block:

8.1.22 - Related Articles

Component for displaying related articles within an Article node page and within other pages (i.e. landing pages) using Layout Builder.

Screenshot showing the field titles overlaid on the design


Designs:

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
  • Section title (required): The section title.
  • Link: An optional link to be displayed near the title.
  • Type: Select how you would like to choose the related articles in the block. Each type has different options:
    Screenshot showing the Related Articles filter options.
    • Article type: Use the Article Type to filter Related Articles.
      • By default, this will allow all Article Types. Choose a type to filter the list to only that type.
    • Locations: Use the Locations field to filter Related Articles.
      • Choose one or more Branch Locations to filter the list of Articles.
    • Tags: Use the Tags field to filter Related Articles.
      • Choose one or more Tags to filter the list of Articles.
    • Manual: Directly specify the Articles to be listed.
      • Use the autocomplete field to add one or more Articles to be displayed.
  • Items count to display: The maximum number of items to display in the list: 3, 6, 9, or 12.

Then save the block:

8.1.23 - Related Events

Component for displaying related events within an event node page and within other pages using layout builder.

Screenshot showing the field titles overlaid on the design


Designs:

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
  • Section title (required): The section title.
  • Link: An optional link to be displayed near the title.
  • Type: Select how you would like to choose the related events in the block. Each type has different options:
    Screenshot showing the Related Events filter options.
    • Upcoming: Show upcoming events sorted by date.
    • Locations: Use the Locations field to filter Related Events.
      • Choose one or more Branch Locations to filter the list of Events.
    • Manual: Directly specify the Events to be listed.
      • Use the autocomplete field to add one or more Events to be displayed.
  • Items count to display: The maximum number of items to display in the list: 3, 6, 9, or 12.

Then save the block:

8.1.24 - Repeat Schedules

Place the Repeat Schedules application in a Layout Builder page.

Repeat Schedules combines data from the Activity, Class, and Session content types into an interactive tool. Learn more about Group Schedules.

Before you can use the Repeat Schedules block, you will need to:

  • Ensure the openy_repeat module is updated to at least 2.2.0.
  • Enable the Repeat (Group) Schedules (lb_repeat_schedules) module at Admin > Extend (/admin/modules).

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Configure the options:

Then save the block:

8.1.25 - Simple Menu

A simple 1-level sidebar menu that can display in either the right or left sidebar area.

Screenshot of the Simple Menu component with block labels


Designs:

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Displayed if Display title is checked, otherwise this is for administrative use.
  • Icon: Optional icon (or small image) to be displayed to the left of the menu title.
  • Links: An unlimited number of internal or external links.

Then save the block:

8.1.26 - Simple Schedule

A calendar-based schedule.

The Simple Schedule pulls content that is added via the Simple Schedules module, along with other Sessions on the site. Be sure to set up your schedules before adding this block to your site.

Coming soon.

Screenshot of the Simple Schedule block


Designs:

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Location (required): Select the location for which you would like to display scheduled events.

Then save the block:

8.1.27 - Simple Text / Table

Allows users to add simple content and responsive tables within a page.

Screenshot of the Table component with block labels


The Table block also allows users to add simple content to the Landing Page (Layout Builder) content type.

Designs:

Then save the block:

Fill in the content fields:

  • Title (required): Never displayed, even if Display Title is checked. For administrative use only.
  • Section title: Displayed as a heading above the item.
  • Section subtitle: Displayed below the heading.
  • Body: A full text editor to add tables or other content to the page.
    • To add a table in the editor, click the Table icon, then configure the table options in the popup.
      A screenshot of the table icon and properties popup.
    • To edit an existing table properties, right click in the table and then choose an option from the menu.
      A screenshot of the table operations menu.

Then save the block:

8.1.28 - Staff Members

Component for displaying simple staff member info cards (with image, name, title) within a page using Layout Builder.

Screenshot showing the field titles overlaid on the design


Designs:

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
  • Section heading: Displayed as a heading above the items.
  • Section subheading: Displayed below the heading.
  • Staff items: Click Add new custom block to add a new Staff item, Add existing custom block to reuse an existing item from another block, or click Duplicate to reuse an entry from the same block. Items can be reused across pages. Add unlimited items. Each item has:
    • Image
    • First name (required)
    • Last name (required)
    • Job title (required)
    • Email
    • After filling in the fields for an item, click Create custom block to save the item.

Then save the block:

8.1.29 - Statistics

Infographic-like display that highlights relevant statistics to users.

Screenshot of the Statistics component with block labels


Designs:

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
  • Section heading: Displayed as a heading above the item.
  • Section subheading: Displayed below the heading.
  • Media: Chose from the library or add a new image to be displayed to the left of the statistics.
  • Section link: Add a link below the statistics items.
  • Statistics items: Add as many items as you like using the Add Statistics Item or Add new custom block button. When you are finished adding or editing each item, be sure to click Create/Update tab or Create/Update custom block to finalize the item. Each item contains:
    • Number value: The number value for the statistic. Can include a prefix ("$100") and/or suffix ("$100M").
    • Description: A description of the statistic.

Then save the block:

8.1.30 - Tabs

Gives users the ability to switch page views by selecting in-page tabs.

Screenshot of the Tabs component with block labels


Designs:

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
  • Section heading: Displayed as a heading above the item.
  • Section subheading: Displayed below the heading.
  • Tab Item: Add as many Tabs as you like using the Add Tab or Add new custom block button (depending on your version). When you are finished adding or editing each item, be sure to click Create/Update tab or Create/Update custom block to finalize the item. Each item contains:
    • Heading: The heading that will be used to select the tab.
    • Body: The content of the tab.

Then save the block:

8.1.31 - Testimonials

Component for displaying short testimonials or quotes from Y members in an interactive carousel-style format.

Screenshot showing the field titles overlaid on the design


Designs:

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
  • Section title: Displayed as a heading above the cards.
  • Section subtitle: Displayed below the heading.
  • Item: Click Add new custom block to add a new Testimonial item, or Add existing custom block to reuse an existing item. Testimonial items can be reused across pages. Add up to 4 items. Each item has:
    • Block Description: A label for the Testimonial for administrative use only.
    • Name: The attribution of the testimonial. May get trimmed on mobile after about 20 characters.
    • Testimonial text: The body of the testimonial. May get trimmed on mobile after about 70 characters.
    • Image: An image related to the testimonial. Will use a placeholder image if not used.
    • After filling in the fields for an item, click Create custom block to save the item.

Then save the block:

8.1.32 - Webform

Embed an existing webform on a page.

Screenshot of the Webform component with block labels


Designs:

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
  • Form title: Displayed as a heading above the item.
  • Form subtitle: Displayed below the heading.
  • Webform (required): Choose the Webform to embed on the page from the list of existing forms.
    • Expand Webform settings to access additional webform configuration, to open, close, or schedule the form.

Then save the block:

8.2 - Text Editor

Some fields in YMCA Website Services allow you to format your text with a WYSIWYG (What Your See Is What You Get) editor.

An example of the WYSIWYG text editor.

This tool allows you the flexibility to format content however you want within a certain container or area.

Bundled with the Drupal core and the distribution, CKEditor provides a number of different buttons for styling and formatting, as well as a Source editor if you are so inclined to edit HTML directly.

CKEditor has been upgraded to version 5 as of Drupal 10, and is a big improvement over CKEditor 4 — the linking experience is much smoother, uploading images is much faster, and more.

For more info on CKEditor 5, check out these resources (not all features may be implemented in the distribution):

8.2.1 - Adding Links

Links are simple in YMCA Website Services - just highlight your text and click the link icon (🔗) or type Ctrl / Cmd + K. Once the pop-up appears, type your URL into the field and click Save.

Read more and demo this on CKEditor Site.


Advanced options

In the Advanced options of the link dialog, you can add attributes to links, including a label, HTML ID, and CSS classes. You can also opt to have your link open in a new window/tab.

Using button classes

The Button editor that existed in the prior version of the text editor (CKEditor 4) has changed with CKEditor 5 and Drupal 10. Content editors can now add button classes alongside the Advanced Link Options.

Create a button by adding Bootstrap classes to a link:

  • Create a regular link in a Layout Builder block.
    • We recommend only using custom buttons in large text blocks, like the Table or Code blocks.
  • Open the Advanced Options.
  • Add the button classes for Color, Size, and Style (see Button Classes). Be sure to add the btn prefix. Your complete CSS Classes might be something like btn btn-primary.
    The advanced link options dialog. In the “CSS Classes” field is the text “btn btn-primary”
    • Button styles in the editor may not match the displayed styles.
  • Save the block.

Button classes

The distribution combines the default Boostrap button component with some custom styles as demonstrated at YMCA Lincoln, NE.

An example of button styles with five buttons using the primary, success, info, warning, and danger styles.

  • Any time you are making a button, your CSS classes should begin with btn . That sets up the default button styles.
  • Then, choose a button style, like btn-primary or btn-light.
    • Button styles should generally not be combined.
    • Some Bootstrap styles may be overridden by our theme.
    • The btn-primary style will use the selected colorway for its color, but all other options may use other colors that are not brand compliant.
  • The CSS classes field should have at least two space-separated items when you’re finished, like btn btn-primary.

It’s best to experiment with styles and make sure to check that your button displays as expected before saving the page.

If you’re building a long landing page, you may want to be able to link users directly to a specific section of the page. We do this using an “anchor” link or “in-page” URI fragment.

The process involves two steps:

  1. Adding the in-page anchor.
  2. Creating a link to the anchor.

Adding an anchor

An anchor is any piece of content—anything from a heading to a tiny space—that has an id in its code. The easiest way to add this is by creating a small hidden link at the beginning of the section in which you’d like to link to.

A screenshot of the Link popup with the Link URL and ID fields highlighted

  • Edit the section where you want to add the anchor
  • Add an empty space at the end of the first line of the section
  • Select just the space, then click the 🔗 button in the editor toolbar.
  • In the Link popup, set the URL to #
  • Expand the Advanced options and set the ID field to your anchor. It should be short and contain only lowercase letters and dashes, like thank-you or adding-an-anchor.
  • Click Save in the Link popup, then save the page.

Once you’ve saved the page, you can test the anchor out by appending a # then the id to your page URL. For instance, this section’s URL with anchor is:

https://ds-docs.y.org/docs/user-documentation/text-editor/adding-links#adding-an-anchor

If you enter that URL in your browser, it should take you directly to the anchor in the page.

Linking to the anchor

To link to the anchor, we create a regular link and then add the anchor:

A screenshot showing the link popup with a relative URL and anchor in the Link URL field

  • Create an in-page link as you usually would, either with a Link field or the Text Editor.
  • Instead of referencing the page with autocomplete (if it’s available), use the “relative path” of the page—that is, everything after the domain. For instance, when linking to this page in a site, you could use /docs/user-documentation/text-editor/adding-links.
  • Add the anchor ID after the path, so that your complete link looks like /docs/user-documentation/text-editor/adding-links#adding-an-anchor.
  • Save the page.

Now, your internal link should take users to the exact location in the page that you’ve specified.

TIP: If your anchor doesn’t quite go where you expect, or the section is hidden by your navigation when you use the link, try moving the anchor to the end of the previous section instead of the start of the section you’re trying to anchor to, that way users will end up with the right section of the page in view.

Linking tips

  • For links on your website, don’t use the full URL. Delete everything beginning with the / after your .com, .org, etc.
    • For example, for ymca.org/about, you would choose /about. This is called the relative path, and it will help your analytics tracking.
  • For links on other websites, grab the full URL, including the https://.
    • For example, for example.org/about, you would choose https://example.org/about.
  • For email links, add "mailto:example@example.org."

To update/change a link, click on the link text then click the link icon or use the popup options (in CKEditor 5).

To remove a link, highlight the link text and click the unlink icon.

Improving internal linking with Linkit

A community-contributed module, Linkit

provides an autocomplete interface for internal and external linking in rich-text editors. Linkit supports nodes, users, taxonomy terms, files, comments and basic support for all types of entities that define a canonical link template.

Drupal core will soon provide link autocomplete suggestions in CKEditor similar to what this module does. Until that issue is complete, developers may want to install and configure Linkit to improve the linking experience in the WYSIWYG editor.

8.2.2 - Adding Media with CKEditor 5

Using the new unified Media editor.

Once your site is updated to use CKEditor 5 you will see a new Insert Media button that unifies the processes for embedding Images, Documents, and Videos.

The new Insert Media button in CKEditor 5.

Add or select media

  1. To get started, click Insert Media in the CKEditor toolbar (or try the button if it’s hidden). You will be presented with the Add or select media dialog.
    The “Add or select media” dialog
  2. Choose the media type (Image, Document, etc.) that you would like to embed from the list on the left.
  3. Add or upload your media:
    • If you are adding new media:
      • If given the option, drag and drop the item from your filesystem to the dialog, or click Select File.
      • For Video (via YouTube or Vimeo), add the video directly via Admin > Content > Media Add Media > Video before opening the dialog.
    • If you are reusing media that exists on the site, scroll down and search for the item, then click the checkbox to select it.
  4. Choose Insert selected to embed the chosen media.

Customizing your media

Once your media has been inserted into the field, you can hover over the media to choose from a variety of options.

The embedded media options with labels for “Toggle caption on”, “Link media”, “Add alt text”, “Choose view mode”, and “Set alignment”

Toggle caption on

Displays a Caption area below your image. Once toggled, type your caption below the image.

Allows the media to be linked. See Adding Links for more information.

Override media image alternative text

(for Images only)

Allows you to add alternative text to the media. See WebAIM’s guidelines on Alternative Text for help choosing the right alt text for your image.

View mode

Allows you to select the size of the image. Typically you might choose “Full”, “Half”, or “Thumbnail”. Options may vary depending on site configuration.

Alignment

Choose how to align the media:

  • Break text
  • Align left and wrap text
  • Align center and break text
  • Align right and wrap text

Moving your media

Click and drag anywhere on the inserted media to relocate it in the WYSIWYG area.

Use the button at the top or bottom of the media to insert a paragraph before or after it.

Deleting your media

Click to select the media, then type Delete to remove it.

8.2.3 - Basic Text Formatting

Choose any of the options for your text below by clicking on the icon/performing the keyboard shortcut indicated. To format text you’ve previously typed, highlight the text and then click on the button in the editor. Many formatting options also have keyboard shortcuts.

CKEditor 5 Toolbar

The CKEditor 5 toolbar.

Demo Basic Text Formatting on CKEditor 5. or read more detail about these features.

  1. Bold
  2. Italics
  3. Underline
  4. Strikethrough
  5. Text alignment - Choose from Align left, Align center, Align right, or Justify.
  6. Font color - Use sparingly to avoid reduced text accessibility.
  7. Font background color - Use sparingly to avoid reduced text accessibility.
  8. Decrease indent - Only available when editing a list or block.
  9. Increase indent - Only available when editing a list or block.
  10. Heading - Set paragraphs or heading levels—headings in your content should be ordered sequentially for the best accessibility.
  11. Link - See Adding links.
  12. Bulleted list
    • Lists
    • like
    • this.
  13. Numbered list
    1. Lists
    2. like
    3. this.
  14. Block quote
  15. Insert media - See Adding media.
  16. Show more items - This will appear at the end of the first row of buttons and allow you to view the rest of the editor buttons.
  17. Remove format - Clears all formatting. Useful when pasting content from Word or other applications.
  18. Insert table - A feature-rich table editor.
  19. Source - View or edit the source code of the content. Be aware that some HTML tags may be stripped out due to Drupal’s Text Format rules. Click About text formats below the editor to learn more.
  20. Special characters - Insert mathematical operators, currency symbols, punctuation, or graphic symbols not typically accessible from the keyboard.
  21. Language - Mark specific sections of the content as different languages so that browsers and screen readers can correctly interpret them. More info.

CKEditor 4 toolbar

The CKEditor 4 toolbar.

Demo Basic Text Formatting on CKEditor 4 >

  1. Bold Text - Ctrl+B (Windows) or Command(⌘)+B (Mac) or clicking/unclicking the B icon
  2. Italics - Ctrl+I (Windows) or Command(⌘)+I (Mac) or clicking/unclicking the I icon
  3. Underline - Ctrl+U (Windows) or Command(⌘)+U (Mac)or clicking/unclicking the U icon
  4. Strikethrough - Clicking/unclicking the S icon
  5. Alignment controls - Left, Center, Right, and Justify.
  6. Font Color - A small grid of swatches you can apply to your text. Overrides the default font-color
  7. Text Background color (not recommended)
  8. Font (should remain Cachet or Verdana to conform to YMCA brand standards)
  9. Font Size - A dropdown to select the size of your text. Measured in points, not pixels. Overrides the default font size for your text, including styles and format.
  10. Indent - Add one or more indents to your copy. Also, have the option to undo the indent.
  11. Format - A dropdown list of text formats you can apply to your content. Helps to create sections. Comes out-of-the-box with six heading formats.

Most Ys will not use the “Formatted” format, which styles text like HTML code.

  1. Bulleted/Numbered lists - Click the numbered or bulleted list icon to create a list. You can create indented bullets by hitting your tab key or clicking on the indent icon

8.2.4 - Building Buttons

As an alternate to using the link tool, you can easily create buttons with YMCA Website Services using the button editor. When you click on the button icon, it will open a pop-up.

WYSIWYG Editor options with the button tab highlighted in green.

You can also edit a button you’ve created previously by clicking on the link in the text editor.

blog-description__text-editor-edit-button|640x295,75%

There are three tabs for creating your button: an info tab, a target tab, and an icon tab.

blog-description__text-editor-button-tabs|690x137,50%


Info Tab

This screen gives you basic options to style your link or button. On the top left “Style Option,” you will have several options to style your button or output it as a link.

  • The link option will allow you to embed your link text in line with a paragraph.
  • In Carnation (current theme), the button options all output different colors.
  • Note: For legacy sites using Lily or Rose themes (deprecated in Drupal 11), button styling may differ.

Button Guide Example:

@mlefler From the YMCA of Lincoln, NE, built this guide to provide examples of possible styles for buttons. Ask your developer partner to provide you a style guide for your site.

The top right “Size” dropdown four options for your button size. If you chose “Link” style option, the Size option will not affect your link.

blog-destiption__text-editor-button_style|166x500,50%
blog-destiption__text-editor-button_size|282x200,50%

Add the text for your link/button in the bottom left. Enter your link in the URL field on the bottom right.

  • For links on your website, don’t use the full URL. Highlight everything beginning with the / after your .com, .org, etc.
    • For example, for example.org/about, you would choose /about. This is called the relative path, and it will help your analytics tracking.
  • For links on other websites, grab the full URL, including the https://.
    • For example, for example.org/about, you should choose https://example.org/about.
  • For email links, add mailto:example@exampleymca.org.

More on absolute vs relative links.


Target Tab

This tab gives you the ability to change the behavior of your link. By default, all links will have a “not set” behavior, which means the link will open in the same active tab. The other options include…

  • Frame
  • Popup
  • New Window
  • Topmost Window
  • Same Window
  • Parent Window

» Learn about link targets


Icons Tab

blog-destiption__text-editor-button_icons|388x500,50%

You can add icons to your buttons or links in the icons tab. On the right, you will have fields that integrate with the Font Awesome library. To have an icon show up on the left, use the Left Icon text field. For the right, use the Right Icon text field.

Example: For a Right Chevron, type fa-chevron-right.

View free font awesome icons at fontawesome.com

Note: The left field makes reference to the Bootstrap Glyphicons library. As of this documentation, this icon library has been deprecated, and the Glyphicons fields will not work in YMCA Website Services.

Because the button embed is an open-source tool developed by a third party, these fields will go away once the code’s maintainer updates the code.

8.2.5 - Building Tables

Display contact information, pricing tables, and more using flexible, responsive tables.

Tables in CKEditor 5

The table editor has been drastically improved in CKEditor 5 and is described in detail in their documentation.

Adding a New Table

To add a table, click on the table icon. A popup will appear with your initial setup options:

The table icon in the CKEditor 4 toolbar.
The table properties dialog.

  • Set the number of rows and columns by typing numbers into those fields
  • The headers field dropdown gives you options to create a header column, row, or both.
    • This will count toward the total number of rows/columns in your table, so if you select four rows and have a header row, you will have three rows beneath that header.
  • Set the width and height in the top right text fields.
    • If you add no unit, the number you enter will default to pixels.
    • The fields also support percentages (such as 100%). We recommend percentages when you’re putting table in paragraphs other than simple content.
  • Style your table with the border size, cell size, and cell padding fields
    • Like the Height and Width fields, units default to pixels.
  • Align the values inside your cells using the Alignment dropdown.
  • Add a caption to your table using the Caption field
    • Captions will display above the table in Lily and Rose.
    • Captions display below the table in Carnation.
  • The summary field provides a brief description for your table for screen readers and accessibility devices. It does not print out visible text.

Editing the Table

To edit a table after you’ve built one, right click on the table. To access the basic table options, click on “Table Properties.”

The table properties option in the CKEditor 4 menu.

You can also double-click inside a table cell.

Adding Rows/Columns

To add a row or column, right-click and go to either “Row” or “Column” in the options that appear. You can insert a row or column before or after the current row/column.

Deleting Rows/Columns

Both the row and column options allow you to delete from the right-click options as well. Just right-click > Row or Column > Delete Row OR Delete Column.

To delete multiple rows or column, just highlight the rows or columns you want to delete.

Formatting Individual Cells/Groups of Cells

The “Cell” option from the right-click menu gives you same options as Row and Column, including inserting cells and deleting cells. You can also merge cells or split cells as you would in an excel table by selecting those options from the right-click menu.

However, there is another option called “Cell Properties” that allows you to style your cells as well. Just right-click > Cell > Cell Properties.

A sample of the available cell options when you right click on a cell

This opens a dialogue box similar to the table properties. You can set the width/height for your cell (pixels only for height; pixels or percentages for your width) in the fields on the left.

Farther down on the left, you can choose from a dropdown whether or not to wrap the text in a cell.

You can also use dropdowns to set your vertical and horizontal alignments for your cells.

On the bottom right, you can set your border and background colors for your cells. These field support hexadecimal (#FFF) and rgba (256,256,256,1.0) color formats.

Understanding hex colors.

Finally, you can edit your cells to “span” two or more rows or columns. For example, if you have a header cell you want to span two columns, you can set the “Columns Span” field to 2.

If you would like to apply these styling options to multiple cells, just highlight the cells you want to edit and Right-Click > Cell > Cell Properties.


Table Examples

To see an example of what a table might look like on your site, open the “Source” tab on your text editor and insert the HTML. You can then edit the content inside using the WYSIWYG text editor.

// Pricing Table

An example table with Registration and Pricing information.

    <h2>Registration and Pricing</h2>
    <table align="left" border="1" cellpadding="5" cellspacing="1" style="width: 500px;">
    	<caption>*A $25 deposit is due at the time of registration.</caption>
    	<thead>
    		<tr>
    			<th scope="col">Pricing Period</th>
    			<th scope="col">Dates</th>
    			<th scope="col">Member Pricing</th>
    			<th scope="col">Non-Member Pricing</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>Early Registration</td>
    			<td>Feb. 1-29</td>
    			<td>$120/week</td>
    			<td>$135/week</td>
    		</tr>
    		<tr>
    			<td>Regular Registration</td>
    			<td>March 1-May 1</td>
    			<td>$130/week</td>
    			<td>$150/week</td>
    		</tr>
    		<tr>
    			<td>Late Registration</td>
    			<td>May 1-End of Summer</td>
    			<td>$150/week</td>
    			<td>$175/week</td>
    		</tr>
    	</tbody>
    </table>

// Camp Locations

An example table with Camp Location data.

    <style>
      // To achieve the full effect of this table, insert this style tag above the table or insert it into the CSS Editor module.
      /* margin fix for h6 embedded inside table */
    td > h6 {
      margin-bottom: 0;
    }

    /* Fix for mobile table -> issue seems to be related to aggregate CSS file */
    .field-answer tr,
    .field-answer td,
    .paragraph--type--simple-content tr,
    .paragraph--type--simple-content td {
      display: block !important;
      border: none;
    }

    .field-answer td,
    .paragraph--type--simple-content td {
      padding: .75rem .31rem;
      text-align: left;
      vertical-align: middle;
    }

    .field-answer tr,
    .paragraph--type--simple-content tr {
      padding: .625rem 0;
    }

    .field-answer thead,
    .paragraph--type--simple-content thead {
      display: none;
    }

    @media (min-width: 992px) {
      	.field-answer tr,
    	.paragraph--type--simple-content tr {
          display: table-row !important;
      }
        .field-answer td,
      	.paragraph--type--simple-content td {
          display: table-cell !important;
      }
      .field-answer thead,
      .paragraph--type--simple-content thead {
        display: table-header-group;
      }
    }
           </style>
    <div class="table-responsive">
    <table align="left" cellpadding="10" cellspacing="10" class="w-100 table table-striped">
    	<thead>
    		<tr>
    			<th scope="col">
    			<h5>Center</h5>
    			</th>
    			<th scope="col">
    			<h5>Address</h5>
    			</th>
    			<th scope="col">
    			<h5>Contact</h5>
    			</th>
    			<th scope="col">
    			<h5>Schedule (PDF)</h5>
    			</th>
    			<th scope="col">&nbsp;</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>
    			<h5>Bellevue</h5>
    			</td>
    			<td>8101 TN-100<br />
    			Nashville, TN 37221</td>
    			<td><a href="tel:615-646-9622">615-646-9622</a></td>
    			<td>
    			<p><a href="/sites/default/files/2020-01/dycmp-20-dycmp-pdf-bellevue-menu.pdf"><i class="far fa-file-pdf">&nbsp;</i>Print Info</a></p>
    			</td>
    			<td><strong><a class="btn btn-outline-primary" href="https://operations.daxko.com/Online/4002/ProgramsV2/Search.mvc?program_id=TMP8151&amp;location_ids=B58&amp;category_ids=TAG12062">Register&nbsp;&gt;</a></strong></td>
    		</tr>
    		<tr>
    			<td>
    			<h5>Brentwood</h5>
    			</td>
    			<td>8207 Concord Rd.<br />
    			Brentwood, TN 37027</td>
    			<td><a href="tel:615-373-9622">615-373-9622</a></td>
    			<td><a href="/sites/default/files/2020-01/dycmp-20-dycmp-pdf-brentwood-menu.pdf"><i class="far fa-file-pdf">&nbsp;</i>Print Info</a></td>
    			<td><strong><a class="btn btn-outline-primary" href="https://operations.daxko.com/Online/4002/ProgramsV2/Search.mvc?program_id=TMP8151&amp;location_ids=B45&amp;category_ids=TAG12062">Register&nbsp;&gt;</a></strong></td>
    		</tr>
    		<tr>
    			<td>
    			<h5>Clarksville</h5>
    			</td>
    			<td>260 Hillcrest Dr.<br />
    			Clarksville, TN 37043</td>
    			<td><a href="tel:931-647-2376">931-647-2376</a></td>
    			<td><a href="/sites/default/files/2020-01/dycmp-20-dycmp-pdf-clarksville-menu.pdf"><i class="far fa-file-pdf">&nbsp;</i>Print Info</a></td>
    			<td><strong><a class="btn btn-outline-primary" href="https://operations.daxko.com/Online/4002/ProgramsV2/Search.mvc?program_id=TMP8151&amp;location_ids=B54&amp;category_ids=TAG12062">Register&nbsp;&gt;</a></strong></td>
    		</tr>
    		<tr>
    			<td>
    			<h5>Donelson</h5>
    			</td>
    			<td>3001 Lebanon Pike<br />
    			Nashville, TN 37214</td>
    			<td><a href="tel:615-889-2632">615-889-2632</a></td>
    			<td><a href="/sites/default/files/2020-01/dycmp-20-dycmp-pdf-donelson-menu.pdf"><i class="far fa-file-pdf">&nbsp;</i>Print Info</a></td>
    			<td><strong><a class="btn btn-outline-primary" href="https://operations.daxko.com/Online/4002/ProgramsV2/Search.mvc?program_id=TMP8151&amp;location_ids=B41&amp;category_ids=TAG12062">Register&nbsp;&gt;</a></strong></td>
    		</tr>
    		<tr>
    			<td>
    			<h5><a>Franklin</a></h5>
    			</td>
    			<td>501 S Royal Oaks Blvd.<br />
    			Franklin, TN 37064</td>
    			<td><a href="tel:615-591-0322">615-591-0322</a></td>
    			<td><a href="/sites/default/files/2020-01/dycmp-20-dycmp-pdf-franklin-menu.pdf"><i class="far fa-file-pdf">&nbsp;</i>Print Info</a></td>
    			<td><strong><a class="btn btn-outline-primary" href="https://operations.daxko.com/Online/4002/ProgramsV2/Search.mvc?program_id=TMP8151&amp;location_ids=B53&amp;category_ids=TAG12062">Register&nbsp;&gt;</a></strong></td>
    		</tr>
    </tbody>
    </table>

8.2.6 - CKEditor 4: Adding and Embedding Videos

Adding/Embedding Videos with the YMCA Website Services Text Editor

YMCA Website Services allows you to upload and embed images directly into a block of text, either from your computer or from the YMCA Website Services media library and browser.

Adding Videos

  • To add an video, click on the video button in the text editor toolbar.
  • Make sure you’re on the “Add Video” tab.
  • Next, name your video and paste the URL into the
  • Hit “Save” to go through to the next step.

Adding Videos from the Media Library

  • To add an image from the library, click on the image icon in the text editor toolbar.
  • Next, click on the tab that says “All Images”
  • Name your image, tag it, and write your alt description.
  • Hit “Save” to go through to the next step.

Sizing and Floating Your Video

After you save your video to the media library, a dialogue box will appear, giving you some additional options for embedding it inline.

  • Entity Name simply refers to the name of your video, which you provided on the previous screen.
  • Display as allows you to change the size of the video display without the size of the original video.* By default, YMCA Website Services comes with Full, Half, and Link display modes
    • Full means your video fills the area where it’s inserted
    • Half mean the video is half the size of its area.
    • Link outputs the video as a simple link.
  • Link to wraps the image in a link so that when users click on it, it goes to another page.
  • Align allows you to float a video to the center or either side of the page.
  • Caption outputs a caption below.

When you’re ready to embed the video, just click “Embed.” You can also click the back button on the bottom to choose a different video.

*If you want to make changes to the video you just embedded after you’ve added it, double click on the icon, and the “Embed media” dialogue will appear.

8.2.7 - CKEditor 4: Adding Images

Adding Images with the YMCA Website Services Text Editor

YMCA Website Services allows you to upload and embed images directly into a block of text, either from your computer or from the YMCA Website Services media library and browser.

Uploading Images

  • To add an image, click on the image button in the text editor toolbar.
  • Make sure you’re on the “Upload Images” tab.
  • Next, either drag your image into the upload area or click the button to select an image from your library.
  • Name your image, tag it, and write your alt description.
  • Hit “Save” to go through to the next step.

Adding Images from the Media Library

  • To add an image from the library, click on the image icon in the text editor toolbar.
  • Next, click on the tab that says “All Images”
  • Name your image, tag it, and write your alt description.
  • Hit “Save” to go through to the next step.

Sizing and Floating Your Images

After you save your image to the media library, a dialogue box will appear, giving you some additional options for embedding your image inline.

  • Entity Name simply refers to the name of your image, which you provided on the previous screen.
  • Display as allows you to change the size of the image display without the size of the original image.* By default, YMCA Website Services comes with Full, Half, and Link display modes
    • Full means your image fills the area where it’s inserted
    • Half mean the picture is half the size of its area.
    • Link outputs the image as a simple link to the picture.
  • Link to wraps the image in a link so that when users click on it, it goes to another page.
  • Align allows you to float an image to the center or either side of the page.
  • Caption outputs a caption below the image.

When you’re ready to embed the image, just click “Embed.” You can also click the back button on the bottom to choose a different image.

If you want to make changes to the image you just embedded after you’ve added it, double click on the icon, and the “Embed media” dialogue will appear.

More on Images

8.2.8 - CKEditor 4: Adding/Embedding Documents

YMCA Website Services allows you to upload and embed documents directly into a block of text, either from your computer or from the YMCA Website Services media library and browser.

Adding Documents

  • To add a document, click on the document button in the text editor toolbar.
  • Make sure you’re on the “Add Document” tab.
  • Next, name your document and paste the URL into the
  • Hit “Save” to go through to the next step.

Adding Documents from the Media Library

  • To add a document from the library, click on the document icon in the text editor toolbar.
  • Next, click on the tab that says “All Document”
  • Name your document, tag it, and write your alt description.
  • Hit “Save” to go through to the next step.

Sizing and Floating Your Document

After you save your document to the media library, a dialogue box will appear, giving you some additional options for embedding it inline.

  • Entity Name simply refers to the name of your document, which you provided on the previous screen.
  • Display as allows you to change the size of the document display without the size of the original video.* By default, YMCA Website Services comes with Full, Half, and Link display modes
    • Full means your document fills the area where it’s inserted
    • Half mean the document is half the size of its area.
    • Link outputs the document as a simple link.
  • Link to wraps the document in a link so that when users click on it, it goes to another page.
  • Align allows you to float a document to the center or either side of the page.
  • Caption outputs a caption below.

When you’re ready to embed the document, just click “Embed.” You can also click the back button on the bottom to choose a different document.

*If you want to make changes to the document you just embedded after you’ve added it, double click on the icon, and the “Embed media” dialogue will appear.

8.3 - Page/Content Types

YMCA Website Services features many different kinds of pages, or content types. Choosing the right content type will ensure your collect the right information and allow you the flexibility to create layouts.

A content type is a reusable container for content. Content types have a common structure and purpose. They support site architecture and make content presentation consistent. This helps people find what they need.

There are two different kinds of Content Types in the distribution:

  • Standalone types are content that is displayed directly to users, like Landing Pages and Branches. They may also be displayed in views or other groupings.
  • Helper types are content that is never displayed on its own to users. It is displayed in aggregate or as part of a supporting application like Activity Finder or Membership Calculator.

Most sites will be built using a combination of these content types. The right content type for your content will depend on how it will be used and displayed. Landing Pages will often make up the bulk of your site, but you may also need to create Events, Articles, Branches, and other content types to support your site’s goals.

Which Content Type Should I Use?

Before you begin building your site, you should have a good idea of what kind of content you will be creating. Consider conducting a content audit to understand what content you have and what content you need to create.

Once you begin building your site, you will most likely start building Landing Pages. These are the most flexible content type and can be used for a wide variety of content.

Location pages like Branches and Camps are also important to build out, as they will be used to promote each individual location.

Finally, you can create supporting content types like Events and Articles to provide more timely information to your users.


Content Types Library

Browse all available content types by category. Click any type to see detailed documentation and field specifications.

Layout Builder Content Types (Current)

Modern, flexible content types built for the Layout Builder page building system.

Paragraphs-Based Content Types (Legacy/Standard)

These content types use Paragraphs components or structured field configurations instead of Layout Builder.

Helper Content Types

These content types are not displayed on their own, but power supporting applications and features.


Migration Guide

Ready to modernize your site? If you’re using legacy Paragraphs content types (Landing Page, Blog Post, News Post), you can migrate to modern Layout Builder versions for a better editing experience.

→ View Complete Migration Guide

What you’ll find in the migration guide:

  • Content audit tools to assess your migration scope
  • Three migration approaches (manual, automated, hybrid)
  • Step-by-step manual migration process
  • Paragraph to Layout Builder block mapping table
  • Troubleshooting common issues
  • Decision framework to choose the right approach

Quick decision guide:

  • < 100 pages: Manual recreation recommended (15-30 min per page)
  • 100-500 pages: Manual or phased migration (spread over 3-6 months)
  • 500+ pages: Consider automated migration or phased approach

8.3.1 - Article (Layout Builder)

Create news articles, blog posts, and press releases with flexible Layout Builder layouts.

The Article (Layout Builder) content type is the modern, flexible way to publish news, blog posts, and press releases on your YMCA website. It combines all news-related content into a single content type with drag-and-drop Layout Builder capabilities.

Machine name: article_lb

Designs: Mobile | Desktop

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/FBtQmfy9C7Q?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="YouTube video"></iframe>
</div>

When to Use Article (Layout Builder)

Use Article (LB) for:

  • News articles - Organization announcements, community news, press coverage
  • Blog posts - Staff stories, member spotlights, program highlights
  • Press releases - Official statements, media announcements
  • Timely content - Date-based content that needs publishing workflow
  • Categorized content - Content that needs tags/categories for organization

###Do NOT Use Article (LB) for:

  • Static pages - Use Landing Page (Layout Builder) instead
  • Event listings - Use Event (Layout Builder) for date/time-specific events
  • Program information - Use Program or Program Subcategory content types

Article Types Explained

Article (LB) includes three types to help you organize content:

Blog

Best for: Personal stories, staff perspectives, member journeys, program highlights

Example uses:

  • “Meet Our New Aquatics Director”
  • “5 Tips for Staying Active This Winter”
  • “Member Spotlight: Sarah’s Weight Loss Journey”

Display: Typically shown on /blog page or blog listing views

News

Best for: Organization announcements, community news, updates

Example uses:

  • “New Youth Center Opens Next Month”
  • “YMCA Breaks Ground on Expansion Project”
  • “Summer Camp Registration Now Open”

Display: Typically shown on /news page or news listing views

Press Release

Best for: Official statements, media announcements, formal communications

Example uses:

  • “YMCA Announces Partnership with Local Schools”
  • “YMCA Responds to Community Needs During Crisis”
  • “Annual Report Shows Record Membership Growth”

Display: Typically shown on /press page or press release archives

Pro Tip: The type you select determines where the article appears in Views-based listings. Choose the type that matches how you want to organize your site.


Creating an Article

Step 1: Add New Article

  1. Navigate to Admin > Content > Add Content
  2. Select Article (Layout Builder)
  3. You’ll see the Article creation form

Step 2: Fill in Required Fields

Title (Required)

The headline of your article. This appears at the top of the page and in listing views.

Best practices:

  • Keep under 60-70 characters (Google truncates longer titles)
  • Front-load important keywords
  • Be specific and descriptive
  • Use active voice

Examples:

  • ✅ “Youth Soccer Program Adds Saturday Classes”
  • ✅ “5 Benefits of Family Swim Lessons”
  • ❌ “Program Update” (too vague)
  • ❌ “The YMCA is excited to announce that we are expanding our youth soccer program with new Saturday classes starting in March” (too long)

Subtitle (Optional)

Additional context or supporting detail for the title.

Best practices:

  • Use to add context without cluttering the title
  • Keep to 1-2 short sentences
  • Appears below title in article header

Example:

  • Title: “New Childcare Center Opening”
  • Subtitle: “State-of-the-art facility will serve 100 families starting September 1”

Type (Required)

Select Blog, News, or Press Release based on content purpose (see Article Types above).

Header Image (Required for most themes)

Featured image displayed at the top of the article and in listing views.

Best practices:

  • Size: 1920x1080px recommended (16:9 aspect ratio)
  • File size: Under 500KB (compress with TinyPNG or similar)
  • Format: JPG or WebP for photos, PNG for graphics
  • Alt text: Always include descriptive alt text for accessibility
  • Content: High-quality, relevant image that reflects article topic

Image tips:

  • Use real photos of your YMCA when possible (authentic > stock photos)
  • Ensure faces are visible and in-focus for people-focused stories
  • Avoid text-heavy images (text may not scale on mobile)
  • Check image looks good when cropped to square (for some listing views)

Categories/topics for organizing and filtering articles.

Best practices:

  • Number: Choose 1-3 relevant tags per article
  • Consistency: Use existing tags when possible (avoid creating duplicates)
  • Broad topics: Think categories, not keywords
  • User-focused: Use terms your audience would search for

Example tag structure:

  • Program areas: Youth Programs, Aquatics, Wellness, Childcare
  • Content types: Member Stories, Staff Updates, Community News
  • Seasonal: Summer Camp, Holiday Hours, Back to School

Common tag list (3-10 tags recommended):

  • Youth Programs
  • Aquatics
  • Wellness & Fitness
  • Childcare
  • Community Impact
  • Member Stories
  • Healthy Living

Avoid: Over-tagging (10+ tags), one-off tags, jargon-heavy tags

Body (Required)

Main article content using the WYSIWYG editor.

Best practices:

  • Paragraph length: 2-3 sentences per paragraph (easier to scan)
  • Subheadings: Use H2 and H3 headings to break up long content
  • Length: 300-800 words for most articles (longer for in-depth content)
  • Links: Link to related programs, registration pages, other articles
  • Lists: Use bulleted or numbered lists for scannable content
  • Bold: Use sparingly to highlight key points

Structure template:

  1. Lead paragraph: Hook + key information (who, what, when, where, why)
  2. Body paragraphs: Details, quotes, context
  3. Call to action: What should readers do next?

Example structure:

[LEAD] The YMCA is launching a new Saturday morning youth soccer program starting March 15. The program will serve ages 5-12 and includes skill development, teamwork, and fun games.

[H2] Program Details

The eight-week program runs every Saturday from 9-10:30am at Miller Park. Sessions are divided by age group...

[H2] How to Register

Registration opens February 1. Visit our Activity Finder or call (555) 123-4567...

Locations (Optional)

Associate the article with specific Branch pages.

When to use:

  • Article is specific to one branch location
  • You want the article to appear on the Branch page’s “News” section
  • Local community stories

Example: Article about “Westside YMCA Pool Renovation” should be tagged with Westside YMCA location.

Published Date (Required)

The date displayed on the article (defaults to today).

Best practices:

  • Use actual publication date for news
  • Can backdate for archival content
  • Determines sorting order in listing views
  • Visible to readers on article page

Step 3: Configure Layout (Optional)

After saving, click Layout tab to add Layout Builder sections and blocks.

Common Article layouts:

  • Simple: Header image + body text only (default)
  • Enhanced: Add Related Articles block at bottom
  • Rich media: Embed videos, image galleries, testimonial blocks
  • Call to action: Add Cards or Button blocks for program registration

→ See Layout Builder documentation

If your site has SEO modules enabled (Meta tags, Pathauto):

Meta title: Auto-generated from article title (usually fine) Meta description: 150-160 characters summarizing article URL alias: Auto-generated from title (e.g., /news/youth-soccer-program-adds-saturday-classes)

Pro Tip: Write meta description in your own words - don’t just copy first sentence of article.

Step 5: Preview and Publish

  1. Click Save to create draft
  2. Click Preview to see how article looks
  3. Check mobile responsive display
  4. Verify all links work
  5. Check Published checkbox
  6. Click Save to publish live

Article Workflow Best Practices

Publishing Frequency

Recommended publishing schedule:

  • Small YMCAs: 1-2 articles per month minimum
  • Medium YMCAs: 2-3 articles per month (weekly is ideal)
  • Large YMCAs: 3-4 articles per week for consistent engagement

Why consistency matters:

  • Keeps website fresh and updated
  • Improves SEO (search engines favor regularly updated sites)
  • Engages members and community
  • Provides shareable content for social media

Content Planning

Topic clusters approach:

  1. Identify 3-5 main topic areas (e.g., Youth Programs, Healthy Living, Community Impact)
  2. Create pillar content - Comprehensive overview pages for each topic
  3. Write supporting articles - Specific stories that link back to pillar pages

Example cluster:

  • Pillar: “Youth Programs at Our YMCA” (Landing Page)
  • Articles:
    • “Why Youth Sports Build Character” (Blog)
    • “New After-School Program Launches” (News)
    • “Meet Our Youth Director” (Blog)

Editorial Calendar

Plan ahead with an editorial calendar:

  • Schedule articles 2-4 weeks in advance
  • Align with program registration dates
  • Cover seasonal topics (summer camp, holiday hours)
  • Include staff spotlights and member stories
  • Balance news vs. blog vs. press releases

Monthly content mix (example):

  • 2 news articles (announcements, updates)
  • 1-2 blog posts (stories, tips, spotlights)
  • 1 seasonal/timely piece
  • 0-1 press releases (as needed)

Roles and Permissions

Common workflow:

  1. Content Editor - Creates draft articles
  2. Communications Manager - Reviews and edits
  3. Administrator - Approves and publishes

Drupal permissions:

  • Content Editor: Create Article (Layout Builder), Edit own Article
  • Communications Manager: Edit any Article (Layout Builder)
  • Administrator: Delete any Article, Manage publishing

SEO Best Practices for Articles

Headline Optimization

  • Length: 60-70 characters (Google’s display limit)
  • Keywords: Include main keyword/topic near the beginning
  • Clarity: Readers should know what article is about from headline
  • Avoid: Clickbait, vague headlines, excessive punctuation

Meta Description

  • Length: 150-160 characters for desktop, 120 for mobile
  • Include: Primary keyword and call to action
  • Purpose: Convince searchers to click your result
  • Avoid: Duplicate descriptions (each article should be unique)

Image Optimization

  • Alt text: Describe image content (helpful for screen readers and SEO)
  • File names: Use descriptive names (youth-soccer-team.jpg not IMG_1234.jpg)
  • Compression: Keep under 500KB without sacrificing quality
  • Dimensions: 1920x1080px standard (optimized versions created automatically)

Internal Linking

  • Link to related content: Other articles, program pages, registration
  • Anchor text: Use descriptive link text (“youth soccer program” not “click here”)
  • Quantity: 2-5 internal links per article is good
  • Context: Links should add value and make sense in context

Structured Data (Advanced)

If your site has Schema.org structured data enabled, articles automatically include:

  • Article headline
  • Publication date
  • Author information
  • Featured image
  • Organization details

This helps search engines display rich snippets (enhanced search results with images and metadata).


Common Mistakes to Avoid

❌ Mistake 1: Not Using Tags

Problem: Articles can’t be filtered or organized Solution: Always select 1-3 relevant tags

❌ Mistake 2: Missing Header Images

Problem: Articles look incomplete in listing views Solution: Always upload a header image before publishing

❌ Mistake 3: Walls of Text

Problem: Long paragraphs are hard to read, especially on mobile Solution: Keep paragraphs to 2-3 sentences, use subheadings

❌ Mistake 4: Vague Titles

Problem: “Program Update” doesn’t tell readers what the article is about Solution: Be specific: “Youth Soccer Program Adds Saturday Classes”

❌ Mistake 5: No Call to Action

Problem: Readers don’t know what to do next Solution: End with clear CTA (register, learn more, contact us)

❌ Mistake 6: Ignoring Mobile

Problem: Article looks great on desktop but broken on mobile Solution: Always preview on mobile before publishing

❌ Mistake 7: Publishing Without Review

Problem: Typos, broken links, missing information Solution: Use draft workflow, have second person review before publishing


Use Cases & Examples

Use Case 1: Member Spotlight Blog Post

Title: “Member Spotlight: How Sarah Lost 50 Pounds at the Y” Type: Blog Tags: Member Stories, Wellness & Fitness Header Image: Photo of Sarah (with permission) Body:

  • Lead: Sarah’s transformation story
  • Middle: Her routine, challenges, support from staff
  • End: Call to action to join wellness programs

Layout additions:

  • Related Articles block (link to other member stories)
  • Cards block (link to wellness programs)

Use Case 2: Program Announcement News Article

Title: “Summer Day Camp Registration Opens March 1” Type: News Tags: Youth Programs, Summer Camp Header Image: Kids at camp from previous summer Body:

  • Lead: Key dates and registration information
  • Middle: Camp schedule, activities, pricing
  • End: How to register

Layout additions:

  • Button block (Register Now CTA)
  • Accordion block (FAQs about camp)

Use Case 3: Press Release

Title: “YMCA Partners with School District for After-School Programs” Type: Press Release Tags: Community Impact, Youth Programs Header Image: Partnership signing photo Body:

  • Lead: Partnership announcement, key details
  • Middle: Program benefits, quotes from partners
  • End: Contact information for media inquiries

Layout additions:

  • Simple layout (press releases typically don’t need extra blocks)

Article vs. Landing Page: Which to Use?

CriteriaUse Article (LB)Use Landing Page (LB)
Timely content✅ News, announcements, time-sensitive❌ Evergreen, static information
Publishing date✅ Needs visible date❌ No date needed
Organization✅ Needs tags/categories❌ Doesn’t need categorization
Display✅ In news/blog listing views❌ Standalone page
Lifespan✅ Temporary (archived after time)❌ Permanent (updated as needed)
ExamplesNews, blog posts, press releasesAbout Us, program pages, static content

Simple rule: If it’s news or has a date, use Article. If it’s evergreen, use Landing Page.


Quick Reference

Common Tasks

TaskSteps
Create articleAdmin → Content → Add Content → Article (Layout Builder)
Edit articleContent → Find article → Edit
Change typeEdit → Change Type dropdown → Save
Add to branchEdit → Locations field → Select branch → Save
UnpublishEdit → Uncheck Published → Save
Schedule publishingRequires Scheduler module (ask admin)

Field Summary

FieldRequiredPurposeBest Practice
TitleYesArticle headline60-70 characters, descriptive
SubtitleNoSupporting detail1-2 sentences
TypeYesBlog/News/Press ReleaseChoose based on content purpose
Header ImageRecommendedFeatured image1920x1080px, under 500KB
TagsRecommendedCategories1-3 tags, use existing when possible
BodyYesMain content2-3 sentences per paragraph, use headings
LocationsNoAssociate with branchUse for branch-specific news
Published DateYesDisplay dateDefaults to today, can backdate

Tag Organization Tips

3-5 Core Categories (Broad):

  • Youth Programs
  • Aquatics
  • Wellness & Fitness
  • Childcare
  • Community Impact

5-10 Subcategories (Specific):

  • Member Stories
  • Staff Updates
  • Healthy Living Tips
  • Program Announcements
  • Facility Updates

Avoid:

  • Too many tags (10+ creates decision paralysis)
  • One-off tags (creates clutter)
  • Duplicate tags with slightly different names

Troubleshooting

Header Image Not Displaying

Problem: Uploaded image doesn’t show on article page Solutions:

  • Check image file size (should be under 10MB)
  • Verify image uploaded successfully (check Media library)
  • Clear cache (Admin → Configuration → Performance → Clear all caches)
  • Check theme settings (some themes hide header images)

Article Not Appearing in News View

Problem: Published article doesn’t show on /news page Solutions:

  • Verify Type is set to “News” (not Blog or Press Release)
  • Check Published checkbox is checked
  • Verify Published Date is not in future
  • Clear cache

Can’t Edit Layout

Problem: Layout tab is missing or disabled Solutions:

  • Ensure you have “Use Layout Builder” permission
  • Check content type has Layout Builder enabled
  • Save article first (must exist before editing layout)

Tags Not Showing

Problem: Tags appear in form but not on article page Solutions:

  • Check theme displays tags (some themes hide tags)
  • Verify Display settings (Admin → Structure → Content types → Article → Manage display)
  • Tags may only display in listing views, not full article page


Need Help?

Happy publishing! Articles are one of the best ways to keep your YMCA website fresh, engage your community, and showcase the great work you do. 📰

8.3.2 - Camp Subpage (Layout Builder)

Create flexible camp microsite pages for activities, schedules, packing lists, and registration information.

The Camp Subpage (Layout Builder) content type allows you to build comprehensive camp microsites with flexible, drag-and-drop pages for activities, schedules, packing lists, registration, and more.

Machine name: camp_lp

Designs: Mobile | Desktop


When to Use Camp Subpage (Layout Builder)

Use Camp Subpage (LB) for:

  • Activity pages - Detailed descriptions of camp activities (swimming, archery, hiking)
  • Schedule pages - Daily schedules, weekly calendars, session timelines
  • Packing lists - What to bring, what not to bring, gear recommendations
  • Registration pages - How to register, deadlines, forms, pricing details
  • FAQ pages - Common questions about safety, health, policies, refunds
  • Staff pages - Meet the counselors, director bios, staff qualifications
  • Policies pages - Rules, safety protocols, medical procedures, cancellation policies

Do NOT Use Camp Subpage (LB) for:

  • Main camp location page - Use Camp content type for the primary camp landing page
  • Branch day camps - Use Program Subcategory or Landing Page (LB) instead
  • Event-specific pages - Use Event (Layout Builder) for time-specific camp events

Camp Subpage vs. Other Content Types

CriteriaUse Camp Subpage (LB)Use CampUse Program Subcategory
PurposeInternal microsite pagesMain camp landing pageBranch day camp programs
Parent pageRequires Camp pageStandaloneRequires Program page
MenusInherits camp menusCreates camp menusUses site navigation
LocationOutdoor camp facilitiesOutdoor camp locationsBranch facilities
ExamplesActivities, schedules, packing listsCamp Widjiwagan homepageSummer Day Camp

Simple rule: Camp Subpage is for additional pages within a camp microsite. Camp is the main landing page. Program Subcategory is for branch-based day camps.


Creating a Camp Subpage

Prerequisites

Before creating Camp Subpages, you must:

  1. Create a parent Camp page - Navigate to Admin > Content > Add Content > Camp
  2. Set up Camp menus - Configure Camp Menu and Camp Quick Links on the parent Camp page
  3. Enable Layout Builder on Camp page - Check “Use Layout Builder” on the Camp page

→ See Camp content type documentation

Step 1: Add New Camp Subpage

  1. Navigate to Admin > Content > Add Content
  2. Select Camp Subpage (or Camp Landing Page in older versions)
  3. You’ll see the Camp Subpage creation form

Step 2: Fill in Required Fields

Title (Required)

The page headline that appears at the top and in navigation menus.

Best practices:

  • Be specific and descriptive (“Daily Schedule” not “Schedule”)
  • Use terminology parents/campers understand
  • Keep under 60 characters for menu display
  • Match menu link text exactly

Examples:

  • ✅ “What to Pack for Camp”
  • ✅ “Daily Schedule & Activities”
  • ✅ “How to Register”
  • ✅ “Meet Our Camp Staff”
  • ❌ “Info” (too vague)
  • ❌ “Everything You Need to Know About What to Bring to Camp Coleman This Summer” (too long)

Camp (Required)

The parent Camp page this subpage belongs to.

How to select:

  1. Click in the Camp field
  2. Start typing the name of your Camp page (e.g., “Camp Coleman”)
  3. Select from autocomplete dropdown

Camp Subpage admin with Camp selection field

Important: This creates the parent-child relationship and ensures camp menus appear on this subpage.

Step 3: Configure Layout

After clicking Save and edit layout, you’ll see the Layout Builder interface with camp menus pre-populated.

Camp Subpage layout with inherited menus

What’s pre-populated:

  • ✅ Camp Quick Links (utility menu)
  • ✅ Camp Menu (main navigation)
  • ✅ Site logo and branding
  • ✅ Camp Header layout

You now add:

  • Content sections (1 column, 2 column, etc.)
  • Layout Builder blocks (Text, Cards, Images, etc.)
  • Camp-specific content

→ See Layout Builder documentation

Step 4: Add Content Blocks

Common block patterns for Camp Subpages:

Activity Page Example

[Banner Block] - Hero image of activity
[Simple Content Block] - Overview paragraph
[Cards Block] - Skill levels (Beginner, Intermediate, Advanced)
[Accordion Block] - FAQ about the activity
[Gallery Block] - Photos from past sessions

Schedule Page Example

[Simple Content Block] - Introduction to daily flow
[Table Block] - Daily schedule table
[Accordion Block] - Schedule variations by age group
[Simple Content Block] - Special event callouts

Packing List Page Example

[Banner Block] - Header image
[Simple Content Block] - Introduction
[2-Column Section]
  - Left: "What to Bring" (bulleted list)
  - Right: "What NOT to Bring" (bulleted list)
[Accordion Block] - Optional items by activity
[Cards Block] - Gear recommendations with links

Registration Page Example

[Banner Block] - Registration header
[Simple Content Block] - Key dates and deadlines
[Cards Block] - Pricing tiers (week 1, week 2, full summer)
[Webform Block] - Registration interest form
[Accordion Block] - Payment FAQ
[Simple Content Block] - Contact information

Step 5: Add to Camp Menu

Camp Subpages are not automatically added to camp navigation.

To add your new subpage to the Camp Menu:

  1. Go to your parent Camp page → Layout tab
  2. Find the Camp Menu block → Click Configure
  3. Click Edit links
  4. Click Add new link
  5. Fill in:
    • Menu link title: Display name (e.g., “Daily Schedule”)
    • Link: Internal path (e.g., /camp-subpage/daily-schedule) or start typing page title
    • Enabled: Checked
    • Show as expanded: Checked (if it has child items)
  6. Save the link
  7. Save the menu configuration
  8. Update the block
  9. Save layout on the Camp page

Pro Tip: Menu changes on the Camp page will reflect on all Camp Subpages since menus are copied when subpages are created.

Step 6: Preview and Publish

  1. Click Save layout to create draft
  2. Click Preview to see how page looks
  3. Check that camp menus display correctly
  4. Verify navigation between camp pages works
  5. Test mobile responsive display
  6. Check Published checkbox
  7. Click Save to publish live

Camp Subpage Best Practices

Microsite Structure

Recommended camp microsite structure:

Camp Coleman (Camp page)
├── About Camp Coleman (Camp Subpage)
├── Daily Schedule (Camp Subpage)
├── Activities (Camp Subpage)
│   ├── Swimming (Camp Subpage - child)
│   ├── Archery (Camp Subpage - child)
│   └── Hiking (Camp Subpage - child)
├── What to Pack (Camp Subpage)
├── Registration (Camp Subpage)
├── Staff (Camp Subpage)
└── FAQ (Camp Subpage)

Menu organization tips:

  • Group related pages (all activities under “Activities” parent)
  • Limit top-level menu items to 5-7 (avoid overwhelming parents)
  • Use child menu items for detailed sub-topics
  • Order by user journey (About → Schedule → Activities → Registration)

Seasonal Content Planning

Content planning timeline:

TimelineActionContent Type
2-3 months beforePublish registration, dates, pricingRegistration page
1-2 months beforeUpdate activities, schedules, staff biosActivity/Staff pages
3-4 weeks beforeRelease packing lists, FAQ updatesPacking/FAQ pages
1 week beforeFinal reminders, check-in detailsUpdates across pages
During campPhoto galleries, daily updatesGallery blocks, news
After campTestimonials, next year previewTestimonial blocks

Why timing matters:

  • SEO: Google needs 1-2 months to crawl and rank seasonal content
  • Parents: Research and compare camps 2-3 months in advance
  • Planning: Staff needs lead time to prepare content

Content Freshness

Update frequency by page type:

  • Registration pages: Update 3-4 months before each season (dates, pricing, deadlines)
  • Activity pages: Annual review (new activities, updated descriptions)
  • Packing lists: Annual review + weather-based updates
  • FAQ pages: Update as questions arise (rolling updates)
  • Staff pages: Update when staff changes (usually annually)
  • Photo galleries: Update during/after each camp session

Parent-Focused Writing

Write for your audience - parents and guardians:

  • Safety first: Address safety concerns upfront (certified staff, medical procedures, supervision ratios)
  • Clear logistics: Dates, times, drop-off/pick-up, what to bring
  • Authenticity: Use real photos, real camper testimonials, real staff bios
  • Scannable: Use bullet points, headings, short paragraphs (2-3 sentences)
  • Action-oriented: Clear calls to action (Register Now, Download Packing List, Contact Us)

Example - Good vs. Bad:

Bad (vague, jargon):

“Camp Coleman offers a comprehensive aquatics program with certified instruction in a supervised environment.”

Good (specific, parent-focused):

Swimming Program

All campers swim daily with Red Cross certified lifeguards. We offer:

  • Beginner lessons (learn to swim)
  • Intermediate skills (stroke improvement)
  • Advanced training (diving, water safety)
  • Free swim periods (supervised fun)

Safety: 1 lifeguard per 10 swimmers. All campers take swim test on Day 1.

Accessibility

Make content accessible:

  • Alt text: Describe all images (especially activity photos)
  • Headings: Use H2, H3 structure for screen readers
  • Links: Descriptive link text (“Download packing list PDF” not “click here”)
  • Color contrast: Ensure text readable on backgrounds
  • Tables: Use proper table headers for schedules

Mobile Optimization

70% of parents browse camp info on mobile:

  • Test all pages on phone/tablet before publishing
  • Use responsive images (compress to under 500KB)
  • Avoid wide tables (use accordion blocks for schedules on mobile)
  • Keep forms short (only essential fields)
  • Make buttons large and tappable (minimum 44x44px)

Common Patterns by Page Type

Activity Page

Purpose: Detailed description of single camp activity

Recommended blocks:

  1. Banner - Activity hero image
  2. Simple Content - What is this activity? (2-3 paragraphs)
  3. Cards - Skill levels or age groups
  4. Gallery - Photos from past sessions
  5. Accordion - FAQs (equipment, safety, experience level)
  6. Simple Content - Staff qualifications for this activity

SEO tip: Include keywords like “camp [activity] for kids” in title and first paragraph


Daily Schedule Page

Purpose: Show typical day at camp

Recommended blocks:

  1. Simple Content - Overview of daily flow
  2. Table or Accordion - Hour-by-hour schedule
  3. Cards - Highlight special activities (campfire, talent show)
  4. Accordion - Schedule variations by age group
  5. Simple Content - Evening activities and lights-out

Pro Tip: Use Accordion blocks for schedules on mobile (better than wide tables)


Packing List Page

Purpose: Help parents pack appropriately

Recommended blocks:

  1. Banner - Packing theme image
  2. Simple Content - General packing guidance
  3. Two-column section:
    • Left: What to Bring (bulleted list in Simple Content)
    • Right: What NOT to Bring (bulleted list in Simple Content)
  4. Accordion - Optional items by activity (horseback riding gear, etc.)
  5. Cards - Recommended gear with purchase links
  6. Download - Printable packing list PDF

Content tips:

  • Group by category (clothing, toiletries, bedding, personal items)
  • Specify quantities (“3-5 t-shirts” not just “shirts”)
  • Explain WHY for restricted items (“No electronics - we focus on outdoor connection”)

Registration Page

Purpose: Guide parents through registration process

Recommended blocks:

  1. Banner - Registration header
  2. Alert - Key deadlines and dates (use alert block if available)
  3. Simple Content - How to register (step-by-step)
  4. Cards - Pricing options (early bird, regular, late)
  5. Webform - Registration interest form
  6. Accordion - Payment FAQs (deposits, refunds, financial aid)
  7. Button - Link to external registration system (Daxko, CampMinder, etc.)
  8. Simple Content - Contact info for questions

Conversion tips:

  • Show total cost upfront (no hidden fees)
  • Offer multiple payment options (deposit + installments)
  • Address objections in FAQ (cancellation policy, refunds)
  • Create urgency (early bird deadline, limited spots)

FAQ Page

Purpose: Answer common parent concerns

Recommended blocks:

  1. Simple Content - FAQ introduction
  2. Accordion - Questions grouped by category:
    • Safety & Supervision
    • Health & Medication
    • Daily Activities
    • What to Bring
    • Communication & Visits
    • Refunds & Cancellations
  3. Simple Content - Contact info for unlisted questions

FAQ best practices:

  • Group questions by topic (use accordion sections)
  • Write conversationally (“What if my child gets homesick?” not “Homesickness policy”)
  • Link to related pages (packing list, schedule, activities)
  • Update seasonally based on actual parent questions

Staff Page

Purpose: Build trust by introducing camp team

Recommended blocks:

  1. Banner - Staff team photo
  2. Simple Content - Staff philosophy and qualifications
  3. Cards - Staff bios with photos (Director, Program Director, Head Counselor)
  4. Simple Content - Counselor training and certifications
  5. Testimonials - Parent/camper quotes about staff (if testimonial block available)

Bio tips:

  • Include photo, name, role, certifications
  • Add personal touch (years at camp, favorite activity)
  • Highlight safety credentials (CPR, First Aid, lifeguard)
  • Show diversity of staff (age, background, skills)

Camp Menu Strategy

Camp Quick Links (utility menu in header):

  • Contact
  • Register
  • Dates & Pricing
  • FAQ
  • Packing List

Camp Menu (main navigation):

  • About
  • Schedule
  • Activities (with child items)
  • Staff
  • Registration

Navigation principles:

  • Limit top-level items: 5-7 maximum
  • Logical order: Follow parent journey (About → What We Do → How to Register)
  • Descriptive labels: “Daily Schedule” not “Schedule”
  • Consistent naming: Use same terminology across site

Example menu structure:

Camp Quick Links (utility):
- Register Now
- Dates & Pricing
- Contact Us
- FAQ

Camp Menu (main):
- About Camp Coleman
- Daily Schedule
- Activities ▼
  - Swimming
  - Archery
  - Hiking & Nature
  - Arts & Crafts
- What to Pack
- Registration

SEO Best Practices for Camp Subpages

Page Titles

  • Format: [Topic] | [Camp Name] (e.g., “Daily Schedule | Camp Coleman”)
  • Length: 50-60 characters
  • Keywords: Include primary search term (activity name, “camp schedule”, “packing list”)

Meta Descriptions

  • Length: 150-160 characters
  • Include: Camp name, key benefit, call to action
  • Example: “Camp Coleman’s daily schedule balances outdoor activities, skill-building, and fun. View our hour-by-hour schedule for ages 7-15. Register today!”

Image Optimization

  • File names: Descriptive (camp-coleman-archery.jpg not IMG_1234.jpg)
  • Alt text: Describe image for accessibility and SEO (“Campers practicing archery with certified instructor”)
  • Compression: Keep under 500KB (use TinyPNG or similar)
  • Dimensions: 1920x1080px for banners, 800x600px for content images

Internal Linking

  • Link between camp subpages (“See our Daily Schedule for activity times”)
  • Link to registration from all pages (sticky CTA, footer button)
  • Link to Camp homepage for location/contact
  • 2-5 internal links per page

Content Freshness

  • Update dates annually (schedule, registration, pricing)
  • Add new photos each season (galleries, staff, activities)
  • Refresh FAQ based on real parent questions
  • Google favors recently updated seasonal content

Common Mistakes to Avoid

❌ Mistake 1: Not Adding Subpages to Menu

Problem: New pages invisible to users Solution: Always add new Camp Subpages to Camp Menu after creation

❌ Mistake 2: Outdated Dates/Pricing

Problem: Parents see old information, lose trust Solution: Calendar reminder to update registration pages 3 months before season

❌ Mistake 3: Walls of Text

Problem: Parents don’t read long paragraphs Solution: Use bullets, accordions, cards for scannable content

❌ Mistake 4: Missing Parent Concerns

Problem: FAQ doesn’t address real questions Solution: Track actual parent questions, update FAQ quarterly

❌ Mistake 5: Stock Photos Only

Problem: Looks generic, not authentic Solution: Use real photos from your camp (with parent permission)

❌ Mistake 6: No Clear Call to Action

Problem: Parents browse but don’t register Solution: Registration CTA on every page (button, sticky header, footer)

❌ Mistake 7: Buried Registration Info

Problem: Parents can’t find how to sign up Solution: Registration link in Camp Quick Links + CTA on every subpage


Use Cases & Examples

Use Case 1: Summer Camp Activity Microsite

Goal: Showcase 8 core camp activities with detailed pages

Structure:

  • Camp page: Camp Pinewood
  • Camp Subpage: Activities (overview)
    • Camp Subpage: Swimming & Waterfront
    • Camp Subpage: Archery & Shooting Sports
    • Camp Subpage: Hiking & Nature
    • Camp Subpage: Arts & Crafts
    • Camp Subpage: Team Sports
    • Camp Subpage: Campfire & Songs
    • Camp Subpage: STEM & Robotics
    • Camp Subpage: Leadership Training

Menu setup:

Activities ▼
├── Swimming & Waterfront
├── Archery & Shooting Sports
├── Hiking & Nature
├── Arts & Crafts
├── Team Sports
├── Campfire & Songs
├── STEM & Robotics
└── Leadership Training

Use Case 2: Session-Based Schedule Pages

Goal: Different schedules for different age groups

Structure:

  • Camp Subpage: Daily Schedule (overview)
    • Camp Subpage: Tadpoles Schedule (ages 6-8)
    • Camp Subpage: Campers Schedule (ages 9-11)
    • Camp Subpage: Explorers Schedule (ages 12-14)
    • Camp Subpage: Leaders Schedule (ages 15-17)

Each schedule page includes:

  • Hour-by-hour table
  • Activity rotation explanation
  • Special events callout
  • Free time details

Use Case 3: Registration Information Hub

Goal: One-stop registration resource

Structure:

  • Camp Subpage: Registration (main)
    • Camp Subpage: Dates & Pricing
    • Camp Subpage: How to Register (step-by-step)
    • Camp Subpage: Payment Options
    • Camp Subpage: Financial Aid
    • Camp Subpage: Cancellation Policy
    • Camp Subpage: Registration FAQ

Registration page includes:

  • Webform: Interest/waitlist signup
  • Cards: Pricing tiers (early bird, regular, sibling discount)
  • Button: Link to external registration system
  • Accordion: Payment FAQ

Troubleshooting

Camp Menus Not Appearing on Subpage

Problem: Camp Subpage missing navigation menus

Solutions:

  • Verify Camp field is filled in (must select parent Camp page)
  • Check parent Camp page has menus configured
  • Camp menus are copied when subpage is created - if Camp page menus were added later, you may need to manually add menu blocks to subpage layout
  • Compare subpage Layout with parent Camp page Layout

Problem: Changed menu items on Camp page but subpages unchanged

Solution:

  • Menu content (links, items) updates automatically across all pages
  • Menu block configuration (which menu is selected) does NOT update automatically
  • If you changed which menu is linked to the block, update each Camp Subpage layout individually

Cannot Find Parent Camp in Dropdown

Problem: Camp field autocomplete doesn’t show Camp page

Solutions:

  • Verify Camp page is published
  • Check Camp page is content type “Camp” (not Landing Page or other)
  • Try typing exact camp title
  • Clear cache (drush cr)

Problem: Menu links return 404 errors

Solutions:

  • Verify linked Camp Subpage is published
  • Check URL path is correct (use autocomplete when adding menu links)
  • If page was deleted, remove menu link
  • Clear cache


Need Help?

Happy camping! Camp Subpages help you create rich, informative microsites that give parents confidence and get campers excited. 🏕️

8.3.3 - Event (Layout Builder)

Create engaging event pages with flexible Layout Builder layouts for community events, fundraisers, programs, and activities.

The Event (Layout Builder) content type is the modern way to create event pages for your YMCA’s community programs, fundraisers, classes, workshops, and special activities. It combines structured event data (date, time, location) with flexible drag-and-drop Layout Builder capabilities.

Machine name: lb_event

Designs:


When to Use Event (Layout Builder)

Use Event (LB) for:

  • Community events - Health fairs, family fun days, open houses, volunteer events
  • Fundraising events - Charity runs, galas, auctions, donation drives
  • Special programs - Summer camp kickoffs, member appreciation nights, holiday events
  • Recurring events - Weekly fitness classes, monthly meet-ups, seasonal programs
  • Workshops & classes - CPR training, parenting workshops, wellness seminars
  • Sporting events - Youth tournaments, adult leagues, fitness challenges

Do NOT Use Event (LB) for:

  • Ongoing programs - Use Program or Program Subcategory content types
  • News announcements - Use Article (Layout Builder) instead
  • Static information pages - Use Landing Page (Layout Builder)
  • Branch hours/schedules - Add to Branch content type

Event Types Explained

Events typically fall into these categories:

Community Events

Best for: Free or low-cost events that build community engagement

Example uses:

  • “Family Fun Day at the YMCA”
  • “Healthy Kids Day”
  • “Community Open House”
  • “Volunteer Appreciation Event”

Display: Typically shown on /events page, homepage, and Branch pages

Fundraising Events

Best for: Events that raise money for programs or capital campaigns

Example uses:

  • “Annual Charity 5K Run/Walk”
  • “Spring Gala & Auction”
  • “Giving Tuesday Campaign Kickoff”
  • “Donate for a Cause”

Display: Events page, fundraising landing pages, homepage promotions

Program Events

Best for: Kickoff events, info sessions, special programming

Example uses:

  • “Summer Camp Open House”
  • “Youth Sports Registration Night”
  • “Swim Lesson Information Session”
  • “New Member Orientation”

Display: Program pages, Branch pages, event listings

Recurring Events

Best for: Regular classes, weekly groups, monthly activities

Example uses:

  • “Monday Morning Yoga Class”
  • “Weekly Teen Game Night”
  • “Monthly Senior Social”
  • “Every Saturday Family Swim”

Display: Event listings with recurring schedule display


Creating an Event

Step 1: Add New Event

  1. Navigate to Admin > Content > Add Content
  2. Select Event (Layout Builder)
  3. You’ll see the Event creation form

Step 2: Fill in Required Fields

Title (Required)

The event name that appears at the top of the page and in event listings.

Best practices:

  • Be specific and action-oriented
  • Include event type or benefit (“5K Run for Healthy Kids” not “5K”)
  • Keep under 60 characters for search display
  • Front-load important keywords

Examples:

  • ✅ “Family Fun Day - Free Activities for All Ages”
  • ✅ “Annual Charity 5K Run & Walk”
  • ✅ “Youth Basketball Tournament Registration”
  • ✅ “CPR & First Aid Certification Workshop”
  • ❌ “Event” (too vague)
  • ❌ “The YMCA of Greater Example City Presents the Annual Spring Community Health and Wellness Fair” (too long)

Subtitle (Optional)

Additional context or supporting detail for the event title.

Best practices:

  • Add date, location, or key benefit
  • Keep to 1 short sentence
  • Complements title without duplicating info

Example:

  • Title: “Summer Camp Open House”
  • Subtitle: “Meet staff, tour facilities, and register for summer - Saturday, March 15”

Location Info (Required)

You must provide either Event Location OR Address:

Event Location (Recommended):

  • Select from existing Branch, Camp, or Facility pages
  • Automatically includes address, phone, directions
  • Links event to location page
  • Multiple locations supported

Address (Manual):

  • Use if event is at non-YMCA location (park, school, partner venue)
  • Enter full address manually
  • Overrides Event Location if both are filled

Directions (Optional):

  • Auto-generated link uses address from Event Location or Address
  • Override with custom directions URL if needed

Best practices:

  • In-person events: Always include full address with city/state
  • Virtual events: Add “Virtual Event” in subtitle, provide platform details in body
  • Multi-location: List all locations or create separate events per location
  • Parking/transit: Mention in event body (“Free parking available” or “Bus route 5”)

Event Date(s) (Required)

Add start and end date/time for the event.

Single Date Event:

  1. Select start date and time
  2. Select end date and time (or use start time if no end time)
  3. If event has no specific end time, use start time for both

Recurring Event (March 2023+):

  1. Set the Repeats option (daily, weekly, monthly)
  2. Choose Number of recurrences or End date
  3. Expand Advanced options to customize (e.g., “Every Monday and Wednesday”)
  4. After saving, use Manage Instance to edit/remove individual occurrences

The event recurrence configuration

Multiple Non-Recurring Dates:

  • Use Add another item below date selector
  • Example: Event on May 5, May 12, and May 19 (but not weekly pattern)

Best practices:

  • Display prominently: Date/time should be impossible to miss
  • Time zones: Specify if event serves multiple time zones (virtual events)
  • All-day events: Use start time of 12:00 AM and end time of 11:59 PM
  • TBD dates: Use placeholder date, add “Date TBD” in subtitle, update when confirmed
  • Registration deadlines: Mention in event body (“Register by May 1”)

Header Image (Required for most themes)

Featured image displayed at the top of the event page and in event listings.

Best practices:

  • Size: 1920x1080px recommended (16:9 aspect ratio)
  • File size: Under 500KB (compress with TinyPNG or similar)
  • Format: JPG or WebP for photos, PNG for graphics
  • Alt text: Always include descriptive alt text (“Families running at annual 5K charity event”)
  • Content:
    • Past events: Use real photos from previous year’s event
    • New events: Use location photo, activity photo, or branded graphic
    • Avoid: Text-heavy images (text may not scale on mobile)

Image tips:

  • Show people engaged in similar activities
  • Include YMCA branding when appropriate
  • Ensure faces are visible and in-focus
  • Check image looks good when cropped to square (some listing views)

Categories for organizing and filtering events.

Best practices:

  • Number: Choose 1-3 relevant tags per event
  • Consistency: Use existing tags (avoid creating duplicates)
  • User-focused: Use terms your audience would search for

Example tag structure:

  • Event types: Community Event, Fundraiser, Workshop, Class, Tournament
  • Audiences: Family, Youth, Seniors, Adults, Teens
  • Program areas: Aquatics, Wellness, Youth Programs, Sports

Common event tags (3-10 tags recommended):

  • Community Events
  • Fundraising
  • Family Events
  • Youth Programs
  • Wellness & Fitness
  • Free Events
  • Registration Required

Avoid: Over-tagging (10+ tags), one-off tags, jargon

Body (Required)

Main event content using the WYSIWYG editor.

Best practices:

  • Paragraph length: 2-3 sentences per paragraph (easier to scan on mobile)
  • Essential info first: What, when, where, who, why in lead paragraph
  • Subheadings: Use H2 and H3 headings to organize content
  • Length: 200-500 words for most events (more for complex events like fundraisers)
  • Lists: Use bulleted or numbered lists for schedules, activities, what to bring
  • Bold: Highlight key details (registration deadline, cost, special notes)

Structure template:

  1. Lead paragraph: Hook + essential details (what, when, where, cost)
  2. Event details: Schedule, activities, speakers, agenda
  3. Registration info: How to register, deadlines, cost, what’s included
  4. Logistics: Parking, what to bring, accessibility, contact info
  5. Call to action: Register now, RSVP, learn more

Example structure:

[LEAD] Join us for Family Fun Day on Saturday, May 15 from 10am-2pm at our Main Street YMCA. This free community event features activities for all ages, healthy snacks, and prize giveaways!

[H2] Event Schedule

10:00am - Welcome & Opening Activities
10:30am - Kids Fitness Challenge
11:00am - Family Yoga Session
11:30am - Healthy Cooking Demo
12:00pm - Lunch & Prize Drawings
1:00pm - Open Swim (weather permitting)

[H2] What to Bring

- Comfortable clothes for activities
- Water bottle (refill stations available)
- Sunscreen for outdoor activities
- Towel and swimsuit (optional)

[H2] Registration

Free for all community members! No registration required, but RSVP helps us plan: [RSVP Button]

Questions? Call (555) 123-4567 or email events@exampleymca.org

Locations (Optional)

Associate the event with specific Branch pages.

When to use:

  • Event is hosted at or affiliated with a Branch
  • You want event to appear on Branch page “Upcoming Events” section
  • Local community events specific to one location

Example: “Youth Basketball Tournament” at Westside YMCA should be tagged with Westside YMCA location.

Step 3: Configure Layout (Optional)

After saving, click Layout tab to add Layout Builder sections and blocks.

Common Event layouts:

Community Event Layout:

  • Header image + event details (auto-generated from fields)
  • Simple Content - Event description and schedule
  • Cards - Activities or highlights
  • Related Events - Other upcoming events
  • Button - Registration/RSVP link

Fundraising Event Layout:

  • Banner - Hero image with registration CTA
  • Simple Content - Event purpose and impact
  • Cards - Sponsorship levels or giving options
  • Testimonials - Past participant quotes (if available)
  • Webform - Donation or registration form
  • Related Events - Other fundraising events

Workshop/Class Layout:

  • Header image + details
  • Accordion - Session topics/agenda
  • Simple Content - Instructor bio
  • Cards - What you’ll learn / takeaways
  • Button - Registration link

→ See Layout Builder documentation

If your site has SEO modules enabled (Meta tags, Pathauto):

Meta title: Auto-generated from event title (usually fine) Meta description: 150-160 characters summarizing event

  • Include: Event type, date, location, key benefit
  • Example: “Join our free Family Fun Day on May 15 at Main Street YMCA. Activities for all ages, healthy snacks, and prizes. RSVP today!”

URL alias: Auto-generated from title (e.g., /events/family-fun-day-may-15)

Pro Tip: Include location and date in URL if event recurs annually (/events/2025-charity-5k)

Step 5: Preview and Publish

  1. Click Save to create draft
  2. Click Preview to see how event looks
  3. Check mobile responsive display
  4. Verify date/time/location display correctly
  5. Test registration/RSVP links
  6. Check Published checkbox
  7. Click Save to publish live

Event Planning Best Practices

Publishing Timeline

Recommended event publishing schedule:

Event TypePublish TimelineUpdate Frequency
Major fundraisers3-6 months aheadWeekly updates leading up to event
Community events1-3 months aheadBi-weekly updates
Workshops/classes1-2 months aheadUpdate as spots fill
Recurring eventsCreate once, update quarterlyUpdate for schedule changes
Time-sensitiveASAP + promote heavilyDaily updates last week

Why timing matters:

  • SEO: Google needs 1-2 months to rank event pages
  • Planning: People plan community events 1-3 months in advance
  • Promotion: Allows time for email, social media, partner outreach

Event Information Hierarchy

Make these details impossible to miss:

  1. Date & Time - Large, prominent display
  2. Location - Full address + parking/directions
  3. Cost - Free, ticket price, or registration fee
  4. Registration - How to RSVP or sign up

Use visual cues:

  • Icons for date 📅, location 📍, cost 💵
  • Bold text for critical deadlines
  • Contrasting button color for registration CTA
  • Alert boxes for important notices (“Space limited!”)

Event Content Updates

Pre-Event:

  • Add event page 1-3 months ahead (depending on event type)
  • Update with speaker/activity details as confirmed
  • Add countdown or “limited spots” notice 2 weeks before
  • Final reminder updates 1 week before (parking, what to bring)

Day-Of Event:

  • Post live updates if multi-day event (conference, camp)
  • Share photos/videos in real-time (social media)
  • Update any schedule changes immediately

Post-Event:

  • Add photo gallery within 1 week
  • Include testimonials/quotes from attendees
  • Add “Thank you” message or event recap
  • Link to “Next Year” or similar future event
  • Use for promotion of next year’s event

Registration & Ticketing

Registration details to include:

  • How to register: Button/link to external system (Daxko, Eventbrite) or webform
  • Deadline: “Register by May 1” with countdown if possible
  • Cost breakdown: Early bird, regular, group rates
  • What’s included: Meals, materials, t-shirt, swag
  • Cancellation policy: Refunds, transfers, no-shows

Ticket tiers (if applicable):

  • Early Bird - Discount for registering 1+ months ahead
  • Regular - Standard pricing
  • Group Rate - Discounts for families, teams, groups of 5+
  • VIP/Premium - Exclusive access, better seats, extra perks

Example ticket display:

[Cards block with 3 cards]

EARLY BIRD
$25 per person
Register by April 1
✓ Event admission
✓ Free t-shirt
✓ Healthy lunch

REGULAR
$35 per person
Register by May 10
✓ Event admission
✓ Free t-shirt
✓ Healthy lunch

GROUP RATE
$25 per person
Groups of 5+
✓ Event admission
✓ Free t-shirts
✓ Healthy lunch
✓ Reserved seating

Accessibility

Make events accessible:

  • Physical access: Note wheelchair accessibility, elevators, accessible parking
  • Sensory: Mention quiet spaces, sensory-friendly accommodations
  • Dietary: List food options (vegetarian, gluten-free, allergens)
  • Language: Offer translation or interpretation if available
  • Contact: Provide accessibility coordinator contact for questions

Example:

Accessibility: Our facility is fully wheelchair accessible with elevator access to all floors. Reserved accessible parking available. ASL interpretation available upon request (contact by May 1). Dietary restrictions accommodated - note in registration form.


Common Event Patterns

Community Event

Purpose: Free or low-cost event to build community engagement

Key elements:

  • Emphasize “FREE” or low cost prominently
  • Highlight activities for all ages
  • Include schedule with specific activity times
  • Show diverse community in photos
  • Easy RSVP (not required but helpful for planning)

Sample layout:

  1. Banner - Event hero image
  2. Simple Content - Event overview and schedule
  3. Cards - Activity highlights (3-4 activities featured)
  4. Gallery - Photos from last year’s event
  5. Button - RSVP link (optional)
  6. Related Events - Other community events

Fundraising Event

Purpose: Raise money for programs, capital campaigns, or community needs

Key elements:

  • Explain impact (“Your $50 sponsors one child for swim lessons”)
  • Show sponsorship or giving levels
  • Include testimonials from past participants
  • Highlight sponsors/partners
  • Make donation/registration prominent

Sample layout:

  1. Banner - Event image with impact stat (“Raised $50K last year!”)
  2. Simple Content - Event purpose and how funds are used
  3. Cards - Sponsorship levels (Bronze, Silver, Gold)
  4. Testimonials - Donor or participant quotes
  5. Webform - Donation or registration form
  6. Simple Content - Event schedule and logistics
  7. Logos - Past sponsors (if sponsor block available)

Workshop or Class

Purpose: Educational event with registration and limited capacity

Key elements:

  • Instructor/speaker credentials
  • Learning outcomes (“You will learn…”)
  • Session agenda or topics
  • What to bring / prerequisites
  • Registration deadline and capacity (“Limited to 20 participants”)

Sample layout:

  1. Header image + event details
  2. Simple Content - Workshop overview and benefits
  3. Accordion - Session agenda with topics
  4. Simple Content - Instructor bio with photo
  5. Cards - Key takeaways or skills learned
  6. Button - Registration link with “Limited Spots!” notice
  7. Related Events - Other workshops or classes

Recurring Event

Purpose: Regular class, group, or activity that repeats

Key elements:

  • Clear recurring schedule (“Every Monday at 6pm”)
  • Drop-in vs. registration required
  • Session dates (start/end of series)
  • New participant information (“First class free!”)

Sample layout:

  1. Header image + recurring schedule display
  2. Simple Content - Class description and benefits
  3. Table or Accordion - Weekly schedule breakdown
  4. Simple Content - Instructor info
  5. Button - “Join Us Monday!” registration link
  6. Related Events - Other recurring programs

SEO Best Practices for Events

Event Title Optimization

  • Length: 50-60 characters (Google’s display limit)
  • Keywords: Include event type + benefit + location
  • Date: Add year for annual events (“2025 Charity 5K”)
  • Avoid: Excessive punctuation, all caps, clickbait

Examples:

  • ✅ “Family Fun Day 2025 - Free Activities | Main Street YMCA”
  • ✅ “CPR Certification Workshop - May 15 | Downtown Y”
  • ❌ “EVENT!!!” (not descriptive)
  • ❌ “The Best Event You’ll Ever Attend” (clickbait)

Meta Description

  • Length: 150-160 characters for desktop, 120 for mobile
  • Include: Event type, date, location, key benefit, CTA
  • Keywords: Natural inclusion of search terms

Example: “Join our Annual Charity 5K Run on June 10 at Riverside Park. Raise funds for youth programs while getting fit. All ages welcome. Register today!”

Schema Markup (Structured Data)

If your site has Schema.org markup enabled, events automatically include:

  • Event name and description
  • Start date, end date, and time
  • Location (name, address, coordinates)
  • Organizer (YMCA organization)
  • Ticket/pricing information
  • Event image

This helps search engines display rich snippets (enhanced search results with date, location, price).

Local SEO

  • Location keywords: Include city/neighborhood in title or body
  • Google My Business: Event may sync to GMB if integration enabled
  • Local directories: Submit event to community calendars, partner sites
  • Geotagging: Ensure location coordinates accurate for map display

Common Mistakes to Avoid

❌ Mistake 1: Buried Date/Time/Location

Problem: Users can’t quickly find essential event details Solution: Display date, time, location prominently at top of page (event fields auto-display)

❌ Mistake 2: No Clear Registration Path

Problem: People want to attend but don’t know how to sign up Solution: Registration CTA above the fold + in event body + at bottom of page

❌ Mistake 3: Outdated Event Information

Problem: Event details change but page isn’t updated Solution: Calendar reminder to review event pages weekly leading up to event

❌ Mistake 4: Generic Stock Photos

Problem: Event looks inauthentic, low engagement Solution: Use real photos from past events or real YMCA location photos

❌ Mistake 5: Missing Parking/Logistics

Problem: Attendees arrive late or can’t find venue Solution: Include parking info, public transit, entrance directions

❌ Mistake 6: No Post-Event Follow-Up

Problem: Missed opportunity to engage attendees for future events Solution: Update page with photos, thank you message, link to next event

❌ Mistake 7: Not Archiving Past Events

Problem: Old events clutter listings, confuse users Solution: Unpublish events 1 week after end date (or keep for next year’s promotion)


Troubleshooting

Event Not Appearing in Event Listings

Problem: Published event doesn’t show on /events page or Branch page

Solutions:

  • Verify Published checkbox is checked
  • Check Event Date is not in the past (some views filter old events)
  • If Branch-specific, verify Locations field includes the Branch
  • Clear cache (Admin → Configuration → Performance → Clear all caches)
  • Check Views settings for event listing (may have date/tag filters)

Date/Time Displaying Incorrectly

Problem: Event shows wrong date, time, or timezone

Solutions:

  • Verify date field has correct timezone selected
  • Check site timezone settings (Admin → Configuration → Regional → Date and time)
  • For recurring events, check Manage Instance for individual date issues
  • Ensure browser timezone doesn’t interfere (test in incognito mode)

Location Not Displaying

Problem: Event location address not showing on event page

Solutions:

  • Verify either Event Location OR Address is filled (not both, unless Address should override)
  • Check Event Location (Branch/Camp/Facility) is published
  • If using Address field, ensure all required fields (street, city, state) are complete
  • Check theme displays location field (Admin → Structure → Content types → Event → Manage display)

Recurring Event Issues

Problem: Recurring event instances not creating or displaying correctly

Solutions:

  • Verify Repeats is set correctly (daily, weekly, monthly)
  • Check Advanced settings for specific day selection
  • Use Manage Instance to view all created instances
  • Delete and recreate if instances are malformed
  • Check module updates (recurring events added March 2023+)


Need Help?

Happy event planning! Well-designed event pages drive registrations, build community, and showcase the great work your YMCA does. 📅

8.3.4 - Landing Page (Layout Builder)

Create flexible, high-converting landing pages with drag-and-drop Layout Builder for programs, campaigns, storytelling, and conversions.

The Landing Page (Layout Builder) content type is the foundation of your YMCA website. It’s the most flexible, powerful content type for creating program pages, campaign pages, storytelling pages, and any content that doesn’t fit other specialized content types. With drag-and-drop Layout Builder, you can create unique, conversion-focused pages without coding.

Machine name: landing_page_lb

Designs: Mobile | Desktop


When to Use Landing Page (Layout Builder)

Use Landing Page (LB) for:

  • Program pages - Youth sports, aquatics, wellness programs, childcare
  • Campaign pages - Annual campaigns, fundraising drives, capital campaigns
  • About pages - Mission, history, leadership team, community impact
  • Membership pages - Join the Y, membership benefits, pricing tiers
  • Conversion pages - Registration, donation, volunteer sign-up
  • Storytelling pages - Impact stories, testimonials, success stories
  • Resource pages - Guides, toolkits, FAQs, support resources
  • Static pages - Evergreen content that doesn’t change frequently

Do NOT Use Landing Page (LB) for:

  • News/blogs - Use Article (Layout Builder) for dated, categorized content
  • Events - Use Event (Layout Builder) for date/time-specific events
  • Branch pages - Use Branch content type for location pages
  • Camp microsites - Use Camp and Camp Subpage content types

Landing Page vs. Other Content Types

CriteriaUse Landing Page (LB)Use Article (LB)Use Event (LB)
PurposeEvergreen pages, programs, campaignsNews, blogs, press releasesDate/time-specific events
Date displayNo date neededVisible publish dateEvent date/time prominent
OrganizationBy topic/category in menuBy tags, date archivesBy date, location, tags
LifespanPermanent (updated as needed)Temporary (archived after time)Temporary (after event date)
ExamplesAbout Us, Programs, MembershipNews article, blog postCharity 5K, workshop

Simple rule: If it’s evergreen and doesn’t have a date, use Landing Page. If it’s news/dated, use Article. If it’s an event with specific date/time, use Event.


Creating a Landing Page

Step 1: Add New Landing Page

  1. Navigate to Admin > Content > Add Content
  2. Select Landing Page (Layout Builder)
  3. You’ll see the Landing Page creation form

Step 2: Fill in Required Fields

Title (Required)

The page name used internally and for SEO (not automatically displayed on page).

Best practices:

  • Descriptive and keyword-rich
  • Match URL alias (e.g., “Youth Programs” → /youth-programs)
  • Keep under 60 characters for search display
  • Manually add title to page using Banner block or heading

Examples:

  • ✅ “Youth Programs at the YMCA”
  • ✅ “Aquatics & Swimming Lessons”
  • ✅ “Join the Y - Membership Information”
  • ✅ “About Our YMCA”
  • ❌ “Page 1” (not descriptive)
  • ❌ “Youth” (too vague for SEO)

Important: Title field is NOT automatically displayed on the page. Add your visible title using:

  • Banner block (hero image with title overlay)
  • Simple Content block with H1 heading
  • Heading block (if available in your theme)

Meta Description (Recommended):

  • 150-160 characters summarizing page content
  • Include primary keyword and benefit
  • Appears in search results below title
  • Compelling preview that encourages clicks

Example:

“Discover youth sports, swim lessons, and after-school programs at [Your Y]. Safe, fun, and inclusive programs for ages 5-18. Learn more and register today!”

Meta Image (Recommended):

  • Image used for social media sharing (Facebook, LinkedIn, etc.)
  • 1200x630px recommended (Facebook/LinkedIn optimal)
  • Should represent page content
  • Alternative to generic site logo

Meta Tags (Advanced - Optional):

  • Advanced SEO configuration
  • Only edit if you understand structured data/Schema.org
  • Can include Open Graph tags, Twitter cards, etc.

Step 3: Save and Configure Layout

  1. Click Save to create the page

  2. Click Layout tab to access Layout Builder

  3. You’ll see pre-configured sections:

    • Header - Site navigation and logo
    • Banner - Hero section (edge-to-edge, no margins)
    • Body - Main content area (with left/right margins)
    • Footer - Site footer
  4. Begin building your page with Layout Builder blocks

→ Complete Layout Builder guide


Landing Page Design Patterns

Hero Section (Above the Fold)

Purpose: Grab attention and communicate value proposition in 5 seconds or less

Essential elements:

  1. Compelling headline - Clear benefit, action-oriented
  2. Supporting subheading - Expand on headline, add context
  3. Hero image or video - Show people, action, impact
  4. Primary CTA - One clear action (Register, Join, Donate, Learn More)

Block pattern:

[Banner Section - edge-to-edge]
- Banner Block
  - Background image: Hero image (1920x1080px)
  - Headline: "Transform Your Life at the Y"
  - Subheading: "Programs for every age, every goal, every family"
  - CTA Button: "Find Your Program" → /programs

Best practices:

  • Headline: 6-10 words, benefit-focused (not feature-focused)
    • ✅ “Discover Your Potential at the Y” (benefit)
    • ❌ “We Have Fitness Equipment” (feature)
  • Image: Show real people from your YMCA, diverse representation
  • CTA: Action verb + benefit (“Start Your Journey”, “Join Today”, “Give Hope”)
  • Mobile: Ensure text readable on mobile (test on phone before publishing)

Body Content (Mid-Page)

Purpose: Provide details, build trust, address objections, guide toward conversion

Common body patterns:

Program Overview Pattern:

[Body Section - with margins]

[Simple Content Block]
H2: What We Offer
Paragraph: Brief overview of program categories (2-3 sentences)

[3-Column Cards Block]
- Card 1: Youth Programs (icon, title, description, "Learn More" link)
- Card 2: Aquatics (icon, title, description, "Learn More" link)
- Card 3: Wellness (icon, title, description, "Learn More" link)

[Simple Content Block]
H2: Why Choose Our Programs?
Paragraph: Benefits and differentiators

Impact Story Pattern:

[2-Column Section]

Left Column:
- Image Block: Photo of member/participant

Right Column:
- Simple Content Block
  H2: "Meet Sarah: How the Y Changed My Life"
  Quote: "The Y's swim program gave my daughter confidence..."
  - Sarah, YMCA Member

Social Proof Pattern:

[Simple Content Block]
H2: What Our Members Say

[Testimonial Carousel Block] (if available)
- Testimonial 1
- Testimonial 2
- Testimonial 3

[Simple Content Block - Stats]
"Join 150,000+ members nationwide"
[Icons with numbers: 1,200 programs | 500 locations | 75 years serving]

Call-to-Action Strategy

CTA Placement Best Practices (2025):

1. Above-the-fold CTA - Primary action in hero section

  • Best for: Pages with clear single action (Join, Donate, Register)
  • Button or prominent link in banner

2. Mid-page CTA - After building value and trust

  • Best for: Pages that need explanation first (programs, membership)
  • After describing benefits, before testimonials

3. End-of-page CTA - Final conversion opportunity

  • Best for: All landing pages (reinforce primary action)
  • Can be same as hero CTA or complementary (e.g., “Questions? Contact Us”)

4. Sticky/Floating CTA - Always visible as user scrolls

  • Best for: Mobile-first design, complex pages
  • Sticky button block or sticky header CTA

Example CTA progression:

Hero: "Join the Y Today" [Primary CTA]
Mid-page (after benefits): "Find Your Membership" [CTA with options]
Mid-page (after testimonials): "Experience the Y - Free Guest Pass" [Alternative CTA]
Footer: "Questions? We're Here to Help" [Support CTA]

CTA Design Tips:

  • Color: High contrast with background (YMCA red #E31E24 pops on white/gray)
  • Size: Minimum 44x44px tappable area (mobile-friendly)
  • Text: Action verb + benefit (not “Click Here”)
    • ✅ “Start My Free Trial”
    • ✅ “Register My Child Today”
    • ❌ “Submit” or “Click Here”

Landing Page Best Practices by Type

Program Landing Page

Purpose: Showcase program, drive registration/sign-up

Recommended structure:

  1. Hero Section - Program benefit and primary CTA
  2. What is [Program]? - Overview (2-3 paragraphs)
  3. Program Benefits - Cards or icons (3-5 benefits)
  4. Schedule & Pricing - Table or accordion (by age group)
  5. Who Should Join? - Target audience descriptions
  6. Instructor/Staff - Bios with photos (builds trust)
  7. FAQs - Accordion block (common questions)
  8. Testimonials - Member quotes with photos
  9. CTA - Register or learn more

Block layout example:

[Banner] Hero with "Transform Your Child Through Youth Sports"
[Body - Simple Content] Program overview
[Body - Cards] Benefits: Teamwork, Fitness, Fun, Character Building
[Body - Table] Schedule by age group (5-7, 8-10, 11-13)
[Body - Accordion] FAQs (What to bring, Cost, Skill level, etc.)
[Body - Cards] Testimonials with photos
[Body - Button] "Register Your Child Today"

Membership Landing Page

Purpose: Convert visitors to members, highlight benefits and value

Recommended structure:

  1. Hero - “Belong at the Y” with join CTA
  2. Membership Benefits - Why join? (health, community, impact)
  3. Membership Types - Cards with pricing tiers (Individual, Family, Senior)
  4. What’s Included - Checklist or icons (facilities, programs, discounts)
  5. Financial Assistance - Sliding scale, scholarships available
  6. Member Stories - Testimonials from real members
  7. Tour CTA - “Schedule a Free Tour” button
  8. Final CTA - “Join the Y Today”

Pricing display example:

[3-Column Cards Block]

INDIVIDUAL
$49/month
✓ Unlimited facility access
✓ Group fitness classes
✓ Member discounts
[Join Now Button]

FAMILY
$89/month
✓ 2 adults + children under 18
✓ All Individual benefits
✓ Family programming
[Join Now Button]

SENIOR (65+)
$39/month
✓ All facility access
✓ Senior programs
✓ Wellness support
[Join Now Button]

Conversion tips:

  • Show value, not just price ("$1.63/day" vs “$49/month”)
  • Address objections in FAQ (cost, commitment, intimidation)
  • Offer trial or guest pass (“Try us free for 7 days”)
  • Include financial assistance info (remove cost barrier)

Campaign Landing Page

Purpose: Drive specific campaign action (donate, volunteer, participate)

Recommended structure:

  1. Hero - Campaign theme with urgent CTA
  2. The Problem - What issue you’re addressing
  3. Our Solution - How the Y helps (your programs/impact)
  4. Your Impact - What donation/participation achieves
    • “$50 = 1 child in swim lessons for a month”
  5. Giving Levels - Cards with donation tiers
  6. Donor Stories - Why others give (testimonials)
  7. Urgency - Countdown, matching gift, limited time
  8. Multiple CTAs - Donate, volunteer, share

Impact storytelling example:

[2-Column Section]

Left: Image of child in swim lesson

Right:
H2: "Every Child Deserves to Swim Safely"

"Last year, drowning was the leading cause of death for children ages 1-4. Your donation gives kids like Emma the swimming skills to stay safe—and the confidence to thrive.

$25 = 1 swim lesson
$100 = 4 lessons (one month)
$500 = Full semester for one child

[Donate Now Button]

Campaign best practices:

  • Urgency: Deadline, matching gift, or goal tracker
  • Specificity: Concrete impact, not vague “support our work”
  • Emotion: Real stories, real photos (with permission)
  • Social proof: “$45K raised by 180 donors - join them!”
  • Multiple ways to help: Donate, volunteer, share on social

About/Storytelling Page

Purpose: Build trust, communicate mission, connect emotionally

Recommended structure:

  1. Hero - Mission statement or impact stat
  2. Our Story - History, founding, growth (brief timeline)
  3. Our Mission - What we do, who we serve, why we exist
  4. Our Impact - Stats, outcomes, testimonials
  5. Our People - Leadership team, staff highlights
  6. Community Partners - Logos, collaboration stories
  7. Join Our Story - CTA to get involved

Mission communication example:

[Full-Width Banner]
Background: Community photo
Headline: "Strengthening Community for 75 Years"
Subheading: "At the Y, we believe everyone deserves the opportunity to learn, grow, and thrive."

[Body - Simple Content]
H2: Our Mission
"To put Christian principles into practice through programs that build healthy spirit, mind, and body for all."

[3-Column Stats]
150,000 members served
1,200 programs offered
$2M in financial assistance

[Impact Story]
[Photo] + "Meet Carlos: How the Y changed his family's life..."

Storytelling best practices:

  • Authentic images: Real photos from your YMCA (not stock)
  • Specific stories: Names, faces, concrete outcomes
  • “You” language: “You can help change lives” (not “We change lives”)
  • Emotional connection: Show impact on real people
  • Clear CTA: How visitors can join your mission

Advanced Layout Builder Techniques

Multi-Column Layouts

When to use columns:

  • Compare options side-by-side (membership tiers, program levels)
  • Feature + image layouts (text left, image right)
  • Icon grids (3-4 columns of icon + text)

Column best practices:

  • 2 columns: 60/40 or 50/50 split (text/image or equal)
  • 3 columns: Cards, statistics, feature lists
  • 4 columns: Icons, small features, partner logos
  • Mobile: All columns stack vertically on mobile (test!)

Example:

[2-Column Section: 60/40]

Left (60%):
- Simple Content
  H2: "Aquatics Programs for All Ages"
  Paragraph describing programs
  - Bullet list of offerings
  [Register Now Button]

Right (40%):
- Image Block
  Photo of swim lessons (vertical orientation works best)

Background Colors & Sections

Use background colors to:

  • Create visual hierarchy (alternate white/gray sections)
  • Highlight important content (colored background for CTA section)
  • Separate content themes (programs, testimonials, CTAs)

Best practices:

  • Alternate sections: White → Light Gray → White → Light Gray
  • CTA sections: YMCA Teal (#00A79D) or Red (#E31E24) background
  • Text contrast: Ensure readable (dark text on light, light text on dark)
  • Accessibility: Minimum 4.5:1 contrast ratio (WCAG AA standard)

Example:

[White Background Section]
- Simple Content: Program overview

[Light Gray Background Section]
- Cards: Program benefits

[YMCA Teal Background Section]
- Simple Content (white text): "Ready to Get Started?"
- Button (white with teal border): "Register Today"

[White Background Section]
- Testimonials

Responsive Design

Mobile optimization (critical - 82.9% access on mobile!):

  • Touch targets: Minimum 44x44px for buttons/links
  • Font sizes: Minimum 16px body text (prevents zoom on iOS)
  • Images: Optimize for mobile (under 500KB, compress)
  • Columns: Test how columns stack on mobile
  • Forms: Keep short (mobile users abandon long forms)

Test checklist:

  • Text readable on phone (not too small)
  • Images load quickly on 4G
  • Buttons easy to tap (not too close together)
  • Forms work smoothly (large input fields)
  • No horizontal scrolling
  • CTAs visible without scrolling (sticky button?)

Tools:

  • Chrome DevTools device emulation (F12 → Toggle device toolbar)
  • Test on real phone (iPhone and Android)
  • Browser “responsive design mode”

Conversion Optimization

A/B Testing Ideas

What to test:

  • Headlines: Benefit-focused vs. feature-focused
  • CTA text: “Join Now” vs. “Start Your Free Trial”
  • CTA color: Red vs. Teal vs. Blue
  • Image: People vs. facility vs. activity
  • Form length: Short (name/email) vs. long (detailed)
  • Social proof: Testimonials vs. stats vs. logos

Simple tests (no tools required):

  1. Change headline on homepage, track bounce rate + time on site (Google Analytics)
  2. Test CTA button text, measure clicks (heatmap tools like Hotjar)
  3. Try different hero images, monitor conversions

“Three-word test” success story: One organization changed just three words in their CTA and saw 104% conversion lift.

  • Before: “Request a Quote”
  • After: “Get My Free Quote” (Added “My” and “Free” - personalization + value)

Heatmaps & User Testing

Tools to understand user behavior:

  • Hotjar - Heatmaps, session recordings, surveys (free tier available)
  • Microsoft Clarity - Free heatmaps and session recordings
  • Google Analytics - Behavior flow, exit pages, conversion funnels

What to look for:

  • Heatmaps: Where do users click? Are they finding CTAs?
  • Scroll depth: How far down page do users scroll? (CTA too low?)
  • Exit pages: Where do users leave? Fix those pages first
  • Form abandonment: Which form fields cause drop-off?

User testing (no budget):

  • Ask 5 members to navigate your page while you watch
  • “Find the membership pricing” - can they do it in 10 seconds?
  • “Register for swim lessons” - where do they get stuck?

SEO Optimization

On-Page SEO checklist:

  • Title tag: Primary keyword near beginning (50-60 chars)
  • Meta description: Compelling preview with keyword (150-160 chars)
  • URL: Clean, descriptive (/youth-programs not /node/12345)
  • H1 heading: One H1 per page (in Banner or Simple Content block)
  • H2/H3 subheadings: Organize content, include related keywords
  • Alt text: Describe all images (accessibility + SEO)
  • Internal links: Link to related pages (2-5 links per page)
  • Page speed: Optimize images, minimize blocks (< 3 second load)

Keyword research tips:

  • Use Google Autocomplete (type “YMCA [your city]” - see suggestions)
  • Check “People also ask” and “Related searches” on Google
  • Focus on long-tail keywords (3-4 words) with lower competition
    • ✅ “youth swim lessons [city]” (specific, local)
    • ❌ “swimming” (too broad, high competition)

Common Mistakes to Avoid

❌ Mistake 1: Too Many CTAs

Problem: Multiple competing CTAs confuse users, reduce conversions Solution: One primary CTA per page (can repeat same CTA, but not 5 different CTAs)

❌ Mistake 2: Walls of Text

Problem: Long paragraphs intimidate readers, especially on mobile Solution: 2-3 sentences per paragraph, use bullets, headings, whitespace

❌ Mistake 3: Generic Stock Photos

Problem: Inauthentic images don’t build trust, feel corporate Solution: Use real photos from your YMCA - real members, real staff, real programs

❌ Mistake 4: Buried Value Proposition

Problem: Visitors don’t understand what you offer in 5 seconds Solution: Clear headline + subheading in hero section (not “Welcome to Our Website”)

❌ Mistake 5: No Social Proof

Problem: Visitors don’t trust claims without evidence Solution: Add testimonials, stats, logos, member quotes

❌ Mistake 6: Missing Mobile Optimization

Problem: 82.9% of users on mobile have poor experience Solution: Test on real phone, ensure text readable, buttons tappable

❌ Mistake 7: Weak CTAs

Problem: “Click here” or “Submit” don’t motivate action Solution: Action verb + benefit (“Start Your Free Trial”, “Get My Pass”)


Troubleshooting

Title Not Displaying on Page

Problem: Entered title but doesn’t appear on published page

Solution: Title field is for SEO/admin only. Add visible title using:

  • Banner block with headline
  • Simple Content block with H1 heading
  • Heading block (if available)

Layout Looks Different on Mobile

Problem: Desktop layout perfect but mobile is broken

Solutions:

  • Columns stack on mobile - test order makes sense
  • Reduce image sizes (large images slow mobile load)
  • Simplify mobile layout (hide decorative elements if needed)
  • Test on real phone (emulator not always accurate)
  • Check block configuration for mobile-specific settings

Page Loading Slowly

Problem: Page takes >3 seconds to load (bad for SEO and conversions)

Solutions:

  • Optimize images: Compress to under 500KB each (use TinyPNG, Squoosh)
  • Reduce blocks: Too many blocks (especially complex ones) slow page
  • Enable caching: Check site performance settings (Admin → Configuration → Performance)
  • Use CDN: If available, enable CDN for images/assets
  • Test speed: Use PageSpeed Insights (Google) or GTmetrix

SEO Not Working

Problem: Page not ranking in search results

Solutions:

  • Give it time: New pages take 1-3 months to rank
  • Check indexing: Use Google Search Console to verify page is indexed
  • Optimize title/description: Include target keyword naturally
  • Add internal links: Link to this page from other pages on site
  • Build backlinks: Get other sites to link to your page (partners, community pages)
  • Mobile-friendly: Google prioritizes mobile-friendly pages


Need Help?

Happy building! Landing Page (Layout Builder) is your most powerful tool for creating high-converting, mission-driven pages that engage your community and drive results. 🚀

8.3.5 - Activity, Class, and Session

Format data from third parties (e.g. Daxko, Personify, or ActiveNet), for display in Activity Finder.

Content editors rarely, if ever, enter information directly into these content types on a day-to-day basis. However, it is important to know how they work and how they relate to manually-entered content.

Example - Swim Lessons

  • Swimming and Aquatics (Program Page, manually entered)
  • Swim Lessons (Program Subcategory Page, manually entered)
  • Youth Group Swim Lessons (Activity, mapped from CRM or custom automation)
  • Stage 3 (Class, mapped from CRM)
  • Monday/Wednesday/Friday 9:30-10 a.m. at Franklin Family YMCA (Session, mapped from CRM)

Note: This is an example only. Depending on your CRM and any customizations you make, your setup for Swim Lessons or any program may look different that the example listed above.

Activity

Often used as the top-level filter in Activity Finder and Repeat Schedules, Activity consists of three fields:

  • Title: The name of the Activity (and the filter in Activity Finder).
  • Program subcategory: An entity reference to or tag for a Program Subcategory. Maps the Activity to higher-levels of user-entered content. *Description: A description for the Activity. Usually pulled from a description in a CRM through an API.

Class

A narrower selection of Program Offerings. Not an individual instance, but a smaller selection of instances.

Classes have three ields that map into Activity Finder and Repeat Schedules: a description, a title and entity reference/tag to an Activity.

Class also contains Areas for content editors to add paragraphs; however, depending on how your CRM and the number of programs your Y runs, it may not be practical use these fields.

Session

An individual program offering. Contains fields for pricing, session date/time, instructor, ages and a registration link. This are the individual rows/instances in Repeat Schedules and Activity Finder.

8.3.6 - Alert

Displays timely information in a thin banner across your site, just below the header or above the footer.

An alert

Unlike most content types in YMCA Website Services, you don’t use Alert to create pages. Instead, Alerts display as a rendered entity or a section of content on other pages.

Alerts also don’t use Paragraphs or Layout Builder. By design, the layout of Alerts are rigid; however, the text editor and the color options listed below allow content editors some flexibility.

When Should You Use an Alert?

  • Timely updates for centers, such as when your hours change or facilities close.
  • Marketing promotions, such as for membership campaigns or even promotions.

How to Use an Alert

Go to Admin > Content > Add Content > Alert (/node/add/alert).

  • Title: Displays as the headline for your alert.
  • Description: The main body of your alert. Sentences should be short and minimally styled in this section. Uses the Text Editor.
  • Alert Style: Choose from the Classic Alert style which enables the Color Fields below or a set of styles that are pre-configured for you to match the YMCA colorways.
    • Urgent options use a colored background with dark or light text.
    • Info options use a grey background with colored text.
      Screenshot depicting 8 different style options.
  • Color Fields: These three dropdown fields control different aspects of color in your alert. All three dropdowns reference the color vocabulary.
    • Background Color: The color of your alert.
    • Text Color: Stick to using either black or white for accessibility.
    • Icon Color: Changes the appearance of the icon to the left of the title.
  • Link: Adds a button with a call to action to the alert on the right. The button color defaults to black.
  • Placement: Choose “Header” to show your alert above your main content or “Footer” to show below your main content.

The alert admin fields

Setting visibility

  • Visibility pages: This is where you control where the alert displays on your site. In the large text field, you write the relative path of the pages where you want this to appear or not appear. Enter each path on a new line. Each path should start with a slash, /.

    You also have the option to use an asterisk character * as a wildcard so you don’t have to enter a large number of relative paths. For example, if you wanted to add an alert to a /health-and-fitness section, you would enter /health-and-fitness* in the text area.

    The alert visibility dialog

    What is a relative path? A relative path is the part of your URL after your domain name.

    At https://example.com/community, for example, the domain name is example.com, while the relative path is /community.

    Using the Alert visibility state radio buttons at the bottom, you can either show or hide your alert from the page paths listed in the text area above.

  • Location: This field provides additional flexibility for controlling where the Alert will display. Selecting a Location from this field will display the alert on the Location page and any related page (blog posts, news, landing pages) that has the corresponding Location selected.

Rearranging alerts

Alerts can be rearranged to control the order in which they display if multiple appear on a page. The Alerts Rearrange page can be accessed via its link on the Content page or at Admin > Content > Alerts Rearrange (/admin/content/alerts-rearrange). The link might not appear in the Admin menu prior to version 10.3.1.

A screenshot of the Rearrange Alerts display with labels corresponding to the below steps

To rearrange alerts:

  • Go to the Alerts Rearrange page
  • Rearrange alerts with the drag handle () or the “Show row weights” option.
  • Save order when finished.

Alert visibility examples

Figuring out exactly how to show an alert on the right pages can be a challenge. The Visibility pages, Alert visibility state, and Location selectors work together to control where an alert is displayed. Here are some tips on how to get just what you want.

To show an alert only on a single Location page:

  • Visibility pages: add the path to the Location, like /locations/downtown-ymca
  • Alert visibility state: “Show for the listed pages”
  • Location: “None”

To show an alert on a location and any related pages:

  • Visibility pages:
  • Alert visibility state:
  • Location: select the Location, or select more than one using Shift or Command/Ctrl.

“Related pages” in this case means any page with a specific location selected in its Location field.

On groups of pages

The wildcard * can be used to specify any page in a section of the site.

To show an alert on every page on the site:

  • Visibility pages: *
  • Alert visibility state: “Show for the listed pages”
  • Location: “None”

To show an alert on every swimming page:

  • Visibility pages: /programs/swimming*
  • Alert visibility state: “Show for the listed pages”
  • Location: “None”

The position of the * wildcard is important. Consider /programs/swimming* versus /programs/swimming/*:

Show for /programs/swimming*:

  • /programs/swimming
  • /programs/swimming/drop-in
  • /programs/swimming/swim-lessons

Show for /programs/swimming/*:

  • /programs/swimming
  • /programs/swimming/drop-in
  • /programs/swimming/swim-lessons

On the home page

You can use / OR <front> to show an alert on the home page. <front> is a special token and should always be listed on its own line.

  • Visibility pages: / OR <front>
  • Alert visibility state: “Show for the listed pages”
  • Location: “None”

With exceptions

Sometimes you want to show an alert on all pages except a few. Maybe you have an alert for a fundraising campaign but don’t want to show it on the “Join” or the “Give” page. The Hide for the listed pages option can help in this case.

To show an alert on all pages except “Join” and “Give”:

  • Visibility pages:
    /join
    /give
    
  • Alert visibility state: “Hide for the listed pages”
  • Location: “None”

8.3.7 - Blog Post (Paragraphs)

Legacy Paragraphs-based blog content. Migrate to Article (Layout Builder) for modern blog/news functionality.

Note: This Content Type is similar to the News Post content type. Both have been replaced by Article (Layout Builder).

An example of a blog post page

About Blog Post (Paragraphs)

Blog posts in YMCA Website Services allow you the flexibility to both create simple posts using only the text editor and more robust layouts with paragraphs.

When Should I Use a Blog Post?

When you decide to use a blog post depends greatly on your Association’s content strategy. However, blog posts are designed so you can post timely pages and list them throughout your site. Examples of blogs may include:

  • Member Stories
  • Workouts and Recipes
  • Updates about a Center/Branch
  • Promotions and Contests
  • Press Releases

How Do I Use a Blog Post?

There are three fields that appear above the accordion tabs below:

  • Title: The name of the blog. Displays in the header area on your blog post and in the cards that display in a list of blogs.

  • Locations: An option select for you to tag a post with one or more locations (Camp or Branch). Use Ctrl+Click (Windows) or Cmd⌘+Click (Mac) to select multiple locations.

Each time you create a new Branch Page or Camp Page it populates into the locations field automatically

  • Category: An entity reference to the Blog Category vocabulary. Type in the name of the category and select from the options that appear, or create a new category/term by typing in a new one.

Selecting a category in the blog post admin

Style

This dropdown changes the style of the post’s card when it appears in a listing format. This dropdown does not affect any layouts on the page.

The blog post style dropdown

Story Card

CarnationLily
A blog story card in Carnation
A blog story card in Lily

Photo Card

CarnationLily
A blog photo card in Carnation
A blog photo card in Lily

News Card

A blog news card in Carnation

Color Card

When choosing color card, you are presented with two styling options in dropdowns. Both are entity references to the Color vocabulary:

  • Background color: Changes the color of the card.
  • Text color: Changes the color of the text. It’s recommended you only use white or black.
CarnationLily
A blog color card in Carnation
A blog color card in Lily

Content Area

The content area is the main body of your page. You can use the default fields entered below for a simple block post or build a more robust layout using paragraphs.

The sidebar area also allows you embed paragraphs below a section that links to the centers tagged in the post, the categories and a Related Content field that allows you to promote other Blog Posts by tagging them with the autocomplete widget.

Layouts

While you have the option to build layouts in blog posts using paragraphs, all blog posts are strictly two-column layouts. The Content Area displays on the left while the Sidebar Area displays on the right.

8.3.8 - Branch

One of the first places members go when they visit a Y website is to their local Y’s page.

Branch pages contain multiple data fields that work together to help members find the right location, hours, and amenities that fit their needs.

Designs:

Creating a Branch

Go to Admin > Content > Add Content > Branch

Fill in the content fields:

General Info

  • Title (required): This is the name of your branch which will display as your page title and the title on the location card. If your branch has a longer formal name we recommend using the shorter, more common name for readability.
  • Neighborhood: An optional reference to specify which neighborhood your Y is located in. Start typing and select from the list. To add a new neighborhood, add it to the “Area” vocabulary under Structure > Taxonomy (see Taxonomy).
  • Coming Soon: This flag indicates a newly opening branch on the Locations page.
    Screenshot of a page showing “Downtown YMCA” with a “Coming Soon” flag.
  • Temporary URL: Overrides the “Branch info” link on the Locations page, allowing you to link to a different internal or external page.

Contact Info

  • Address: The physical address of your location. Be sure to include all address fields.

  • Branch Coordinates (required): This field pins your branch on the locations map.

    To get your branch's coordinates:

    ( with Google Maps)

    • Search for your Y location
    • Right-click the location on the map.
      Screenshot of Google Maps showing the right-click menu with the latitude/longitude item selected.
    • To copy the coordinates, left-click on the latitude and longitude.
    • Paste the lat, long into one of the fields, then cut and paste to separate them.
      Screenshot of the Drupal Branch admin screen with the latitude and longitude separated into different fields.
  • Phone (required): The main phone line for your branch. Will be displayed as it is entered and linked to allow mobile users to tap to call.
  • Fax: Optional.
  • Email: We recommend you use a main contact email, such as info@example.com, rather than the email for an individual staff member.
  • Directions: By default, a link with directions is auto-generated using the Address field. Use this field to substitute your own directions link.

Branch Hours

Add the main hours for your facility. These are displayed in the header and on the Locations page.

  • Custom hours label: The title that is displayed in the “All hours” dropdown. Clearing this field will hide the section from the Branch page.
  • Mon, Tue, …: Add the hours for each day of the current week.
    • Most formatting like <open time> <separator> <end time> should work, but we recommend something like 7am-5pm
    • Leaving a day empty will show the hours as “Closed” but you can enter any other text as well, like “Wednesday: ‘Temporarily closed’”
  • Branch Holiday Hours: Add special hours for any upcoming holidays. These will be displayed on the site when the holiday is less than two weeks away. Add as many holiday entries as you like.
    • Holiday Title: The displayed title of the holiday.
    • Holiday Hours: The displayed hours for the holiday.
    • Date: The date of the holiday. When this day is in the current week …
  • More Hours Link: A link to show additional location hours information, like another page or a PDF.

Screenshot of the Branch Hours popup in the Branch Header

Header Area

This section is not displayed when “Use Layout Builder” is selected.

There is no image field for the Branch content type, so you will need to add one of the following paragraphs to add an image and title at the top of your page:

Content Area

This section is not displayed when “Use Layout Builder” is selected.

The Branch Content Type only has one layout option—one column—and no description field. Paragraphs will form the body of the page.

The following paragraph types integrate directly with Branch pages:

Bottom Area

This section is not displayed when “Use Layout Builder” is selected.

Use the bottom area for anchoring elements on your page. The following paragraphs are great for this area:

Branch Amenities

  • Branch Amenities
  • Closed Amenities

Type in and select which amenities are available or not available at your branch using the autocomplete field.

Screenshot showing the Branch amenities field with autocomplete dropdown.

If you embed a Branch Amenities with the Icons paragraph or Branch Amenities block on your page, the amenities will be displayed in your content. The Amenities will also serve as filters for branches on your locations page.

Screenshot showing the branch amenities block with open emenities and closed amenities labeled.

If you don’t see an option available or would like to rename a branch amenity, go to Structure > Taxonomy > Amenities. See Taxonomy for more info.

The Branch Menu is a single-level sub-menu that displays within a branch page (and sub-pages) that allows users to drill down to additional content specific to that branch. The Branch Menu always shows “Branch Home” as its first link.

  • Menu links: A list of menu links to be displayed in the menu. Allows unlimited items but we recommend a maximum of 6-8 depending on the Link text length.

Screenshot of the branch menu block.

Customizing with Layout Builder

Beginning in Website Services 9.2.13 content editors have the option of customizing the Branch page with Layout Builder. You can migrate from using Paragraphs to using Layout Builder on a branch-by-branch basis to ease the transition.

The Use Layout Builder checkbox on the Branch edit page non-destructively switches between Paragraphs and Layout Builder. If the checkbox does not appear, ensure the Y Branch (y_branch) module is installed at Admin > Extend (/admin/modules).

Layout Builder Blocks

Branch pages have several specialized components that utilize the structured data (fields) that already exist on your branch page in newly designed Layout Builder Blocks.

In addition to using many of the standard Layout Builder components, Branch pages also use several components that display the fields described above.

These blocks are available via All system blocks in Layout Builder:

  • Branch Hours: Combines the branch title, contact information, hours, and more into a dynamic page header.
  • Branch Amenities: Displays open and closed amenities in an easy-to-read grid.
  • Branch Menu: Displays the Branch Menu links.
    • Designs:
    • Can be placed on a Landing Page to show the Branch Menu for a specific branch. Choose a branch in the Location field. This can be useful if you are creating sub-pages for a branch.
      • Added in the December 2024 release.

One additional component is available that requires additional information:

Designs:

This component allows you to place up to 6 social media links on a branch page.

  • Add the Branch Social Links block to the pre-configured Social links section of your page using the standard process.
  • Add up to 6 links in the Links field. Icons for each social media platform will be populated automatically.
    • Currently supported platforms include Facebook, Instagram, Linkedin, Twitter, and YouTube. Request a new platform if you need.
  • After adding or updating the block, be sure to save and publish your branch.

Home Branch Selector

This feature allows users to select a single branch location as their home / preferred branch so that they can easily access branch-specific content across the site.

A screenshot of the Home Branch selector with a label and a n arrow pointing to a downward-pointing chevron with the label “Link to bring back the popup”

The Home Branch selector popup will appear to users who arrive at the site and:

  • are new to the site,
  • have not selected a Home Branch, and
  • have not checked the “Do not ask me again” checkbox in the modal.

Users can select a Home Branch by:

  • choosing a branch from the modal popup,
  • using the “Set Preferred Branch” link in the Utility menu,
  • choosing “My preferred branch” on a Branch page or in Location Finder.

Users can remove a Home Branch by:

  • summoning the popup with the down arrow next to the set branch in the Utility menu, or
  • unchecking “My preferred branch” on a Branch page or in Location Finder.

Selecting a home branch will:

  • add a link to the Branch’s home page to the user’s utility menu,
  • show the Branch as the Home Branch on Branch Pages and Location Finder, and
  • populate the Branch options in other sections of the site like the Membership Apps and Schedules (coming soon).

Disabling the Home Branch Selector

If you want to completely remove the Home Branch selector from your site you will need to disable it via the command line. DO NOT disable the module via the admin UI as this will result in an error.

drush pmu ws_home_branch openy_home_branch

Migrating to Layout Builder

Migrating Branches to Layout Builder involves recreating some content on the page. The process is similar to building a new Landing Page with Layout Builder but with a lot of the work done for you!

Once you are ready to migrate a Branch:

  1. Either clone the page or open it in a separate tab so that it’s easier to compare content.
  2. Prepare the Branch for Layout Builder:
  • Edit the Branch,
  • Add links in the Menu section if you’d like,
  • click Use Layout Builder,
  • if you’d like, uncheck Published while you migrate to hide the page temporarily, then
  • Save.
    Screenshot of the Branch edit screen.
  1. Your Branch will now display a set of default blocks: Hours (and header), Menu, Social Links, and Amenities.
  2. From here, you can use Layout Builder to move your old content from Paragraphs into Blocks. Review the full list of designs or the list of components if you need help deciding how to place things. Your old content will still be available to reference in the Edit tab in the old Header/Content/Footer sections.
  3. When you’re finished, Save the layout and Publish the Branch!

8.3.9 - Camp

Physical locations where outdoor camp programming takes place.

While YMCA Branches may offer some form of summer day camp, they differ from facilities that primarily host programs related to outdoor camps. The Camp content type also enables editors to create sub-sites or “microsites” using a separate menu structure.

Designs:

When Should I Use Camp?

If you are an independent YMCA camp or you’re an Association with one or more locations dedicated to outdoor camp, the Camp Content Type serves well as a landing page for those locations.

What about Branch Day Camps?

There are several considerations for Branches that host Day Camps in the center:

  • The Branch content type is intended to be the home page for branches.

  • Adding a Branch listing and a Camp listing for the same physical location creates duplicate listings for your center and could have search implications.

  • Camp pages don’t have fields for operating hours or amenities.

  • Branch Day Camps, unlike outdoor camps, tend to be listed in the same CRM as other branch-based programs, and therefore could integrate into Activity Finder, provided the CRM’s compatibility.


Recommended Content Types for Branch Day Camps

Creating a Camp

General Info

  • Title (required): This is the name of your branch, which will display as your page title and the title in the location card.
    • There is no separate field for the full name of your facility (e.g., Joe C. Davis YMCA Outdoor Center) versus the common name (Camp Widjiwagan). The best practice would be to use the shorter, more common name for readability.
  • Menu Links (required): Add in the URL or name of the content you want to link your Camp Menu to (you must use the Camp Menu paragraph for this to work). This field is not used with Layout Builder.
    The camp menu links field
    Read more about Camp Menu ⇒

Contact Info

  • Address (required): The physical address of your location. Be sure to include all address fields.
  • Camp coordinates (required): This field pins your camp on the locations map.
    • See Branch for details on how to find your camp coordinates.
  • Phone (required): The main phone line for your branch. Will be displayed as it is entered and linked to allow mobile users to tap to call.
  • Fax: Optional.
  • Email: We recommend you use a main contact email, such as info@example.com, rather than the email for an individual staff member.
  • Directions: By default, a link with directions is auto-generated using the Address field. Use this field to substitute your own directions link.

Header Area

There is no image field for the Camp content type, so you will need to add one of the following paragraphs to add an image and title at the top of your page:

Below your header image, add in a Camp Menu paragraph for a secondary, full-width navigation.

Content Area

The Camp Content Type only has one layout option—one column—and no description field. Add in almost any paragraph you want into the body of you page.

The following paragraph types integrate directly with Camp:

Bottom Area

Use the bottom area for anchoring elements on your page. The following paragraphs are great for this area:

Customizing with Layout Builder

Beginning in Website Services 9.3, content editors have the option of customizing the Camp page with Layout Builder. You can migrate from using Paragraphs to using Layout Builder on a camp-by-camp basis in order to ease the transition.

The Use Layout Builder checkbox on the Camp edit page non-destructively switches between Paragraphs and Layout Builder. If the checkbox does not appear, ensure the Y Camp (y_camp) module is installed at Admin > Extend (/admin/modules).

Camp Menus

The Camp page is often used as a landing page for a microsite with additional information - schedules, packing lists, and other camp-specific pages.

We have two camp-specific menus that help build this structure.

  • Camp Menus allow you to provide a two-level menu in the header of each Camp page and subpage.
    A screenshot of the Camp Menu design
  • Camp Quick Links provide a single-level utility menu for additional camp information.
    A screenshot of the Camp Quick Links design

After setting Use Layout Builder for your Camp page, navigate to the Layout tab. You need to configure the Camp Quick Links in two blocks in order for them to properly display on desktop and tablet/mobile.

Configure the first block
  • In the Configure Camp Header section, you will see placeholders for each of the menu blocks that say Please select the menu to display in this Camp Quick Links block.
    The camp page admin with menu placeholders
  • Using the on the first Camp Quick Links block, click Configure.
    The camp menu block edit menu.
  • In this menu, you can create a new menu or add an existing one that you’ve made in the Menus administration (/admin/structure/menu). To create a new menu, fill in these fields:
    • Title (required) - the title of the Quick Links menu to be displayed in the Utility Navigation.
    • Display title - must be checked in order for the Quick links to display properly.
    • Click Add new menu, then set up the new menu:
      • Menu Title (required) - the administrative name of the menu. Like Camp Coleman Quick Links.
      • Menu Name (required) - the machine name of the menu, using only lowercase letters, numbers, and hyphens. Like camp-coleman-quick-links.
      • Administrative summary - is optional and only used in the menu admin.
        The camp quick links fields admin
    • Click Create menu, then click Edit links to add items to the menu.
    • In the Edit links popup you can add and reorder links in the menu.
      The “Edit links” dialog in the Camp admin
      The “Add new link” dialog"
      • For each new link:
        • Click Add new link
        • Menu link title is the text displayed.
        • Link is the internal page or external url that the link points to.
        • Enabled allows you to temporarily hide a menu item.
        • Show as expanded should be checked for any parent items. There is no harm in always checking this.
        • Other fields can be ignored.
        • Save when you are finished.
      • Use the drag handles to rearrange or nest menu items.
        • Note: Parent items must have Show as expanded checked in order to display child items.
    • When you are finished adding and rearranging menu links, Save.
  • Finally, save all the changes with Update.
Configure the second block
  • Find the second place that says Please select the menu to display in this Camp Quick Links block in the Header Section.
  • Using the on this block, click Configure.
  • As before, configure the block:
    • Add the same Title as the first block.
    • Ensure Display title is checked.
    • Click Add existing menu then start typing the name of the menu you created in the previous block and select it in the autocomplete dropdown.
      A screenshot displaying the above steps.
    • Click Add menu to save the selection.
  • Once the existing menu has been added, you will see the Edit, Remove, and Edit Links options. Once you see those, you can Update to save these changes.
    A screenshot showing the completed “Add existing menu” dialog

Once you have completed the process you will see your Quick Links menu displayed in two sections of the Header. This will ensure that the menu is displayed properly across all displays.

camp–quick-links-success.png

Camp Menu

  • Find the final placeholder that says ... Camp Menu ...
  • Configure the block.
  • Create a new menu or choose an existing one using the steps above.
  • Update, then Save Layout at the top of the page.
  • Now your Camp page is populated with all of its menus!

A screenshot showing the expanded Camp Quick Links menu and Camp Menu

Camp Landing Pages

The Camp Subpage (formerly “Camp Landing Page”) content type allows you to create internal pages for your camp section or microsite. Once you’ve created the parent Camp page, you are ready to creat additional Camp Subpage pages.

  • Go to Content > Add Content > Camp Subpage
  • Set the Title
  • In the Camp field, begin typing the name of the Camp page that will be the parent page, then select the item from the autocomplete dropdown.
    The Camp Subpage admin fields
  • Click Save and edit layout.
  • You will now see the Layout Builder editor with the menus from your Camp page pre-populated in the layout.
    The Camp Subpage layout builder interface
  • Add additional content using Layout Builder, then click Save layout

Note: The menu references on Camp Subpages are copied to the header when the page is created. Any updates to those menus (new items, reordering) will be reflected on all subpages, but later changes to the blocks (removing the menu altogether, changing the linked menu) will need to be made on both Camp and Camp Landing Page pages separately.

Camp Subpage are not automatically added to the Camp Menu of their corresponding Camp. Be sure to add the newly created Camp Subpage to the Camp Menu so that it’s properly linked.

Layout Builder Blocks

Camp pages have a number of specialized components that utilize the structured data (fields) that already exist on your branch page in newly designed Layout Builder Blocks.

In addition to using many of the standard Layout Builder components, Camp pages also use a number of components that display fields described above.

Camp Info Block

The Camp Info Block is automatically added to the Body section of each Camp page. It displays content from the Contact Info section. It can be rearranged on the page but is not otherwise configurable.

Camp Header Layout

When you create a new Camp page or switch an existing one to use Layout Builder, it will come with a pre-set Camp Header Section, which enables the configuration steps above. If you find some of those blocks are missing, you can restore them manually.

To completely start over, use the x to the left of Configure Camp Header to delete the section. Add a new Section and choose the WS Camp Header layout. Then, add the following blocks by selecting Add block in the corresponding region.

A screenshot of the Camp Header Layout Builder configuration with labels for the Utility menu at the top and the Main Menu in the center

The default configuration for a the Camp Header block should be:

  • Utility Menu
    • Left
      • All system blocks > Camp blocks > Camp Back Link
    • Right
      • Create custom block > Camp Quick Links
      • All system blocks > OpenY > Open Y Google Translate (optional)
  • Main Menu
    • Left
      • All system blocks > Common blocks > Site Logo Block
    • Right
      • Create custom block > Camp menu
      • Create custom block > Camp quick links

8.3.10 - Facility

Locations that house YMCA programming outside of a Branch.

The Facility content type is used for locations where programming might take place that are not a full YMCA Branch. This might be a childcare facility, a shared-use space, or an office.

Designs:

Facilities share their design with the Branch content type.

Creating a Facility

General info

  • Title (required): This is the name of your branch, which will display as your page title and the title in the location card.
  • Neighborhood: If it is used, select an item from the Neighborhood Taxonomy.
  • Type: Choose from a predefined list of types.
    A screenshot listing the preset Type options
  • Facility Branch - Using autocomplete, select the Branch that this facility is associated with.

Contact Info

  • Address: The physical address of your location. Be sure to include all address fields.
    • If you do not set an address (or clear the address by resetting Country to “- None -”) then the facility will display the address of its associated Branch. (Added in version 10.3.1, December 2023.)
  • Facility coordinates (required): This field pins your facility on the locations map.
    • See Branch for details on how to find your facility coordinates.
  • Phone (required): The main phone line for your facility. Will be displayed as it is entered and linked to allow mobile users to tap to call.
  • Fax: Optional.
  • Email: We recommend you use a main contact email, such as info@example.com, rather than the email for an individual staff member.
  • Directions: By default, a link with directions is auto-generated using the Address field. Use this field to substitute your own directions link.
  • Facility Hours: Set the hours for the Facility. (Added in version 10.3.1, December 2023.)
    • This field follows the same rules as Address - if it is empty, the associated Branch hours will be displayed.
    • See Branch Hours for details on how to set the Facility Hours.

For aside pieces of content, such as side navigations, promotional cards and content related to the main part of your page.

Content

These sections are not displayed when “Use Layout Builder” is selected.

Use Paragraphs to add content to your Facility page.

  • Sidebar Area
  • Content Area

Customizing with Layout Builder

Beginning in Website Services 10.3.0 content editors have the option of customizing the Facility page with Layout Builder. You can migrate from using Paragraphs to using Layout Builder on a facility-by-facility basis in order to ease the transition.

The Use Layout Builder checkbox on the Facility edit page non-destructively switches between Paragraphs and Layout Builder. If the checkbox does not appear, ensure the Y Facility (y_facility) module is installed at Admin > Extend (/admin/modules).

The migration process is identical to Migrating Branches to Layout Builder.

8.3.11 - Landing Page (Paragraphs)

Legacy Paragraphs-based content type. Migrate to Landing Page (Layout Builder) for modern drag-and-drop page building.

Fields in Landing Page (Paragraphs)

Title (Required)

This is what you will see in your admin portal as your content’s name. it will also show as the page title in the Header unless you add a paragraph in the Header Area.

Layout (Required)

Landing Pages come with four basic layouts for desktop. For mobile, all layouts display in a single column, with the Sidebar Area stacking below the Content Area.

One Column Layout

The one column landing page layout

One Column (Full Width)

The one column (full width) landing page layout

Two Columns

The two column landing page layout

Two Columns (Fixed Sidebar)

The two column (fixed sidebar) landing page layout

Paragraph Areas

You can use any number of Paragraphs in these fields.

  • Header Area: Used for inserting banners, small banners and galleries. Date blocks are also great in this area for scheduled content.
  • Content Area: The main body of your content.
  • Sidebar Area (Two Column Layouts Only): For aside pieces of content, such as side navigations, promotional cards and content related to the main part of your page.
  • Bottom Area: Add an anchoring element to your page, such as a promotional banner or webform.

8.3.12 - Membership Content Type

Membership items are the building blocks of the Membership Calculator and are only displayed within the Membership Calculator Paragraph.

See Membership Calculator.


Membership Fields

General Information

  • Title: The title of the membership type to be displayed on the first step of the Membership Calculator.
  • Description: A short description to be displayed on the first step of the Membership Calculator.
  • Image: A reusable image field to be displayed on the first step of the Membership Calculator.

A screenshot with the Membership content title, image, and description.

Membership Info

The Membership Info Paragraph lists detailed membership information per location. Add one “Membership Info” section for each location that your membership applies to. If a location does not offer a membership type, you can leave it out.

  • Location: A reference to an already-existing Branch. If the branch does not exist, you’ll need to create it first.
  • Link:
    • URL: The link a member should be taken to to sign up for this membership at this location. See below for tips on finding this URL.
    • Link Text: This field is not used.
  • Join Fee: Dollar value for how much someone has to pay to join.
  • Monthly Rate: Dollar value for the monthly fee of the membership.

A screenshot labeling the membership info section fields.

Every membership management system will have different ways of linking in for members to complete their registration. Here are a few we know about. If you have tips for a MMS not listed here, feel free to leave them in the comments.

Daxko Operations

Navigate to: Membership > Membership Types > Edit > Online Settings. This provides the deep link to the specific membership types.

A screenshot showing the General Information screen of Daxko Operations

8.3.13 - News Post (Paragraphs)

Legacy Paragraphs-based news content. Migrate to Article (Layout Builder) for modern blog/news functionality.

Note: This Content Type is similar to the Blog Post content type. Both have been replaced by Article (Layout Builder).

An example news post page

About News Post (Paragraphs)

News posts in YMCA Website Services allow you the flexibility to both create simple posts using only the text editor and more robust layouts with paragraphs.

When Should I Use a News Post?

When you decide to use a news post depends greatly on your Association’s content strategy. However, news posts are designed so you can post timely pages and list them throughout your site. Examples of news posts may include:

  • Member Stories
  • Workouts and Recipes
  • Updates about a Center/Branch
  • Promotions and Contests
  • Press Releases

How Do I Use a News Post?

The news posts category field

There are three fields that appear above the accordion tabs below:

  • Title: The name of the news post. Displays in the header area on your news post and in a list view of news posts.

  • Locations: An option select for you to tag a post with one or more locations (Camp or Branch). Use Ctrl+Click (Windows) or Cmd⌘+Click (Mac) to select multiple locations.

    Each time you create a new Branch Page or Camp Page, that location’s name populates into the locations field automatically

  • Category: An entity reference to the News Category vocabulary. Type in the name of the category and select from the options that appear, or create a new category/term by typing in a new one.

Content Area

The content area is the main body of your page. You can use the default fields entered below for a simple block post or build a more robust layout using paragraphs.

The sidebar area also allows you embed paragraphs below a section that links to the centers tagged in the post, the categories and a Related Content field that allows you to promote other News Posts by tagging them with the autocomplete widget.

Layouts

While you have the option to build layouts in news posts using paragraphs, all news posts are strictly two-column layouts. The Content Area displays on the left while the Sidebar Area displays on the right.

Other Settings

In the right column, make sure the “promoted to front page” item is checked, so it will appear in any listings.

8.3.14 - Program

A generic category page for program offerings.

An example of a program page

The Program content type is a high-level page that directs people to more specific program offerings.

An example of a Program in YMCA Website Services would be a Swimming & Aquatics page that directs people to more specific offerings, such as swim lessons or clinics.


When Should I Use a Program?

Programs are pages that should link to more specific offering pages. Most often in YMCA Website Services sites, they are the main program pages in an YMCA Website Services mega menu setup.

The site mega menu with program pages indicated


How to Use Program

Header Area

  • Icon: An image field that displays an icon (jpg/png) inline with the title.
  • Image: An optional image field for a picture to display in the header.
  • Color: A background color for the header.
  • Paragraph Section: Area to enter paragraphs in the Header, such as a Gallery, Small Banner or Microsites menu. Paragraphs entered in this area replace the image/background color

Standard Title with Light Blue

A program page with a light blue banner

Standard Title with Purple

A program page with a purple banner

Small Banner

A program page with a small banner and an image background

Content Area

  • Description: Displays above the main body of your content and serves as a tease for your Program page when it’s displayed as part of a list on another page. Minimal styling and short lengths are recommended.

  • Content: The main body of your content. Use paragraphs to build your page layout. Designed to integrate with the Categories Listing paragraph, but that is not required.

For aside pieces of content, such as side navigations, promotional cards and content related to the main part of your page.

Layouts

Similar to landing pages, Program pages are designed for flexible layouts, with a couple key differences:

  • Program pages are designed for integration with the Categories Listing paragraph type. Program subcategory pages are tagged with a Program, and those subcategories are displayed as long cards on that Program page.

  • There is no layout dropdown. How your content displays depends on your theme.

    • Lily/Rose will always display Programs in a two-column layout in desktop.
    • Carnation will display desktop in One Column without content in the Sidebar Area and in Two Columns with content in the Sidebar Area.

Carnation: Without Content in the Sidebar

A program page without content in the sidebar

Carnation: Desktop With Content in the Sidebar

A program page with content in the sidebar

  • The Description field always displays above the paragraphs you enter.
  • There is no bottom area for you to add an anchoring element.

Customizing with Layout Builder

Beginning in Website Services 10.3.1.1 content editors have the option of customizing the Program page with Layout Builder. You can migrate from using Paragraphs to using Layout Builder on a program-by-program basis to ease the transition.

The Use Layout Builder checkbox on the Program edit page non-destructively switches between Paragraphs and Layout Builder. If the checkbox does not appear, ensure the Y Program (y_program) module is installed at Admin > Extend (/admin/modules).

Layout Builder Blocks

Program pages can take advantage of the Categories Listing block to list child Program Subcategory pages. To add the block:

  • Click the Layout tab at the top of your page.
  • Scroll to the location on the page where you want to add the block (usually the Body section).
  • Click Add block.
  • In the sidebar, expand All system blocks.
  • Search for “Categories Listing” or scroll to Lists (Views) > Categories Listing.
  • Click on Categories Listing.
  • Check Override title to add a title to the block.
  • Click Add block.

NOTE: As of version 10.3.1.1 (December 2023) the Categories Listing block styles have not been updated to be in line with the Design System. They will be updated as of the March 2024 release. Keep an eye on y_program releases for details.

Migrating to Layout Builder

Migrating Program pages to Layout Builder uses the same process as building a new Landing Page. See How to migrate to Layout Builder for information about preparing for the migration.

8.3.15 - Program Subcategory

Subcategory pages refine broad Programs into more concrete options.

A subset of a Program, Program Subcategory pages list different types of program offerings, grouped into Activities.

An example of a program subcategory page

Whereas a Program page would describe a Y’s Health & Fitness offerings in general, a Program Subcategory would break that down into subcategories such as …

  • Personal Training
  • Group Exercise Classes
  • Pilates

When Should I Use Subcategory?

Most Ys have opted to use Program pages as the top-level categories in their Programs mega menu. Subcategories are then the items underneath each category.

The mega menu with program subcategory items indicated

Subcategories, likewise, appear as horizontal cards on Program pages.

The program subcategories as displayed on program pages

Learn about the Categories Listing Paragraph ⇒

How Do I Use the Program Subcategory Content Type?

Start by adding a Title for your Program Subcategory and tag it with a Program.

The program subcategory fields

The Program tag will pull your Program Subcategory in as a horizontal card on a Program page. You can only tag a Subcategory with one Program.

Header Area

  • Image: Using an image field, select an image from the media browser. Displays in the header and as a thumbnail in Categories Listing.

  • Color: A dropdown to select a background color for your header.

    -> Note: The background color does not display on desktop in Carnation unless you do not have an image selected.

You have the option to add paragraphs in the Header Area. However, these paragraphs display below the below the image and title you enter above.

For example, if you add a banner in the Header Area, it will display below the title and image entered in those Header Area fields.

Subcategory was originally designed to work with the Classes Listing Filters paragraph in the Header Area and the Classes Listing paragraph in the Content Area.

View Subcategory Demo on YMCA Website Services Sandbox ⇒


With the integration of Activity Finder into YMCA Website Services, Classes Listing and Classes Listing Filters are becoming less popular among YMCA Website Services sites.

Content Area

The Content Area includes a Description that displays full-width just below the Header Area.

When your Subcategory is showed in a Categories Listing on a Program page, the Description is the text inside the card.

You can embed content inside the Content Area, all of which will display below the Description.

YMCA of Greater Brandywine Example

An example of program listings

The Sidebar Area will change the layout of the page into two columns once you enter content.

Bottom Area

Use the Bottom Area for anchoring elements, such as small banners and webforms.

Customizing with Layout Builder

Beginning in Website Services 10.3.1.1 content editors have the option of customizing the Program Subcategory page with Layout Builder. You can migrate from using Paragraphs to using Layout Builder on a program-by-program basis to ease the transition.

The Use Layout Builder checkbox on the Program Subcategory edit page non-destructively switches between Paragraphs and Layout Builder. If the checkbox does not appear, ensure the Y Program Subcategory (y_program_subcategory) module is installed at Admin > Extend (/admin/modules).

Layout Builder Blocks

Program Subcategory pages do not utilize any specialized blocks. See Layout Builder for the list of all components.

Migrating to Layout Builder

Migrating Program pages to Layout Builder uses the same process as building a new Landing Page. See How to migrate to Layout Builder for information about preparing for the migration.

8.3.16 - Promotion

Flexible content that can be inserted into components as advertisements.

Promotions are timed pieces of content that allow content editors the flexibility to create a single item that can be placed in multiple locations on the site, without having to duplicate or manage content in multiple locations.

Version 1 of the Promotion functionality was released in version 10.3.1.1 (December 2023). This version supports swapping promos into:

  • Activity Finder
    • by enabling the ws_promotion_activity_finder module.
  • Cards
    • by enabling the ws_promotion_cards module.
  • Modals
    • by enabling the ws_promotion_modal module.

Creating a Promo

Go to Admin > Content > Add Content > Promotion (/node/add/promo)

Fill in the content fields:

  • Title (required)
  • Subtitle
  • Description: The body text of the promo.
  • Image (required): Choose an existing image from the library or upload a new one.
  • CTA/link: Add a call to action to your promo.
  • Promotion Category: Choose one item from the Activities Taxonomy to link the promo with related components (see below).
  • Promotion Priority: Set how often the promo will appear. This setting will only have an effect if multiple promotions can appear on a page.
  • Visibility pages: This field is not yet in use.

Use the Scheduling options section in the sidebar to set a Publish on and Unpublish on time for your Promo (this requires cron to be running on your server - check with your hosting partner).

Placing a Promo

Version 1

In version 1, creating a Promotion and setting it as Published will automatically enable the promo in any available components (corresponding to the modules enabled above).

To filter a component to only a certain set of Promotions, edit a Layout Builder block and set the new Promotion Category field.

A screenshot of the promotion category field.

  • If Promotion Category is not set on a block, then the block will be overridden by any available (published) promo.
  • If Promotion Category is set on a block, then the block will be overridden by only matching promos that have the same category set.

8.4 - Blocks

Blocks allow content editors to reuse sections of content across multiple pages.

How to Use Blocks

A block works like this - you choose a paragraph, and that paragraph asks you to create a block. You write a section of content inside that block.

landing-page__2-column-block

You can now embed that block on another page simply by typing its name and click on it from a list of results.

Paragraphs that support blocks will have two buttons - Add New Custom Block and Add Existing Custom Block.

Adding a new custom block will allow you to retrieve it later on another page. When you go to retrieve a block, you will choose the Existing Custom Block option, type the Block Description in the search field, and choose from one of the options that appear.

admin__date-block–exsiting-block

Block Descriptions

Standard across all block types is the block description field, which serves as the name for your block. Use this description field to help identify your block when you are embedding it onto a page.

admin–code__block__cropped

Block Types

YMCA Website Services not only allows you to use blocks, but it supports different types of blocks for different types of content.

Basic Block

A basic block gives you a basic text editor and that’s it. This is great for embedding descriptions on cards across multiple pages.

Simple Block

The block type you will likely use most often is the simple block. A simple block gives you a basic text editor and that’s it. This is great for embedding descriptions on cards across multiple pages.

landing-page__1-column-demo-block|690x474, 75%

Paragraphs that Support Simple Blocks


Date Block

Use this block to schedule and unschedule sections/paragraphs on your page(s).

Using the Date Block Paragraph ⇒

Code Block

This unformatted block allows you to use any type of HTML tag, great for for embedding scripts and iframes onto multiple pages. This block also allows more flexibility for technically-inclined content editors.

Using the Code Block Paragraph ⇒

8.5 - Taxonomy, Vocabularies, and Terms

Group pieces of related content together for tagging, filtering, sorting and grouping.

The Taxonomy feature in YMCA Website Services creates organized lists of categories, which allow you to group content, create folders for Images ( in YMCA Website Services 2.4 and later) and create standard options for dropdown fields in your content.

Each list is called a Vocabulary, while each item in your list is called a Term. Terms comprise a Term Name and any additional data/settings for that particular vocabulary (see below in Vocabularies in YMCA Website Services for details).

How to Edit Vocabulary Lists

Go to Structure > Taxonomy. When you find the Vocabulary you want to edit, click List Terms.

The taxonomy item options

You can rearrange your terms by hovering your mouse over the cross icon and dragging them. This will determine the order in which they appear. By default these are alphabetical.

Reordering taxonomy items via drag and drop

Moving a term to the right will “nest” it underneath another term, making it a “child” to that term.

Adding/Editing Terms

Click on Edit to make changes to an existing item or Add Term to add a new one.

On the next page, you can add a Name for your vocabulary and an optional Description.

Below those two fields, you can add the additional information unique to your vocabulary.

Term Example - Grey Color

The Color Vocabulary provides a standard list of color options across your website, such as in a background color for your header.

The list of color taxonomy items in a dropdown
To change your shade of grey, you would go to Structure > Taxonomy > Color > Grey.

Below the name of your Grey term, you’ll find a color widget where you can change your standard shade of Grey across your site.

In this example, you can change the color of the Grey term in the Color Vocabulary using a Color widget.

The field admin for a taxonomy color item

Vocabularies

Because Vocabularies are lists of categories, how they will show up depends on which Vocabulary you use.

Amenities

Used for tagging branches with amenities. Amenities display on a branch page and as a filter on a locations page.

The locations page with a list of amenities

Color

As mentioned above, Color is a list of colors you can use across your site, primarily in your page headers, small banners, galleries and banners.

Blog/News Category

These taxonomies tag blog/news posts. Categories display in the sidebar and as filters in your Blog Post Listing and News Posts Listing paragraphs, respectively.

Media Folders

Creates folders for your images in the media browser.

View Media Folders tutorial ⇒

Media Tags

Creates tags for filtering images (YMCA Website Services 2.3.3 and earlier), Documents and Videos in the media browser.

View Image and Document tutorials

8.6 - Images and Documents

The media library stores images and files, allowing you to have custom cropping, focal pointing, folders and image styles.

Video tutorials

Learn more about media management in the distribution. Some of these videos use older versions of the distribution.

Bulk upload

Your YMCA website has the ability to upload media (images, documents, videos) in bulk (since 9.2.12 - December 2022).

You can batch/bulk upload from Admin > Content > Media (/admin/content/media) or Media Browser (/admin/content/browser). After uploading media, it will be available from the Media list and browser in any component on your site.

From the Media list

The “Upload media in bulk” button

  • Go to Admin > Content > Media (/admin/content/media)
  • Click Upload media in bulk
  • Choose your media type
  • Drag or choose the media to upload
  • Fill in the required fields in the resulting form.

From the Media browser

The media browser upload dialog with an arrow point to the “Upload files” button and the description “Drop multiple files on this button”

  • Admin > Content > Media Browser (/admin/content/browser)
  • Click Add media
  • Choose your media type in the sidebar, then use the Choose Files button to choose or drop files.
  • Fill in the required fields in the resulting form.

8.7 - Webforms

Beyond just a basic contact form, Drupal’s robust webforms features allow you to build interactive webforms with logic-based questions, built-in animation fields and a submissions manager.

Because this is one of the most well-documented applications in the Drupal community, we recommend using the documentation provided by the maintainer of the Webforms module, Jacob Rockowitz.

8.8 - Virtual Y

Virtual YMCA allows members and other authorized users to enjoy exclusive content for their local Y.

After members login to your website, they can browse a diverse selection of gated content—on-demand videos, written content, and live events—from any device of their choosing.

Below are links to various videos and documents, depending on how you prefer to learn, on how to do some of the most basic set up and management of your new Virtual Y environment.

8.8.1 - Building Blocks & Basics

Virtual YMCA is based on Open Y and was originally built as an extension for Open Y sites.

Virtual YMCA uses the same content editing tools as Open Y, except what you get out-of-the-box will be different than in Open Y.

Content Types

Virtual YMCA comes with four content types behind the login that are exclusive to members.

Virtual Y Video

Bring the Y to your members when they’re away. Provide on-demand classes, activities for kids, and other video content. Great for health seekers, families and Active Older Adults.

Add Virtual Y Videos one-by-one or with the separate Virtual Y Video Automation application.

Integrates with: YouTube and Vimeo

Live Streams

Bring your popular classes to your members live! Best for live events with little to no interaction with the audience.

Add Live Streams individually or on a recurring basis. They differ from Virtual Events in that the video will be embedded within the Virtual Y site.

Integrates with: YouTube and Vimeo

Virtual Events

Bring group fitness and other live events to your member with live, virtual events. Great for class with interaction with Y instructors and personal/small group training.

Add Virtual Events individually or on a recurring basis. They differ from Live Streams in that the user will be directed to an external video link.

Integrates with: Any URL/link, including GoToMeeting, Google Meet, Microsoft Teams, Zoom, IG Live and Facebook

Blog Posts

Do your members want to work out on their own but don’t know which workout they want to choose? Use written content to provide members workouts, recipes, or activities.

Add Virtual Y Blog Posts can be added via the standard Add Content list or menu.

No integrations required.

8.8.2 - Authentication Providers

The options available to associations to gate your content is dependent on your Customer Management System. Currently the following options may be used to gate content within the Virtual Y website.

Personify

Single Sign On (SSO)

You may require members to log into their account within the Personify CRM system.

Daxko

Single Sign On (SSO)

You may require members to log into their account within the Daxko CRM system.

Note, Daxko API access is required. Daxko charges an API usage fee.

Barcode Validation

You may require members to enter their bar code before accessing the site. Virtual Y will validate the barcode with Daxko prior to granting access.

Set up Daxko Barcode Validation.

ReClique

Single Sign On

You may require members to log into their account within the ReClique CORE CRM system.

CSV File Uploads

CSV Upload without email verification

An association may upload a membership CSV file indicating what members may access the gated content. Members provide their email address and the Virtual Y site will validate a match before granting access.

CSV Upload with email verification

An association may upload a membership CSV file indicating what members may access the gated content. Members provide their email address and the Virtual Y site will require members access their email and click a link to gain access to the gated content.

8.8.2.1 - Daxko Barcode Authentication

Open Y Gated Content (Virtual Y) release 0.13 includes a new authentication provider to support Daxko Virtual Areas. This will allow associations using Daxko to set up Virtual Area that enable members to access Virtual Y content using only their member barcode!

Instructions for setting up Virtual Areas are in Daxko’s documentation. If you need assistance configuring Virtual Areas, Daxko’s support team can assist you in setup: support@daxko.com

Configuration

  1. Enable Daxko Barcode Virtual YMCA integration
  2. OPTIONAL (but highly recommended): configure reCaptcha settings at /admin/config/people/captcha/recaptcha.
  3. Add your validation secret and form url and check help messages at /admin/openy/virtual-ymca/gc-auth-settings/provider/daxkobarcode.
  4. Save your settings.
  5. Set Daxko Barcode as your main authorization plugin at the Virtual YMCA settings: /admin/openy/openy-gc-auth/settings.

Once enabled, the module enables granular configuration to messages that users will receive on the page. It allows changing “Barcode” to something different, like “Member ID”, and allows adding help text to assist members in finding their ID. It also allows for global help text to direct members to help channels in case they’re unable to log in.

The Daxko Barcode configuration form

Once the module is enabled, members will be presented with the appropriately titled field to log in to Virtual Y.

The Virtual Y login page with Daxko Barcode authentication and reCAPCHA enabled

Upon success the user will be logged in to Virtual Y. Upon failure the failure state will be returned along with a help message provided by the association.

The Virtual Y login page with an error from a failed authentication

Notes

Members with a Balance Due

Anyone with a balance due in Daxko doesn’t have access to Virtual Y [via Daxko Barcode]. A lot of the accounts with balances are families with memberships who receive state scholarships for child care. The balance in Daxko is the portion the state pays, so it’s a bit of a “fake” balance. Any way for us to allow any ACTIVE member to use [Virtual Y], regardless if they have a balance or not?

The fix:

There’s a setting on the Daxko Operations virtual area at Membership > Virtual Area > Virtual Y > Edit that you can check/uncheck for “Block access when balance due.” You can uncheck that and it should let the member access the virtual area.

8.8.2.2 - ReClique SSO Configuration

The ReClique Core API enables check-in access by specifying member Email address. Following are the steps necessary to fully configure the ReClique Provider.

Acquire ReClique Core API Access

To get started, you will need to do the following activities in the ReClique CORE portal, while logged in as a YMCA super admin user:

  • Locate and note your YMCA association’s YMCA ID, known within the ReClique CORE documentation as the “Association Slug”.
  • Create a separate user for executing the ReClique CORE authentication API, and grant this user API level access

In detail:

  1. Log into the ReClique Core portal using a user with YMCA super administrator role.
  2. Click “Profile” in the top-right corner of the CORE portal.
  3. The YMCA ID is the non-numeric part of the “Association Slug” in front of the numeric user id. Please note this value for use in the Verification URL. In this example, the text midtn is this association slug value, and is what is needed for the YMCA ID.
  4. Click “Users” from the navigation menu (Users > Add New User)
  5. Select the “+ Add User / Staff” button.
  6. Create a stand-alone user for the purpose of executing API calls only. A suggested name is virtual_y, but any suitable name can be used.
  7. Assign this user the API Access role by selecting “Use Core API” in the Other list of role options.

Configure the Virtual Y ReClique Provider

For the Virtual Y site to communicate with the ReClique Core API, you’ll need to configure the ReClique provider. Configuring the ReClique provider is quick and easy.

  1. Navigate to the Gated Content Auth Setting Page at Manage > Virtual Y > Virtual YMCA Settings > GC Auth Settings
    • The GC Auth Settings page, when loaded, will look like the following:
  2. Find the ReClique Provider option and click the Edit Action
  3. Enter Your ReClique Provider Settings.
    • The ReClique Provider configuration page allows specification of permission mappings, the settings for accessing the ReClique CORE authentication API, and Email Verification settings.
    1. Specify Permission Mappings
      • This is used for User Segmentation. User Segmentation will allow YMCAs to segment content to particular Virtual Y roles based on membership types. Refer to documentation from the Open Y Community for more information about Setting up user segmentation.
    2. Add ReClique CORE API settings
      • Here, you’ll add the values needed to connect to the ReClique Core API.
        FieldValue
        Verification URLThe API endpoint provided by ReClique to verify member logins. It takes the form https://{Y_ID}.recliquecore.com/ api/v1/members/virtual_y/?Email= (This is the Production verification URL)
        Authentication loginThe login for the dedicated user created with ‘Use Core API’ access in the ReClique Core portal.
        Authentication passwordThe password for the dedicated user created with ‘Use Core API’ access in the ReClique Core portal.
        ID field textThe text to be displayed on the Virtual Y login form. Default value is “Enter your Email:”
    3. Specify the Email Verification options
      • This will enable a one-time login link to be sent to the member’s email for verification. Here, you can configure the length of time the login link will last before needing to generate another, email verification text, and message displayed to the member with instructions on how to proceed with logging into the Virtual Y site.
    4. Specify the Verification Message
      • This is the message the member will see when logging in if they are Inactive. The phone number must be added at the very least.
    5. After configuring the ReClique provider, click “Save”.
    6. From the GC Auth Settings page, make sure only “ReClique Provider” is selected and click, “Save”.

Your ReClique Provider is now fully configured and is ready for use.

To test, logout from the admin portal. You should now see, from the Home Page, your new login form configured ready to accept input.

If a valid Email Address is entered and the member is Active, the member will be allowed access to your gated content (videos, blog post, virtual meetings).

8.8.3 - Video Support & Hosting

Virtual Y supports embedded videos from the following sources. The supported source is dependent on the content type:

(On-demand) Video

  • YouTube
  • Vimeo

Live Stream

  • YouTube
  • Vimeo

Virtual Meeting

  • As a “Join” button
    • any external link, including Facebook
    • Zoom meetings (embedding is no longer supported)

Video Provider Specifics

Each video provider has its benefits. We’ve provided this list to help you decide where to start.

YouTube

YouTube videos that are smaller than 1280x720px (aka “720p”) may not display a thumbnail properly in Virtual Y. If you upload a large (greater than 1280×720px) thumbnail via YouTube’s video editor that should resolve this issue on Virtual Y (until this issue is resolved).

Setting up a Brand account for your Y is a good first step to using YouTube for your videos.

The requirements for embedding YouTube Live Streams may change often. Previously this has either required having more than 1000 subscribers on your channel, turning on “Monetization”, etc. It may, at times, be more expedient to use Vimeo for Live Streaming.

As of February 2021, YouTube’s stated requirements for Live Streaming are:

To live stream, you need to have no live streaming restrictions in the past 90 days and you need to verify your channel.

Vimeo

  • Requires a paid plan for typical Y usage.
  • Upload and bandwidth limits based on account type.
  • Truly gated videos with domain-level privacy. Domain restrictions are NOT RECOMMENDED if you plan on sharing your content with other Y’s using Virtual Y’s “Shared Content” feature.
  • In order to facilitate content sharing, we recommend using the Hide this video from vimeo .com privacy option combined with Enable people to embed this video on any site. Review all of Vimeo’s privacy options.

Most associations have been buying the “Premium” level to get access to unlimited live streaming.

Vimeo private videos do not allow thumbnails to be generated for your site. If you use private videos on Vimeo you’ll need to upload a thumbnail using the Teaser Image field on the content

A screenshot of the Teaser Image field .

Facebook

Facebook is not recommended for Virtual Y content, as any meeting there will also be listed publicly.

If you choose to host virtual meetings on Facebook, they will need to be publicly listed, otherwise it is not possible to create a direct link to the event. To get the link to a public video:

  • Click the three dots on the bottom right of the video.
  • Select “Copy Link”

Zoom

A few notes:

  • If you are creating a recurring Virtual Meeting, please be sure your Zoom meeting recurrence matches the recurrence on the Virtual Y meeting.
  • If your Zoom meeting requires a password, we recommend generating a link with the password embedded in it. This usually looks something like ?pwd=... in the link. Please review Zoom’s updated security settings for more information.
  • Through many tests we determined that Zoom embeds are not reliable and support for that feature has been disabled. Zoom links now display as a “Join” button which should make for a much smoother user experience.

8.8.4 - Go-live Checklist

Here are some things you should check before you go live with your Virtual Y site:

Review your content

  • Disable any Virtual Y sections that you’re not using.
    • Ensure that you’ve disabled links to those sections in your Main Navigation.
  • Review and click through Main Navigation and Footer links to ensure they’re all valid.
  • Visit /admin/content and ensure any demo content is deleted or unpublished.
  • Visit Virtual Y > Event Series and ensure any demo content is deleted.
  • Ensure that Virtual Y content is displaying as you expect.
    • If some content is not displaying, check to ensure all fields are filled in (the Description field is not required but can sometimes prevent content from displaying if left empty).

Review your Authentication

  • Review and test your Virtual Y Auth provider.
    • If you’re using the Daxko Barcode provider, ensure you’ve set the Message for login failures at Virtual Y > Virtual YMCA Settings > GC Auth Settings > Edit Daxko barcode provider.

Final clean-up

  • If you’re using it, ensure you’ve set up Google Analytics at Configuration > System > Google Analytics.
  • If you’re using any basic authentication to protect the site before it goes live (what Y Cloud calls “Site Lock”), ask your hosting partner to turn it off.
  • If you’d like to share content with other Ys, review Shared Content and initiate a connection to the Open Y Shared Content server

8.8.5 - FAQs

For up to the minute conversations and info on Virtual Y and its content, join us in the YUSA Slack. Request access to Slack

For even more Virtual Y FAQs, check out Y-USA’s post.

Evaluating VY

  • How do I learn the basics?

I’m in with VY

  • Once you’ve viewed the demo and slide deck, here’s what we suggest:
    • Join the #virtual_ymca Slack channel to where you can talk with other Y associations, the YMCA Website Services team, and partners on how to quickly get your Virtual Y experience launched.
    • Not on Slack? Request access.
    • Contact your developer partner or one of our featured partners.
    • If you didn’t find the answer (or the droids) you were looking for, let us know and we’ll point you in the right direction
  • Can I see a live example?
    • Yes. Please contact us and we can provide you with links and information.
  • Can I see a demo?
  • How much will it cost?
    • The Virtual Y code is free, but using it is not. Your costs come with having a developer configure Virtual Y as well as from hosting. Time estimate: <30 hours if you stick close to the default implementation and don’t make customizations. The more you deviate, the higher the cost. Costs will include:
      • Implementation
      • CRM SSO integration
      • Domain name and hosting
      • Training and support (will vary based on team’s comfort working with Drupal)

I’m not on YMCA Website Services

  • Can I use it if I’m not on YMCA Website Services? Yes!
    • Our website is built in WordPress. Will Virtual YMCA integrate with WordPress?
      • Virtual Y is built on YMCA Website Services (Drupal). You would build a stand-alone instance of Virtual Y (see agency partner next steps) that could be linked to from your current site. You can work with an agency of your choice or talk with one of our core partners if your current partner does not develop on Drupal. Time estimate is <30 hours if you stick close to the distribution and don’t customize.
    • What is my next step for Virtual Y if I’m not on YMCA Website Services?
      • Have a conversation with your current developer or contact one of our featured partners. You may work with your current web developer if they know Drupal. If not, one of our partners or Y-USA will likely be more economical.
    • How does my internal developer or agency use Virtual Y?
    • How do I add Virtual Y to my main website’s domain?
      • Ys who don’t have Open Y for their association’s main site can install a standalone Virtual Y site and put on their web address using a subdomain.
      • Example: virtual.ymcaname.org would point to your Virtual Y site. To your members and other website users, it would appear to be part of your site.
  • Where do I ask questions?
  • Can I try it?
    • Yes! You can use it yourself in the Sandbox
    • The login is the same as for the standard YMCA Website Services sandboxes so let us know if you need that information.

Committed to VY - Initial Technical Set-Up

  • I already have an YMCA Website Services site, do I need to upgrade to get Virtual Y?
    • Nope, unless you’re more than a couple of upgrades behind. Our incredible developer team established a structure to allow Ys to obtain Virtual Y without undergoing a full site upgrade, saving both time and $$$. If it has been 12+ months since your last upgrade, we recommend you proceed to keep your site current with the latest features and security. This will reduce future upgrade costs (it’s more expensive to update a site that is multiple versions behind) and help prepare you for Drupal 9, which was released in February 2021.
  • Drupal CMS (Video)
  • Software requirements
  • There’s not much here for technical documentation. What’s up?
  • Implementation
  • Which CRMs is Virtual Y compatible with?
    • Personify
    • Daxko
    • CSV authentication available for ActiveNet and other CRMs
    • Avocado (Salesforce)
    • Y-USA’s Nationwide Membership database
    • ReClique Core
    • If your CRM is not listed, we have a workaround solution where you can upload a CSV file of your active members’ email addresses into your Virtual Y site to grant your Virtual Y visitors access to your content. As long as you can export a basic spreadsheet of your active members, your data is likely compatible with Virtual Y.
  • Will there be impacts to the domain?
    • There should not be any impact from your domain if you already use YMCA Website Services. If you do not use YMCA Website Services, you can create a subdomain of your choosing, such as virtualy.yourassociationname.org where virtualy is the subdomain.
  • What Web Browsers are compatible with Virtual Y?
  • User Activity Logs Documentation
  • Setting up Google Analytics for Virtual Y (web)

Committed to VY - Content Editors

  • Does Virtual Y come with content?
    • There is demo content for you to test with, but you need to create and post your own content via the platforms mentioned in the next question. Some Ys have shared their content for all to use.
  • Which platforms can I use to host my content for Virtual Y?
    • Virtual Y works* with:
      • YouTube - hosted and livestream
      • Vimeo - hosted and livestream
      • Zoom - livestream
      • Zoom, GoToMeeting and Teams - video conferences
      • Blogs - any content you post
  • *Note: “Works with” means technically functional. Each video provider service, such as YouTube, manages their own terms of use, which will guide what’s okay and what’s not.
  • For Vimeo, is a specific account level needed to host videos to stream/pass through Virtual Y?
    • Many associations have been buying the Premium level to get access to unlimited livestreaming. Again, the YMCA Website Services Team has no control over Vimeo’s terms of use, and Vimeo’s terms of use are subject to change at any point without prior notice.
  • Can we keep our YouTube videos unlisted on our channel but still have them play in our Virtual Y?
    • Yes.
  • Can we use Facebook video links?
    • No. Due to restrictions/limitations enforced by Facebook, private videos or videos from a private group cannot be embedded on an external (non-Facebook) site. This means the only option would be to use publicly-facing Facebook Live video within Virtual Y, which can be seen by anyone on Facebook, not just your members. This weakens the case for paying for exclusive access to Virtual Y as a member, and YMCA associations were not interested in YMCA Website Services pursuing this type of Facebook integration.
  • Can I host Les Mills classes on our Y’s YouTube channel?
    • Unfortunately, Les Mills licensing does not cover recording the class for rebroadcasting.
  • Can we use Y360 videos?
    • Y360 videos are owned exclusively by Y360 and then licensed by Ys. A Y would need to obtain explicit permission from them for usage within Virtual Y. Additionally, YMCA Website Services would first have to build a new integration to accept those videos as on-demand content, because Y360 uses a video hosting service other than YouTube or Vimeo.
  • Music Licensing
    • How does music licensing work with this platform?
      • Music licensing copyrights and restrictions originate with the video platform used (e.g., YouTube, Vimeo) so you need to follow those guidelines. Be very careful to investigate whether the music you use within your branches is OK on livestream workouts.
    • Is YouTube strict about licensing?
      • YES. Do not put your Y at risk.
  • How do I learn the basics of content editing:
  • Editing your content categories listings via Drupal taxonomies
  • Adding new content to VY:
  • Image Guidelines
  • Setting up your Virtual Y
  • Virtual Y Experience Map & Rollout Plan

Live Streaming

Shared Content

Y-USA’s Role

  • I just heard Y-USA is building a Virtual Y platform. What if I’m already building this with a developer?
    • Virtual Y is open source software built by the YMCA Website Services. Because this software is open source, it is free for any YMCA to download and use. The Y-USA’s Y Cloud platform uses the Virtual Y module as a plug-and-play standalone micro-site that YMCA Website Services created. Y-USA’s Y Cloud provides Virtual Y as Software-as-a-Service (SaaS) that includes hosting, maintenance and general support of the Virtual Y stand-alone microsite for a low monthly fee. Y-USA provides this as an opt-in option to any YMCA that may be interested. For any further questions, you can contact Y-USA at ycloud@ymca.net
  • What’s the difference between Y-USA’s work on Virtual Y and what other partners are doing?
    • There is no significant customer-facing difference between Y-USA’s Virtual Y SaaS solution, and other partners’ hosting solutions. The functionality should work as expected in both deployment models.

Marketing

  • Will there be an opportunity for shared content?
    • Yes. Cross-association content sharing is available now, both for use and for you to contribute your content.
  • Do associations have access to analytics for Virtual Y?
    • Yes, there is a tracking log within the admin menu that displays when a user logs in, as well as which pieces of content they view. This allows you to gauge what is most popular with your members. The information can be sorted and exported for ease of use.
  • Will there be a marketing toolkit?
    • Ys are responsible for marketing virtual offerings. We encourage associations to share helpful tips on what marketing tactics have worked best for them on the YMCA Website Services message board, and YMCA Website Services Slack
  • Do you have slides or a pitch deck I can use?

Virtual Y - Taking it to 11

8.8.6 - 1-on-1 Meetings

Enable direct, secure, scheduled person-to-person calls inside your Virtual Y site.

This module is distributed as part of the YCMA Virtual Experience Platform (Virtual Y). Review the README for more technical information.

Initial configuration

  1. Go to Admin > Extend (/admin/modules) and enable the Virtual Y 1on1 Meeting (openy_gc_personal_training) module.
  2. Go to Admin > Virtual Y > 1on1 Meeting > Settings (/admin/virtual-y/personal_training/settings) and put signals.cibox.tools:8091 as the Signaling PRL.
  3. Go to Admin > People (/admin/people) and add the Virtual YMCA Editor role to the user profile of any users who will create meetings.
    • NOTE: The admin user will also need to have this role set.
  4. Also at Admin > People (/admin/people), add the Virtual trainer role to at least one user.
  5. If you are starting a new site, log in as a Virtual Y member at least once.
  6. Go to Admin > Virtual Y > 1on1 Meeting (/admin/virtual-y/personal_training) and you should be able to see a dashboard with links to add a 1on1 meeting.
    • If you receive an Access denied error, be sure to check that you have the Virtual YMCA Editor role as noted in 3.

Creating a 1on1 meeting

  1. Go to Admin > Virtual Y > 1on1 Meeting (/admin/virtual-y/personal_training)
  2. Add a single 1on1 meeting or a series and fill in the form.

img.png

Joining a 1on1 meeting

  1. Once a 1on1 meeting is created, the customer and trainer will see a card for the call in the Virtual Y dashboard.
    img.png
  2. Both the Trainer and Customer should open this card, join the meeting, provide their names, and proceed with the call.

8.8.7 - Add/Edit Video

View a video of this process.

  • Add a New Video

    • Open Y Sites: Go to Content. Click the Blue “Add Content” button. Select “Virtual Y Video.”
    • Standalone Virtual Y sites: Go to Virtual Y -> Videos -> Add Video
      • You can also add a new Video from the main Content tab.
  • Add a Title for your video and a description. These will display below the video.

  • Use the Media tab to select your video. Click “Select videos.”

    • New Videos – The default option.
    • Name your video the same as your content.
    • Copy and paste your video URL into the Video URL field
      • This field currently supports Vimeo and YouTube.
      • You can use the main url in your browser’s site tab. You don’t need any code or special embed URLs.
    • All other fields (Media Tags, Directory, Revision Log Message, URL Alias) can usually be ignored.
    • Previously Uploaded Videos – If you’ve uploaded a video before and you’re reusing it, you can go to the “Select Videos” tab and choose the video you wish to embed.
  • Select a Level for your Video if applicable (such as for an on-demand class).

    • You can add/edit the default levels by going to Structure -> Taxonomy -> Virtual YMCA Level -> List terms.
  • Type in the Instructor name, if applicable.

  • Choose a category for your video by typing it in and selecting from the dropdown. One category per video.

  • If your video includes the use of equipment (such as exercise equipment for a workout video), type in the name of your equipment and select from the list. To add another piece of equipment, click “Add another item.”

  • You can configure the available equipment to choose from by going to Structure -> Taxonomy -> Virtual YMCA Equipment -> List terms.

  • Add your video’s length in seconds in the “Duration” field.”

  • To feature your video on the Virtual Y homepage, click the featured box.

  • Click the blue Save button to save the document.

8.8.8 - How to change the Login page photo

Please follow these steps if you wish to customize the photo users will see when they log into the Virtual Y site.

For updating the image before the user logs in…

  1. Log into site as Site Owner
  2. Manage > Content (click directly on Content, not one of its sub-menus)
  3. In the grid, find “Virtual YMCA Login” and click the Edit button for that row.
  4. Expand the “Header Area”
  5. Click the “Edit” button next in the Banner row. A screenshot highlighting the Title, Header Area, and Edit button
  6. Expand the “Image” section, and where the current image is and click the Remove button underneath the image (not Edit). A scereenshot of the Image field with the Remove button highlighted
  7. Re-expand the “Image” section, and click the “Select Images” button.
  8. If the desired image is not already in the system, click the Upload images link to add that picture.
  9. If the image is already in the system, select that image and click “Select media”. A screenshot of the Select Images popup
  10. Scroll down to the bottom of the page and click Save. A screenshot of the save button

If you wish to also modify the image the user sees after they log in, repeat the above steps, but substitute in step #3 “Virtual YMCA” in place of “Virtual YMCA Login”.

8.8.9 - Image Guidelines

Virtual Y uses Drupal’s Image Styles concept to “allow you to upload a single image but display it in several ways.” Because of this, there are not specific image dimensions required for images in your Virtual Y site.

We can, however, provide guidance on what images work best for the image styles being used on the site:

  • Use high-resolution images if possible, but compress them using a tool like TinyJPG to make sure they are no more than 1-2MB.
  • Use landscape-orientation images with a 4:3 or 16:9 ratio. These are common formats so often no cropping is necessary.
  • Square images are NOT recommended, as they are often cropped in unexpected ways.
  • Images are sometimes cropped from the top and bottom, so ensure faces or other focal points are in the vertical center of the image.

8.8.10 - Live Chat

Enable group chat functionality on your live stream events.

This module is distributed as part of the YCMA Virtual Experience Platform (Virtual Y). Review the openy_gc_livechat README for more technical information.

The Virtual Y live chat window displaying a conversation between two users.

Initial configuration

  1. Go to Admin > Extend (/admin/modules) and enable the Virtual Y Livechat (openy_gc_livechat) module.
  2. Go to Admin > Virtual Y > Virtual YMCA Settings > Livechat Settings (/admin/openy/virtual-ymca/gc-livechat-settings). Review the settings, and modify if necessary.
  3. Go to Admin > People > Roles > Add role (/admin/people/roles/add) and add a role entitled Virtual Trainer if it does not exist.
    • Assign this role to any user who should have the ability to disable chat.
    • NOTE: The admin user will also need to have this role set.

Joining a Live Chat

  1. Visit any Live Stream event. At the time that the event starts, a Live Chat button will appear below the video.
    The Virtual Y Live Chat button
    • The button will not be visible before the event start time. To allow attendees to join before the meeting, set the start time to a few minutes before your actual start.
  2. All participants can enter the chat, set their name, and chat throughout the entire Live Stream event.
    A dialog with “Specify your name” in a modal popup. In the upper right an arrow points to an icon with people and a gear to open this setting.

Moderating a Live Chat

  • At any point during a chat session, users with the Virtual Trainer role have the ability to disable the chat using the Disable Chat button.
    The Virtual Y chat window with an arrow pointing to a button labeled “Disable Chat”.
  • Users will see a message saying “Instructor disabled chat for users”
    A screenshot with the text “Instructor disabled chat for users”
  • Chat can be restarted using the Restart Livechat button on the event page, next to the chat icon.
    A chat icon and the text “Restart livechat”
  • Disabling chat will remove the history of that chat from the server.

Chat History

  • Each Livestream saves its history for a certain amount of time.
    • The default is 30 days and can be configured in the Live Chat Settings (/admin/openy/virtual-ymca/gc-livechat-settings).
  • Chat history is saved and can be viewed at Admin > Virtual Y > Virtual Meeting Chat Logs (/admin/virtual-y/chats).

Troubleshooting

  • If the chat button is not appearing or the dialog displays “Chat is not available” or “Chat is not working at the moment” you will need to check with your development partner to ensure the Livechat service is properly configured on your server.
    A dialog with the message “Sorry, chat is not working at current moment”

8.8.11 - Logging

Introduced in Virtual Y 0.7, the “Open Y Virtual YMCA Log” module generates logs to record user behavior on Virtual Y sites.

To enable the module, visit the Extend page on your site, or ask your partner for assistance.

Once the Log module is enabled, you’ll see two new items in the Virtual Y menu:

Logs

A screenshot of the Virtual Y menu with Logs selected

The Virtual Y Logs page displays searchable and filterable individual user activity. Additionally individual log items can be removed.

Activities that are currently being tracked include:

  • User log in
  • User views content

The Open Y team is working to add additional logging functionality as they gather requirements. If you have additional logging requirements for your reporting, please contact the YMCA Website Services team with as much detail about your requirements as possible.

Logs Archives

As of Virtual Y 1.1, log archives can be generated on-demand via Virtual Y > Logs > Export Log Records

While logging begins immediately, (prior to VY 1.1) log archives should appear on the first day of the month following when logging is enabled. Log archives will be available as .gz files. The archive stores data indefinitely, but the log itself then deletes out the previous month’s info out of the database to start collecting data for the current month.

  • Virtual Y > Logs stores ONLY the current month’s records
  • Virtual Y > Logs > Logs Archives keeps monthly archives indefinitely, in the format virtual-y-logs-2021-01.csv.gz

The log archive process depends on Drupal’s cron task, so you’ll need to ensure that cron is running periodically on your site.

To extract files on Mac:

  • The system’s Archive Utility should work to extract files. If that fails…
  • (Easy) Download Keka or The Unarchiver, install, and use it to extract the file.
  • (Advanced) Open a Terminal window and navigate to the directory where the zip is, then run gunzip my_log_file.csv.gz

To extract files on Windows:

  • Use 7Zip to extract the .gz file.
  • Open with Excel or Google Sheets.

To extract files without a separate download:

Translating timestamps

Your Virtual Y log archives may include times in the created column that look like 1606839555. This is a format called “Unix epoch time”. You can convert it to a human-readable format in a few ways:

  • Visit https://www.epochconverter.com/ and paste in a value
  • In Excel/Google Sheets:
    • Use the formula =(A1/86400)+DATE(1970,1,1), substituting the correct cell for A1
    • Right-click on the column, select “Format Cells”, then choose a Date format.

8.8.12 - Managing Footer LInks

Your standalone Virtual Y site may have a block with social media links at the bottom of the page. These links can be customized for many social media services.

Getting to the block editor

Your site may have a “Quick Edit” icon (a tiny pencil) that pops up when you hover over the section with the links. If so, click the pencil, then Edit.

A screenshot of the Quick Edit menu

OR

If you don’t see the Quick Edit option, you can navigate to the block editor at Structure > Block Layout > Custom Block Library > Edit Footer Social Block

A screenshot of the menu sequeuence to edit Footer links

Editing the block

On in the Block editor you will see a Content field with links to your social media sites.

  • Add a new item to the bulleted list.
  • Select the text.
  • Click the link icon.

A screenshot of the Footer links content editor

  • Select text to link or double-click on an existing link
  • In URL add the link to the social media site
  • Edit the Title to something more descriptive
  • Open the Advanced section and update the CSS classes to select the correct icon. Be sure to copy the entire code below
    • Facebook: fa fa-facebook
    • Twitter: fa fa-twitter
    • YouTube: fa fa-youtube
    • Instragram: fa fa-instagram
    • Vimeo: fa fa-vimeo
    • Many other options.

A screenshot of the “Edit Link” dialog

When you are finished, Save.

8.8.13 - Shared Content

Requirements | Getting Started | Fetching Shared Content | Publishing Shared Content | FAQ

Released in 0.12, Virtual Y’s Shared Content module allows Y’s to share their content with other associations/branches and to pull shared content to use on their own site.

Requirements

Open Y Gated Content Module

  • While Shared Content is supported in Open Y Gated Content >=0.12, we recommend that you use version 1.0 or greater for the best support.

Hosted Videos

  • Any YouTube video that works in Virtual Y will be sharable.
  • Vimeo videos that use the “Only on sites I choose” privacy setting should not be shared. Please review the Vimeo Privacy Settings Overview for full details. If you plan to share content on Vimeo, we recommend:
    • Who can watch? - “People with the private link” OR “Hide this video on vimeo.com”
    • Where can this be embedded? - “Anywhere”

Getting Started

To start sharing content, you need to get your site ready.

Enable the modules

On the Drupal Extend page (/admin/modules), enable Virtual Y Shared Content. If your site is hosted on a managed hosting environment, this step is either already done for you or will need to be done by your hosting partner.

A visual depiction of the sequence to install the Virtual Y Shared Content module

Accept any other required modules if asked.

Connect your site to the Open Y server

In order to share content, you’ll first need to register your site with the Open Y shared content server:

  • Go to Virtual Y > Shared Content > Source Servers (/admin/virtual-y/shared-content/server)
  • Use the List additional actions arrow () under Operations then Edit

A visual depiction of the above menu sequence to configure source servers

On the following page, simply Save the form. Once you’ve saved the form and your site is able to contact the server, the Source Token will be populated.

A screenshot of the source server form

New connection requests are curlreviewed periodically and are approved by the Open Y team to prevent abuse. Please allow up to two business days for approval, or email ycloud@ymca.net with the URL of your site to request approval.

Fetching Shared Content

Once you are connected to the server you may, at any point, Fetch content from the server:

  • Go to Virtual Y > Shared Content > Source Servers (/admin/virtual-y/shared-content/server)
  • Fetch content from the Open Y server.

Your site will fetch Virtual Y blog posts and Virtual Y Videos from the server. In each list you may:

  • Preview content using the button on the right.
  • Check the box to the left of any content you’d like to use on your site.
  • Fetch to my site to download the new content.

A screenshot of the shared content fetching flow described above

As of Virtual Y 1.6.1 (released in December 2021) the fetched content list will show items in different states:

  • Bold items are new to the server since your last visit.
  • Greyed out items have already been added to your site.

Also in VY 1.6.1, content can be fetched directly from the preview.

A screenshot depicting the “Fetch to my site” button

Publishing Shared Content

You can share your own content to other Y’s in the Movement too!

  • Create your Video or Blog post as usual.
  • To share a single item:
    • expand the Shared Content options on the sidebar of the content edit page,
    • then check “Available to share”. A screenshot of the “Available to share” option
  • To share multiple items, visit the Content list (/admin/content) then:
    1. Check the Update this item checkbox.
    2. In the Action dropdown, select Share to Virtual Y.
    3. Use the Apply to selected items button.

FAQ

Why can’t another Y see my shared content?

New connection requests are reviewed periodically and are approved by the Open Y team to prevent abuse. Please allow up to two business days for approval, or email ycloud@ymca.net with the URL of your site to request approval.

Can I share content before my site is live?

If your site is in a “pre-live” mode and is somehow restricted from being publicly accessible (sometimes called “Site Lock” or “HTTP Auth”) you will not be able to share content. Please wait until your site is live to share content.

8.8.14 - Software Requirements

Open Y Sites

  • Open Y version 2.0 or newer.
  • The ability to install Virtual YMCA modules

Virtual Y Standalone Site

Hosting

Tech stack required

  • Ubuntu Server (local or Cloud environment) with 2CPU and 2GB of RAM minimum.
  • Server configured with LAMP stack (Linux/Apache/MySQL/PHP).
  • PHP: 8.3 or higher
  • Database: MySQL 8.0+ or MariaDB 10.6+
  • Web Server: Apache 2.4+ or Nginx 1.18+
  • Composer: 2.0 or higher

For detailed requirements, see Server Requirements.

Recommended Hosting Solutions

  • Digital Ocean – Cost-effective. For self-installs.
  • OneEach Technologies – Mid-range. For Ys with developer partners.
  • Acquia/Pantheon/Platform.sh – Enterprise. For large YMCAs.

SSL (Security Certificate)

Security certificate that authenticates that you own your website. Displays lock icon in user’s web browser. Required by most modern browsers. SSLs are widely available for a large number of reputable providers.

Domain Name (Website Address)

Only required for standalone Y sites . Can be set up with its own unique web address (i.e.,virtualymcatn.org), a unique directory within your existing site (ymcamidtn.org/virtual) or as a subdomain of your existing site (virtual.ymcamidtn.org).

Requirements for each of these setups is unique. Contact your developer partner or the Open Y community for help with your setup.

Sign-In Integration

CRMs with Full Integration

  • Daxko
  • Personify
  • Salesforce (Coming Soon)

Other CRMs

  • Upload a .csv file of emails to your server to use the manual sign-in experience.

8.8.15 - User Segmentation

User segmentation is a feature within Virtual Y that can help you separate your users into different categories. This can allow you to diversify your 2021 membership strategy or break out your Virtual Y content into different categories (fitness, wellness, family enrichment, etc.).

Set Up User Segmentation

  1. On your Drupal toolbar, hover over Virtual Y, and click Virtual YMCA Settings.
  2. Click over to the tab labeled AUTH settings. You will see a list of authentication method options. If you do not see the desired authentication method, you will have to install it from the Extend menu. A screenshot of the the Virtual Y settings tabs with “AUTH Settings” highlighted
  3. Click Edit on the desired authentication method you will be using. User segmentation will be set up in the field labeled Permissions Mapping at the top of this page.
  4. Within the membership field, carefully type in or paste the name of a membership type in your CRM that should be allowed to access Virtual Y. Then, in the dropdown, select what level of access should be granted to users with that membership type. A screenshot of the “Permissions Mapping” dialog
  5. Continue adding all accepted membership types by clicking the Add one more button until all accepted membership types are listed.
  6. If you want to remove a membership type: Delete the membership name from the field and select None as the Virtual Y role. Then, scroll to the bottom of the page and click the blue Save button. The empty line should disappear from your mapping list.

Add a New Role

You may desire to add additional roles beyond the default 3 that are included in Virtual Y. We recommend including no more than 5 roles, as the level of fragmentation and content management upkeep becomes difficult to sustain beyond that number.

If you are not familiar with Drupal roles, it is recommended you reach out to your agency partner to help you customize your Virtual Y roles.

  1. Click People in the Drupal toolbar
  2. Select the Roles tab at the top of the page A screenshot of the People tabs with Roles highlighted
  3. Click the Add Role blue button
  4. Enter in your new role name in the field. A screenshot of the Role Name field

Note: the Machine Name for your role must begin with virtual_y_ or else it will not be included in the permissions mapping table. You can achieve this by either naming your official role “Virtual Y [Desired Role Name]” or by clicking the small Edit button link next to the Machine Name and editing the text. A screenshot showing the Role name and Machine-readable name fields

8.9 - Paragraphs (Legacy)

⚠️ DEPRECATED: Paragraphs are legacy components. New sites should use Layout Builder. See migration guide below.

⚠️ Deprecated Feature

Paragraphs are legacy components. All new YMCA websites should use Layout Builder instead. Existing sites using Paragraphs will continue to work, but we strongly recommend migrating to Layout Builder for better performance, maintainability, and access to new features.

For Small Y sites: The Small Y template exclusively uses Layout Builder.

YMCA Website Services content editors use paragraphs to create unique layouts for their pages. Each paragraph is a section of content that comes with its own styling, functionality, and fields.

You can add a paragraph onto a page when you see the paragraphs dropdown field. These paragraphs will typically be inside one of the four main “Areas” inside a content type:

  • Header Area - Used for adding images and page titles
  • Content Area - Where your main content goes
  • Sidebar Area - Where you put related information, such as promotions and links to other content.
  • Bottom Area - The “anchoring” elements of your page, such as a call to action.

Choose a paragraph by selecting an area and picking an option from the dropdown.

Not all content types use all four regions. For example, a content type use its fields to put content inside the Sidebar Area, while another may have a sidebar area but use its Image field instead of a Header Area

Two Ways to Add Paragraphs

Content editors have two ways to add paragraphs onto a page - inline editor and admin portal.

Admin Portal

To add a paragraph into an Area, open that area and select a paragraph from the dropdown. The button will usually be labeled with “Add [First Paragraph in List]” (the first paragraph in the list depends on the content type/area), and there will be some helper text above.

The video below provides an example of the functionality of paragraphs; however, the specific layouts demoed are not YMCA Website Services layouts.

Inline Editor

If you’ve upgraded to YMCA Website Services 2.4 or later, you can add a paragraph from the front-end by clicking on the Plus icon in a given region and selecting a paragraph from the pop-up window.

Note: Not all paragraphs are available for inline editing yet. More paragraphs will be added to the inline content editor in later releases

Rearranging Paragraphs

Sometimes you have one layout in your head and it doesn’t look as good when you add it to your page. You can easily move around your sections by clicking on the cross icon to the left of your paragraphs. Drag around your paragraphs to rearrange.

Just drag your paragraphs to rearrange them

Editing Paragraphs

Need to fix a typo? Click the edit button next to each paragraph to open it back up and make edits.

Deleting Paragraphs

Maybe you didn’t need that section. Don’t worry: you can easily delete a paragraph by clicking on the remove option from the dropdown next to where it says “Edit.”

Choosing the Right Paragraph Type

YMCA Website Services comes with more than 50 paragraph types, and depending on your partner’s customizations, you may have even more. This documentation will focus the types that come out of the box with YMCA Website Services and how to use them.

8.9.1 - 1 Column

Embeds a single column of content into an container, with an option to embed reusable content.

Examples

Rose - Without Block

rose–landing-page_1-column-no-block

Rose - With Block

rose–landing-page__1-column-with-block

Carnation - With Custom Block

carnation–landing-page_1-column-with-block|690x186


Areas 1 Column Should Be Used

  • Content Area
  • Sidebar Area
  • Bottom Area

How to Use 1 Column

After selecting “1 Column” from the paragraphs dropdown, you will notice paragraph title field, a checkbox, and a required description.

  • Paragraph title adds an all-caps heading at the top of your paragraph. This is optional.
  • The checkbox adds dual horizontal rules. Check this only if you’re planning on using the paragraph title
  • Description (required) - Adds simple text through a text editor. Font color defaults to purple in Lily and Rose.

Custom Block Feature

While the paragraph be used only with the fields above, 1 column also supports custom blocks of content. For this paragraph type, it’s recommended that users stick with “Simple block” types.

When adding your custom block, use the font-awesome icon class instead of the custom icon image field. In Carnation, the image option tends to get too large.

Learn more about custom blocks ⇒

Read about the Font Awesome icon library ⇒

Advanced

The purple font color for paragraph descriptions can be overridden in Lily and Rose by targeting .paragraph-1c-wrapper .field-prgf-1c-description.

Example:

.paragraph-1c-wrapper .field-prgf-1c-description {
color: inherit;
}

Content editors who want to edit this CSS can ask their developers to install the CSS Editor module and edit their styles directly from the User Interface.

Content Types that Support This Paragraph

8.9.2 - 2 Columns

Add two equal-width, reusable blocks of content, side-by-side. The left side stacks on top of the right side for mobile.

Examples

Carnation

carnation–landing-page__2-columns

Lily

lily–landing-page__2-columns

Rose

rose–landing-page__2-columns


Areas it Can Be Used

  • Content Area
  • Bottom Area

How it Works

  • Select “Two Columns” from the paragraphs dropdown.
  • Insert a custom block into the Left and Right Column

Learn more about custom blocks ⇒

Unlike similar paragraphs (such as 1 column paragraph and Grid Content), there is no title field. To add a Title, insert a Simple Content paragraph above your 2 columns paragraph.


There is an optional checkbox to display a horizontal rule above the two columns.

landing-page__2-columns-line-above


If you want to add multiple rows of content with 2 columns, add a new 2 columns paragraph for each set of two you want (e.g., if you have five blocks of content, add three 2 columns paragraphs).

landing-page__2-columns-multi-row


Content Types That Support this Paragraph

8.9.3 - 3 Columns

Add three equal-width, reusable blocks of content, side-by-side. Columns stack left to right on mobile.

Examples

Carnation

carnation–landing-page__3-columns

Lily

lily–landing-page__3-columns

Rose

rose–landing-page__3-columns


Areas it Can Be Used

  • Content Area
  • Bottom Area

How it Works

landing-page__3-columns-dropdown

  • Select 3 Columns from the Paragraphs dropdown.
  • Title: Optional large, all caps title at the top.
  • Add custom blocks to the Left Column, Center Column, and Right Column fields.

Learn more about custom blocks ⇒

landing-page__3-columns-options

If you want to add multiple rows of content with 3 columns, add a new 3 columns paragraph for each set of two you want (e.g., if you have seven blocks of content, add three 3 columns paragraphs).


Content Types That Support this Paragraph

8.9.4 - 4 Columns

Add four equal-width, reusable blocks of content, side-by-side. Columns stack left to right on mobile.

Examples

This paragraph does not work out of the box in Carnation (see Advanced).

Content editors can use Grid Content or Featured Content paragraphs to achieve a similar layout.

Lily

lily–landing-page__4-columns

Rose

rose–landing-page__4-columns


Areas it Can Be Used

  • Content Area
  • Bottom Area

How it Works

  • Select 4 Columns from the Paragraphs dropdown
  • Title: Optional large, all-caps title at the top
  • Line Above: Adds a horizontal rule above each column.

landing-page__line-above

  • Description: A subheader/section description embedded below the title and above your titles. Uses the text editor for styling.
  • Add custom blocks to the First Column, Second Column, Third Column, Fourth Column.

4 column paragraph options

Learn more about custom blocks ⇒

Adding Headers to Individual Blocks Out of the box, the Title field in each custom block renders as plain text. To work around this, add your headers in the text editor.

See Advanced below for details about how to fix this with CSS.

If you want to add multiple rows of content with 4 columns, add a new 4 columns paragraph for each set of two you want (e.g., if you have seven blocks of content, add two 4 columns paragraphs).

Learn more about the link field ⇒

Advanced

Title Field Styling

In all three themes currently in YMCA Website Services, the Title field displays in a font-size and color nearly identical to the body copy. To override, target .field-sb-title.

Carnation -> Columns stack in desktop

In order for this to work in Carnation, the .wrapper containing the column elements needs to be changed to .row; otherwise, each of the four columns expands to the full width of the Area it’s embedded in.

carnation–landing-page__4-columns

Content Types That Support this Paragraph

8.9.5 - Activity Finder

Embed the Activity Finder program search experience on your website, which helps users pre-filter the activities they want to search for.

A screenshot of the Activity Finder block.
A screenshot showing the Activity Finder block and a detail popup.

See a live example of Activity Finder in our sandbox site.

How it Works

This paragraph type requires an integration into a CRM. See Program Activity Framework for a list of existing integrations. Any other CRM will require custom developer work.

How you use these paragraphs will depend on how your Association has structured its program data on the CRM and on how you decide to get people to program results.

To start, add the Activity Finder Paragraph or Block to a page.

See Activity Finder Block Configuration for more details.

8.9.6 - All Amenities

(deprecated)

This paragraph provides similar functionality to the" “Location filter by amenities”, and is no longer recommended for use by the YMCA Website Services Core Team.

What It Does: Shows a list of branches with icons indicating, at a glance, which amenities are available at each branch. Includes a checkbox field to filter branches by amenities.

Areas Where it Should Be Used:

  • Content Area
  • Bottom Area

How to Use It

After selecting “All Amenities” from the paragraphs list, you can change the title that displays above the search checkboxes by entering text in the Title field.

Styling will differ greatly based on the theme. Use of this paragraph in Rose is not recommended.

Supported Content Types

Related Paragraphs

  • Location filter by amenities
  • Locations

8.9.7 - Banner

Add large, full width images to the top of your page, along with a title, optional description and optional link.

Landing page in Carnation on desktop

How to Use a Banner

In the Header Area of your content, select “Add Banner” from the dropdown. Then, fill out the following fields:

Banner paragraph fields

  • Title (required): This field adds a headline to your banner. The placement of the title will depend on your theme and customization, but it will typically appear as large, all-caps text.

  • Color (required): The background color for your banner. You typically will not see this color in Lily or Carnation, but in Rose, it will display behind your text. Choose from the list of available options.

  • Description (optional): Displays beneath your Title. You have the option to style your text using the text editor, but it’s not as consistent as other places where you typically see the editor.

    Recommendation -> Just enter basic text and don’t do anything beyond basic styling, such as bold or underline.

  • Image:

    Banner pagagraph image selection

    Use the image library to embed an image. You can upload a new image from your computer or reuse an existing image from your library. The image field is optional, but recommended.

    For recommended image sizes for your YMCA Website Services site, talk to your agency partner.

    How to add/edit images >

  • Link/Button: Add a URL and a link to the button on the page. The button on your banner cannot be styled without custom CSS/code. Using link/button fields ⇒

    Note: If you know a little CSS, you can have your agency partner install the CSS Editormodule, and you can target .btn.banner-btn to change the default button.

Content Types that Support Banner

8.9.8 - Blog Posts Listing

Add a section with teaser cards that link to blog posts and dropdown search fields.

Examples

Carnation

Carnation blog post listing

Lily

Lily blog post listing

Rose

Rose blog post listing

Areas it Should Be Used

  • Content Area
  • Bottom Area

How to Use Blog Posts

From the paragraphs dropdown, add Blog Posts Listing. Enter a header title for the section in the text field and hit Save.

BLog posts listing admin fields

Content Types that Support Blog Posts

Related/Alternative Paragraphs

8.9.9 - Camp Menu

Add a horizontal menu beneath the Header Area on a camp page.

Examples

Carnation

Carnation camp menu

Lily

Lily camp menu

Rose

Rose camp menu


Areas It Can Be Used

  • Header Area

How It Should Be Used

Before adding the paragraph, add the links you want on your menu by adding them on your Camp Page at General Info > Menu Links.

Camp menu paragraph links

Learn More About Link Fields ⇒

To add additional links to your menu, click on the Add Another Item button.

Camp menu add another item button

Once you’re done adding your menu links, scroll down to the Header Area and add “Camp Menu.” Click save.

Note - While it is technically possible to position the camp menu above your banner image, it is not recommended. The camp menu busts in desktop on Carnation, and in all themes it can be hard to distinguish the camp menu from your main navigation.


Mobile Considerations for Camp Menu

When a user views your camp menu in mobile, the menu doesn’t collapse; it merely shrinks. Menu items either disappear or wrap onto a new line if they do not fit the space.

It’s recommended you limit your menu items to no more than 3 or 4 unless you opt to customize.

Carnation camp menu mobile display


Content Types That Support this Paragraph

8.9.10 - Categories Listing

Embed horizontal cards for program subcategories on a programs page.

Examples

Carnation

Desktop

Categories listing in Carnation on desktop

Mobile

Categories listing in Carnation on mobile

Lily

Categories listing in Lily

Rose

Categories listing in Rose


Areas It Should Be Used

  • Content Area

How To Use It

  • On a Programs page, go to the content area and click to open it.
  • Select Categories listing.

Categories list admin

This paragraph can only used on programs pages that have subcategories tied to them. If a program has no subcategories tied to it or if it’s used on another content type, it will not work.

Learn more about programs content type ⇒

Learn more about programs subcategories content type ⇒


Content Types that Support Categories Listing

8.9.11 - Code

Unformatted, unrestricted text that supports any HTML tag and can be embedded anywhere. Great for embedding iframes and third-party scripts.

Examples

YMCA of Central Kentucky / Daxko Schedules iframe

y-example–code__daxko-iframe

YMCA of Middle Tennessee / GroupEx Pro Script

y-example–code__gxp-iframe

Areas it Should Be Used

  • Content Area
  • Sidebar Area
  • Bottom Area

How To Use Code

  • Select “Add Code” from the paragraphs dropdown.

    admin–code__paragraph-dropdown

  • You will see two buttons - one to add a custom block, the other to search for a custom block.

  • To search for an existing custom block, type the name of the block in the autocomplete field and click on an option that appears to embed that block.

  • To add a new block, click the “Add New Custom Block” button.

Learn more about blocks ⇒

  • When you add your block, you will see a blank, unformatted text field. Type your HTML text into this field.

admin–code__block

To use code, you must add HTML tags.

Hard returns will be ignored, and text will be printed out in one long string.

Code will not highlight or color-code your HTML.


There is an option to change to a “Full HTML” text editor, which will allow you to make use of the default text editor; however, using this will strip “faulty” HTML out of your block and may prevent you from using certain tags.

Once you’re done, click the button that either says Add custom block or Update custom block, depending on the option you had selected at first.


Content Types that Support Code

8.9.12 - Date Block

Schedule different sections to show or hide on your pages.

Areas It Should Be Used

  • Header Area
  • Content Area
  • Sidebar Area
  • Bottom Area

How To Use Date Block

Pick Add Date Block from the list of paragraphs in the dropdown. You will see two options: add a new custom block or add an existing custom block.

Add New Custom Block

If you’re using Date Block for the first time or creating a new date block, choose the Add New Custom Block option.

Adding a new date block

Enter a label for your date block in the block description field. If and when you’d like to reuse this section on multiple pages, this is what you’ll use to search for it.

Below the block description field, you will enter a start date and an end date for your block. This schedules content in your date block to publish and unpublish, just like with a content type.

Date block start and end dates

Below this you can add in paragraphs to display Before, During and After your scheduled dates. Add paragraphs into these fields as you normally would.

Adding content to the date block

If you don’t want content to display before, during or after your time period, leave it blank.

Hit “Create custom block” to add your block.


Add Existing Custom Block

To reuse a date block you’ve previously created, click the “Add Existing Custom Block” button.” Enter the description of your block into the autocomplete field. Select your block from the options to drop it in.

Adding existing content to the date block


Editing a Date Block

To edit your block, click “edit” next to the paragraph. You will need to click another “edit” button when the name of your date block appears. Make your changes inside the block and, when you’re done, click “Update Custom Block.”

Making any changes to a date block will change it on every page where it has been added.

Learn more about custom blocks ⇒


Content Types That Support Date Block

8.9.13 - Embedded GroupEx Pro Schedule

Embed the out-of-box GroupEx Pro schedule script on a page with a single click.

Example

An example of the GXP embed paragraph


Areas it Should Be Used

  • Content Area

How it Works

Prerequisite: Requires integration with third-party tool GroupEx Pro.

  • To integrate you GroupEx Pro account, go to the admin toolbar. > >
    Navigating to the GroupEx Pro account settings
  • Go to YMCA Website Services > Integrations > GroupEx Pro > Group Ex Pro Account Settings. Add your account number to the field. That’s it! >
    Setting the GroupEx Pro account

For information on where to find your GroupEx Pro account number, visit groupexpro.com.


Adding the Paragraph to Your Page

Select Embedded GroupEx Pro Schedule from the paragraphs dropdown. Hit save.

The GXP embed paragraph admin


Content Types That Support Embedded GroupEx Pro Schedule


  • Repeat Schedules
  • Repeat Schedules (Branch)

8.9.14 - FAQ

Create an easy-to-read FAQ or policy section. FAQ adds an accordion tab that expands when users click on it.

Example

An example of the FAQ paragraph


Where it Can Be Used

  • Content Area
  • Sidebar Area

How it Works

  • Select FAQ from the paragraph dropdown

    The FAQ in the Paragraphs dropdown

  • Add a title or a Question into the Question field. This will show as the title of your section.

  • Use the text editor to provide an answer/expanded section of content once the user clicks on your section.

    FAQ paragraph fields

    Learn how to use the text editor ⇒


Add Another Section

To add another Question and Answer, click the Add another item button at the bottom of your paragraph.

The “add another” button


Content Types that Support this Paragraph

8.9.15 - Featured Blog Posts

Create a standalone page with a curated listing of Blog Posts.

Examples

Carnation

Desktop

Featured blog posts in Carnation on desktop

Mobile

Featured blog posts in Carnation on mobile

Lily

Desktop

Featured blog posts in Lily on desktop

Mobile

Featured blog posts in Lily on mobile

Rose

Desktop

Featured blog posts in Rose on desktop

Mobile

Featured blog posts in Rose on mobile


Areas It Can Be Used

  • Content Area
  • Bottom Area

How to Use It

Add a headline for this section of content in the Headline field.

Next, type in the name of the blog you would like to feature in the autocomplete field. Click on the post when it shows up below.

Featured blog posts admin

To add another blog post, click the Add another item button. Click the blue save button at the bottom when you’re finished.


8.9.16 - Featured Content

Add a section of simple columns onto a page with an optional call-to-action button on the bottom, an optional title, and optional description.

Examples

Carnation

Featured content in Carnation

Lily

Featured content in Lily

Rose

Featured content in Rose


Areas It Can Be Used

  • Content Area
  • Bottom Area

Note: The styling for Featured Content differs greatly by theme. This documentation notes the differences in styling between each theme.

Select Add featured content from the paragraphs dropdown. Add an optional headline in the headline field above.

  • Lily/Rose: The headline left-aligns by default.
  • Carnation: The headline center-aligns in Carnation.

Next, add an optional Description using the text editor. Avoid changing your text alignment for your description.

Add an optional link in the link field.

Learn how to use a Link field ⇒


Select the number of columns you would like to have in each row using the style dropdown.

  • Carnation: Due to the card styling in Carnation, this field does not limit the number of cards that will display in a single row. A recommended workaround is to add multiple rows of featured content or use the Grid Content paragraph type.

Advanced users: You can clear the confusion for content editors in Carnation by making the style field an optional field and hiding it in the form display in the UI.

Additionally, you can limit the number of columns to four in the Featured Content’s paragraph settings.

Finally, add content for each column of content using the text editor. To add additional columns click the “Add Another Item” button.

Featured content admin fields

  • Lily/Rose: Adding more columns than what you selected in the “Style” dropdown will create additional rows. Aligning each column’s content is not recommended unless you are not using any other field.

8.9.17 - Featured News Posts

Create a standalone page listing curated News Posts.

Examples

Carnation

Desktop

Featured News Posts in Carnation on desktop

Mobile

Featured News Posts in Carnation on mobile

Rose

Featured News Posts in Rose


Areas It Can Be Used

  • Content Area
  • Bottom Area

Add a Headline for this section of content in the Title field.

Next, type in the name of the news post you would like to feature in the autocomplete field. Click on the post when it shows up below.

Featured News Posts admin fields

To add another news post, click the Add another item button. Click the blue save button at the bottom when you’re finished.

8.9.18 - Gallery

Embed a carousel or slider of images onto a page.

The gallery can play on a loop, and users can click back and forth using the arrows.

You can have a gallery with a simple title, and you can also add a description below the headline and/or a call to action button.

Examples

Carnation

Desktop

Gallery in Carnation on desktop

Mobile

Gallery in Carnation on mobile

Lily

Desktop

Gallery in Lily on desktop

Mobile

Gallery in Lily on mobile

Rose

Gallery in Rose on desktop


Areas It Can Be Used

  • Header Area
  • Content Area
  • Bottom Area

Once you’ve selected a gallery from the paragraphs dropdown, enter a Headline for the gallery.

Next, if you would like to add a subhead or description below your title, add it below the headline in the Description field.

Only use basic text formatting on your description, such headlines. Avoid using bullets or numbered lists in this field.

Learn more about the text editor ⇒

Optionally, you can add a Link in the link field.

The Gallery link field

How link fields work in YMCA Website Services ⇒

Below the link field, you will add your images. Click on the Add images button to select the pictures for your gallery. You can upload an image to the media library, or select multiple images from your library.

Once you’ve uploaded/selected your images, click that blue Add images button at the bottom.

To order your images, hover your mouse over the thumbnail in the “Images” section, and then drag them to reorder. You will see a cross-arrow icon when you’re dragging them around, similar to what you see when you reorder paragraphs.

Reorder images via drag and drop

To delete a photo from the gallery, click the delete button below the image.

Hit Save at the bottom of the image to save it.


Content Types that Support Galley

8.9.19 - Grid Content

Embed one or more rows of up to four columns of content - each with a title, icon, description, and link.

Examples

Carnation

Grid content in Carnation

Lily

Grid content in Lily

Rose

Grid content in Rose


Areas It Should Be Used

  • Content Area
  • Bottom Area

How to Use Grid Content

Note on Grid Content: This paragraph’s style will vary greatly depending on your theme. The docs outline how to use the fields.

Select grid content from the list of paragraphs

First, choose Grid Content from the Paragraphs dropdown. You will then see a dropdown with four options under Style:

  • 2 items per row
  • 3 items per row
  • 4 items per row

Select a style to choose how wide you want each section to be; the more items per row, the narrower they will be.

Examples

2 items per row w/ 2 Grid Columns

Grid content admin with 2 items selected

Grid content example with two items

3 items per row w/ 2 grid columns

Grid content admin with 3 items selected
Grid content example with 3 items selected

Next, you will see a button that says Add Grid Columns. This is where you will start adding your individual sections/cards.

For each item you add, you will have the following fields:

Note: If you add more items than your selected style, you will create a new row. For example:

  • 2 items per row style, 3 items added -> two rows of content
  • 3 items per row style, 5 items added -> two rows of content
  • 4 items per row style, 9 items added -> three rows of content

Content Types that Support Grid Content

8.9.20 - Latest Blog Posts

Embed a listing of blog posts with optional filtering by Camp/Branch.

These three paragraphs embed a listing of blog posts, sorted by the most recent, in a card design.

  • Latest Blog Posts shows all the most recent blog posts across your entire site.
  • Latest Blog Posts (Branch) filters your most recent blog posts by the branch the paragraph is embedded on (for example, if on a Downtown YMCA page, only Downtown YMCA blog posts will show up). Placed on a non-branch page, only the headline will show up.
  • Latest Blog Posts (Camp) filters blog posts by the branch the paragraph is embedded on (for example, if on a Camp Widjiwagan page, only Camp Widjiwagan YMCA blog posts will show up). Placed on a non-camp page, only the headline will show up.

Areas it Should Be Used

  • Content Area
  • Bottom Area

How to Use Latest Blog Posts

From the paragraphs dropdown, add Latest Blog Posts, Latest Blog Posts (Branch) or Latest Blog Posts (Camp). Enter a header title for the section in the text field and hit save.

Unlike the related Blog Posts Listing, this paragraph does not include filters for searching blog posts.

Content Types that Support Latest Blog Posts

Content Types that Support Latest Blog Posts (Branch)

Content Types that Support Latest Blog Posts (Camp)

Related/Alternative Paragraphs

8.9.21 - Latest News Posts

Embed a listing of News Posts with optional filtering by Camp/Branch.

These three paragraphs embed a listing of News posts, sorted by the most recent, in a row/listing design

  • Latest News Posts shows all the most recent news posts across your entire site.
  • Latest News Posts (Branch) filters news posts by the branch the paragraph is embedded on (for example, if on a Downtown YMCA page, only Downtown YMCA news posts will show up). Placed on a non-branch page, only the headline will show up.
  • Latest News Posts (Camp) filters News posts by the branch the paragraph is embedded on (for example, if on a Camp Widjiwagan page, only Camp Widjiwagan YMCA News posts will show up). Placed on a non-camp page, only the headline will show up.

Examples

Carnation

Latest blog posts in Carnation

Rose

Latest blog posts in Rose


Areas it Should Be Used

  • Content Area
  • Bottom Area

How to Use Latest News Posts

From the paragraphs dropdown, add the “Latest News Posts.” Enter a header title for the section in the text field and hit save.

Latest news posts admin fields


Content Types that Support Latest News Posts

Content Types that Support Latest News Posts (Branch)

Content Types that Support Latest News Posts (Camp)

Related/Alternative Paragraphs

8.9.22 - Limited Time Offer

Add an anchoring element to the bottom of a page, similar to a small banner. Best for promotional offers.

Example

The limited time offer paragraph

Areas Where It Can Be Used

  • Bottom Area

How to Use Limited Time Offer

Go to the Bottom Area and select Limited Time Offer. Fill in the Title field for your main headline, and if you would like to add a subheader below the title field use the field below.

To add a button, use the link field.

Content Types that Support Limited Time Offer

Additional Screen Shots

8.9.23 - Membership Calculator Paragraph

Membership Calculator adds an interactive “membership wizard” to an YMCA Website Services site.

See Membership Calculator and Membership Content Type for more information.

Areas it Should Be Used

  • Content Area
  • Bottom Area

How to Use Membership Calculator

From the paragraphs drop-down, add the Membership Calculator. No additional configuration is necessary on the page.

8.9.24 - News Posts Listing

Add a filterable section of news posts to a page.

Areas it Should Be Used

  • Content Area
  • Bottom Area

How to Use News Posts

The news posts listing admin

From the paragraphs dropdown, add the News Posts Listing. Enter a header title for the section in the text field and hit Save.

Note: Advanced users can make changes to the exposed fields using the Views module and the paragraphs settings.

Content Types that Support News Posts

Related/Alternative Paragraphs

8.9.25 - Promo Card

Add a small individual card to the sidebar of a page with evergreen promotional content, such as links to join pages.

Examples

Carnation

Promo card in Carnation

Lily

Promo card in Lily

Rose

Promo card in Rose


Areas It Should be Used

  • Sidebar Area

How to Use the Promo Card

In your sidebar area, select Add Promo Card from the paragraphs list.

You can add an optional large Title in the top text field, while the required Headline field puts a smaller headline below the title.

The description field is a text editor that allows you to enter any content you want with the standard text editor options.

Learn how to use the Text Editor ⇒

You can add link and call to action text in the Link field.

Learn how to use link fields ⇒


Content Types that Support Promo Card

8.9.26 - Repeat Schedules

Display programs in a schedule view with an optional PDF export.

Sometimes called “Group Exercise” or “Group Schedules”, the Repeat Schedules block provides a similar view to Activity Finder, but focused more on recurring, often drop-in classes.

See Group Schedules for more details.

Examples

On the sandbox site.

The Repeat Schedules Paragraph in the Carnation theme.

How to use

To use the Repeat Schedules paragraph:

What fields are where

See Group Schedules Front-end.

8.9.27 - Secondary Description and Sidebar

Add a bottom area element with two columns of reusable content for anchoring a page.

Note: This element does not work properly in Carnation and is considered deprecated.

Example

Carnation

The secondary description and sidebar in Carnation

Lily

The secondary description and sidebar in Lily

Rose

The secondary description and sidebar in Rose

Areas it Should Be Used

  • Bottom Area

How to Use Secondary Description and Sidebar

Insert the paragraph from the dropdown into the Bottom Area.

Secondary description with sidebar admin fields

You will have two fields to insert blocks - a Left Column and a Right Column. Select from one of four different custom block types, and either add a new custom block or reuse an existing block type.

Learn how to use custom blocks >

Note: When reusing blocks, the icon field does not work in this paragraph. Font awesome icons will render as text.

8.9.28 - Simple Content

Add a section of basic text onto a page.

Areas It Should Be Used

  • Content Area
  • Sidebar Area

How to Use Simple Content

From the paragraphs dropdown, select Add Simple Content. standard text editor will appear, and you can style your text however you want.

Learn How to Use the Text Editor ⇒

Note: In Carnation, stacking multiple sections of simple content on top of one another will not create enough space for users to distinguish between sections.

To create this space, add a pair of hard returns or a horizontal rule at the bottom of your text.

All Content Types Support Simple Content ⇒

8.9.29 - Small Banner

A wide, short image with fields for a title, background color, description and image.

Examples

Carnation (Current Theme)

Desktop

Small banner in Carnation on desktop

Mobile

Small banner in Carnation on mobile


Areas it Can be Used

  • Header Area
  • Content Area (1 column only)
  • Bottom Area

How to Use a Small Banner

Select Add Small Banner from the paragraphs dropdown. Then, fill out the following fields:

  • Title (required): This field adds a headline to your banner. The placement of the title will depend on your theme and customization, but it will typically appear as large, all-caps text.

  • Color (required): The background color for your banner. In Carnation, you will not see the background color unless you choose not to add an image.

  • Description (optional): Displays beneath your Title. You have the option to style your text using the text editor, but it’s not as consistent as other places where you typically see the editor.

  • Image: Use the image library to embed an image. You can upload a new image from your computer or reuse an existing image from your library. The image field is optional, but recommended. For recommended image sizes for your YMCA Website Services site, talk to your agency partner.

    *Note: Unlike the Banner, Small Banners don’t come with a specific Link field for buttons without customization.

    To add a button to a small banner, you can use the Text Editor button tool to create a button in your description field.


Content Types that Support Small Banner

8.9.30 - Social Share Icons

Make it easy for your user to share content on social media.

AddThis services have been deprecated as of 5/31/23

This block ceased functioning on May 31, 2023, with the discontinuation of AddThis services.

See Using AddToAny for its replacement.

8.9.31 - Story Card

Add a simple card to the sidebar with a title, headline and call to action.

This Paragraph works best in Lily and Rose.

Areas it Can Be Used

  • Sidebar Area

How to Use It

In the sidebar area on a piece of content, select “Story Card.” Add a Title and Headline. The Title will be larger than the Headline and display above the Headline.

Add your link in the link field below. Unlike most paragraph types, the link field does not create a button or standalone link; the entire card becomes the link. The link text is required; however, it will not stand out a like typical call to action.

To work around this, add a > or another special character to indicate to users they are clicking on a link.

Recommendations for use with Carnation

While this component is available to use in Carnation, it is not themed with a border as in Lily or Rose. The best practice is to use this paragraph sparingly and only in the following content types:

  • Facility
  • Event

This Paragraph works best in Lily and Rose. In Carnation, the Story Card works best inside the News Post, Event, and Blog Post paragraphs.

Advanced

Note: In the headline area on Lily and Rose, a large quotation mark will display to the left of your headline. This can be easily disabled using the following CSS:

.story-card .quote svg { display: none; }

Content Types That Support Story Card

8.9.32 - Teaser

Add a wide feature with an image, text, and a call to action.

Example

Carnation

The teaser in Carnation

Lily

The teaser in Lily

Rose

The teaser in Rose

Areas it should be used

  • Content area

How to use Teaser

Insert the paragraph from the dropdown into the Content Area.

Teaser admin fields

Fill out the content fields:

  • Title
  • Image - select an image from the image library or upload a new one
  • Description - add a description using the Text Editor.
  • Link - add an internal or external link

Save the page to view your Teaser.

8.9.33 - Webform

Add an existing Webform to a page.

Areas it Should be used

  • Content Area
  • Sidebar Area
  • Bottom Region

How to Use Webform

Prerequisite: You must have your web form created before embedding onto a page. While you can continue to revise and edit your form, using this paragraph will NOT create a webform for you.

Drupal Webform Tutorials (by Jacob Rockowitz) ⇒

Once you’ve selected Webform from the paragraphs dropdown, select the name of the webform you want to embed onto your page.

Webform paragraph admin fields

Next, you will have the option to open, close or schedule your open/close dates for your webform.

Ignore the “Default submission pairs” field, unless you’re a YAML wizard and want to have some default values for certain fields in case your users forget to fill them out.


Content types that Support Webform

8.10 - Content Editing Basics

Adding New Content

To add a new piece of content, select the content tab in the administration toolbar at the top left.

The content link in the admin menu

Click the blue button that says “Add New Content.”

On the next page, select the type of content you want to add. Learn About Content Types ⇒

The fields on the next page marked with a red asterisk are required. To save your new piece of content, you must fill out the required fields.

If this is a page that you do not want to be published, deselect the checkbox at the bottom left titled “Published.” This will mark it as a draft.

To save your new content, click the blue “Save” button at the bottom of the page.

Search for a Piece of Content

You can find a piece of content you want to edit two ways: using the front-end (what your user sees) or using the “Content” administration page.

If you’re navigating your site and you’re logged in, you will see the following options on the pages you have access to edit:

  • View
  • Edit
  • Revisions
  • Delete

In-page Edit tab

You can edit a piece of content by clicking the “Edit” tab on that page.

To use the administration page, go to the top left button in your administration toolbar and select “Content.” This will take you to a page where you can search for content (particularly useful if you’re not sure where it is). Content type filtering

The text field on the left is a search field. Type in your content’s title to search.

If you’d like to narrow down the results, you can filter the results by

  • Content type
  • Published Status
  • Language

Click the edit button on the right side of the row to make changes.

If you’re in the results of your search, still not sure which piece of content is the correct one, you can click on the title of the content in the left side of each results to view it.

Deleting Content

You can delete a content three ways:

  • By clicking the Delete tab when you visit any page
  • By selecting the Delete tab when you’re editing any page.
  • By choosing Delete from the Dropdown on the results page.

You can also delete “in bulk” by ticking the checkmarks next to multiple rows of content on the content results page, selecting “Delete content” from the dropdown above the results table, and then clicking the “Apply to Selected” items.

This should only be done if you’re sure of which content you’re selecting to delete.

How to Use Open Y Fields

Each content type will have different fields based on the information you need to enter, but they will generally fall into one of the following categories.

Unformatted/“String” Text

These are one-line text boxes, such as page titles. Simply enter text into the box.

Title field

Unformatted Textbox

A larger box that allows for line breaks/hard returns/paragraphs. As with the string text field, enter text in this box. These fields will typically allow you to enter longer amounts of text.

Select one of the options provided. Occasionally, you’ll have to click a button to apply or submit your selection.

Multiselect Fields

Locations field

Like a dropdown, but you can select multiple options by holding Control (Windows) or Command (Mac) and clicking on two or more selections.

WYSIWYG/Formatted Text Editor

A textbox that styles your text visually and allows you add links and embed different types of media.

More on the Text Editor ⇒

Autocomplete Field

Appears like a text field, but with a little circle off the right. Used for searching content, blocks or taxonomy terms on your website.

Type in what you wish to enter, and then select from one of the optional results that appear below. Results will narrow as you type.

Category field

Links/Button Fields

These will typically appear as a single box with two fields inside. They add a link onto a page, often as a button. The URL field is your link, which the Link Text is your call to action.’

Link field

The URL field supports both relative URLs for links on your site (e.g., /join for http://myymca.org/join) and full URLs for links on other sites (e.g., http://someotherymca.org/join).

You can also search for the title of a piece of content on your website and select a piece of content like in any other autocomplete field.

Some link fields contain an additional Attributes section. You can add attributes to your link by expanding the Attributes section. This will allow you to add a ID, Target, or Class to your link.

A screenshot depicting the Attributes section with ID, Target, and Class fields.

  • ID - This is used to identify the link in the page’s HTML and can be targeted by anchor links. More on anchor/jump links.
  • Target - This is used to determine how the link will open. You can choose from “New Window_blank” or “Same Window _self”.
  • Class - This is used to apply a CSS class to the link. This can be used to style the link in a specific way.

Image Fields/Image Library

You can add, edit and upload images any time you see a tab with Image in the title. To use the media browser, click the button in the image field.

More on Using the Image Library ⇒

Cloning Content

You can clone content using the “Clone” button on many pages…

or on the Content list in the site administration.

Once you choose to clone a piece of content you will be presented with a complex screen asking which entities you would like to clone. In general, you can leave all of the checkboxes as they are. Changing the options could result in unintended consequences.

Scroll to the bottom of the checkbox options, choose Take ownership if you would like your user to own the new content, then Save.

8.11 - Demo Content

The distribution comes with demo content to help kick-start your site building.

Two sets of demo content are available for the distribution:

These modules also contain significant boilerplate migration code that a developer would need to migrate content from an older Drupal site or different CMS into the distribution.

Demo content is also installed on the Sandboxes.

8.12 - Membership

Guide prospective members through the join process.

The distribution has two methods for informing visitors of membership options and driving them to the member management system for sign-up

8.12.1 - Membership Calculator

This simple application provides an interactive “membership wizard” with location and pricing options to attract members. It is the default membership experience.

The Membership Calculator is bundled with the distribution in the openy_calc module.

As of August 2024, the Membership Calculator has an updated design with improved functionality and user experience. The improved design will also respond to the selected colorway and page styles.

Configuring the Calculator

The Membership Calculator uses Membership content items. Those will need to be created in order for the Membership Calculator to function.

First, create a Membership node for each membership type your Branch or Association offers. Then, inside each Membership node, add a Membership Info Paragraph with the details of that membership at each of your Locations.

The Membership Calculator is a three-step process:

  1. Membership Type
  2. Primary Location
  3. Summary

Membership Type

This step lists the Title, Image, and Description of each published Member node.

A screenshot of the membership calculator Type step.

Primary Location

This step provides a map with radio buttons for the member to select their primary location. Every location listed in the YMCA Website Services Location Filter Settings (see Troubleshooting section below) is listed.

A screenshot of the membership calculator Location step.

Summary

This page provides a link for the member to continue their registration, or a message indicating the selected membership is not provided at the selected location.

A screenshot of the membership calculator summary step with a price listed.
A screenshot of the membership calculator summary step showing no membership available.

Location Filtering

As of version 10.4.0.0, the Membership Calculator automatically excludes unpublished Branch locations from the location selector and pricing calculations.

Impact:

  • Only published Branch content appears in the Primary Location step
  • Pricing calculations only include rates from published locations
  • Unpublished branches (e.g., temporarily closed for renovations) won’t appear in the calculator

To control location visibility:

  1. Navigate to Content > Locations (/admin/content?type=branch)
  2. Publish or Unpublish Branch locations as needed
  3. Changes take effect immediately (may require cache clear: drush cr)

For more details, see the 10.4.0.0 release notes.

Placing the Calculator on a page

Once configured, the Membership Calculator can be placed on a page using:

Troubleshooting

On some sites, the second step of the Membership Calculator may not show any locations. In order to resolve this, visit Administration > YMCA Website Services > Settings > YMCA Website Services Location Filter Settings and ensure that any Branches you want to use in the location search are checked.

A screenshot displaying the Location Filter settings.

8.12.2 - Membership Framework

This application is built on Drupal Commerce and provides advanced options for building a membership journey.

The Membership Framework is distributed in the openy_memberships repository and must be added and installed on top of the base distribution. We recommend working with your development partner if you wish to go this route.

Check out the Membership Framework sandboxes for a demonstration.

Membership Landing Pages

To get started with the Membership Framework you will first need to create a number of landing pages.

The examples below use Paragraphs, but similar pages can be created using Layout Builder blocks and the Membership Framework custom block.

Membership Builder

  • Go to /node/add/landing_page
  • Title: Membership Builder
  • Layout: Two Columns with left sidebar
  • Header Area: add “Small banner” paragraph and fill the fields
  • Content area: add “Memberships” paragraph (it has pre-filled fields)
  • Sidebar Area: add “Block Container” paragraph with “Memberships Desktop Sidebar” skin
    • Block_ref: choose “Paragraph container” with “Memberships Menu Container” title
  • Sidebar Area: add “Simple content” with “Memberships Button” skin and link to builder in content:
<p><a class="btn btn-primary" href="/membership-builder"><span class="text">JOIN THE Y</span></a></p>
  • Sidebar Area: add “Sidebar Menu” with “Memberships Sidebar Menu” skin to create your Memberships Menu with these items:
    • Membership Types
    • Member Benefits
    • Discounts
    • Corporate wellness
    • Free Trial

A screenshot of memberships menu settings page.

  • Sidebar Area: add “Block container” with “Memberships Feature card” skin. Use “Feature Card” block type with any content allowed in this block
  • Save the landing page

Membership Types

  • Go to /node/add/landing_page
  • Title: Membership Types
  • Layout: Two Columns with left sidebar
  • Header Area: add “Small banner” paragraph and fill the fields
  • Content Area:
    • add “Simple content” paragraph with “Membership Simple Content” skin and text
    • add “Membership Types Listing” with “Membership Types” skin
  • Sidebar Area: follow the same steps for “Membership Builder” page
  • Save the landing page

Member Benefits

  • Go to /node/add/landing_page
  • Title: Membership Types
  • Layout: Two Columns with left sidebar
  • Header Area: add “Small banner” paragraph and fill the fields
  • Content Area: fill the area with content. An example is shown in the next screenshot
  • Sidebar Area: follow the same steps for “Membership Builder” page
  • Save the landing page

A screenshot of the member benefits landing page creation.

Discounts

  • Go to /node/add/landing_page
  • Title: Corporate wellness
  • Layout: Two Columns with left sidebar
  • Header Area: add “Small banner” paragraph and fill the fields
  • Content Area: fill the area with content. An example is shown in the next screenshot
  • Sidebar Area: follow the same steps for “Membership Builder” page
  • Save the landing page

A screenshot of the discounts page creation.

Corporate Wellness

  • Go to /node/add/landing_page
  • Title: Corporate wellness
  • Layout: Two Columns with left sidebar
  • Header Area: add “Small banner” paragraph and fill the fields
  • Content Area: fill the area with content. An example is shown in the next screenshot
  • Sidebar Area: follow the same steps for “Membership Builder” page
  • Save the landing page

A screenshot of the corporate wellness page creation.

Free Trial

  • Go to /node/add/landing_page
  • Title: Free Trial
  • Layout: Two Columns with left sidebar
  • Header Area: add “Small banner” paragraph and fill the fields
  • Content Area: add “Simple content” with a description
  • Content Area: add ”Webform” with “Memberships Free Trial Webform” skin and “Memberships Free Trial” webform
  • Sidebar Area: follow the same steps for “Membership Builder” page

2. Membership Products:

  • Go to /admin/commerce/products
  • Click on + Add product, then choose Membership
  • You’ll see these fields:
    • Title
    • Description
    • Add-ons (used in specific cases, skip for default setup)
    • Total Available
  • Subfields:
    • Related Add-on (skip for default functionality)
    • Age groups (select age groups, usually Adults, Youth, Seniors)
    • Total Available (number of people allowed for age group selected above for the membership product. You can add multiple groups by clicking “Add another item” for Family memberships)
    • Total Free (designed for cases where extra people are allowed in the membership, but with an additional fee. Fill with the same value as Total Available for default functionality)
  • Branches in the product (use if a membership is specific to a branch. If “None” is selected, the membership will appear for all branches)
  • A typical setup is shown in the following screenshot
    A screenshot of the product creation display.
  • Click on the “Save and add variations” button (or go to the “Variations” tab if editing a previously created product)
  • A typical setup for variations of a membership is shown in the following screenshot
    A screenshot of a product variations configuration.

8.13 - Schedules

The distribution provides two separate applications for managing schedules at your YMCA.

Under the hood, both of these applications use the Activity/Class/Session Content Types and the YMCA Sync module to import content from an external API. These pieces together comprise the “Program Event Framework” which is highlighted in a case study on drupal.org.

8.13.1 - Activity Finder

Provides an interactive tool to help members find and book activities.

Activity Finder combines data from the Activity, Class, and Session content types into an interactive tool that can be used with Paragraphs or Layout Builder pages.

Out-of-the-box, YMCA Website Services’s Activity Finder integrates with Daxko, ActiveNet, and Personify. Configuring these integrations is mostly user-friendly, but often is supported by a partner development team. Any other CRM will require custom developer work.

See the Program Event Framework developer docs for a full list of integrations.

Block configuration

When you add the Activity Finder block to a page, you have a number of options. These are in addition to the configuration at Admin > YMCA Website Services > Settings > Activity Finder Settings (/admin/openy/settings/activity-finder). See the Activity Finder module README for more information.

  • Location & Category Filters - Restrict this block to show sessions from only certain Locations or Categories. ‘Limit’ will show only the specified options. ‘Exclude’ will remove the specified options. Generally you should choose either Exclude or Limit, not both.
    • Limit by location - Only show sessions at specific locations in the results.
    • Exclude by location - Remove sessions at specific locations from the results.
    • Limit by category - Only show sessions related to specific Program Subcategories in the results.
    • Exclude by category - Remove sessions related to specific Program Subcategories from the results.
  • Legacy mode - Shows some data as it was in the previous version of Activity Finder (v3):
    • Disables bookmark functionality on the results screen.
    • Doesn’t display the age indicator in the result card of activities.
    • Changes the days + times wizard step. Displays only days of week, but not times of each day (doesn’t support DaysTimes filter)
  • Weeks filter - Changes the Day/Time filter to use custom defined Week filters.
    • This requires setting the Weeks configuration in the Activity Finder settings (/admin/openy/settings/activity-finder).
      Activity Finder Weeks configuration.
    • Note: Only sessions that have “Camp” in the title or room fields will return for this filter.
  • Additional filters - These filters are off by default, but can be enabled in the Block Configuration.
    Activity Finder additional filters
    • Start Month - Filters based on the month in the Session Time field.
    • In Membership - Shows Sessions that have In membership checked.
    • Duration - The length of the Session. This is configurable in the Activity Finder settings (/admin/openy/settings/activity-finder) and defaults to:
      • Single day
      • Multi-day (up to 5 days)
      • Weekly (up to 3 weeks)
      • Monthly (up to 5 weeks)
      • Season (up to 12 weeks)
      • School year (~9 months)
      • Full year
  • Hide Home Branch info block - Disables functionality related to the user’s selected home branch.
  • Background image - An image that’s displayed in the background of the banner above Activity Finder.

The Activity Finder block configuration.

Front-end

Once the Activity Finder Paragraph or Activity Finder Layout Builder Block has been added to a page, users can see its content.

A set of screenshots illustrating the Activity Finder application with items labeled as per the following descriptions.

Filters

  • Schedules - Filters by a number of facets, which are configurable in the Block Configuration or Activity Finder settings.
    • Age(s) - Filters based on the Min Age and Max Age. Age ranges are configurable in the Activity Finder settings (/admin/openy/settings/activity-finder).
    • Day(s) & Time(s) - Filters by the time of date on specific days of the week. This filter has no configuration.
    • Weeks - Replaces date/time filter when Weeks filter is selected in the Block Configuration. See configuration requirements above.
  • Activities - Program Subcategory filters grouped by Program.
  • Locations - Location filters grouped by Content type.

See Block Configuration for more detail on other available filters.

Results

The filtered results in the Activity Finder app are a list of Sessions that meet the given filter criteria.

Each row of results contains:

  • The Session Title.
  • The Session Time, which contains a date, days of the week, and times.
  • The Session Location
  • The Session Min/Max Age
  • The Member Price and Non-member price
  • An indication of the number of spots available, from the Initial Availability field.

Clicking on the row will bring up a pop-up with further details:

  • The Session Description
  • A “Learn more” link and “Register” button which both go to the URL in the Session Registration Link field.

Additional topics

Allowing UTM codes in Activity Finder

UTM codes can be used to track the effectiveness of marketing campaigns. Activity Finder uses query strings as filters, but as of version 4.2.0 it will also maintain UTM codes in the URL.

Activity Finder begins with a number of preset arguments, and those can be modified at Admin > YMCA Website Services > Settings > Activity Finder Settings (/admin/openy/settings/activity-finder) in the Allowed Query Arguments field.

A screenshot of the Activity Finder settings, focused on the “Allowed Query Arguments” field

Once those settings are saved, you can visit an Activity Finder page with UTM codes attached, for example:

https://example.com/activity_finder?step=results&selectedAges=24&selectedLocations=1541437&selectedActivities=2786027,2786083&utm_source=promotional_member&utm_medium=email&utm_content=button_register_now&utm_campaign=fall_group_swim_lessons_2021

and see that the codes are maintained as the filters are changed.

8.13.2 - Group Schedules

Displays daily group exercise classes with filters and a PDF download.

Sometimes called “Group Exercise” or “Group Schedules”, the Repeat Schedules block provides a similar view to Activity Finder, but focuses on recurring, often drop-in classes. You can see an example of this on our sandbox site.

Developers can find more information in drupal/openy_repeat and Program Event Framework.

As of August 2024, the Schedules have an updated design with improved functionality and user experience. The improved design will also respond to the selected colorway and page styles.

Using Group Schedules

Block configuration

After you add the Paragraph or Block to a page, configure the options:

  • PDF Schedule link - a link to a manually generated PDF as an alternative to the automatically generated one.
  • Clear All link - where the user is directed when they use the “Clear all” link.
  • Limit by category - choose categories with autocomplete to only show certain categories.
  • Filters - choose the filters that show up in the sidebar.
  • Limit by Location - choose a location to only show events from that location.
  • Display instructor
  • Display end time
  • Categories Exclude - exclude any programs that are tagged with specific categories.
  • PDF only view - only show the PDF link and not the schedule.

Front-end

Data from Sessions, Classes, and Activities are all used to form the Repeat Schedules. Here’s what shows up where. Fields are noted with their relationships, so session.class.activity.title means “the title of the Activity referenced by the Class referenced by the Session”.

Fields used in the table view:

A diagram listing the relationships between the fields in the Repeat Schedules table and their names.

Fields used in the popup view:

A diagram listing the relationships between the fields in the Repeat Schedules modal and their names.

8.13.3 - Simple Schedules

The “PEF Schedules” module allows Ys to create and manage schedules with a simple, calendar-based view.

YCloudYUSA/y_pef_schedule

See PEF Schedules for installation instructions.

Once you install the PEF Schedules module, you will be able to build schedules and add sessions via a calendar-based builder.

Before you start

Create schedule groupings

The Schedule editor allows Content Editors to create Sessions on a “WYSIWYG” calendar interface. As described in the PEF data model, Sessions require Classes, which require Activities, which require Program Subcategories, which require Programs.

flowchart LR
    subgraph "PEF Relationships"
        direction LR
        Session -- requires --> Class
        Class -- references --> Activity
        Activity -- references --> PS
        PS -- requires --> Program
        PS["Program Subcategory"]
    end

You will need to create at least a Class and Activity to start adding events to the calendar. Go to Admin > Content > Add Content (/node/add) to start adding items.

If you have preexisting content for any of these content types you can use them here. You may first need to configure the Activity Color for existing Activities.

Activity colors

PEF Schedules adds a new Color field to Activities which is used to style the categories on the calendar.

An example of different colored Activity labels

The Color field takes a hex value (#XXXXXX where X is a hexadecimal character (0-9, a-f)). We recommend using colors from the Brand Standard Color Wheel. The default color is configurable in the Calendar Settings. We recommend selecting dark tones from the color wheel. as the item titles are displayed with white text.

Calendar settings

Settings for the calendar are configurable at Admin > YMCA Website Services > Settings > Schedules calendar settings (admin/openy/settings/schedules-calendar).

Options include:

  • Slot settings - These relate to creating events on the calendar.
    • Slot Duration - The default length of each time slot.
    • Snap Duration - The default granularity to which events “snap” when clicking and dragging on the calendar.
    • Slot Label Interval - The interval between time labels on the calendar’s time axis.
  • Time Settings - These help make the calendar display more relevant to your user’s needs.
    • Min Time - The earliest time that is visible on the calendar view.
    • Max Time - The latest time that is visible on the calendar view.

Manage schedules

Once everything is configured, you can start managing schedules. See a list of available schedules at Admin > Content > Schedules Calendar (admin/openy/branch-schedules). Click on one of the options to open the editable schedule.

A description of the options available when managing the schedule.

When in the schedule, you can:

  • Click Download PDF to download a PDF of the current display.
  • Click Legend to open the legend, then click items in the legend to filter the view.
  • Use the Week/Day buttons to filter and change the view or page between weeks/days.
  • Click anywhere in the calendar to add a session.
  • Click on an existing item to view its details and edit.
  • Drag from the middle of an item to change its time.
  • Drag from the bottom of an item to change its duration.

Create sessions

When creating a session from the schedule, you’ll see a simplified version of the Add Session (/node/add/session) form.

The options available when creating a session.

  • Enter a Title (required).
  • Select a Class from the dropdown (required).
  • Enter a Room and/or Instructor (optional).
  • Choose a Location (required).
  • Add a Session Description (optional).
  • Set a Start date/time and End date/time (required). The time values will determine when on each day the session happens. The dates will determine the start and end of its recurrence if it happens across multiple days.
  • Set the Days on which the Session recurs during the duration of the dates set above (required).

Display schedules

Once content is added to the schedule, you have several options for showing it to users:

  1. Place the Simple Schedule block on any Layout Builder page.
  2. All items added via the Simple Schedule will be shown in Activity Finder or Group Schedules. Follow the directions on those pages to configure the respective components and add them to a page.
  3. Download the schedule PDF and upload it somewhere on your site.

9 - How-to Guides

Task-based guides to help you accomplish specific goals with YMCA Website Services.

How-to guides are directions that take the reader through the steps required to solve a real-world problem. How-to guides are goal-oriented.

Diátaxis guide to technical documentation

Browse our collection of step-by-step guides to accomplish common tasks with YMCA Website Services.


All How-to Guides


Our guides are always evolving. If you have a request for a guide, please get in touch.

9.1 - Migrate from Paragraphs to Layout Builder

Comprehensive guide to migrating legacy Paragraphs-based content to modern Layout Builder pages.

This guide will help you migrate your YMCA website from legacy Paragraphs-based content types to modern Layout Builder content types.

Overview

What You’ll Learn

By the end of this guide, you’ll understand:

  • ✅ When to migrate vs. when to use alternatives
  • ✅ How to audit your existing Paragraphs content
  • ✅ Migration approaches and their trade-offs
  • ✅ Step-by-step migration process
  • ✅ Tools and resources available

Estimated time: Planning: 1-2 hours | Migration: Varies by content volume


Step 1: Assess Your Migration Need

Should You Migrate?

✅ Strong reasons to migrate:

  • Your site is on the legacy Paragraphs system (landing_page, blog, news)
  • You want modern drag-and-drop Layout Builder experience
  • You’re planning a site redesign or major content refresh
  • You have < 500 pages to migrate (manageable manual effort)
  • Your team prefers visual page building over structured forms

⚠️ Consider alternatives if:

  • You have thousands of Paragraphs pages (migration effort is high)
  • Your content editors are comfortable with current Paragraphs workflow
  • You need a hybrid approach (some Paragraphs, some Layout Builder)
  • You have complex nested Paragraphs structures
  • Budget/timeline is constrained

Content Types Affected

Legacy Paragraphs-based content types in YMCA Website Services:

  • landing_page - Landing Page (Paragraphs) → Migrate to: landing_page_lb (Layout Builder)
  • blog - Blog Post (Paragraphs) → Migrate to: article_lb (Layout Builder)
  • news - News Post (Paragraphs) → Migrate to: article_lb (Layout Builder)

Note: Location content types (Branch, Camp, Facility, Program) use structured fields, not true Paragraphs page building. These typically don’t need Layout Builder migration.


Step 2: Audit Your Content

Before migrating, understand what you have.

Run a Content Audit

  1. Count your Paragraphs content:
# Count Landing Pages (Paragraphs)
drush sqlq "SELECT COUNT(*) FROM node_field_data WHERE type = 'landing_page'"

# Count Blog Posts
drush sqlq "SELECT COUNT(*) FROM node_field_data WHERE type = 'blog'"

# Count News Posts
drush sqlq "SELECT COUNT(*) FROM node_field_data WHERE type = 'news'"
  1. Identify your most-used Paragraph types:
# List all paragraph types in use
drush sqlq "SELECT DISTINCT type, COUNT(*) as count FROM paragraphs_item_field_data GROUP BY type ORDER BY count DESC"
  1. Export content inventory:
# Export all landing pages to CSV
drush sqlq "SELECT nid, title, status, created, changed FROM node_field_data WHERE type = 'landing_page' ORDER BY changed DESC" --extra=--csv > landing_pages_audit.csv

Analyze Your Content

Questions to answer:

  • How many pages use each Paragraph type?
  • Which pages are most important (high traffic, business-critical)?
  • Which pages are outdated and can be archived?
  • Are there common patterns you can templatize in Layout Builder?

Create a migration priority list:

  1. High priority: Homepage, key landing pages, high-traffic content
  2. Medium priority: Active campaign pages, recent content
  3. Low priority: Archived content, low-traffic pages

Step 3: Choose Your Migration Approach

There are three main approaches to migrating Paragraphs content to Layout Builder:

Best for: < 500 pages, significant content refresh desired

Process:

  1. Create new Layout Builder pages (landing_page_lb)
  2. Manually recreate content using Layout Builder blocks
  3. Review and improve content during migration
  4. Redirect old URLs to new pages
  5. Archive or delete old Paragraphs content

Pros:

  • ✅ Clean slate - opportunity to improve content
  • ✅ No custom code required
  • ✅ Quality control on every page
  • ✅ Learn Layout Builder thoroughly
  • ✅ Can be done incrementally

Cons:

  • ⏱️ Time-consuming for large sites
  • ⏱️ Requires content editor availability

Estimated effort: 15-30 minutes per page

Approach 2: Automated Migration (Advanced)

Best for: Large sites (500+ pages), technical resources available

Process:

  1. Develop custom Drupal migration module
  2. Map each Paragraph type to equivalent Layout Builder blocks
  3. Create migration process plugins
  4. Test thoroughly on staging environment
  5. Run automated migration in batches
  6. Manual QA and cleanup

Pros:

  • ✅ Fast for large content volumes (1000+ pages)
  • ✅ Consistent mapping rules applied uniformly
  • ✅ Preserves exact content structure
  • ✅ Repeatable and version-controlled

Cons:

  • 🔧 Requires experienced Drupal developer
  • 🔧 Complex for nested Paragraphs structures
  • 🔧 May miss content nuances
  • 💰 Higher upfront development cost
  • ⚠️ Still requires manual QA afterward

When to consider: If you have 500+ pages AND in-house Drupal development expertise OR budget to hire professional help.

Approach 3: Phased Migration

Best for: Large sites with limited resources, need gradual transition

Process:

  1. Keep both old Paragraphs and new Layout Builder content types enabled
  2. Create new content using Layout Builder (landing_page_lb, article_lb)
  3. Migrate high-priority pages manually first (homepage, key landing pages)
  4. Leave low-traffic legacy content as-is temporarily
  5. Set migration deadlines by content category
  6. Gradually migrate remaining content over 6-12 months

Pros:

  • ✅ No “big bang” cutover - reduced risk
  • ✅ Spread effort over time
  • ✅ Learn and improve process as you go
  • ✅ Prioritize business-critical content
  • ✅ Staff can learn Layout Builder gradually

Cons:

  • ⏱️ Longer overall timeline
  • ⏱️ Maintain both systems during transition
  • 🔧 Risk of leaving old content unmigrated

Here’s the step-by-step process for manually migrating Paragraphs content to Layout Builder.

Prepare Your Environment

  1. Enable Layout Builder content types:
# Ensure Layout Builder content types are available
drush pm:list --type=module --status=enabled | grep openy

# If not enabled, enable them
drush en openy_node_landing_page_lb openy_node_article_lb -y
drush cr
  1. Set up parallel content workflow:
    • Keep old Paragraphs content published during migration
    • Create new Layout Builder versions at new URLs (e.g., /new-about-us)
    • Switch URLs when migration is complete

Migrate a Single Page (Example Workflow)

Original: Landing Page (Paragraphs) at /about-us New: Landing Page (Layout Builder) at /new-about-us

Step 1: Create New Layout Builder Page

  1. Navigate to Content > Add content > Landing Page (Layout Builder)
  2. Fill in basic fields:
    • Title: Same as original
    • URL alias: /new-about-us (temporary)
    • Leave Published unchecked (draft mode)
  3. Click Save and edit layout

Step 2: Recreate Content with Layout Builder

For each Paragraph on the original page:

  1. Identify the Paragraph type (Banner, Text, Cards, etc.)
  2. Find equivalent Layout Builder block (see mapping table below)
  3. Add section → Choose layout (1 column, 2 column, etc.)
  4. Add block → Create custom block → Select block type
  5. Copy content from original Paragraph fields
  6. Configure block settings (colors, alignment, etc.)
  7. Repeat for all Paragraphs

Step 3: Review and Improve

  • Check responsive display (mobile, tablet, desktop)
  • Optimize images (compress, alt text, proper sizing)
  • Improve content (update outdated info, fix broken links)
  • Test all CTAs and forms
  • Preview before publishing

Step 4: Publish and Redirect

  1. Unpublish old page (Content → find old page → Edit → uncheck Published)
  2. Update new page URL to /about-us
  3. Publish new page (check Published → Save)
  4. Add redirect (if old page had different URL):
drush redirect:create /old-url /about-us
  1. Archive old content (optional: keep for reference or delete)

Paragraph to Block Mapping

Paragraphs TypeLayout Builder BlockNotes
BannerBannerDirect 1:1 mapping
TextSimple ContentBasic text block
1 ColumnSection: One columnLayout section
2 ColumnsSection: Two columnLayout section
3 ColumnsSection: Three columnLayout section
4 ColumnsSection: Four columnLayout section
Grid ContentCardsCard grid layouts
Featured NewsArticle ViewsRecent articles
Event ListingEvent ViewsRecent events
WebformWebform BlockEmbed forms
AccordionAccordionQ&A sections
GalleryGalleryImage galleries
Promo CardCards (single)Promotional cards
Membership InfoMembership CalculatorPricing tools

Missing a block type? Check the Block Library for 30+ available blocks.


Step 5: Bulk Migration Tips

If you’re migrating many pages, use these strategies to speed up the process:

Batch Migration Strategy

  1. Create templates for common page patterns:

    • Homepage pattern
    • Program landing page pattern
    • Event landing page pattern
    • Branch landing page pattern
  2. Use Layout Builder templates (if available):

    • Save frequently-used layouts as templates
    • Clone similar pages and update content
  3. Assign migration in batches:

    • Batch 1: High-priority pages (team leads)
    • Batch 2: Program pages (program coordinators)
    • Batch 3: News/blog migration (communications team)

Quality Assurance Checklist

For each migrated page, verify:

  • All content present (no missing Paragraphs)
  • Images display correctly (proper sizing, alt text)
  • Links work (internal and external)
  • Forms function (webforms, buttons)
  • Mobile responsive (test on phone)
  • SEO metadata (page title, description)
  • URL redirects (old URLs point to new)

Step 6: Automated Migration (Advanced)

For sites with 500+ pages, automated migration using Drupal’s Migrate API can speed up the process significantly.

Prerequisites

  • Experienced Drupal developer on staff or contracted
  • Development environment (local DDEV/Docker setup)
  • Version control (Git)
  • Staging environment for testing

High-Level Approach

Note: Automated migration is technically complex and requires custom development. This is an overview of the approach, not a complete tutorial.

  1. Create custom migration module in modules/custom/ymca_paragraphs_migration/

  2. Map Paragraph types to Layout Builder blocks:

    • Analyze your existing Paragraph types
    • Identify equivalent Layout Builder blocks
    • Document field mappings (Paragraph fields → Block fields)
  3. Develop migration process plugins:

    • Custom PHP code to transform Paragraph data into Layout Builder section structure
    • Handle field mappings, media references, and nested structures
    • Create Layout Builder sections and regions
    • Place blocks in appropriate sections
  4. Test thoroughly:

    • Migrate 5-10 sample pages
    • Verify content accuracy
    • Check responsive display
    • Test all links and media
    • Iterate and fix issues
  5. Run production migration:

    • Backup database
    • Run migration in batches (100-200 pages at a time)
    • QA each batch before proceeding
    • Manual cleanup as needed

Complexity Factors

Simple migrations (easier):

  • Flat Paragraph structures (no nesting)
  • Standard Paragraph types (Banner, Text, Cards)
  • Small number of unique Paragraph types (5-10)

Complex migrations (harder):

  • Deeply nested Paragraphs (3+ levels)
  • Custom Paragraph types
  • Complex field relationships
  • Media galleries with custom displays

When to Hire Professional Help

Consider contracting a Drupal developer if:

  • You have 1,000+ pages to migrate
  • You have complex nested Paragraphs structures
  • You lack in-house Drupal development expertise
  • You need the migration completed quickly (< 3 months)
  • You want post-migration support and training

→ Contact YMCA community for developer recommendations


Step 7: Post-Migration Cleanup

After migrating all content, clean up legacy systems:

Archive Old Content

# Export old Paragraphs content for archival
drush sql:dump --gzip --result-file=backup-pre-paragraphs-cleanup.sql

# Unpublish all old landing pages
drush sqlq "UPDATE node_field_data SET status = 0 WHERE type = 'landing_page'"

Remove Old Content Types (Optional)

⚠️ Warning: Only do this after confirming all content is successfully migrated!

# Disable old content types
# (This is permanent - backup first!)
drush entity:delete node --bundle=landing_page

# Or keep for reference but hide from editors
# Configuration → Content types → Landing Page → Edit → Disable

Update Documentation

  • Update internal wiki/documentation to reference new Layout Builder pages
  • Train content editors on Layout Builder (if not done already)
  • Update style guides to reflect new block library

Troubleshooting

Common Issues

Issue: “Block not found” error during automated migration

Solution: Ensure all Layout Builder blocks are enabled. Check that custom blocks exist before running migration.


Issue: Migrated pages missing images

Solution: Images may not migrate automatically. Check file references in source Paragraphs and manually map to Layout Builder blocks.


Issue: Layout looks different than original

Solution: Layout Builder uses different CSS classes than Paragraphs. Update theme styling or recreate layouts to match desired design.


Issue: Performance issues after migrating thousands of blocks

Solution: Set reusable field to 0 for migrated blocks to avoid permission calculation overhead:

$block->set('reusable', FALSE);

YMCA Website Services Documentation

Get Help with Your Migration


Decision Framework

Still not sure which approach to take? Use this decision tree:

Do you have < 100 pages to migrate?
├─ YES → Manual recreation (Approach 1)
└─ NO → Do you have < 500 pages?
    ├─ YES → Manual or Phased migration (Approach 1 or 3)
    └─ NO → Do you have in-house Drupal developers?
        ├─ YES → Automated migration (Approach 2)
        └─ NO → Do you have budget for professional help?
            ├─ YES → Hire Drupal developer
            └─ NO → Phased migration (Approach 3) - spread over 6-12 months

Success Patterns from YMCA Migrations

Medium-sized YMCA (200 pages):

Manual migration over 3 months worked well. The process provided an opportunity to refresh outdated content and archive low-value pages. Content editors reported that Layout Builder reduced page creation time from 45 minutes to 15 minutes.

Large YMCA (500+ pages):

Phased approach with high-priority pages first. Migrated homepage and program landing pages manually (50 pages), then tackled category pages over 6 months. Still have low-traffic archive content on old system - planning to migrate or archive in year 2.

Small YMCA (75 pages):

Completed manual migration in 6 weeks with part-time content editor. Spread work across team - different staff owned different content areas. Used migration as training opportunity to learn Layout Builder.


Next Steps

Ready to start your migration? Follow these steps:

  1. Run content audit - Understand your content volume
  2. Choose approach - Manual, automated, or hybrid
  3. Create migration plan - Prioritize pages, assign owners
  4. Start small - Migrate 5-10 pages as pilot
  5. Get help if needed - Contact agency partners

Questions? Join YMCA Community Slack and ask in #development! 🚀

9.2 - How to avoid outdated configuration

Managing config across versions of a module can result in unexpected challenges.

Sometimes, in the process of making successive config changes, we need to maintain old config files so that outdated update hooks can still run successfully for sites who are running a module that might be many releases behind.

When a new update runs into an error like:

Configuration ______ depends on the ____ configuration that will not exist after import.

the error most often means that some configuration that’s expected in a prior update hook has been removed from the codebase.

In order to enable our modules to move quickly and minimize the need for developers to stop their update process at important versions, we have come up with a process of retaining “outdated” configuration when necessary.

Overview

This process ends up with a configuration directory that looks like:

config/
|- 1.0/
|--- a.bunch.of.yml
|- 1.3/
|--- some.different.yml
|- install/
|--- the.regular.yml
|- optional/
|--- other.optional.yml
| etc

See a few examples:

Fixing an update hook

  1. Find the version of the module where the failing update hook was committed.
  2. Checkout or download the old version to a separate working directory.
  3. Copy all config files that are being imported in that hook into a new directory, like config/outdated/x.x.x.
  4. Change the $path line in the failing update hook, changing /config/optional to /config/outdated/x.x.x.
  5. Commit those changes and test thoroughly.

Warning signs

The error above is the most significant indicator of an issue, but it would be optimal to avoid those errors altogether.

Look out for changes in these types of files:

core.entity_form_display.block_content.*.default.yml core.entity_view_display.block_content.*.default

Adding or removing major features or fields could also result in the error.

9.3 - How to customize your locations map

YMCA Website Services includes robust mapping functionality defined in the openy_map subproject. Maps typically are displayed on the /locations page using the Location Finder component and are highly customizable.

These are a few common customizations:

Changing Map Options

By default, content types have these labels on the map:

  • Branch = YMCAs
  • Camp = Camps
  • Facility = Facilities

Screenshot showing map labels

These labels can be customized in the Drupal administration pages to better suit your YMCA’s more member-focused terminology. To do so:

  • In the Admin Menu, go to YMCA Website Services (or Open Y on prior versions) > Settings > Map Settings
  • In the Branch/Camp/Facility Content Type sections you can:
    • edit the label names,
    • show or hide the content type on the Locations page,
    • set the filter to be on or off by default, and
    • set the map icon.
      Branch content type settings
  • Edit each content type as needed then Save the form.
  • Reload /locations and you should see your changes.

Adding Additional Location Types

You can add new content types to the map with a few steps. This may require some trial and error, so be sure to work in a testing environment first. You will need to have the Field UI module enabled to do this through the Drupal admin UI.

  • Create a new content type via Structure > Content types > Add content type
  • Add these existing fields to the content type:
    • field_location_coordinates - required
    • field_location_address and field_location_phone - suggested for display on the map and location teasers.
    • field_location_amenities - if the location should be searchable with the Amenities search.
  • Set up the Teaser display on the new content type:
    • Navigate to Manage display then Teaser
    • Update these settings to match the Branch Teaser display at /admin/structure/types/manage/branch/display/teaser
  • Go back to the Map Settings at admin/openy/settings/openy_map and configure the options for your new location type.

9.4 - How to install Cachet (the official Y Font)

Cachet, the Y’s primary font, should be used for all internal and external materials whenever possible.

From YMCA Link:

Typography is an important element of our brand identity. Cachet and Verdana, the only two fonts used on YMCA collateral, help provide our words with a distinctive look and welcoming feel. And Cachet, as our primary font, should be used for all internal and external materials whenever possible.

To help Ys incorporate the Cachet font into their online applications, Y-USA is now licensing the web font version of Cachet for all YMCAs. Previously, Ys could only access the desktop version of the font from the Brand Resource Center (BRC).

Visit the BRC to:

For developers

YMCA development partners can take advantage of a custom module which allows for automation of this process. Get in touch or reach out in #developers on the YUSA Slack for more details.

For site builders

Once you’ve downloaded the WOFF files, you’ll need to add them to your site. These instructions mirror the walkthrough in this video.

  • Visit Admin > Extend and ensure the “@fontyourface” and “@fontyourface - Local Fonts” modules are enabled.
  • Visit Admin > Appearance > @font-your-face > Custom Fonts
  • Click + Add Custom Font and add each of the Cachet font files you downloaded above with the following settings:
LabelFont FamilyFont StyleFont WeightFont ClassificationFont File
Cachet Extra LightCachetNormal300Sans SerifCachetW05-ExtraLight.woff
Cachet BookCachetNormal400Sans SerifCachetW05-Book.woff
Cachet MediumCachetNormal500Sans SerifCachetW05-Medium.woff
Cachet BoldCachetNormal700Sans SerifCachetW05-Bold.woff

Add_custom_font|591x500

  • After you’ve added each font, Enable them.

Custom_Font|690x156, 100%

  • Your site should now use the Cachet font in headers and other areas. Usage is dependent on the YMCA Website Services theme you choose.

9.5 - How to integrate with social media

Embedded social feeds or posts can help share your message with users.

Social media is a great platform for communicating with your Y community, and it’s often helpful to embed feeds or posts on a page to share topical content with users.

The distribution has used several methods over the years to add social content to sites, but all of them are dependent on the specific platforms maintaining open APIs. Unfortunately, many social networks are now locking down and restricting their APIs.

How to embed social content in your YMCA website (in 2023)

Currently, we recommend using embed codes from the specific platform to embed social posts or feeds on your YMCA Website Services website.

Find the embed code

Each platform has its own way of doing embeds. For posts, you can often find an “Embed” button in the options or share menu. For feeds, you often need to use a separate builder. Here are some options we’ve found:

Note: Social platforms may break these embeds at their whim. Use at your own risk.

Embeds using Paragraphs

  • Navigate to a content page on your site, then click Edit.
  • Add a Code Paragraph to the section where you’d like to do the embed.
  • Paste in the embed code generated above.
  • Save the page.

Embeds using Layout Builder

  • Navigate to a content page on your site, then click Layout.
  • Add a Code Blockto the section where you’d like to do the embed.
  • Paste in the embed code generated above.
  • Save the block, then Save layout on the page.

Alternatively, try Social Feeds Fetcher

The Social Feeds Fetcher module that comes with the distribution allows your site to import social media content for syndication.

To configure fetching:

  • Open the configuration page at /admin/config/social_feed_fetcher_settings or Configuration > Web Services > Social Feed Fetcher Settings
  • Select the checkbox for your chosen social networks and add additional settings. Every social network has its own API and requires different configuration.
  • When all settings are completed, click Run Cron. The import is started and if the configuration is correct, items will appear in the content list.

How to share content from your site to social media

All mobile browsers — Firefox, Edge, Safari, Chrome, Opera Mini, UC Browser, Samsung Internet — make it easy to share content directly from their native platforms.

UX Considerations for Web Sharing

Using AddToAny

According to their introductory blog post:

AddToAny is the perfect drop-in replacement for AddThis.

A screenshot of the AddToAny popup.

As of December 2023, the AddToAny module is included in the YMCA Website Services distribution. It is not enabled out of the box, but if you need to supplement native platforms’ sharing services, here’s how:

  • Go to Admin > Extend (/admin/modules) and enable the AddToAny module.
  • Configure the module at Admin > Configuration > Web Services > AddToAny (/admin/config/services/addtoany)

Full documentation on AddToAny is available on Drupal.org and AddToAny’s Drupal Sharing Customization.

AddToAny with Layout Builder

To integrate AddToAny with the Layout Builder Design System:

  • Set the following configuration options for AddToAny:
    • Icon size: 36 pixels
    • Service Buttons: Change to any number of standalone service buttons that you would like.
    • Additional JavaScript: Add this code to have the buttons follow the configured colorway:
      a2a_config.icon_color = "var(--wsPrimaryColor),white";
      
    • Save the configuration
  • Add the AddToAny share buttons to the default Layout Builder display.
    • Edit a single Page Layout or the Content Type Layout.
    • Decide where to add the share block. We recommend the right side of the footer, above or below the “Stay Connected” block, but any section of the page would work.
    • In Layout Builder, Add block, then choose All system blocks > AddToAny share buttons.
      • Set a Title like “Share this”.
      • Choose to Display title.
      • Leave other configuration as their defaults.
      • In the Style settings, expand Spacing and add a top or bottom margin of 32px to ensure the block is spaced properly from the block above or below it.
  • Save the Block and the Layout.

A screenshot of the AddToAny share block in the footer of a page.

Using AddThis

This Social Share Icons paragraph and the AddThis module ceased functioning on May 31, 2023, with the discontinuation of AddThis services.

9.6 - How to migrate content into Layout Builder

Leaping to Layout Builder can seem daunting, but we have resources to help.

Before you start your migration, we recommend you:

How long do I have?

Layout Builder components for YMCA Website Services were developed and released throughout 2023. The plan at the outset was that Paragraphs-based components would be supported for one year from the time of the Layout Builder components’ completion, then would cease being supported. Site owners can begin migrating their content at any time. Upon the deprecation of Paragraphs components, they will not “disappear”, but they will no longer be supported by the YMCA Website Services core team.

As of October 2023, the timeline is:

  • December 2023 - Layout Builder components are considered “feature complete”
  • 2024 - refinement and bug fixing of Layout Builder components, basic bug fixing only for Paragraphs components.
  • December 2024 - end of support for Paragraphs components.

Site owners are encouraged to plan a migration of their content to Layout Builder in 2024, after which point they will be responsible for maintaining Paragraphs components.

(Timeline is subject to change based on community feedback and priorities.)

Plan your migration

The migration from Paragraphs to Layout Builder is not a small one, but it can be done in bite-sized pieces and spread out over some time if necessary. We recommend working with a partner agency to assist you through the process.

TIP: As you work through the migration, the new pieces of your site will look different than others. Help members through the process with some messaging in an Alert or news post letting them know that things will be changing.

Decide where to start

If you’re doing your migration throughout your regular business, without starting from scratch (sometimes called a “lazy migration”), it helps to identify a strategy for planning the migration. These are a few possible strategies:

A campaign or goal

If you have an upcoming marketing campaign you could build one or a few brand new Landing Pages with Layout Builder to try out the process. This way you’re easing both your editors and members into the new designs without getting too deep.

If you have a natural pause in events (maybe over a holiday) or a big series coming up you could use that as the break point for new events. Old events don’t necessarily have to be converted to the new design as they’re not often viewed after their date has passed.

A section of the site

Maybe you want to ease into the process with some lesser-used pages, maybe you want to change the home page and top-level menu items to show off the new designs right from the outset. Either way, you can decide on a section and carve off a few pages at a time.

A content type

Events or News articles are a good option to try out the new designs, although you’ll need to ensure any Landing Pages that display lists of that content are also updated. Branch pages can be converted one by one without changing their listing on the Locations page.

Prepare your content

Once you know what you’re going to move, you’ll want to get the content ready to migrate. Most text will need to be copied and pasted to the new pages (this is a great opportunity for review), but images and documents will be able to be re-used from the Media Library.

It could be helpful to print or screenshot pages (Firefox can capture a full-page screenshot) and then annotate them to decide how each section of the page will map to its Layout Builder component. You could even use the Wayback Machine to save a snapshot of the page.

Component mapping

While the exact mappings are up to each site’s content editors, here are some possible mappings from Paragraphs to Layout Builder

Paragraph
the Layout Builder component it maps to.
1 Column
2 Columns
3 Columns
4 Columns
Secondary Description and Sidebar
These paragraphs can be replicated using 1-4 column Layouts
Activity Finder
Activity Finder
All Amenities
Branch Amenities
Banner
Small Banner
Banner
Blog Posts Listing
Featured Blog Posts
Featured News Posts
Latest Blog Posts
Latest News Posts
News Posts Listing
Articles Filter, Articles Listing, Featured Articles
Camp Menu
Camp Menu
Categories Listing
TBD
Code
Code
Date Block
None
Embedded GroupEx Pro Schedule
Due to changes in the GroupEx Pro embed functionality, we recommend moving to a Code block.
FAQ
Accordion
Featured Content
Story Card
Cards or Grid CTA
Gallery
Carousel
Grid Content
Grid CTA or Icon Grid
Limited Time Offer
Banner (small variant) or Alert
Membership Calculator Paragraph
Membership Calculator
Promo Card
Promo Card
Simple Content
Table
Social Share Icons
Deprecated
Teaser
Ping-pong
Webform
Webform

Build it

Once you have a plan, go build it! Use the Layout Builder documentation to help you through the process. Building each page might look something like this:

  • Create a new, unpublished, Landing Page (with Layout Builder)
  • Add blocks and content to the new page
  • Ensure the URL Alias of the new page matches that of the old page
  • Un-publish the old page and publish the new page.
  • Test out the new page in a new browser, an incognito window, or your phone or tablet

Get help

If at any point in this process you need help, be sure to reach out to our community. The functionality is always being improved, and we have a wide variety of developers and builders from other Ys who are happy to help.

9.7 - How to perform a content audit

Content audits help get an overview of how your site is structured and can assist with migrations, SEO analysis, and more.

Doing a content audit is a useful first step to planning a migration. You can use our content audit template and watch our walkthrough on the May Monthly Call to get started, then follow these steps:

Audit

List current website pages in a spreadsheet by menu section.

  • This will give you a visual overview of how your site is structured.
    • Be sure to audit your Drupal Admin back end for unpublished pages that can be removed/deleted!

Review

Visit each page and review content.

  • Identify key pages & content types
  • Locate content that is outdated, duplicated, needs further review, consolidation etc.
  • Find content gaps - what might be missing?
  • Identify commonly used page components (i.e. Cards, Carousels, Accordions, Ping Pongs, etc.)

Additional Resources

For more information on content audits, check out these resources:

9.8 - How to set up a Layout Builder site

Before you build content with Layout Builder, you (or your development partner) must install and configure your site.

Install and prepare

  1. Install YMCA Website Services 10.3.0 or higher.
  • If you are starting a new site, follow the distribution install instructions.
  • If you are starting with an internal toolchain, composer require ycloudyusa/yusaopeny at the root of the project.
  1. Go to Admin > Configuration > Basic site settings and configure the website name and slogan.

Enable Layout Builder modules

The core functionality of the Layout Builder features is packaged inside the Y Layout Builder module (y_lb). This module is required by the profile and comes with it out of the box.

Layout Builder modules could be disabled by default. The complete list of available components is available in y_lb/composer.json. There are two different methods to enable them:

  1. To install only selected modules: Go to Admin > Extend (/admin/modules) and enable only the components that you choose to use.
  2. To install all the modules: Go to Admin > YMCA Website Services > Extend > Install (/admin/openy/extend/list). Check the box for Layout Builder, then Install.

Configure layouts & listings

Layout Builder relies on a system of Layout Defaults and Layout Overrides. An important concept to understand from these pages is:

Once a Layout is overridden on an entity, that entity will not be impacted by changes to Layout Defaults.

In building Landing Pages, we will override the Default Layout for every page (by placing content blocks). For this reason, it is important that we configure the desired defaults before building pages.

Landing Pages

You will use the Landing Page (with Layout Builder) content type to build landing pages.

  • Configure its content type styles at /admin/structure/types/manage/landing_page_lb/display first. Configure:

    • Colorway
    • Border style
    • Border radius
    • Text/button alignment
    • Button position
    • Button fill

Locations

You will use the Branch, Camp, and Facility content types to build pages that contain the contact and amenity details for each location.

  • For new sites, you may set the Use Layout Builder checkbox to be true by default at /admin/structure/types/manage/branch/fields/node.branch.field_use_layout_builder.
  • Configure the default layout and settings for each type on their corresponding layout settings pages:
    • Branch: /admin/structure/types/manage/branch/display
    • Camp: /admin/structure/types/manage/camp/display
    • Facility: /admin/structure/types/manage/facility/display
  • Create a locations page with the URL alias /locations using Location Finder.

Events

Enable Events with Layout Builder (ws_event) to use Events with Layout Builder.

  • Configure its default layout and settings at admin/structure/types/manage/lb_event/display.
  • Create an events listing page with the URL alias /events using Events Views & Filters

Articles

Enable Articles with Layout Builder (y_lb_article) to use Articles with Layout Builder.

  • Configure its default layout and settings at /admin/structure/types/manage/article_lb/display.
  • Add an article listing page with the URL alias /news using Article Views & Filters.

Activity Finder

Enable openy_node_session, openy_node_program, openy_node_category, openy_node_activity, and openy_node_class to set up the Program Event Framework (PEF) if you plan to use Schedules or Activity Finder on the project.

Then require and enable yusaopeny_activity_finder to use Activity Finder.

Canadian YMCAs

See How to use the Canadian Colorway for Layout Builder.

Configure Permissions

By default (as of September 2024), Layout Builder content is only editable by the Administrator user. In order for Layout Builder to be used by the Contributor or Editor Roles (or any custom roles), a number of permissions must be set. To get started, go to Admin > People > Permissions (/admin/people/permissions).

This list contains the relevant permissions for using Layout Builder in the YMCA Website Services distribution (out of the box). Assign permissions to roles on your site based on your individual content workflows.

  • In this Permissions Section
    • assign these permissions.
  • Layout Builder - These permissions allow users to use “layout overrides” (aka the “Layout tab”), which is how pages are composed with Layout Builder.
    • Either give permission for all content types:
      • Configure any layout - will give permission to edit layouts for ALL content types
    • Or give permission to only specific content types:
      • Content - {Content Type}: Configure all layout overrides
    • Create and edit content blocks is required for anyone who needs to build Layout Builder pages.
  • Block content - These permissions allow users to create, edit, delete, or revert specific block types.
    • Either give permission for all block types:
      • Administer block content
    • Or, give permissions to only specific block types:
      • {Block type}: {View/Edit/Delete/Revert} content block
  • Add other necessary permissions for managing content:
    • Entity Browser
      • Access Media Directories: Field widget pages
      • Access Media Directories: Standalone pages
    • Media Directories UI
      • Access to Media Directories browser
    • Contextual Links
      • Use Contextual Links
  • Node - These permissions allow users to create, edit, delete, or revert the Layout Builder content types.
    • Either give permission for all content types:
      • Administer content
    • Or give permission for only specific content types:
      • {Content Type}: {Create/Edit/Delete/Revert} {Own} content
      • For example:
        • Landing Page (Layout Builder): Create new content
        • Landing Page (Layout Builder): Delete any/own content
        • Landing Page (Layout Builder): Edit any/own content

9.9 - How to set up a site with the Small Y template

The Small Y template is a set of modules and themes tailored to the needs of Small YMCAs.

What is the Small Y template?

The Small Y template is a set of modules and themes tailored to the needs of Small YMCAs. It is designed to be a lightweight, easy-to-use solution for small organizations that need a simple, effective website.

A full working sandbox of the Small Y template is available at https://small-y-stable.y.org/demo-ui-kit.

What’s different?

New, simplified theme

The Small Y template includes updates to the Layout Builder design system provided by VML in collaboration with the YMCA of the USA. View a mockup of the new theme (Figma).

Only the most essential modules

The Small Y template is built with a small set of modules that are essential for a basic YMCA website. This makes it easier to set up and maintain, and reduces the weight of the site.

Modules and features included with the Small Y template include:

Any other modules or features of the distribution can be added as needed via the Drupal admin interface.

Additions to the main distribution

The Small Y Template provided a number of features back to the main distribution for all YMCA Website Services users to benefit from. These include:

  • Partners/Sponsors block now allow for partners to be split into multiple tiers.
  • Simple Text/Table block now applies responsive table styles more consistently.
  • An additional Utility Menu has been added to the Header to allow content editors to add additional links in the top right of the header.
  • Events Listings and Articles Listings have been updated to include a Number of items field to limit the number of items displayed.
  • Alerts have a new set of styles that follow the colorway color scheme.

Small Y Specific Features

The Small Y template includes a few additional features that are not included in the main distribution. These are intended to simplify the setup process for small organizations and add guardrails to keep content consistent.

  • Limits have been added to the number of items for the main menu and many components.
  • Breadcrumbs are now automatically added to all pages.
  • Additional variants have been added to the Banner block. Each banner can be used with the colorway color or grey background.
    • Tall - for use as the primary hero banner on a page.
    • Sub-page chevron - for use as a secondary banner on a page.
    • Sub-page chevron (no media) - for use as a secondary banner on a page with no media.
    • Sub-page frame - for use as a secondary banner on a page with dark text on a white background.
    • Promo - for use as a smaller banner on a page with a call to action and no media.
      A screenshot of the banner variants listed above.
  • Ping-pong blocks can be added in sections using the Ping-pong Section content block. This allows for alternating content blocks to be added to a page with section-level formatting, instead of block-by-block formatting.
    • When adding a Ping-pong Section, you can choose from two sets of options for the blocks contained within in Styles > Y Styles.
      • Image Alignment - Choose whether the image starts on the left or right.
      • Background colors - Choose between a colorway, white, or grey background for items in the section.
        The Y Style options for ping-pong blocks.
  • Statistics blocks have been redesigned and have the option to be displayed with a grey or colorway background.
  • Grid CTA blocks have their CTA buttons moved between the subheading and the items. Icon Grid blocks have the CTA below the items.

Install the Small Y template

The Small Y template can be installed via the YMCA Website Services Installation wizard or the command line.

  • Installation Wizard: The YMCA Website Services Installation wizard is a web-based tool that guides you through the process of setting up a new YMCA website. It includes a step-by-step process for configuring the site.
    • When asked to choose the Installation Type, choose “Small Y” and proceed with the installation steps.
  • Command line
    • drush -vy si openy openy_configure_profile.preset=small_y openy_theme_select.theme=openy_carnation openy_terms_of_use.agree_openy_terms=1 install_configure_form.enable_update_status_emails=NULL --account-name=admin --site-name='YMCA Website Services'

Build your site

Once you’ve installed a site with the Small Y template, you can start building your site by adding content and configuring the layout. See How to set up a Layout Builder site.

9.10 - How to track & analyze user actions

Google Analytics

YMCA Website Services uses the Drupal contrib Google Analytics module to enable Google Analytics tracking on your YMCA Website Services site.

To get started, you should first create a GA property. Use the Analytics Help for assistance.

Configuration

Configuration is done at the standard module configuration page: /admin/config/services/google-analytics.

Google Analytics Version Compatibility

In the 9.2.11 release in November 2021, YMCA Website Services added support for Google Analytics 4. If your site has been updated to YMCA Website Services 9.2.11 or greater AND the google_analytics module has been updated to 4.x you should be able to use GA4. Otherwise you’ll need to stick with GA3.

Search Tracking with Google Analytics

Prerequisites

  • Google Analytics account to track you site should be created.
  • Google Analytics contrib module should be enabled and configured to use existing GA account.

Steps

  1. Log in to Google Analytics account that configured to track your YMCA Website Services site.

  2. Click Admin button in bottom right corner of main screen

    Google Analytics Main Screen

  3. Click View Settings

    Google Analytics View Settings

  4. Scroll to “Site Search Settings” section and enable “Site Search Tracking” switch

    Google Analytics Site Search Settings

  5. Fill query parameter field with q, query values and click Save

  6. Reports about the search tracking you can find at main screen in Behavior → Site Search Section

Attention: Data processing latency for search tracking reports is 24-48 hours (see Google’s support doc).

Data Layer

See also the Data Layer module README.

The Data Layers module output data on the page in a json format. By default it will output properties (langcode, vid, name, uid, created, status, roles) and related taxonomy for any node, user, or any route based entity.

A limited set of properties are available via the Data Layers configuration form at /admin/config/search/datalayer (langcode, vid, name, uid, created, status, roles).

Adding additional properties can be done through use of hook_datalayer_meta().

function my_module_datalayer_meta() {
  return array(
    'property',
  );
}

It will be added to the page as:

{
  "entityProperty": "whatever the value is"
}

Altering which properties will be output can be done via hook_datalayer_meta_alter().

function my_module_datalayer_meta_alter(&$properties) {
  // Override module norm in all cases.
  unset($properties['entityUid']);

  // Specific situation alteration...
  $type = false;
  if ($obj = _datalayer_menu_get_any_object($type)) {
    if ($type === 'node' && in_array(array('my_bundle', 'my_nodetype'), $obj->type)) {
      // Remove author names on some content type.
      if ($key = array_search('name', $properties)) {
        unset($properties[$key]);
      }
    }
    elseif ($type === 'my_entity_type') {
      // Remove some property on some entity type.
      if ($key = array_search('my_property', $properties)) {
        unset($properties[$key]);
      }
    }
  }
}

Adding additional data can be done using datalayer_add().

function _my_module_myevent_func($argument = FALSE) {
  if ($argument) {
    datalayer_add(array(
      'drupalMyProperty' => $argument,
      'userAnotherProperty' => _my_module_other_funct($argument),
    ));
  }
}

To alter the data to be output use hook_datalayer_alter().

function my_module_datalayer_alter(&$data_layer) {
  // Make the title lowercase on some node type.
  if (isset($data_layer['entityBundle']) && $data_layer['entityBundle'] == 'mytype') {
    $data_layer['entityLabel'] = strtolower($data_layer['entityLabel']);
  }
}

Cross-domain Tracking

This configuration enables cross-domain tracking (also known as “cross-domain measurement”) to work through internal redirects like those in Membership Calculator (that use TrustedRedirectResponse).

When enabled, cookies matching any configured tag will be added to any redirect destination matching a configured domain. For example, a redirect to https://example.com will be transformed to https://example.com/?_gl=.....

This process is illustrated well by Analytics Mania:

A diagram illustrating the successful user flow of a cookie from one domain to another, via analyticsmania.com

Analytics provides code that does this automatically with standard <a> links, but this module is required to enable similar functionality with “server-side” links/redirects.

NOTE: Configuration and testing of analytics is required outside the scope of this module, refer to [GA4] Set up cross-domain measurement for more information.

Successful cross-domain tracking also requires the destination application to retain the passed query strings and load them into the corresponding tracking property.

Requesting cross-domain tracking support

Many Customer Relation Management (CRM) systems and Member Management Systems integrate with YMCA websites. Those systems often need guidance on hwo to maintain cross-domain tracking support.

Entrance to the CRM/MMS often involves multiple redirects which may drop the required query strings.

When discussing cross-domain support with your vendor, we recommend requesting:

Please support passing query strings/parameters through redirects, specifically maintaining the _gl parameter.

You may also need to request that your GTM/GA code be added to the CRM/MMS to report back these parameters.

Configuration

  1. Enable the “YMCA Website Services Cross-domain Tracking (XDT)” module at Administration > Extend, or via drush:
    drush en openy_xdt
    
  2. Configure the module at Administration > YMCA Website Services > Settings > Cross-domain Tracking Settings (/admin/openy/settings/xdt)
    • The cookie defaults to the standard for GA4, but can be modified for use with different systems.
    • The module will not have any effect until a domain is configured. Add the domains of any external sites where you would like to enable tracking.

9.11 - How to leverage structured data

Structured data helps the machines reading your site - search engines, AI models, and more - understand your content.

Adding structured data can enable search results that are more engaging to users and might encourage them to interact more with your website

Why add structured data to a page (Google)

The distribution (as of version 10.3.0) leverages the community contributed Schema.org metatag module and custom code to integrate structured data into many content types. You can test if your page is outputting structured data by using the Schema.org Validator or Google’s Rich Results Test

Once your site is updated, structured data will be automatically generated 🎉 with no additional work from content editors.

Articles

The Article (Layout Builder) content type implements the Article Schema as per Google’s Article structured data docs.

Articles have three options for the Type, which map to their appropriate Schema:

Customizing Articles

This mapping is set in code (y_lb_article_metatags_alter in y_lb_article.module), but all other settings are configurable via the Metatag configuration (/admin/config/search/metatag/node__article_lb).

Branches

The Branch content type implements the LocalBusiness Schema as per Google’s Local business structured data docs.

Any time the Branch Hours are updated, that content will also be reflected in the Structured Data that’s read by search engines.

Customizing Branches

The mapping is configurable in the Metatag configuration (/admin/config/search/metatag/node__branch). Hours configuration uses the Open Y Hours_metatag tokens.

FAQs

The Accordion Layout Builder Block has an option to implement the FAQPage Schema as per Google’s FAQ structured data docs.

If an Accordion section contains Frequently Asked Questions, check the FAQ? checkbox to output them as structured data.

Tips for writing good FAQ content:

  • Ensure the content contains individual sets of questions (“How old does my child need to be to swim at the YMCA?”) and answers (“The YMCA offers swim classes starting at age 3 and the pool is open to children of all ages with parental supervision”).
  • Only one FAQ should be added to a page. If more than one is added, only the first will be output to the structured data.

Customizing FAQs

Due to the complexity of the FAQ data, the structured data is managed entirely in code and is not customizable via the Drupal admin. If you need specific customizations, please post your ideas in Slack or suggest them on the Roadmap for the core team to discuss and implement.

Other Metatags

The distribution also includes metadata configuration for each content type, which can be found in the Metatag configuration (/admin/config/search/metatag).

Homepage Metatag Overrides

On some sites, the homepage may have unique metadata requirements. The homepage metatags can be overridden in the “Front page” metatag configuration.

For sites that use Layout Builder, it may be necessary to disable the Front Page metatag settings so that the Landing Page (Layout Builder) tags can be used instead.

  1. Go to /admin/config/search/metatag/front
  2. Scroll to the bottom of the form.
  3. Uncheck Active and Save the settings.

Once you have changed the settings, check the metadata of the homepage with a tool like Social Share Preview to ensure the correct data is being output.

9.12 - How to use the Canadian Colourway for Layout Builder

With a few clicks, Canadian YMCAs can use their own set of brand-compliant, accessible styles.

YMCA of the USA has partnered with YMCA Canada to create a brand-compliant and accessible colourway for use by Canadian YMCAs.

The logo and header from an example Canadian YMCA page

Designs

The colourway is packaged as the Canada Layout Builder Colorway on Drupal.org and is included with the full YMCA Layout Builder package.

Colourways

Four buttons with the four Y Canada color options
Canadian Color schemes

The Canadian Colorway package includes four options for content type or page-level colorways. Each colourway uses the same three primary colors - dark red, lighter red, and grey, along with a highlight color of blue, purple, green, or black.

Banners

Examples of the 4 Canadian banner variations

The Canadian Colorway for Banners package contains 4 banner variations that utilize the unique Y Canada chevron:

  • Black
  • Red
  • White
  • Short (no image, title and subtitle only)

Canadian banner variations in the Layout Builder style picker

These can be selected in the Y Styles selector for each banner on your site.

Y Canada sites can also use the existing “Overlay” Banner style as it does not utilize any YUSA-specific styling.

Setup

Enable the required modules

The ws_colorway_canada module and its submodule lb_hero_canada contain colorways, logos, and banner styles approved by Canadian Y authorities.

  • Visit Admin > Extend (admin/modules) and enable these two modules (search for Canad):
    • Layout Builder - Canadian Colorway (ws_colorway_canada)
    • Y Layout Builder - Canada Colorway for Banner (lb_hero_canada)
  • Alternatively, enable the modules via drush:
    drush en ws_colorway_canada lb_hero_canada -y
    

Configure site defaults

After enabling the new colorway, there are a few more steps to ensure the new colorways are used across your site:

  1. Set the default layout styles to use the Canadian colorway of your choice.
  2. For any existing demo content and pages:
    • Set the page colorway to one of the new “Y Canada” options.
    • Change the banner style to one of the new Y Canada Styles.

Hide YUSA Styles

Y Canada site developers may want to hide the existing YUSA styles in order to prevent unintentional usage. This is not possible through configuration at the moment, but some custom css can do the trick:

#edit-ws-design-settings-colorway .form-item-ws-design-settings-colorway:has(div[class*="colorway-ws"]),
#drupal-off-canvas .form-item-appearance-ws-style-ws-style-option-hero-banner:not(:has(input[value*="canada"])) {
  display: none;
}

9.13 - How to use two-factor authentication

Enabling multiple levels of identity verification can protect your site from malicious users.

Enabling two-factor authentication (2FA or TFA) adds a layer of security to selected roles like admin while allowing other users to log in to the site only with basic authentication with a Drupal username and password.

The community-contributed TFA module is the recommended path to requiring 2FA for users.

Requirements

The TFA module requires the PHP OpenSSL extension. This is installed with most modern stacks, but you can check to see if it is running with: php -i | grep openssl.

Add the TFA module and its soft dependency:

composer require drupal/tfa drupal/real_aes

Installing

We recommend you follow the full installation instructions for the 8.x branch or the 2.x branch.

Once you configure an encryption key and an encryption profile, you will then be able to enable TFA at Admin > Configuration > People > TFA (/admin/config/people/tfa).

Once you enable TFA, you will have the option to require it for specific roles.

A screenshot showing “Roles required to set up TFA” with checkboxes for each role on the site.

10 - Troubleshooting

Solutions to common problems, error messages, and debugging techniques for YMCA Website Services.

Having trouble? Browse our troubleshooting guides by category to find solutions to common issues.


Browse by Category


Getting Help

If you’re still stuck:

  1. Search the Docs: Use the search bar above to find solutions
  2. Check Release Notes: Your issue may be documented in release notes
  3. Community Forum: Ask on the message board
  4. Monthly Calls: Join our monthly community calls for live Q&A
  5. GitHub Issues: Report bugs at github.com/YCloudYUSA/yusaopeny/issues
  6. Contact Your Partner: Reach out to your YMCA Website Services development partner

Prevention Best Practices

  1. Always backup before updates

    drush sql-dump > backup-$(date +%Y%m%d-%H%M).sql
    
  2. Test on staging first

    • Never update production directly
    • Use identical staging environment
  3. Keep regular backups

    • Database: Daily
    • Files: Weekly
    • Code: Use Git
  4. Monitor logs

    drush watchdog:tail
    
  5. Stay updated

  6. Document your configuration

    • Keep notes on custom modules
    • Document API integrations
    • Track theme customizations

10.1 - Common Errors

Solutions to frequently encountered errors in YMCA Website Services.

This guide covers the most common errors you’ll encounter and how to fix them. Use Ctrl+F / Cmd+F to search for your specific error message.


White Screen of Death (WSOD)

Symptoms: Blank white page with no content or error messages.

Causes & Solutions:

  1. PHP Fatal Error

    # Check PHP error logs
    tail -f /var/log/apache2/error.log
    # Or
    drush watchdog:tail
    
  2. Memory Limit Exceeded

    # In settings.php or settings.local.php
    ini_set('memory_limit', '512M');
    
  3. Module Conflict

    # Disable recently installed modules
    drush pmu module_name -y
    drush cr
    
  4. Corrupted Cache

    # Clear all caches
    drush cr
    # Or via database if Drush fails
    drush sql-cli
    TRUNCATE TABLE cache_bootstrap;
    TRUNCATE TABLE cache_render;
    exit
    

Prevention:

  • Enable error reporting in development: $config['system.logging']['error_level'] = 'verbose';
  • Always test module updates on staging first

Permission Denied Errors

Error: Warning: file_put_contents(sites/default/files/...): failed to open stream: Permission denied

Solutions:

  1. Fix File Permissions

    # Set correct ownership (replace www-data with your web server user)
    sudo chown -R www-data:www-data sites/default/files
    
    # Set correct permissions
    sudo chmod -R 755 sites/default/files
    
  2. SELinux Issues (CentOS/RHEL)

    # Check SELinux status
    getenforce
    
    # Set correct SELinux context
    sudo chcon -R -t httpd_sys_rw_content_t sites/default/files
    
  3. Temporary Fix (Development Only)

    chmod 777 sites/default/files
    # NEVER use 777 in production!
    

Composer Dependency Conflicts

Error: Your requirements could not be resolved to an installable set of packages.

Solutions:

  1. Update Composer

    composer self-update
    composer --version  # Should be 2.0+
    
  2. Clear Composer Cache

    composer clear-cache
    composer update --no-cache
    
  3. Check PHP Version

    php -v  # Should match composer.json requirements
    
  4. Use Specific Versions

    # Instead of ymca/website-services:*
    composer require ymca/website-services:^11.1
    
  5. Diagnose Conflicts

    composer why-not ymca/website-services 11.1.0
    composer prohibits ymca/website-services 11.1.0
    

Database Update Failures

Error: Exception: ... in update hook

Solutions:

  1. Backup First!

    drush sql-dump > backup-$(date +%Y%m%d).sql
    
  2. Run in Safe Mode

    # Skip problematic hooks
    drush updb --entity-updates -y
    
  3. Check Error Logs

    drush watchdog:show --severity=Error
    
  4. Manual Fix

    # Mark update as complete manually (last resort)
    drush sql-cli
    INSERT INTO key_value (collection, name, value)
    VALUES ('system.schema', 'module_name', 's:4:"9001";');
    exit
    

Need more help? See Debugging Techniques or Get Support.

10.2 - Performance Issues

Diagnose and fix slow page loads, memory issues, and performance bottlenecks.

Having performance problems? This guide will help you diagnose and optimize your YMCA website.


Slow Page Loads

Symptoms: Pages take 5+ seconds to load.

Diagnosis:

  1. Check Caching

    • Admin: /admin/config/development/performance
    • Ensure “Aggregate CSS files” is checked
    • Ensure “Aggregate JavaScript files” is checked
    • Enable page caching for anonymous users
  2. Install Devel Module (Development only)

    composer require drupal/devel --dev
    drush en devel webprofiler -y
    
    • Visit any page to see performance metrics
    • Check for slow queries
  3. Database Performance

    # Check slow queries
    drush sql-query "SHOW FULL PROCESSLIST;"
    
    # Check database size
    drush sql-query "SELECT
      table_name AS 'Table',
      ROUND(((data_length + index_length) / 1024 / 1024), 2) AS 'Size (MB)'
    FROM information_schema.TABLES
    WHERE table_schema = 'DATABASE_NAME'
    ORDER BY (data_length + index_length) DESC;"
    

Solutions:

  1. Enable Redis/Memcache

    composer require drupal/redis
    drush en redis -y
    
    // In settings.php
    $settings['redis.connection']['interface'] = 'PhpRedis';
    $settings['redis.connection']['host'] = '127.0.0.1';
    $settings['cache']['default'] = 'cache.backend.redis';
    
  2. Optimize Images

    • Use WebP format where possible
    • Enable image optimization: /admin/config/media/image-styles
  3. Clean Up Database

    # Truncate watchdog logs
    drush sql-query "TRUNCATE watchdog;"
    
    # Remove old revisions
    drush entity:delete node --bundle=article --chunks=10
    

High Memory Usage

Error: PHP Fatal error: Allowed memory size of ... bytes exhausted

Solutions:

  1. Increase PHP Memory Limit

    // In settings.php
    ini_set('memory_limit', '512M');
    
  2. For Composer

    php -d memory_limit=-1 /usr/local/bin/composer update
    
  3. Optimize Composer Autoloader

    composer dump-autoload --optimize
    

Need more help? See Debugging Techniques or Get Support.

10.3 - Layout Builder Issues

Fix common problems with Layout Builder blocks, sections, and media uploads.

Having trouble with Layout Builder? Find solutions to common issues below.


Blocks Not Appearing

Problem: Added blocks don’t show up on the page.

Solutions:

  1. Check Block Placement

    • Ensure block is in a visible region
    • Check block’s visibility settings
  2. Clear Cache

    drush cr
    
  3. Check Permissions

    • Visit /admin/people/permissions
    • Ensure role has “Create and edit custom blocks”
  4. Check Block Configuration

    • Inline blocks must be configured before adding
    • Some blocks require additional fields

Section Styling Not Working

Problem: Section background colors or styles don’t apply.

Solutions:

  1. Clear Cache

    drush cr
    
  2. Check Theme Compatibility

    • Small Y template required for some styles
    • Some styles only work with specific themes
  3. Rebuild CSS

    drush cron
    drush cr
    

Media Upload Failures

Error: The file could not be uploaded.

Solutions:

  1. Check File Permissions

    chmod -R 755 sites/default/files
    chown -R www-data:www-data sites/default/files
    
  2. Check File Size Limits

    // In php.ini or .htaccess
    upload_max_filesize = 64M
    post_max_size = 64M
    
  3. Check Disk Space

    df -h
    
  4. Check Allowed File Extensions

    • Visit /admin/config/media/file-system
    • Add extension if needed (e.g., .webp)

Need more help? Browse the Block Library or Get Support.

10.4 - Upgrade Problems

Resolve issues during Drupal core or module upgrades.

Encountering problems during an upgrade? Find solutions to common upgrade issues below.


Version Compatibility Issues

Error: ymca/website-services requires drupal/core ^11.0 but drupal/core 10.x.x is installed

Solutions:

  1. Check Current Versions

    drush status
    composer show | grep drupal/core
    
  2. Follow Official Upgrade Path

  3. Use Upgrade Status Module

    composer require drupal/upgrade_status --dev
    drush en upgrade_status -y
    
    • Visit /admin/reports/upgrade-status

Module Conflicts After Upgrade

Problem: Site broken after upgrading modules.

Solutions:

  1. Restore from Backup

    drush sql-drop
    drush sql-cli < backup-20250101.sql
    
  2. Update One Module at a Time

    composer update drupal/module_name
    drush updb -y
    drush cr
    # Test thoroughly before updating next module
    
  3. Check Incompatible Modules

    drush pm:list --status=enabled
    # Check drupal.org for Drupal 11 compatibility
    

Configuration Import Failures

Error: Entities exist of type ... These entities need to be deleted before importing.

Solutions:

  1. Import with Force

    drush cim -y --partial
    
  2. Delete Conflicting Entities

    drush entity:delete view view_name
    drush cim -y
    
  3. Sync Configuration Manually

    • Visit /admin/config/development/configuration
    • Review and import specific changes

Need more help? See Debugging Techniques or Get Support.

10.5 - Activity Finder Issues

Troubleshoot Activity Finder API connections and program display problems.

Having trouble with Activity Finder? Find solutions to common integration issues below.


API Connection Failures

Error: Could not connect to Daxko/ActiveNet/Personify API

Solutions:

  1. Check API Credentials

    • Visit /admin/openy/integrations/activity-finder
    • Re-enter API key and secret
    • Test connection
  2. Check Firewall

    # Test API endpoint
    curl -I https://api.daxko.com/
    
  3. Check Logs

    drush watchdog:show --severity=Error | grep activity
    
  4. Contact CRM Provider

    • Verify API credentials with Daxko/ActiveNet/Personify
    • Check for API endpoint changes

Programs Not Displaying

Problem: Activity Finder shows no programs.

Solutions:

  1. Check Mapping

    • Visit /admin/openy/integrations/activity-finder/mapping
    • Ensure categories are mapped
  2. Clear Cache

    drush cr
    drush cron
    
  3. Check API Response

    drush watchdog:tail
    # Visit Activity Finder page and watch for errors
    

Need more help? See Debugging Techniques or Get Support.

10.6 - Debugging Techniques

Essential debugging tools and techniques for diagnosing issues.

Learn how to effectively debug issues in YMCA Website Services using these essential techniques and tools.


Enable Verbose Error Messages

// In settings.local.php (development only)
$config['system.logging']['error_level'] = 'verbose';

Use Drush for Debugging

# Watch logs in real-time
drush watchdog:tail

# Show recent errors
drush watchdog:show --severity=Error --count=20

# Check site status
drush status

# Check for security updates
drush pm:security

Browser Developer Tools

  1. Network Tab - Check for failed requests
  2. Console Tab - Check for JavaScript errors
  3. Application Tab - Check cookies and local storage

Enable Twig Debugging

# In sites/default/services.yml
parameters:
  twig.config:
    debug: true
    auto_reload: true
    cache: false

Then clear cache: drush cr


Need more help? See specific error categories or Get Support.

11 - Content Structure

Welcome to the Content Structure documentation.

Here you can find all needed technical descriptions about content types can be used by YMCA Website Services site builders. The YMCA Website Services core team decided to finalize and stick to specifictions of fields, created naming conventions aimed to help developers to maintain and upgrade their sites alongside YMCA Website Services development timeline.

11.1 - Blocks

11.1.1 - Basic

A simple block with a description.

Fields

NameMachine nameRequiredDescription
Contentfield_block_contentYesWYSIWYG field without summary.

11.1.2 - Block Menu

Implements custom block type with a links.

Fields

NameMachine nameRequiredDescription
Menu Linksfield_menu_block_linksYesThe Menu Links.
Colorfield_menu_block_colorYesSelect colors for menu block background gradient.
Text colorfield_menu_block_text_colorYesSelect text color of the menu block.

11.1.3 - Branch Amenities

A block with amenities list of the current branch.

Fields

NameMachine nameRequiredDescription
Branch amenitiesfield_branch_amYesUses only Custom Formatter to display a list of amenities within Paragraph block.
Linkfield_sb_linkNoLink to display at the bottom of the block.
Titlefield_sb_titleNoTitle to display at top of block.
Icon classfield_icon_classNoProvide a “Font Awesome” icon name, e.g. flag, car, info. Overrides image icon.

11.1.4 - Custom Simple

A simple block with a body.

Fields

NameMachine nameRequiredDescription
Iconfield_iconNoIcon for block.
Icon classfield_icon_classNoProvide a “Font Awesome” icon name, e.g. flag, car, info. Overrides image icon.
Bodyfield_sb_bodyNoEnter body text.
Linkfield_sb_linkNoAdd link to the block.
Titlefield_sb_titleNoTitle to display at top of block.

11.1.5 - Flexible

A block with amenities list of the current branch.

Fields

NameMachine nameRequiredDescription
Node referencefield_node_refYesProvide reference to Node.

11.2 - Content Types

Welcome to the YMCA Website Services Content Types documentation

In terms of YMCA Website Services - content types are bundles of node entity of the Drupal Framework. You can find a much more low level documentation at drupal.org.

YMCA Website Services has a bunch of content types shipped for the convenience of usage the resulting site. We are not limiting amount of content types, could be added by developers, so the list is not final. The only rule we are trying to follow is to cover shipped list of content types by YMCA Website Services upgrade path.

11.2.1 - Activity

Activity content type is used for adding Activities on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the activity item.
Program Subcategoryfield_activity_categoryYesA reference field for selecting the program subcategory.
Content AreaField group
Descriptionfield_activity_descriptionNoTextarea for the description/body with WYSIWYG, without summary.

URL pattern

Content type is using following pattern: /programs/[node:field_activity_category:entity:field_category_program:entity:title]/[node:field_activity_category:entity:title]/[node:title]

11.2.2 - Alert

Alert content type is used for adding alerts on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the activity item.
Background colorfield_alert_colorYesReference field for choosing the term from “Color” vocabulary.
Text colorfield_alert_text_colorYesReference field for choosing the term from “Color” vocabulary.
Icon colorfield_alert_icon_colorNoReference field for choosing the term from “Color” vocabulary. Description for field: “Leave empty to hide icon.”
Placementfield_alert_placeYesSelect list field (singular) for choosing place:
  • Header
  • Footer
Descriptionfield_alert_descriptionYesTextarea for the description/body with WYSIWYG, without summary.
Linkfield_alert_linkNoInternal or external link.
Referencefield_alert_belongsNoEntity reference with autocomplete to any node. Description for field: “Reference to node (branch, camp, landing page and etc.), where local alert will be displayed.”

URL pattern

Content type is using following pattern: /alert/[node:title].

11.2.3 - Article

Article content type is used for adding blog posts, news items, and press releases on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the article item.
Sub-titledefault??NoSub-title of the article item
Locationsfield_article_locationYesReference field to branch and camp nodes. Multiple Values.
Categoryfield_article_categoryNoReference field for choosing the term from “Blog Category” vocabulary. Multiple Values.
Meta Tagsfield_meta_tagsNoA meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Typefield_article_typeYesSelect list field with multiple options for choosing article type:
  • News Item (default)
  • Blog Post
  • Press Release
Imagefield_article_imageNoImage field for the Blog item. Entity reference to Media bundle.
BodybodyNoTextarea for the description/body with WYSIWYG, without summary.
Contentfield_contentNoFilter list of available layout builder components
Related Contentfield_article_relatedNoReference field for choosing related Article nodes. Multiple Values.

URL pattern

Content type is using following pattern: /blog/[node:title] /news/[node:title] /press-release/[node:title]

11.2.4 - Blog

Blog Post content type is used for adding blog posts on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the blog item.
Locationsfield_blog_locationYesReference field to branch and camp nodes. Multiple Values.
Categoryfield_blog_categoryNoReference field for choosing the term from “Blog Category” vocabulary. Multiple Values.
Meta Tagsfield_meta_tagsNoA meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
StylesField group
Stylefield_blog_styleYesSelect list field with multiple options for choosing style:
  • Story Card
  • Photo Card
  • News Card (default)
  • Color Card
Background colorfield_blog_colorNoteaser background color (used when Color Card style is selected.)
Text colorfield_blog_text_colorNoteaser text color (used when Color Card style is selected.)
Content AreaField group
Imagefield_blog_imageNoImage field for the Blog item. Entity reference to Media bundle.
Descriptionfield_blog_descriptionNoTextarea for the description/body with WYSIWYG, without summary.
Contentfield_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Sidebar AreaField group
Related contentfield_blog_relatedNoReference field for choosing related Blog nodes. Multiple Values.
Contentfield_sidebar_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.

URL pattern

Content type is using following pattern: /blog/[node:title]

11.2.5 - Branch

Branch content type is used for adding Branches on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the branch item.
Neighborhoodfield_location_areaNoA taxonomy reference field using the “Area” vocabulary.
Coming Soonfield_location_stateNoA checkbox field to determine branches in development.
Temporary URLfield_location_temp_urlNoA link field to provide a temporary page URL (a blog post, or something else) if the branch is coming soon.
Meta Tagsfield_meta_tagsNoA meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
ContactField group
Addressfield_location_addressYesAn address field that will provide the ability to add details about the locations. Details to be completed:
  • Address
  • City
  • State
  • Zip Code
Branch Coordinatesfield_location_coordinatesNoInput for providing the latitude and longitude information.
Phonefield_location_phoneYesInput for providing the phone information.
Faxfield_location_faxNoInput for providing the fax information.
Emailfield_location_emailNoInput for providing the email information.
Directionsfield_location_directionsNoA link field for adding the directions link.
Branch HoursField group
Branch Hoursfield_branch_hoursParagraphParagraph to indicate the branch hours.
Day of the weekfield_branch_hours_dayNoSelect list with following values:
  • sunday|Sunday
  • monday|Monday
  • tuesday|Tuesday
  • wednesday|Wednesday
  • thursday|Thursday
  • friday|Friday
  • saturday|Saturday
Start/End Timefield_branch_hours_timeNoTextfield with description “e.g. 9am - 5pm, closed.”
Header AreaField group
Contentfield_header_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Content AreaField group
Contentfield_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Bottom AreaField group
Contentfield_bottom_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.

URL pattern

Content type is using following pattern: /locations/[node:title]

11.2.6 - Camp

Camp content type is used for adding Camps on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the camp item.
Menu linksfield_camp_menu_linksYesLink field with multiple values, that should have the Title and Link field. Based on it, we will complete the Camp Menu.
Meta Tagsfield_meta_tagsNoA meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
ContactField group
Addressfield_location_addressYesAn address field that will provide the ability to add details about the locations. Details to be completed:
  • Address
  • City
  • State
  • Zip Code
Camp Coordinatesfield_location_coordinatesNoInput for providing the latitude and longitude information.
Phonefield_location_phoneYesInput for providing the phone information.
Faxfield_location_faxNoInput for providing the fax information.
Emailfield_location_emailNoInput for providing the email information.
Directionsfield_location_directionsNoA link field for adding the directions link.
Header AreaField group
Contentfield_header_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Content AreaField group
Contentfield_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Bottom AreaField group
Contentfield_bottom_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.

URL pattern

Content type is using following pattern: /camps/[node:title]

11.2.7 - Class

Class content type is used for adding Classes on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the class item.
Activityfield_class_activityNoA reference field for selecting the class.
Meta Tagsfield_meta_tagsNoA meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Header AreaField group
Contentfield_header_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Content AreaField group
Descriptionfield_class_descriptionNoTextarea for the description/body with WYSIWYG, without summary.
Contentfield_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Sidebar AreaField group
Contentfield_sidebar_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Bottom AreaField group
Contentfield_bottom_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.

URL pattern

Content type is using following pattern: /programs/[node:field_class_activity:entity:field_activity_category:entity:field_category_program:entity:title]/[node:field_class_activity:entity:field_activity_category:entity:title]/[node:title]/class-times

11.2.8 - Event

Event content type is used for adding events on the site.

Fields

LabelMachine NameRequiredDescriptionField SettingsNotes
Titledrupal’s defaultYesTitle of the event item.
Sub-titledefault??NoSub-title of the event item.plain text
Locationsfield_event_locationYesReference field to branch and camp nodes. Multiple Values.Address for event; can be either a branch or non-branch location.
Categoryfield_event_categoryNoReference field for choosing the term from “Event Category” vocabulary. Multiple Values.
Meta Tagsfield_meta_tagsNoA meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Imagefield_event_imageNoImage field for the Event item. Entity reference to Media bundle.media
Datefield_event_dateYesThis will use Drupal date/time fields.
Add to Calendarfield_add_to_calendar_linkNolink
BodybodyNoTextarea for the description/body with WYSIWYG, without summary.
Contentfield_contentNoFilter list of available layout builder components
Related Contentfield_event_relatedNoReference field for choosing related Event nodes. Multiple Values.

URL pattern

Content type is using following pattern: /event/[node:title]

11.2.9 - Facility

Facility content type is used for adding facilities on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the facility item.
Neighborhoodfield_location_areaNoA taxonomy reference field using the Area Vocabulary(area).
Typefield_facility_typeNoA taxonomy reference field using the “Facility Type” vocabulary.
Facility Branchfield_facility_locNoA entity reference field to reference the related Branch node.
Meta Tagsfield_meta_tagsNoA meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
ContactField group
Addressfield_location_addressNoAn address field that will provide the ability to add details about the locations. Details to be completed:
  • Address
  • City
  • State
  • Zip Code
Facility Coordinatesfield_location_coordinatesNoInput for providing the latitude and longitude information.
Phonefield_location_phoneYesInput for providing the phone information.
Faxfield_location_faxNoInput for providing the fax information.
Emailfield_location_emailNoInput for providing the email information.
Directionsfield_location_directionsNoA link field for adding the directions link.
Facility Hoursfield_branch_hoursNoThe facility hours
Facility Holiday Hoursfield_branch_holiday_hoursNoAny special holiday hours for the facility.
Content AreaField group
Contentfield_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Sidebar AreaField group
Contentfield_sidebar_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.

URL pattern

Content type is using following pattern: /facility/[node:title]

11.2.10 - Landing Page

Landing Page content type is used for adding landing pages on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the landing page item.
Layoutfield_lp_layoutYesSelect list with the options:
  • one_column_clean|One Column - Full width
  • one_column|One Column
  • two_column|Two Columns
  • two_column_fixed|Two Columns with fixed sidebar (sticky at the top)
Meta Tagsfield_meta_tagsNoA meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Header AreaField group
Contentfield_header_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Content AreaField group
Contentfield_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Sidebar AreaField group
Contentfield_sidebar_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Bottom AreaField group
Contentfield_bottom_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.

URL pattern

Content type is using following pattern: [node:title]

11.2.11 - Landing Page (Layout Builder)

Landing Page content type is used to add Landing Pages to your website using Layout Builder widgets.

This page is managed with Layout Builder. You may want to uncheck “Publish Content” before creating a page, use the “Layout” tab to build the content, then Publish when the page is complete. See our User Guide for help.

Fields

LabelMachine NameRequiredDescriptionField SettingsNotes
TitletitleyesTitle of Landing Page
MetadataField group
Meta descriptionfield_meta_descriptionnoShort text used for metatags and cardsText (plain, long)
Meta imagefield_meta_imagenoMedia image reference for use in metatags and cardsEntity reference (Media image)
Meta tagsfield_meta_tagsnoProvided by Metatag module

URL pattern

Content type is using following pattern: [node:title]

11.2.12 - Membership

Membership content type is used for adding membership on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the membership item.
Descriptionfield_mbrshp_descriptionYesTextarea for the description/body with WYSIWYG, without summary.
Imagefield_mbrshp_imageYesMedia field to upload the image.
Membership infofield_mbrshp_infoParagraphParagraph to indicate the location where the membership is available and the URL.
Locationfield_mbrshp_locationNoSelect list with locations (branches). Single value.
Linkfield_mbrshp_linkNoLink field to provide the membership redirect URL.
Join Feefield_mbrshp_join_feeNoDollar value for how much someone has to pay to join.
Monthly Ratefield_mbrshp_monthly_rateNoDollar value for the monthly fee of the membership.

URL pattern

Content type is using following pattern: /membership/[node:title]

11.2.13 - News

News Post content type is used for adding news posts on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the news item.
Locationsfield_news_locationYesReference field to branch and camp nodes. Multiple Values.
Categoryfield_news_categoryNoReference field for choosing the term from “News Category” vocabulary. Multiple Values.
Meta Tagsfield_meta_tagsNoA meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Content AreaField group
Imagefield_news_imageNoImage field for the News item. Entity reference to Media bundle.
Descriptionfield_news_descriptionNoTextarea for the description/body with WYSIWYG, without summary.
Contentfield_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Sidebar AreaField group
Related contentfield_news_relatedNoReference field for choosing related News nodes. Multiple Values.
Contentfield_sidebar_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.

URL pattern

Content type is using following pattern: /news/[node:title]

11.2.14 - Program

Program content type is used for adding Programs on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the program item.
Meta Tagsfield_meta_tagsNoA meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Header AreaField group
Iconfield_program_iconNoA image field, supporting .svg for uploading the program icon.
Imagefield_program_imageNoA image field, for uploading the program image.
Colorfield_program_colorNoReference field for choosing the term from “Color” vocabulary.
Contentfield_header_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types. If this field is not empty, then the image and icon are not displayed on the page.
Content AreaField group
Descriptionfield_program_descriptionNoTextarea for the description/body with WYSIWYG, without summary.
Contentfield_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Sidebar AreaField group
Contentfield_sidebar_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.

URL pattern

Content type is using following pattern: /programs/[node:title]

11.2.15 - Program Subcategory

Program Subcategory content type is used for adding program subcategories on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the program subcategory item.
Programfield_category_programYesA reference field for selecting the program.
Meta Tagsfield_meta_tagsNoA meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Header AreaField group
Imagefield_category_imageNoA image field, for uploading the category image.
Colorfield_category_colorNoReference field for choosing the term from “Color” vocabulary.
Contentfield_header_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Content AreaField group
Descriptionfield_category_descriptionNoTextarea for the description/body with WYSIWYG, without summary.
Contentfield_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Sidebar AreaField group
Contentfield_sidebar_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Bottom AreaField group
Contentfield_bottom_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.

URL pattern

Content type is using following pattern: /programs/[node:field_category_program:entity:title]/[node:title]

11.2.16 - Promotion

Promotions are timed pieces of content that allow content editors the flexibility to create a single item that can be placed in multiple locations on the site, without having to duplicate or manage content in multiple locations.

Fields

NameMachine nameField typeRequired?
Titletitleyes
Subtitlefield_subtitleText (plain)
CTA / linkfield_linkLinkno
Descriptionfield_promo_descriptionText (formatted, long)no
Imagefield_promo_mediaEntity referenceyes
Pagesfield_promo_visibility_pagesText (plain, long)
Promotion Categoryfield_promo_categoryEntity referenceno
Promotion Priorityfield_promo_priorityList (text)yes
Promotion visibility statefield_promo_visibility_stateList (text)yes

URL pattern

No URL pattern. This content should not be visible on its own.

11.2.17 - Session

Session content type is used for adding Sessions on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the session item.
Classfield_session_classYesA reference field for selecting the program subcategory.
Session InfoField group--
Descriptionfield_session_descriptionNoTextarea for the description/body with WYSIWYG, without summary.
Genderfield_session_genderNoSelect List with Gender options: Coed, Male, Female.
Online registrationfield_session_onlineNoBoolean field that determines if the Register Now button/link gets displayed.
Ticket requiredfield_session_ticketNoCheckbox field to indicate that there is a ticket required.
Min Agefield_session_min_ageNoInput field for adding the min age.
Max Agefield_session_max_ageNoInput field for adding the max age.
Registration linkfield_session_reg_linkNoA link field with the Registration link Value.
MembershipField group--
In membershipfield_session_in_mbrshNoBoolean field that helps determine if the session is included into membership package.
Member pricefield_session_mbr_priceNoInput with with the price information for members.
Non Member Pricefield_session_nmbr_priceNoInput with with the price information for members.
LocationField group--
Locationfield_session_locationYesA reference field for selecting the branch or camp.
Physical Locationfield_session_plocationNoA reference field for selecting the facility.
TimeField group--
Exclusionsfield_session_exclusionsNoA date field that identifies dates that would normally have an instance of the session but won’t. Needs to be able to have multiple exclusions. Supports multiple values. Should be handled by a single date field with ’end date’ option enabled. Its widget should be adjust to not to show period end date, but show period end time (to keep period start/end date equal).
Timefield_session_timeParagraphSession schedule.
Date & Timefield_session_time_dateNoThis will use Drupal date/time fields & should be a single date field with ’end date’ and ’end time’ option enabled.
Daysfield_session_time_daysNoCheckboxes with following values:
  • sunday|Sunday
  • monday|Monday
  • tuesday|Tuesday
  • wednesday|Wednesday
  • thursday|Thursday
  • friday|Friday
  • saturday|Saturday
Should support multiple values.

URL pattern

No URL pattern. Eventually this content type shouldn’t be available for end users.

11.2.18 - Social Post

Social Post content type is used for adding Social Posts on the site. Social Posts are grabbed from social networks.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the program item.
IDfield_idYesPost Id in social network. This is system field. Is used by post fetcher.
Imagefield_imageNoImage field for saving post image. Can save jpg and png formats.
Linkfield_linknoContains link to original post in social network.
Platformfield_platformnoThe name of platform where post was imported from.
Postfield_postyesText of post.
Postedfield_postednoDate when post was posted in social network

URL pattern

Content type is using following pattern: /social_post/[node:title]

11.3 - Layout Builder

These custom block types exist to support page building with Layout Builder.

Global Fields

These fields are reused across many of the below components.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Section headingfield_section_headingText (plain)no1H2
Section subheadingfield_section_subheadingText (plain, long)no1H3

Accordion

Expandable pairs of question/answer or header/section fields.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Accordion itemfield_block_itemEntity referencenounlimitedBundle: accordion_item
FAQ?field_is_faqBooleannoIf this section contains Frequently Asked Questions, check this box to output them as “structured data”…

Accordion Item

  • Machine name: accordion_item
LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Headingfield_titleText (plain)yes1H4
BodybodyText (formatted, long, with summary)yes1WYSIWYG

Branch Amenities

Display of all amenities available at a branch location.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Section heading(inherit)H2
Section subheading(inherit)H3
Amenity nameText (plain)Entity referenceyesunlimitedTaxonomy

Cards

Flexible card-style components that allow up to 4 cards to display across a page depending on the chosen layout.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Section heading(inherit)H2
Section subheading(inherit)H3
Section linkfield_ctaLinkno1
# of columnsfield_columnsList (text)yes1
Card itemsfield_block_itemEntity referenceno4Bundle: card_item

Card Item

Machine name: card_item

The Card item block is referenced by the Cards block.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Headingfield_titleText (plain)yes1H4
Imagefield_mediaEntity referenceno1
Topic tagfield_topic_tagEntity referenceno1Bundle: blog_category, news_category
Descriptionfield_bodyText (plain, long)no1
Linkfield_ctaLinkno1

A full-width display with multiple sets of a header, description, and call to action overlaid on top of an image.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Section heading(inherit)H2
Section subheading(inherit)H3
Carousel itemsfield_block_itemEntity referenceno6Bundle: carousel_item

Machine name: carousel_item

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Headingfield_titleText (plain)no1H4
Imagefield_mediaEntity referenceyes1
Descriptionfield_descriptionText (formatted, long)no1
Linkfield_ctaLinkno1

Code

  • Machine name: ws_code_block
  • Project: ws_code_block
  • Designs: This block provides no additional presentation outside of the embedded content.

Embed unfiltered HTML code in a page.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Codefield_codeText (formatted, long)yes1Text format: “Code”

Grid CTA

Sets of content with a headline, description, and link displayed in 2 to 4-item wide rows, with the option to include icons or images.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Section heading(inherit)H2
Section subheading(inherit)H3
Grid CTA section linkfield_section_cta_linkLinkno1A link button to be displayed below the grid content
# of columnsfield_columnsList (text)yes1Allows 2-4 columns, defaults to 4.
Grid itemfield_block_itemEntity Referenceyes4Bundle: grid_item

Grid Item

Machine name: grid_item

The Grid Item block is referenced by the Grid CTA component.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Headingfield_titleText (plain)no1H4
Descriptionfield_descriptionText (formatted, long)no1
Mediafield_mediaEntity referenceno1
Linkfield_ctaLinkno1

Hero Banner

A full-width, almost full-height display with a header, description, and call to action overlaid on an image.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Headingfield_headingText (plain)yes1H2
Descriptionfield_descriptionText (formatted, long)no1
Mediafield_mediaEntity referenceno1Bundle: Image, Local Video, Video
Linkfield_linkLinkno1

Partners

List of multiple partner / sponsor logos.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Section heading(inherit)H2
Section subheading(inherit)H3
Partner itemsfield_partner_itemsEntity reference revisionsnounlimited?Bundle: lb_partner_item

Partner Item

Machine Name: lb_partner_item

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Headingfield_item_headingText (plain)YesH4
Imagefield_item_imageEntity referenceYes

Ping-pong

Usually paired sets of full-width page components that include media, header, description, and call to action arranged horizontally.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Section heading(inherit)H2
Section subheading(inherit)H3
Headingfield_item_headingText (plain)no1H4
Descriptionfield_item_descriptionText (formatted, long)no1WYSIWYG
Linkfield_item_linkLinkno2The first will use the primary style and the second, secondary.
Imagefield_item_imageEntity referenceno1
Image positionfield_item_image_positionList (text)yes1Places the image on this side of the page in the full-width display. Image will stack above text at narrow widths.

Promo Card

A title, headline, description, and link that usually display in the right or left sidebar.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Titlefield_titleText (plain)yes1
BodybodyText (formatted, long, with summary)no1
Imagefield_imageEntity referenceno1Bundle: Image
Linkfield_linkLinkno1

Component for displaying related articles within a page.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Section heading(inherit)H2
Section subheading(inherit)H3

Component for displaying related events within a page.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Section heading(inherit)H2
Section subheading(inherit)H3

Simple Content

Allows users to be able to view responsive tables within a page.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Section heading(inherit)H2
Section subheading(inherit)H3
BodybodyText (formatted, long, with summary)no1Allows for responsive tables to be placed in the body.

Simple Menu

A simple 1-level sidebar menu that can display in either the right or left sidebar area.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Iconfield_iconEntity referenceno1Bundle: Image
Linksfield_linksLinkyesunlimited

Staff

Displays simple staff member info cards with image, name, title, email

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Section heading(inherit)H2
Section subheading(inherit)H3
Staff itemsfield_staff_itemsEntity reference revisionsnounlimited?Bundle: lb_staff_item

Staff Item

Machine name: lb_staff_item

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Namefield_item_nameText (plain)Yes1H4
Imagefield_item_imageEntity referenceYes1If no image uploaded, utilize default
Job titlefield_item_job_titleText (plain)Yes1
Emailfield_item_emailText (formatted, mailto)Yes1Clicking on email should open users default email client

Statistics

Infographic-like display that highlights relevant statistics to users.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Section heading(inherit)H2
Section subheading(inherit)H3
# of columnsfield_columnsList (text)yes1
Section linkfield_ctaLinkno1
Statistics itemfield_block_itemEntity referencenounlimitedBundle: statistics_item

Statistics Item

Machine name: statistics_item

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Number valuefield_subtitleText (plain)yes1
Descriptionfield_descriptionText (plain)no1

Tabs

Gives users the ability to switch page views by selecting tabs across the top of the page instead of having to navigate to a new page.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Section heading(inherit)H2
Section subheading(inherit)H3
Tab itemfield_block_itemEntity referencenounlimitedBundle: tab_item

Tab Item

Machine name: tab_item

The Tab Item block is referenced by the Tabs block.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Headingfield_headingText (plain)yes1H4
Bodyfield_descriptionText (formatted, long)no1WYSIWYG

Testimonials

Display of short testimonials or quotes from Y members.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Section heading(inherit)H2
Section subheading(inherit)H3
Testimonial itemsfield_testimonial_itemsEntity reference revisionsno4Bundle: lb_testimonial_item

Testimonial Item

Machine Name: lb_testimonial_item

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Namefield_item_nameText (plain)Yes1Firstname, LastnameH4
Imagefield_item_imageEntity referenceYes1If no image uploaded, utilize default
Quotefield_item_quoteText (plain)Yes1

Webform

Embed an existing webform on a page.

LabelMachine NameTypeRequiredCardinalityHelp textField SettingsNotes
Form title(inherit)
Form subtitle(inherit)
Webformfield_webformWebformyes1

11.4 - Media

11.4.1 - WYSIWYG View Modes

Listed view modes are available for embedding in WYSIWYG editor.

View Modes

NameMachine nameDescription
Fullembedded_fullThis view mode displays media asset with full width.
Halfembedded_halfThis view mode displays media asset with half width and uses alignment.
Linkembedded_linkThis view mode displays link to media asset.

Bundles details

Image

In “Full” and “Half” view modes image should be display in <img> tag with appropriate classes. Link - should lead to the original image with target=blank.

Video

In “Full” and “Half” view modes should be displayed embedded video with appropriate classes. Link - should lead to the original video with target=blank.

Document

In “Full” and “Half” view modes document should be displayed as iframe, where URL is URL to the document. Also it should have appropriate classes.

<iframe src="//docs.google.com/gview?url=URL&embedded=true" frameborder="0"></iframe>

Link - should lead to the original document with target=blank.

11.5 - Paragraphs

Welcome to YMCA Website Services Paragraphs.

Paragraphs are bits of content, components, from component based design ideology. In a scope of YMCA Website Services architecture paragraphs are based on Paragraphs Drupal module.

The core idea of paragraphs is to have a nice looking and behaving widget for adding predefined content blocks right in place, without referencing external entities. Keep in mind, that paragraphs are not reusable types. For having reusable type look for blocks or entities in terms of Drupal 8.

Paragraphs were created for making UX better and super convenient.

11.5.1 - 1 Column

This is a paragraph type that will be used for implements a paragraph with 1 column.

Fields

NameMachine nameRequiredDescriptionNotes
Line Abovefield_prfg_display_line_aboveNoDisplay a line above the column.
Columnfield_prgf_1c_columnNoEnter column body.
Paragraph Titlefield_prgf_1c_titleNoEnter title to display at the top of 1 column paragraph.
Paragraph Descriptionfield_prgf_1c_descriptionNoEnter description to display under the 1 column paragraph title.

11.5.2 - 2 Columns

This is a paragraph type that will be used for implements a paragraph with 2 column.

Fields

NameMachine nameRequiredDescriptionNotes
Line Abovefield_prfg_display_line_aboveNoDisplay a line above the column.
Left Columnfield_prgf_2c_leftNoEnter left column body.
Right Columnfield_prgf_2c_rightNoEnter right column body.

11.5.3 - 3 Columns

This is a paragraph type that will be used for implements a paragraph with 3 column.

Fields

NameMachine nameRequiredDescriptionNotes
Line Abovefield_prfg_display_line_aboveNoDisplay a line above the column.
Left Columnfield_prgf_3c_leftNoEnter left column body.
Center Columnfield_prgf_3c_centerNoEnter center column body.
Right Columnfield_prgf_3c_rightNoEnter right column body.
Paragraph Titlefield_prgf_titleNoEnter title to display at the top of 3 columns paragraph.

11.5.4 - 4 Columns

This is a paragraph type that will be used for implements a paragraph with 4 column.

Fields

NameMachine nameRequiredDescriptionNotes
Line Abovefield_prfg_display_line_aboveNoDisplay a line above the column.
First Columnfield_prgf_4c_1stNoEnter first column body.
Second Columnfield_prgf_4c_2ndNoEnter second column body.
Third Columnfield_prgf_4c_3rdNoEnter third column body.
Fourth Columnfield_prgf_4c_4thNoEnter forth column body.
Buttonfield_prgf_4c_buttonNoButton with link to display under 4 column paragraph
Paragraph Titlefield_prgf_titleNoEnter title to display at the top of 4 columns paragraph.
Paragraph Descriptionfield_prgf_descriptionNoEnter description to display under the 4 columns paragraph title.

11.5.5 - All Amenities

Provide a paragraph with a table view shows list of Branches.

Fields

NameMachine nameRequiredDescription
All amenitiesfield_field_prgf_amnts_viewNoPredefined reference to a view to display all amenities.
Titlefield_prgf_titleNoEnter title which is going to be displayed on top of the paragraph.

11.5.6 - Banner

This is a paragraph type that will be used for the banner content.

Fields

NameMachine nameRequiredDescriptionNotes
Headlinefield_prgf_headlineYesHeadline of the banner.Plain text, 255 characters
Colorfield_prgf_colorYesReference field for choosing the term from “Color” vocabulary.
Imagefield_prgf_imageNoEntityreference to media image. Single value.
Descriptionfield_prgf_descriptionNoWYSIWYG field without summary.
Linkfield_prgf_linkNoLink field that should store internal and external links.

11.5.7 - Blog Posts Listing

This is dynamic paragraph that renders the latest blog posts and utilizes exposed filters.

  • Location
  • Category
  • Text

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

11.5.8 - Branches Popup (All)

This is dynamic paragraph that renders the locations selection popup, based on current node.

Relates to:

  • [Schedule search list](Schedule search list.md)
  • [Classes Listing](Classes Listing.md)

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

11.5.9 - Branches Popup (Class)

This is dynamic paragraph that renders the locations selection popup, based on current node.

Relates to:

  • [Class Sessions](Class Sessions.md)
  • [Class Location](Class Location.md)

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

11.5.10 - Categories Listing

This is dynamic paragraph that renders all published categories according to current program page.

It uses sticky at the top option and order items based on published date(newest at the top).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

11.5.11 - Class Location

This is dynamic paragraph that renders the locations class location view mode, based on url query parameter location with a valid id.

Relates to [Branches Popup (Class)](Branches Popup (Class).md).

  • When the page has a location parameter the Branches Popup paragraph will make an “Edit” link on this paragraph visible. That link triggers the Branches Popup to open.

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

11.5.12 - Class Sessions

This is dynamic paragraph that renders the class session instances, based on url query parameter location with a valid id.

Relates to [Branches Popup (Class)](Branches Popup (Class).md).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

Displayed table

  • Location(should be displayed in case if &location=% not in the URL. Otherwise should be hiddedn.
  • Time + date
  • Registration(link)
  • Details
    • Online registration
    • Ticket required
    • In membership
  • Age Min - Max

Use cases

Use case 3: Class page WITHOUT location popup 3.1 Location in specified URL

  • When I open Class page WITHOUT location popup on page
  • And I have location=% in the URL
  • We skip cookie whether is empty or exist
  • Results should be filtered based on location from URL
  • In sidebar we should see location teaser

3.2 Preferred branch is empty and no location in URL or Preferred branch is selected and no location in URL

  • When I open Class page WITHOUT location popup on page
  • And I don’t have a preferred branch
  • Or I have a preferred branch
  • And I don’t have location=% in the URL
  • Results should contain all branches
  • In sidebar we should see “All locations….”

Use case 4: Class page WITH location popup 4.1 Location in specified URL

  • When I open Class page WITH location popup on page
  • And I have location=% in the URL
  • We skip cookie whether is empty or exist
  • Results should be filtered based on location from URL
  • In sidebar we should see location teaser
  • Location is sidebar should have “Edit” link that will open location popup

4.2 Preferred branch is empty and no location in URL or Preferred branch is selected and no location in URL

  • When I open Class page WITH location popup on page
  • And I don’t have a preferred branch
  • Or I have a preferred branch
  • And I don’t have location=% in the URL
  • Results should contain all branches
  • In sidebar we should see “All locations….”
  • Location popup should be shown (Unless only one location is associated with the class)

11.5.13 - Classes Listing

and classes listing filters

Classes Listing - should display all published classes grouped by activity.

Classes Listing Filters - this paragraph should disply filter form for “Classes Listing” with following fields:

  • Location
  • Program
  • Sub-program
  • Activity

Relates to [Branches Popup (All)](Branches Popup (All).md).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

Use cases

Use case 1: Classes Listing paragraph on a Program subcategory page WITHOUT location popup paragraph 1.1 Preferred branch is selected and no location in URL

  • When I open Program subcategory page with Classes Listing WITHOUT location popup on page
  • And I have a preferred branch
  • And I don’t have location=% in the URL
  • Filter by location should be predefined based on cookie
  • Results should be filtered

1.2 Preferred branch is empty and no location in URL

  • When I open Program subcategory page with Classes Listing WITHOUT location popup on page
  • And I don’t have a preferred branch
  • And I don’t have location=% in the URL
  • Filter by location should show “All”
  • Results should be shown for all branches

1.3 Location in specified URL

  • When I open Program subcategory page with Classes Listing WITHOUT location popup on page
  • And I have location=% in the URL
  • We skip cookie whether is empty or exist
  • Filter by location should show branch from URL
  • Results should be filtered

Use case 2: Classes Listing paragraph on a Program subcategory page WITH location popup 2.1 Preferred branch is selected and no location in URL

  • When I open Program subcategory page with Classes Listing WITH location popup on page
  • And I have a preferred branch
  • And I don’t have location=% in the URL
  • Location popup shouldn’t be shown
  • Filter by location should be predefined based on cookie
  • Results should be filtered

2.2 Preferred branch is empty and no location in URL

  • When I open Program subcategory page with Classes Listing WITH location popup on page
  • And I don’t have a preferred branch
  • And I don’t have location=% in the URL
  • Filter by location should show “All”
  • Results should be shown for all branches
  • Location popup should be shown

2.3 Location in specified URL

  • When I open Program subcategory page with Classes Listing WITH location popup on page
  • And I have location=% in the URL
  • We skip cookie whether is empty or exist
  • Location popup shouldn’t be shown
  • Filter by location should show branch from URL
  • Results should be filtered

11.5.14 - Code

Provide paragraph containing a Code block. Can be used to embed Youtube video for instance.

Fields

NameMachine nameRequiredDescription
Codefield_prgf_code_blockYesBlock reference to Code block. Create a new one or pick up an existed Code block.

11.5.15 - Featured Blog Posts

This is a paragraph type that will be used for the featured stories.

Fields

NameMachine nameRequiredDescription
Headlinefield_prgf_headlineNoHeadline of the banner.
Blog Postsfield_fblog_postsYesMultiple values. Reference field to Blog posts.

11.5.16 - Featured Content

This is a paragraph type that will be used for the featured content.

Fields

NameMachine nameRequiredDescription
Headlinefield_prgf_headlineNoHeadline of the featured content.
Descriptionfield_prgf_descriptionNoTextarea for the description/body with WYSIWYG, without summary.
Linkfield_prgf_linkNoLink field that supports internal and external URLs.
Stylefield_prgf_grid_styleYesSelect list with following values: 2:2 items per row, 3:3 items per row, 4:4 items per row
Column descriptionfield_prgf_fc_clm_descriptionNoMultiple values. Textarea for the column with WYSIWYG, without summary.

11.5.17 - Featured Highlights

Provides a paragraph containing blocks of specific types positioned as 2, 3 or 4 blocks per row.

Fields

NameMachine nameRequiredDescription
Titlefield_prgf_titleNoParagraph title.
Stylefield_prgf_grid_styleYesSelect list with following values: 2:2 items per row, 3:3 items per row, 4:4 items per row.
Featured Highlights blockfield_prgf_block_ref_unlimYesCreate a new one or pick up an existing block of given types: Featured Highlight Block, Basic Block, Simple Block, Date block.

11.5.18 - Featured News Posts

This is a paragraph type that will be used for the featured news.

Fields

NameMachine nameRequiredDescription
Headlinefield_prgf_headlineNoHeadline of the banner.
News Postsfield_fnews_postsYesMultiple values. Reference field to News posts.

11.5.19 - Gallery

This is a paragraph type that will be used for the gallery content.

Fields

NameMachine nameRequiredDescription
Headlinefield_prgf_headlineYesHeadline of the gallery.
Descriptionfield_prgf_descriptionNoWYSIWYG field without summary.
Linkfield_prgf_linkNoLink field that should store internal and external links.
Imagesfield_prgf_imagesNoEntityreference to media image. Multiple values.

11.5.20 - Grid columns

This is a paragraph type that will be used for field_grid_columns the in Grid Content paragraph.

Fields

NameMachine nameRequiredDescription
Descriptionfield_prgf_grid_clm_descriptionNoTextarea for the description/body with WYSIWYG, without summary.
Headlinefield_prgf_clm_headlineNoHeadline of the grid content.
Iconfield_prgf_clm_iconNoEntityreference to media asset. Should allow to upload svgs.
Icon classfield_prgf_clm_classNoInput field that allows to add the font-awesome icons needed. Description - “Provide a “Font Awesome” icon mane, e.g. flag, car, info. Overrides image Icon.”
Linkfield_prgf_clm_linkNoLink field that supports internal and external URLs.

11.5.21 - Grid Content

This is a paragraph type that will be used for the grid content stories.

Fields

NameMachine nameRequiredDescription
Stylefield_prgf_grid_styleYesSelect list with following values: 2:2 items per row, 3:3 items per row, 4:4 items per row
Contentfield_grid_columnsParagraphGrid columns
Descriptionfield_prgf_grid_clm_descriptionNoTextarea for the description/body with WYSIWYG, without summary.
Headlinefield_prgf_clm_headlineNoHeadline of the grid content.
Iconfield_prgf_clm_iconNoEntityreference to media asset. Should allow to upload svgs.
Icon classfield_prgf_clm_classNoInput field that allows to add the font-awesome icons needed. Description - “Provide a “Font Awesome” icon mane, e.g. flag, car, info. Overrides image Icon.”
Linkfield_prgf_clm_linkNoLink field that supports internal and external URLs.

11.5.22 - Group Schedules

This is dynamic paragraph that renders the group schedules from GroupEx Pro.

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and is configurable in form display.

11.5.23 - Latest Blog Posts

This is dynamic paragraph that renders the latest blog posts that are promoted to the front page.

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

11.5.24 - Latest Blog Posts (Branch)

This is dynamic paragraph that renders the latest blog posts associated with a branch.

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

11.5.25 - Latest Blog Posts (Camp)

This is dynamic paragraph that renders the latest blog posts associated with a camp.

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

11.5.26 - Latest News Posts

This is dynamic paragraph that renders the latest news posts that are promoted to the front page.

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

11.5.27 - Latest News Posts (Branch)

This is dynamic paragraph that renders the latest news posts associated with a branch.

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

11.5.28 - Latest News Posts (Camp)

This is dynamic paragraph that renders the latest news posts associated with a camp.

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

11.5.29 - Limited Time Offer

This Paragraph add limited time offer for Home Page based on Landing Page CT.

Fields

NameMachine nameRequiredDescription
Subtitlefield_lto_subtitleNoEnter subtitle for Limited time offer.
Linkfield_lto_linkNoAdd link for Latest time offer.
Titlefield_lto_titleNoEnter title for the Limited Time Offer.

11.5.30 - Location finder

This is paragraph that renders the Location finder block.

Location finder block contains locations views displays with branches, camps and facilities.

Fields

NameMachine nameRequiredDescription
Location finderfield_prgf_location_finderNoBlock reference to the location_finder block. Should have default value and should be hidden in form display.

11.5.31 - Location finder filters

This is paragraph that renders the Location finder map with pins and filters.

Fields

NameMachine nameRequiredDescription
Location finderfield_prgf_location_finderNoBlock reference to the location_finder block. Should have default value and should be hidden in form display.
Tags stylefield_prgf_lf_tags_styleYesTags style that will be used for map tags filter. Default - checkboxes. Second option is multiselect widget with checkboxes.

11.5.32 - Membership info

This is a paragraph type that will be used for field_mbrshp_info the in Membership CT.

Fields

NameMachine nameRequiredDescription
Locationfield_mbrshp_locationNoSelect list with locations (branches). Single value.
Linkfield_mbrshp_linkNoLink field to provide the membership redirect URL.
Join Feefield_mbrshp_join_feeNoDollar value for how much someone has to pay to join.
Monthly Ratefield_mbrshp_monthly_rateNoDollar value for the monthly fee of the membership.

11.5.33 - Microsites menu

Provide paragraph containing a microsites menu block.

Fields

NameMachine nameRequiredDescription
Menu Blockfield_prgf_block_refYesBlock reference to the view/block. Create a new one or pick up an existed menu block.
Hide Main Menufield_prgf_ms_menu_hide_menuNoWhether to hide or not the main website menu.

11.5.34 - News Posts Listing

This is dynamic paragraph that renders the latest news posts and utilizes exposed filters.

  • Location
  • Category
  • Text

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

11.5.35 - Program Registration (Daxko)

This is paragraph that renders the Programs Search Block.

Programs Search Block provides a form to search programs from Daxko.

Relates to: Daxko

Daxko & Program Registration (Daxko) configuration must be setup before the Program Registration paragraph will work.

Configuration setting at /admin/config/development/daxko/programs-search

Fields

NameMachine nameRequiredDescription
Program registration blockfield_prgf_reg_blockNoBlock reference to the programs_search_block block. Should have default value and should be hidden in form display.

11.5.36 - Promo Card

This is a Paragraph type that will be used for the Promo Cards.

Fields

NameMachine nameRequiredDescription
Titlefield_prgf_titleNoTitle of the Promo Card.
Headlinefield_prgf_headlineYesHeadline of the Promo Card.
Descriptionfield_prgf_descriptionNoWYSIWYG field without summary.
Linkfield_prgf_linkNoLink field that should store internal and external links.

11.5.37 - Schedule search form

This is dynamic paragraph that renders the session instances filters for [Schedule search list](Schedule search list.md).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

11.5.38 - Schedule search list

This is dynamic paragraph that renders the session instances, based on url parameters, and or filters from [Schedule search form](Schedule search form.md).

Relates to [Branches Popup (All)](Branches Popup (All).md).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

Use cases

Use case 1: Schedule search list paragraph on a page WITHOUT location popup paragraph 1.1 Preferred branch is selected and no location in URL

  • When I open Schedule search list page WITHOUT location popup on page
  • And I have a preferred branch
  • And I don’t have location=% in the URL
  • Filter by location should be predefined based on cookie
  • Results should be filtered

1.2 Preferred branch is empty and no location in URL

  • When I open Schedule search list page WITHOUT location popup on page
  • And I don’t have a preferred branch
  • And I don’t have location=% in the URL
  • Filter by location should show “All”
  • Results should be shown for all branches

1.3 Location in specified URL

  • When I open Schedule search list page WITHOUT location popup on page
  • And I have location=% in the URL
  • We skip cookie whether is empty or exist
  • Filter by location should show branch from URL
  • Results should be filtered

Use case 2: Schedule search list paragraph on a page WITH location popup 2.1 Preferred branch is selected and no location in URL

  • When I open Schedule search list page WITH location popup on page
  • And I have a preferred branch
  • And I don’t have location=% in the URL
  • Location popup shouldn’t be shown
  • Filter by location should be predefined based on cookie
  • Results should be filtered

2.2 Preferred branch is empty and no location in URL

  • When I open Schedule search list page WITH location popup on page
  • And I don’t have a preferred branch
  • And I don’t have location=% in the URL
  • Filter by location should show “All”
  • Results should be shown for all branches
  • Location popup should be shown

2.3 Location in specified URL

  • When I open Schedule search list page WITH location popup on page
  • And I have location=% in the URL
  • We skip cookie whether is empty or exist
  • Location popup shouldn’t be shown
  • Filter by location should show branch from URL
  • Results should be filtered

11.5.39 - Secondary Description and Sidebar

This is a Paragraph type that will be used for the paragraphs with left (secondary description) and right (sidebar) blocks.

Fields

NameMachine nameRequiredDescription
Left Columnfield_prgf_left_column_blockNoBlock reference to: Basic Block, Code Block, Date block or Simple Block. Create a new one or pick up an existed block.
Right Columnfield_prgf_right_column_blockNoBlock reference to: Basic Block, Code Block, Date block or Simple Block. Create a new one or pick up an existed block.

11.5.40 - Session Time

This is a paragraph type that will be used for field_session_time the in Session CT.

Fields

NameMachine nameRequiredDescription
Date & Timefield_session_time_dateNoThis will use Drupal date/time fields & should be a single date field with ’end date’ and ’end time’ option enabled.
Daysfield_session_time_daysNoCheckboxes with following values: Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday

11.5.41 - Simple Content

Simple Content is used for adding text to the pages.

Fields

NameMachine nameRequiredDescription
Contentfield_prgf_descriptionYesWYSIWYG field without summary.

11.5.42 - Small Banner

This is a paragraph type that will be used for the banner content.

Fields

NameMachine nameRequiredDescriptionNotes
Colorfield_prgf_colorYesReference field for choosing the term from “Color” vocabulary.
Headlinefield_prgf_headlineYesHeadline of the Small banner.Plain text, 255 characters
Imagefield_prgf_imageNoEntityreference to media image. Single value.
Descriptionfield_prgf_descriptionNoWYSIWYG field without summary.

11.5.43 - Social Post Listing

This is dynamic paragraph that renders the latest social posts that were imported from social networks.

Fields

NameMachine nameRequiredDescription
Titlefield_prgrf_sl_titleNoTitle for block with social posts.
Descriptionfield_prgrf_sl_descriptionNoDescription for block with social posts.
Social Listfield_prgrf_sl_blockNoReference to views block which select posts and show them as masorny grid.

11.5.44 - Social Share Icons

This is a paragraph type that will be used for the add social media share. See more How to configure AddThis

Fields

NameMachine nameRequiredDescriptionNotes

11.5.45 - Story Card

This is a Paragraph type that will be used for the Story Cards.

Fields

NameMachine nameRequiredDescription
Titlefield_prgf_titleNoTitle of the Story Card.
Headlinefield_prgf_headlineYesHeadline of the Story Card.
Linkfield_prgf_linkNoLink field that should store internal and external links.

11.5.46 - Teaser

This is a paragraph type that will be used for the teaser content.

Fields

NameMachine nameRequiredDescription
Titlefield_prgf_titleNoTitle of the Teaser.
Imagefield_prgf_imageNoEntityreference to media image. Single value.
Descriptionfield_prgf_descriptionNoWYSIWYG field without summary.
Linkfield_prgf_linkNoLink field that should store internal and external links.

11.5.47 - Webform

This is a paragraph type that will be used for the embedding webforms.

Fields

NameMachine nameRequiredDescription
Embedded Webformfield_prgf_webformNoEmbedded webform entityreference (select). Single value.
Default webform submission data (YAML)field_prgf_webform_default_dataNoYAML code for passing in default values to webform.
Webform statusfield_prgf_webform_statusNoStatus of webform on render. Radio with 2 options, open or closed (Closed prevents further submissions).

11.6 - Taxonomy

11.6.1 - Amenities

This is a vocabulary that will be used for adding reference Branch amenities. We will use this for the Branch.

Machine_name: amenities

11.6.2 - Area

This is a vocabulary that will be used for adding location areas on the site. We will use this for the Location Branch and Facility CTs.

Machine_name: area

11.6.3 - Blog Category

This is a vocabulary that will be used for adding blog categories on the site.

Machine_name: blog_category

11.6.4 - Color

This is a vocabulary that will be used for adding colors on the site.

Machine_name: color

Fields

NameMachine nameRequiredDescription
Namedrupal’s defaultYesColor name.
Colorfield_colorYesColor selector.

11.6.5 - Facility Type

This is a vocabulary that will be used for adding facility type on the site. We will use this for the Facility CT.

Machine name: facility_type

11.6.6 - Media Tags

This is a vocabulary that will be used for adding media tags that will allow you to structure your media assets library.

Machine name: media_tags

11.6.7 - News Category

This is a vocabulary that will be used for adding news categories on the site.

Machine_name: news_category

12 - Development

Welcome to the development corner of the YMCA Website Services distribution.

For YMCA Associations

For Developers

For QA Engineers


Community Guidelines

Best Practices

Getting Started with YMCA Website Services Development

Whether you are just getting started with YMCA Website Services or need to test a feature in a stable environment, the YMCA Website Services Core Team maintains a number of Sandboxes that you can use.

Processes & Components

Environment Setup

Advanced: Multi-Domain Configuration

As of version 10.4.0.0, YMCA Website Services includes support for the Domain Access module, enabling multi-domain and multi-branch site architectures.

Use cases:

  • Multiple YMCAs sharing one Drupal installation
  • Branch-specific domains (e.g., downtown.ymca.org, westside.ymca.org)
  • White-label YMCA sites

To enable Domain Access:

composer require drupal/domain
drush en domain domain_access -y

Configure domains at Configuration > Domain Access (/admin/config/domain).

For more details, see the 10.4.0.0 release notes and the Domain Access module documentation.

Contributing to YMCA Website Services

Working with Existing Functionality

Adding and Removing Functionality

Dependency Management

Decoupling YMCA Website Services

Ongoing Maintenance

Releases

Update Processes & Notices

These documents are for old versions of YMCA Website Services, but may contain useful information for troubleshooting future update issues.

12.1 - Onboarding

Welcome to YMCA Website Services

List of migrated repositories/projects

In 2022, maintenance of the distribution moved from Open Y LLC to Y-USA. With this, repository locations have changed:

How to start developing Open Y

In order to get a copy of the latest development version of the distribution, please follow steps from YUSA OpenY README.

Pay attention Open Y has a modular structure, so if you plan changes to specific component - create Pull Request/Merge Request in respective project or repository, based on component’s composer.json data.

In order to test specific component, create a PR to yusaopeny and add a reference in composer.json of Open Y in order for the build system to start using updated component.

QA sandboxes for Open Y

The YMCA Website Services core team manages sandboxes for various configurations of the distribution to facilitate evaluation, to help with QA, and enable investigation of issues.

How to start developing Virtual Y

Get started with the README

QA sandboxes for Virtual Y

How to start developing Membership Framework

Get started with the README

QA sandboxes for Membership Framework

How to start developing Activity Finder

Activity Finder is installed with the distribution by default.

Get started with the README

QA Sandboxes for Activity Finder

12.2 - 3rd-party dependencies

YMCA Website Services’s system requirements generally track those of Drupal with some occasional more opinionated recommendations.

Current Version Requirements (Drupal 11)

  • Drupal: 11.1.x or higher
  • PHP: 8.3 or higher
  • Composer: 2.0 or higher
  • Database: MySQL 8.0+ OR MariaDB 10.6+
  • Web Server: Apache 2.4+ OR Nginx 1.18+
  • Operating System: Linux-based (Ubuntu LTS 20.04+ recommended)

For complete requirements, see our Server Requirements page.

General Requirements

Supported versions may differ based on your Drupal version.

Recommended for advanced functionality, but not required:

  • Apache SOLR search server
    • Version 4.9.1 and version 8 have been tested for Activity Finder. Other versions are works in progress.

For high load/performance sites

See also Drupal’s recommendations for managing site performance and scalability.

For development

See our installation instructions for a full walkthrough of these tools.

Software libraries and frameworks

YMCA Website Services leverages many other open source frameworks including, but not limited to:

12.3 - Acceptance Testing

YMCA Website Services is a big distribution with a large amount of modules, components, subsystems, and business processes, therefore we have to take appropriate steps to ensure the stability of major functionality during development.

For the automated tests we have created General Checks template on GitHub every developer should follow to get review approval from YMCA Website Services core team. However, General Checks are for testing functionality for the current proposed change only, not for Regression Testing.

For regression testing, Behat tests in this flow are provided automatically on each build by YMCA Website Services community.

Every pull request should include a testing plan prior to release into YMCA Website Services. This plan should cover the testing of all workflows and functionality to ensure that they continue to work with any new code or change implemented. This is because it is possible for conflicts to occur between elements of YMCA Website Services, Drupal Modules, and Drupal Core. These pull request testing plans will increase productivity and decrease effort for manual Acceptance Testing of upcoming Releases. This testing plan should cover specific features and functionality that is likely to cause regression issues post-release or post-upgrade to the latest version of YMCA Website Services once this new code is implemented.

Example of testing plan: If the Drupal core is updated it is important to gather all Drupal core Release Notes since last release core upgrade for YMCA Website Services and analyze important issues fixed. Example - in case if you are doing upgrade from latest 8.4.0 to 8.4.4:

This means the list of systems should be tested are

  • multilingual
  • postgreSQL support
  • migration
  • taxonomy
  • ckeditor
  • composer

This list could be extended by analyzing some highly important parts of YMCA Website Services distributions that depends from the above subsystems. It is not required to spend time on every module that has a dependency taxonomy, but it is important to test at least one impacted module to ensure it is still working post-implementation. In case if there is a Behat test already created for the subsystem in a list then a manual test could be skipped as long as the build is not failing due to the module or element covered in the associated Behat test.

How to choose which modules to test: These can be a random selection from the list of systems impacted, or one of the oldest modules in a system impacted. This is because there is a higher chance that a minor change could cause a regression issue for the modules that have not received recent or regular updates.

The oldest modules(contrib modules) that have dependencies from the above list should also be updated, but to improve productivity, these updates should only be initiated if there is a security issue or a module stopped working because of the subsystems getting updated within an upcoming release. In case if a respective module update creates more issues that the older version of said module - then it is better to keep the old module and fix an associated regression bug. Tip: usually a new version of the module already contains a bug fix, so adding a patch from the drupal.org to composer.json of the YMCA Website Services distribution is preferred to get distribution released. Keep in mind, you will need to create a follow-up task for the module to be updated after release.

After creating list of modules that could introduce regression issues it is highly recommended to follow Quick-start section of the module’s readme files, that usually is shipped with modules. Example for the location_finder. In case if a module has no Quick-start or Acceptance testing section in readme - it is important to test at least one place where functionality of the module should be working. It is highly recommended to add this manual test steps as a follow-up task, new issue or even better - create Pull Request with changes to readme into YMCA Website Services repository. For the sake of performance, adding step by step how-to to the respective module’s README.md file is highly recommended. It takes only a few minutes to write a couple of lines of documentation which will greatly help others with future contributions and changes.

Optional, but greatly appreciated: Add a Drupal tour for the how-to, created in README will benefit future YMCA Website Services users and developers. Having a tour for the business functionality is highly recommended to ship with the component - it creates an in-site visual guided documentation and helps to decrease time for the Acceptance testing.

And last, but not the lease - adding Behat tests to the system will ensure functionality is tested on every pull request, on every CI build in the future.

Rule

Every release of YMCA Website Services since 8.1.9 should include list of subsystems, changed in release for the community to be aware of the possible regressions on their end.

12.4 - anti spam protection

In order to protect YMCA Website Services customers, we have added anti-spam protection based on CAPTCHA and Google reCAPTCHA out of the box in YMCA Website Services core

You can check the tutorial for how to install and configure reCaptcha on your site.

In the majority of cases having the above configuration in place will protect you from 99% of spam, unless there is human-entered spam that has no protection. To overcome some human-based spam you should use blacklist logic for blocking email domains, used in spam messages.

For that, you can use the Protected Submissions module module, which allows you to harden all submissions on a site with a list of stop words as well as per-language settings.

Virtual Y use case

In order to overcome caching issues, Virtual Y uses the simple_recaptcha module which could be used in similar cases.

The CAPTCHA + reCAPTCHA module solution has presented some reliability issues. The most recent discussion and fix from drupal.org has also not reliably resolved issues for some clients.

At some point, the “Simple reCaptcha” module was used on a project and had no issues, so we’ve started to replace the “CAPTCHA” + “reCAPTCHA” modules with “Simple reCAPTCHA”.

12.5 - Code of Conduct and Best Practices

The YMCA Website Services community aims to build from the methods and best practices of other open-source projects, such as the Drupal community and the Drupal Ukrainian community.

Bylaws

For the OpenY distribution we have Terms of Use and Participant Agreement.

Development

To understand how we use and develop technologies, refer to the documents below:

JavaScript Code Standards

12.6 - Code Review Quality Best Practices

This document serves as an addition to our Code of Conduct and Best Practices. It is more technical and in-depth for specific cases that were discussed during code quality review processes the YMCA Website Services team has in place. During this process, all code should be reviewed by 1-2 developers before being merged into the YMCA Website Services codebase.

General Rules

Components in YMCA Website Services (whether modules, themes, or other code structures) should be, as much as possible, reusable and atomic. All features, content types, settings, styles, etc. should be bundled together to create a cohesive component.

  1. General naming conventions
    1. Features module naming
      1. openy_${entity_type|abbr}_${entity_bundle|abbr}_${feature|optional}
        1. Example: openy_node_blog_feature
        2. openy_prgf_sc_feature -> OpenY Paragraph Simple Content (name within yml)
    2. Fields naming (<=20 chars)
      1. field_${entity_type|abbr}_${entity_bundle|abbr}_{name|abbr}
        1. Example: field_prgf_sc_body
    3. All descriptions are mandatory!
  2. Module naming conventions - Depending on the context we should choose the name from this list:
    1. ${project_name|abbr}_${business_name|abbr} - when the code looks like legacy and has specifics that are not ready to be open-sourced
    2. openy_${business_name|abbr} - when the code is ready to be ejected to OpenY package
    3. ${business_name} - when the code is so abstract that it has no connection to OpenY and is ready to be hosted on Drupal.org as an independent project.

Code Sharing

To support reuse by the community, the MODULE-NAME should relate to the business logic of the module. It is not good to create modules by abstracting them out of the business. All modules that have been shared to drupal.org from past projects were possible to share only because they represent some feature, tied to a business need. For example:

  • personify - module for SOAP related methods for working with Personify API
  • acrypt - Asymmetric crypt algorithm

and so on.

PHP

Return early pattern

To keep readability in functions and methods, it is wise to return early if simple conditions apply that can be checked at the beginning of a method:

<?php

function foo($bar, $baz)
{
    if ($foo) {
        // logic goes here
        return $calculated_value;
    } else {
        return null;
    }
}
?>

It’s better to return early, keeping indentation and brainpower needed to follow the code low.

<?php

function foo($bar, $baz)
{
    if (!$foo) {
        return null;
    }

    // logic goes here
    return $calculated_value;
}
?>

Define early pattern

When you have a condition that aims to change the value of a variable without additional logic, get rid of if else elseif code and instead define your variable early and change it via conditions.

Before:

if ($a = 'hello') {
 $text = 'Welcome to site';
}
else {
 $text = 'Register please';
}

After:

$text = 'Register please';
if ($a = 'hello') {
 $text = 'Welcome to site';
}

Null Checks with isset

isset() verifies if set and not null. There is no need to do additional verification against NULL.

Before:

...
'video' => (isset($feed['profile_media_videos']) || $feed['profile_media_videos'] != NULL) ? $feed['profile_media_videos'] : '',
...

After:

...
'video' => (isset($feed['profile_media_videos'])) ? $feed['profile_media_videos'] : '',
...

Dependency Injection

For the decoupled and easier to upgrade code in Drupal 8+ Dependency injection should be used instead of calling methods from services statically.

See the Drupal API Overview of the Dependency Injection Container and Services.

Before:

...
$node = Drupal::entityTypeManager()->getStorage('node')->load($result->getField('nid')->getValues()[0]);
...

After:

...

$node = $this->entityTypeManager->getStorage('node')->load($result->getField('nid')->getValues()[0]);
...

Creating meaningful log messages

To provide useful logging for site managers, we need to write meaningful log messages with a proper context.

Before:

...
        if($type == 'program') {

          if ($feed['profile_media_videos'] != NULL || $feed['profile_media_images'] != NULL) {
          \Drupal::logger('272')->notice($type);
...

After:

...
        if($type == 'program') {

          if ($feed['profile_media_videos'] != NULL || $feed['profile_media_images'] != NULL) {
          \Drupal::logger('form_import')->notice("FORM IMPORT: type is $type");
...

Maintaining an Upgrade Path

All changes in configurations should be added to appropriate hook_update_N to update already existing environments. We suggest using the Config Importer and Tools package for working with hook_update_N.

Install files

openy.install in profile

In this file, we should put updates that are related to the distribution in general and don’t fit into any feature.

  • Enable/Disable module
  • General configs

openy_*.install in modules

If you update some configuration for a specific feature, make sure that you put updates into this file in the appropriate module.

Config Management

Revert only specific property from config

This is the preferred method of updating configs as it will result in fewer conflicts for upgrading customized YMCA Website Services instances.

With config_import module we can update only part of the full config.

For updating specific property in config use the openy_upgrade_tool.param_updater service:

  1. Find the module where your config lives.
  2. Create a new hook_update_N in the openy_*.install file.
  3. In that hook add the update code (for example):
$config = drupal_get_path('module', 'openy_media_image') . '/config/install/views.view.images_library.yml';
$config_importer = \Drupal::service('openy_upgrade_tool.param_updater');
$config_importer->update($config, 'views.view.images_library', 'display.default.display_options.pager');

Where:

  • $config variable contains path to config with config name, like:
  • views.view.images_library - config name
  • display.default.display_options.pager - config specific property (you can set value from a nested array with variable depth)

Revert full configs

This variant uses extensive config file manipulation and increases the time for an upgrade.

For updating full config or several configs from directory use the openy_upgrade_tool.importer service:

$config_dir = drupal_get_path('module', 'openy_media_image') . '/config/install';
$config_importer = \Drupal::service('openy_upgrade_tool.importer');
$config_importer->setDirectory($config_dir);
$config_importer->importConfigs(['views.view.images_library']);

Where:

  • $config_dir - path to directory with config
  • views.view.images_library - config name

Also you can update several configs from a directory:

$config_importer->importConfigs([
  'views.view.images_library',
  'views.view.example_view',
]);

JavaScript includes

image

12.7 - Colorways

What goes into making the selectable colorways in Layout Builder.

CSS Variables

Base variables

We start by defining a base set of colors based on the “Y Color Wheel and Neighbored Color Zones” from the “Websites & Platforms Style Guide”, available in the YMCA Brand Resource Center.

A color wheel with labels corresponding to the official YMCA colors.

Note: RGB variable values are not complete color definitions and must be wrapped in rgb{a}(), like background-color: rgb(var(--ylb-color-rgb-red-dark), 0.5);.

:root {
    --ylb-color-red-dark: #a92b31;
    --ylb-color-rgb-red-dark: 169, 43, 49;
    --ylb-color-red: #ed1c24;
    --ylb-color-rgb-red: 237, 28, 36;
    --ylb-color-red-light: #f15922;
    --ylb-color-rgb-red-light: 241, 89, 34;
    --ylb-color-orange-dark: #dd5828;
    --ylb-color-rgb-orange-dark: 221, 88, 40;
    --ylb-color-orange: #f47920;
    --ylb-color-rgb-orange: 244, 121, 32;
    --ylb-color-orange-light: #fcaf17;
    --ylb-color-rgb-orange-light: 252, 175, 23;
    --ylb-color-green-dark: #006b6b;
    --ylb-color-rgb-green-dark: 0, 107, 107;
    --ylb-color-green: #01a490;
    --ylb-color-rgb-green: 1, 164, 144;
    --ylb-color-green-light: #20bdbe;
    --ylb-color-rgb-green-light: 32, 189, 190;
    --ylb-color-blue-dark: #0060af;
    --ylb-color-rgb-blue-dark: 0, 96, 175;
    --ylb-color-blue: #0089d0;
    --ylb-color-rgb-blue: 0, 137, 208;
    --ylb-color-blue-light: #00aeef;
    --ylb-color-rgb-blue-light: 0, 174, 239;
    --ylb-color-purple-dark: #5c2e91;
    --ylb-color-rgb-purple-dark: 92, 46, 145;
    --ylb-color-purple: #92278f;
    --ylb-color-rgb-purple: 146, 39, 143;
    --ylb-color-purple-light: #c6168d;
    --ylb-color-rgb-purple-light: 198, 22, 141;
    --ylb-color-white: #FFFFFF;
    --ylb-color-rgb-white: 255, 255, 255;
    --ylb-color-light-grey-1: #f2f2f2;
    --ylb-color-rgb-light-grey-1: 242, 242, 242;
    --ylb-color-light-grey-2: #e7e7e7;
    --ylb-color-rgb-light-grey-2: 231, 231, 231;
    --ylb-color-light-grey-3: #cccccc;
    --ylb-color-rgb-light-grey-3: 204, 204, 204;
    --ylb-color-grey-1: #636466;
    --ylb-color-rgb-grey-1: 99, 100, 102;
    --ylb-color-grey-2: #4F4F4F;
    --ylb-color-rgb-grey-2: 79, 79, 79;
    --ylb-color-grey-3: #3F4042;
    --ylb-color-rgb-grey-3: 63, 64, 66;
    --ylb-color-dark-grey-1: #2F2F2F;
    --ylb-color-rgb-dark-grey-1: 47, 47, 47;
    --ylb-color-dark-grey-2: #231F20;
    --ylb-color-rgb-dark-grey-2: 35, 31, 32;
    --ylb-color-black: #000000;
    --ylb-color-rgb-black: 0, 0, 0;
}

Colorway variables

Each colorway begins with four initial colors, derived from the above color wheel:

  • PrimaryColor
  • SecondaryColor
  • TertiaryColor
  • PartnerColor

All page elements should be composed of these four variables, with “primary/secondary/tertiary” providing complimentary colors and “partner” providing a complimentary option for buttons or other calls to action.

Each variable is prefixed with ws. RGB versions of these four options are provided for use with rgba() styles.

Additionally, 5 variables are used to more specifically define the gradients in the Y logo:

  • LogoChevronDark
  • LogoChevronMid
  • LogoChevronLight
  • LogoTriangleDark
  • LogoTriangleLight

These variables should not be used in page components outside the logo. The Canadian Y logo does not change colors, and therefore these extra colors are not needed for Canadian colorways.

All together, these variables make up a colorway:

--wsPrimaryColor
--wsPrimaryColorRGB
--wsSecondaryColor
--wsSecondaryColorRGB
--wsTertiaryColor
--wsTertiaryColorRGB
--wsPartnerColor
--wsPartnerColorRGB
--wsLogoChevronDark
--wsLogoChevronMid
--wsLogoChevronLight
--wsLogoTriangleDark
--wsLogoTriangleLight

These variables should reference base variables, or other colors provided. Once combined, the full colorway definition should look like this:

:root {
  --wsPrimaryColor: var(--ylb-color-blue-dark);
  --wsPrimaryColorRGB: var(--ylb-color-rgb-blue-dark);
  --wsSecondaryColor: var(--ylb-color-blue);
  --wsSecondaryColorRGB: var(--ylb-color-rgb-blue);
  --wsTertiaryColor: var(--ylb-color-blue-light);
  --wsTertiaryColorRGB: var(--ylb-color-rgb-blue-light);
  --wsPartnerColor: var(--ylb-color-purple-dark);
  --wsPartnerColorRGB: var(--ylb-color-rgb-purple-dark);
  --wsLogoChevronDark: var(--ylb-color-blue-dark);
  --wsLogoChevronMid: var(--ylb-color-blue);
  --wsLogoChevronLight: var(--ylb-color-blue-light);
  --wsLogoTriangleDark: var(--ylb-color-purple-dark);
  --wsLogoTriangleLight: var(--ylb-color-purple-light);
}

Logo Colors

In order to provide consistency across colorways and reduce code duplication, the logo has been decomposed into 6 sections:

  • “the”
  • “chevron”
  • “ymca”
  • “triangle”
  • “registeredtm”
  • “areas-of-impact”

The “chevron” and “triangle” components are composed of radialGradient elements which leverage the additional wsLogo variables defined above. The other components use the existing colorway variables. Each component is a path with an id and the color defined in a fill.

The YMCA logo with labels corresponding to the colors used in each component as described in text below.

  • #logo-the uses --wsSecondaryColor
  • #logo-chevron uses a gradient composed of (from top to bottom) --wsLogoChevronLight, --wsLogoChevronMid, and --wsLogoChevronDark
  • #logo-ymca uses --wsPartnerColor
  • #logo-triangle uses a gradient composed of (from left to right) --wsLogoTriangleLight and --wsLogoTriangleDark
  • #logo-registeredtm uses –wsPartnerColor`
  • #logo-areas-of-interest uses --wsSecondaryColor

Y Styles

Each “Y Styles” option enables a different library, as seen in y_lb.ws_style_option.yml. Those libraries can be overridden by a custom theme if necessary.

12.8 - Composer

Please always make sure composer.lock file is updated after any changes in composer.json file. You can use composer update command to update any package, in this case composer will take care about updating of composer.lock file.

composer update drupal/metatag

Also you can use composer update --lock command to force updating of composer.lock file according to dependencies in composer.json.

Please check official composer documentation for details: https://getcomposer.org/doc/01-basic-usage.md

12.9 - Composer version constraints for YMCA Website Services

In 2020, due to changes in Drupal core release management and demand from YMCA Website Services customers to improve upgrade path flexibility and stability, the YMCA Website Services team added extended composer version constraints to our composer.json.

Examples from composer.json:

  • "drupal/ckeditor_bootstrap_buttons": "^1.2 || ^2.0.0", - this line means previous version was 1.2 or any 1.x starting from 1.2, and latest tested - 2.0.0 with allowed any stable 2.x starting from 2.0.0
  • "drupal/custom_formatters": "^3.0 || ^3.0@beta", - tested with 3.0 beta of custom_formatters and allowed any 3.x starting from 3.0 (when it will be released)

By having multiple OR (||) conditions we are providing information for developers on which versions could be used for upgrades. There are cases when the latest, even stable version of dependency could be incompatible with some other functionality and it makes sense to keep the version older while functionality is in the process of upgrading.

For example, if, for some reason, custom_formatters 3.0 won’t be compatible with any of YMCA Website Services dependencies at the time of release, a developer can select an older beta version in order to proceed with the upgrade.

To select a specific version of a dependency when you do an upgrade of YMCA Website Services, add a dependency and its version alongside YMCA Website Services at the composer require... step.

For example:

from upgrade doc

composer require YCloudYUSA/yusaopeny:NEW_VERSION_HERE --no-update
composer update --prefer-dist --with-dependencies --prefer-stable --no-suggest

then change the dependency version

composer require YCloudYUSA/yusaopeny:NEW_VERSION_HERE --no-update
composer require drupal/custom_formatters:3.0@beta1

You can change any of the dependency versions without upgrading YMCA Website Services by running only the composer require... command for specific dependencies and Drupal Update DB routines afterward.

Check official Composer documentation about version constraints and updating Drupal modules with Composer.

12.10 - Contributing

The YMCA Website Services distribution is open source, and we welcome contributions from the YMCA Movement, the Drupal community, and beyond. Be sure to check our Community Resources for how to get in touch and our Roadmap to see if your request is already in progress.

Issues

If you have a support request, you’ve found a bug, or you have a feature request you can start in our primary repository, YCloudYUSA/yusaopeny:

If you are able to pinpoint the issue to a specific piece of functionality, you can open an issue on the appropriate module.

Pull Requests

We use the GitHub “Fork and pull model” for community contributions. If you have some time to make a contribution to the project, here are the steps that will help you:

  • Create a fork of YCloudYUSA/yusaopeny.
  • Commit & push changes into your fork.
  • Create new Pull Request.
  • Write steps for review. In this way maintainers can go through steps on build to verify your fix/feature.
    • Ensure steps for review added to README.md file in a module’s/project’s directory if it makes sense to check them on regular basis. Often this is needed for crucial parts of the system which is main business functionality of the component. Example of super simple steps for review see in Quickstart section of location_finder module, please.
  • Wait for a CI build and ask maintainers for review.

Important: make sure your git email is associated with account on drupal.org, otherwise you won’t get commits there.

Merge Requests

Modules on Drupal.org follow their Merge Request process. The Drupal Wiki has in-depth documentation on these processes:

Drupal.org credits

If you would like to get drupal.org credits for your contribution:

  • Create issue on drupal.org
  • Link drupal.org issue to GitHub Pull Request
  • Specify in GitHub Pull Request link to drupal.org issue
  • Once PR has been merged, reviewer will close drupal.org issue with appropriate credits.

12.11 - Create & Use New View Modes

As with any other entity in Drupal, when it comes to render the rendering it in different contexts, you might want to have specific view modes.

Here you can find instructions how you can add new view modes into embedded entity form on YMCA Website Services distribution.

Create a new View Mode

  1. Go to ‘View modes’ page: Structure -> Display modes -> View modes (or visit the URL: /admin/structure/display-modes/view Configuration project add/update form

Configuration project add/update form

  1. Create new view mode: click ‘Add view mode’ button and select entity type (or visit the URL: /admin/structure/display-modes/view/add

Configuration project add/update form

or after each entity type you can see ‘Add new {Name} view mode’ and click on it Configuration project add/update form

  1. Select “Media” and then give a name to your new view mode (or visit the URL: /admin/structure/display-modes/view/add/media Configuration project add/update form

Use the View Mode

  1. Go to Configuration -> Text editor embed buttons (or visit the URL: /admin/config/content/embed Configuration project add/update form

Configuration project add/update form

  1. Then make sure you enable the new view mode in “Allowed Entity Embed Display plugins”, and at the bottom of the page click “Save”. Configuration project add/update form

12.12 - Daxko

Relates to: Program Registration (Daxko)

Configuration setting at /admin/config/development/daxko

Account configuration must be setup before the Program Registration paragraph will work.

GroupEx Pro

There are three methods of integrating GroupEx Pro with your YMCA Website Services site. In order from most to least complex/customizable:

  • API integration
  • Embedded schedules
  • Responsive schedule link

GroupEx PRO APIs

YMCA Digital Services with the help of YMCA of the North have developed and adopted a Syncer for Repeat Application which helps to migrate from the GroupEx PRO Public API to the Daxko Group API v1 and pulls data from GroupEx PRO to Program Event Framework.

See open-y-subprojects/openy_daxko_gxp_syncer for how to configure the Syncer.

Embedded schedules

This replaces the deprecated Embedded GroupEx Pro Schedule Paragraph.

Embed code for GroupEx Pro schedules can be found in your GroupEx Pro admin interface.

  • Look for the “New embed” toggle.
    Screenshot showing “New Schedule” and other options in the GroupEx Pro admin.
  • Expand the options and choose any filters or colors that you prefer.
  • Disable the “Fixed Header” option.
    Screenshot showing “Schedule Hosting LInk / Embedded Code for New Schdule” from Daxko
  • Copy the resulting code, that will look something like this, substituting 000 for your own account number, and adding any location or category filters as needed:
    <script>
    var acct = '000'; var loc = ''; var cat = ''; var stylesheet = ''; var hideLastnames = true;
    var jsHost = (("https:" == document.location.protocol) ? "https://" : "http://");
    document.write("<scr" + "ipt src='" + jsHost + "ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js' type='text/javascript'></scr" + "ipt>");
    document.write("<scr" + "ipt>var jQuery = jQuery.noConflict(true);</scr" + "ipt>");
    document.write("<scr" + "ipt src='" + jsHost + "www.groupexpro.com/schedule/embed/schedule_embed_responsive.2.js.php?a=" + acct + "' type='text/javascript'></scr" + "ipt>");
    </script>
    
  • Navigate to your YMCA website.
  • Follow the directions to add a Code Paragraph or a Code Block.
  • Paste the embed code into your block.
  • Save the paragraph/block and the page.

If the pasted code does not appear on the page, ensure your site is updated with this change to enable direct copy/pasting of embed codes.

While the incoming code is controlled by Daxko/GroupEx Pro, many changes can be made with CSS. Try the CSS Editor module (≥2.0.1) which is bundled with the distribution, or work with your development partner to make customizations.

GroupEx Pro also provides direct links to the schedule page. These can be found in the “New Embed” section. Simply copy the link and add it to any link field or button on your site.

12.13 - Decoupled (external) projects

Inventory of external modules available via Composer

Check all GitHub for the tag openy-decoupled

GitHub hosted

  1. YCloudYUSA/yusaopeny_block_modal - Implements a simple block with a body and title that will be used to display modal windows.
  2. YCloudYUSA/yusaopeny_memberships - Membership Framework for OpenY and Drupal.
  3. YCloudYUSA/yusaopeny_prgf_sidebar_menu - SideBar menu for referencing menu blocks and using in SideBars across different pages.
  4. YCloudYUSA/yusaopeny_loc_finder - Extended Location Finder
  5. Open-Y-subprojects/reqclique_gxp_sync - Reqclique Group Exercise Sync
  6. open-y-subprojects/virtual_y_signaling_server - Signalling server for Virtual Y
  7. open-y-subprojects/openy_daxko_gxp_syncer - Daxko GroupEx PRO v1 API Syncer into Program Event Framework
  8. open-y-subprojects/ynorth_gxp_spots_proxy - Availability Spots Cache Proxy for Groupex PRO embed API Syncer into PEF
  9. open-y-subprojects/openy_node_alert - Alerts APP for YMCA Website Services
  10. open-y-subprojects/openy_focal_point - YMCA Website Services Focal Point routines
  11. open-y-subprojects/shared_content_server - Shared Content Server
  12. ynorth-projects/openy_node_session - YMCA Website Services Node Session
  13. drupal/openy_repeat - Repeat API for PEF. Schedules APP built in Vue.js (moved to drupal.org)
  14. ynorth-projects/openy_pef_gxp_sync - Groupex Pro Embed/OpenY Syncer into PEF
  15. ymcatwincities/ymca_sync - Syncer backend core
  16. YCloudYUSA/yusaopeny_activity_finder - Activity Finder app
  17. ymcatwincities/media_entity_document - Media Entity Document
  18. ynorth-projects/openy_prgf_session_table - if you need to present couple of Sessions in a table view without using any complex app like Schedules or Activity Finder

Drupal.org hosted

  1. drupal/upgrade_tool - YMCA Website Services Upgrade Tool
  2. ymcatwincities/paragraph_skins - Skins component from OpenY. Decoupled to drupal/paragraph_skins
  3. drupal/openy_autocomplete_path - YMCA Website Services Autocomplete Path. Works in Drupal 8 only. Removed from 9.* YMCA Website Services releases.

Decoupling mind-map

YMCA Website Services decoupling

12.14 - Decoupling components as independent modules

History

In 2019 the YMCA Website Services team started decoupling major components to streamline the distribution and simplify support.

Communication started in the Community Board - Ejecting modules from OpenY distro as independent projects.

The decoupling process is ongoing. See the index of decoupled projects.

In 2021 the YMCA Website Services core team faced coupling blockers in the distribution during the upgrade from Drupal 8 to Drupal 9

To formalize the ongoing development and maintenance strategy, the YMCA Website Services core team shared its decoupling plan with the wider community in mid-2021.

This document elaborates on those processes.

Policy

Process

for creating a new decoupled component

  1. Create a new GitHub/Drupal.org repository.
  2. Work on getting an initial release with at least beta version stability.
  3. Create a composer.json file for the component in order to be able to start using it via composer. See Virtual Y for an example.
  4. Make it available for the public via packagist.org or drupal.org as a release. Ensure podarok is added as a co-maintainer to the respective system.
  5. Suggest adding to YMCA Website Services by opening an issue.
  6. If approved, create a Pull Request adding it as a dependency in composer.json.
  7. Ensure this component is enabled in any of the packages maintained in the YMCA Website Services profile installation
  8. Ask for review and release, according to the release plan.

for decoupling an existing component of YMCA Website Services

Follow the steps above, but:

  • After creating the repo, filter the selected component by running git filter-branch --subdirectory-filter ... from the latest development branch of the YMCA Website Services profile. This keeps credits of work done for this component as a part of the Code of Conduct.
  • After separating the code, ensure the ejected code is not duplicated in the YMCA Website Services profile. Remove duplicated code in the same Pull Request in which you add the new dependency.

Examples

How to update module on Drupal.org

  • Git filter-branch to get a history of changes.
  • Change git origin to Drupal.org project.
  • Create a new branch and push the code to Drupal.org.
  • Create and push tag to Drupal.org. Create a release on drupal.org.
  • Update composer.json in this distribution with a new tag.

How to decouple module from YN to Drupal.org

Example: paragraph_skins

git clone git@github.com:YCloudYUSA/yusaopeny.git decouple
rm -rf decouple_copy && cp -a decouple decouple_copy
cd decouple_copy
git filter-branch --subdirectory-filter docroot/modules/contrib/paragraph_skins
git clean -dfx
git remote remove origin && git remote add origin git@git.drupal.org:project/paragraph_skins.git
git pull origin 8.x-1.x --allow-unrelated-histories
# Resolve conflicts if applicable.
git push origin production:8.x-1.x
# Create tags and release on Drupal.org

How to decouple module from YMCA Website Services to YMCA Website Services Subprojects

Request a repository for the module. Example: shared_content_server

git clone git@github.com:YCloudYUSA/yusaopeny.git decouple
rm -rf decouple_copy && cp -a decouple decouple_copy
cd decouple_copy
git filter-branch --subdirectory-filter docroot/profiles/contrib/openy/modules/custom/SOME_MODULE_HERE
git clean -dfx
git remote remove origin && git remote add origin git@github.com:Open-Y-subprojects/SOME_MODULE_HERE.git
git push origin production
# Create composer.json on the decoupled repository. Example: https://github.com/YCloudYUSA/yusaopeny_activity_finder/blob/4.x/composer.json
git clone git@github.com:ynorth-projects/distribution.git yn-distribution
# Update composer json for distrubution. See below

Example for Activity Finder

References

12.15 - Dependencies in drupal info.yml

In order to generate composer.json, Drupal.org defines specific rules in the modules info.yml file

If you need to add a dependency to the Drupal.org module you should provide a format:

dependencies:
  - drupal:webform

In this case, your module will have composer dependency to drupal/webform

If you make it:

dependencies:
  - whatevernameyouwish:webform

the Drupal.org packaging routine will replace it with drupal:webform on the fly.

In order to break the dependency on composer level but still tell Drupal core to have module dependency while resolving dependencies during the process of enabling the module, you should use the simplified format:

dependencies:
  - webform

In the above case, composer won’t have any dependencies, but your module will require that the webform module be available in the codebase in order to be enabled by Drupal core.

12.16 - Deprecating and removing components

Occasionally old code is deprecated from the YMCA Website Services codebase. In order to minimize disruption to existing sites, we use the following process:

  1. Decide - Before removing components from the distribution we gather feedback from the community to protect active projects from having components accidentally removed. This is accomplished via messaging in the YMCA Website Services Slack and discussion on Monthly calls.
  2. Deprecate - Once a decision is made, we notify users that the feature will be removed soon. The deprecated component is moved from the YMCA Website Services package group to the YMCA Website Services (Deprecated) package group. For example: Deprecate Daxko Program Registration Paragraph. Deprecation notices are posted in point and quarterly releases of YMCA Website Services.
  3. Uninstall - Before removing code, components should be uninstalled via an update hook in the distribution and any hard dependencies should be removed. Uninstalls must occur at least one point (fix) release after the deprecation notice.
  4. Remove - Complete removal of the component from the codebase or composer.json should happen at least one quarterly (feature) release after the deprecation notice.

Additionally, the following housekeeping steps should be taken when deprecating a component:

  1. The release where the deprecated component has been uninstalled should be added to the important versions document in the Wiki.
  2. Code should be decoupled to external GitHub repositories with all history of commits, marked as openy-decoupled, and archived.

UX/CX for deprecated components

In order to deliver a high-quality upgrade path and keep the distribution on the bleeding edge of technologies we occasionally replace old and aged components with new ones for a better User eXperience and Content eXperience.

In order to achieve deprecations we have a policy that aims to provide a comfortable migration path for all components of the distribution.

  1. When we create a component that will replace an old one we must introduce a period of overlap, when both components are available in the system for some time (6-18 months usually). This allows users to have time and resources to migrate from the old to the new one before it is removed from the distribution. See the Activity Finder v3 to v4 migration.
  2. Deprecated components are moved to the deprecated modules group in the list of modules at Admin > Extend. Also, we add lifecycle and lifecycle_link to the documentation in every deprecated module in order to provide enough information for the community. See Deprecate openy_gxp.info.yml.
  3. All titles of deprecated components in the Content Editing interface should be renamed to add the suffix (deprecated) to help Content Managers on a daily basis to not chose an old component and use a new one.
    Naming Example
  4. For the majority of content components an automated migration path is expensive and sometimes even impossible, so we have a “lazy migration” practice in our community which puts the responsibility of migration on Content Managers and Strategists. Once new components are available in the distribution all editors should start using them and rebuild old pages by replacing old components with new ones. After the communicated timeframe (6-18 months) old components are removed from the distribution, but if an association needs it the component will be available as an independent—but unsupported—project. It can be supported by a 3rd-party agency or developer as long as it is needed.
  5. After the communicated timeframe (6-18 months) the Core team will remove the component from the distribution and keep it in an independent project for archival reasons. Usually, the project is marked as archived/obsolete in order to clarify that it is not supported and is possibly insecure.
  6. If the normal timeframe (6-18 months) is not achievable due to unforeseeable circumstances, the Core team will add proper notifications and tutorials for the community to help migrate in a comfortable way in a shorter period of time. See the GroupEx Pro API deprecation notice.

12.17 - Development FAQ

YMCA Website Services Developer FAQ

Local Development

Getting started with a local environment

To start developing you need to obtain the latest YMCA Website Services codebase. See the openy-project repository for the full process.

This video tutorial will walk you through how to initiate a local development environment.

Recommended: DDEV (Docker-based development environment)

Alternative: Manual installation following the installation guide

Gathering information about your local environment

To best troubleshoot issues, it’s helpful for the YMCA Website Services team to have as much information about your environment as possible. Before you ask for help, watch this tutorial on how to gather that information.

Debugging with Xdebug in your local

DDEV maintains detailed information for using Xdebug with VSCode, PHPStorm, and more.

Contributing

Who should I specify for review?

We have a best practice to get at least 2 independent reviews before merging code. Please request a review from the YMCA Website Services Lead Technical Architect (Andrii Podanenko, @podarok) and somebody else (from your team or another YMCA Website Services partner).

Who is responsible for merging?

The YMCA Website Services Lead Technical Architect (Andrii Podanenko, @podarok) is responsible for final approval, merging, and release management on the YMCA Website Services project.

What labels in PRs should I use?

What milestone should I specify?

Why I can’t add labels or specify milestones?

All of these require you to be granted Contributor access to the YMCA Website Services GitHub repository. Contact the YMCA Website Services Lead Technical Architect (Andrii Podanenko, @podarok) to get access. Labels are usually set by the YMCA Website Services Core Team.

Why are the steps for review in Pull Requests so important?

When you send your code for review our team must know both how to review the code and what to test to verify the functionality. You are the only source of truth for how to check functionality. Adding steps for review will help the reviewer and QA team to verify that the issue is resolved.

Why should I add a reference to the GitHub issue in my PR description?

As we are a community-led project, there may be a long time between creating an issue and resolving it in a Pull Request. The reviewer should be able to understand the context and possible discussion around the issue to be resolved with your PR. The more context we have, the better and faster we can review the request.

In what format should I add commits, should I add internal Jira task ID or GitHub issue?

It is important to make commit messages with some sort of sense for the human to read them when digging back in history. Adding any task identifications from the project management system is allowed.

What is the “DeepCode” bot?

DeepCode bot is the automated, machine learning code review system that analyses huge amounts of GitHub repositories and is sometimes useful to find common issues before humans do reviews. It is helpful, but not always necessary to fix issues found by the DeepCode bot because sometimes it fails. If you see a comment be sure to read the report. If the report makes sense, then fix the issue suggested by the bot.

Build Automation & CI

What CI processes does YMCA Website Services have in place?

To get a fully working YMCA Website Services site for the code change you are about to push for review there is a build generating system installed for the YMCA Website Services GitHub repository that automatically generates a dedicated temporary website with your changes applied.

Why are some builds created automatically and some not?

By default, builds are configured for trusted users, so if you are getting a message from the bot like

“Can one of the admins verify this patch? Use “o+k to test” or ‘’t+est this please” for manual build execution."

then your username is not in the allowlist and somebody from the YMCA Website Services Core Team can comment to initiate a build for you. Contact @podarok to get your build generated or your name added to the allowlist.

How do I create a build for my PR?

If you are on the allowlist then simply create a Pull Request from your fork to the YMCA Website Services repository. After up to 30 minutes you’ll receive comments with links to the generated site builds.

When are builds deleted from the server?

Usually, you have a day for the build to be wiped out from the server. If there is an upcoming deadline and many PRs are coming in, the lifetime could be significantly shorter, down to a couple of hours.

Who should I contact to get logs from the build server?

Andrii Podanenko @podarok or Dima Danylevskyi @danylevskyi

What should I do if tests fail?

If you have any concerns with reports generated by the code checkers that are used in YMCA Website Services ask YMCA Website Services Lead Technical Architect Andrii Podanenko to get them resolved. The majority of these systems are works-in-progress and it is helpful to have feedback on them.

How do I install YMCA Website Services on Pantheon hosting

See request from a community. The solution is described in Pantheon’s documentation on nested docroots. We suggest that you maintain your own composer.json with the specified web-root directory, as described in the Pantheon examples.

Upgrade Troubleshooting

See Upgrading to a new version of the distribution for full instructions.

Config is missing

Occasionally, configuration will get removed or otherwise go missing in the upgrade process. For instance, the list of colors could go missing in the Layout Builder styles pane.

A screenshot with missing colors.

Usually, these changes are resolved by update hooks that import new config, but on occasion, these too can fail or break. In that case, we have a few options for resolving the issue:

  1. Re-run the most recent related update hook.
  2. Import the config with drush.
  3. Import the config with the Drupal UI.

The first step in any of this troubleshooting is to try to find the offending config. In this case, searching your codebase for “text-color” might lead you to this config file in y_lb. Now, we can try a few things…

NOTE: These methods could damage your site if not tested. Please take a backup before proceeding.

Re-run an update hook

Often, searching an adjacent .install file can get you an existing update hook to import the missing configuration. In our example case, y_lb_update_9001 imports the one settings file that we’re looking for. It doesn’t matter that the hook is old, if we re-run it, it will import the file in its current state in our file system.

To re-run the update hook (via gist):

drush php-eval "\Drupal::moduleHandler()->loadInclude('y_lb', 'install'); y_lb_update_9001();"

Understanding this command:

Import config with drush

Suppose the target config exists mostly on its own, or you wish to import the entire config of a module (due to a failed install, for instance). In that case, you can use drush config:import with --partial and --source pointing to a module directory, relative to the Drupal root. In this case:

drush config-import --partial --source=modules/contrib/y_lb/config/optional/

Be aware that all configs in that directory will be imported. Targeting a single config file with drush is impossible, although you could also temporarily move the config to its own directory.

Import config with the UI

Another way to import a single configuration file is with the Drupal “Config Synchronization” admin pages. To import a single item:

  • Go to Admin > Configuration > Development > Config Synchronization > Import > Single item (admin/config/development/configuration/single/import).
  • Choose the Configuration type (if you are unsure, choose “Simple Configuration”)
  • Paste in the configuration from the file and click Import.

12.18 - Drupal 10 update

The update from Drupal 9 to 10 is easier than some, but still comes with some challenges.

The distribution core team has gone through these steps to ensure as smooth of a transition as possible. If your site is up-to-date and using no additional dependencies you may be able to skip right to the update, but otherwise you’ll want to review these steps.

Resources

Review important versions

Step through the distribution’s important versions until you reach 9.2.13.0. You should be running the latest Drupal 9.5.x before you begin the upgrade to 10.

Pre-checks

  1. CKEditor
    1. If any custom/contrib modules are used, CKE5 should likely be done AFTER your D10 upgrade
    2. Contrib checks will NOT be found in the next step, be sure to check these manually
  2. Dependency cleanup
    1. Modules not installed, but in composer.json should be cleaned up to prevent unwanted dependency issues in trying to update.
  3. Admin theme
    1. If your website uses a deprecated admin theme, you should migrate to the Claro theme and test the admin experience. If necessary you can keep the deprecated theme as a contrib package but that is not recommended and won’t be supported by the distribution.

Upgrade Report

  • Install Upgrade Status
    • composer show drupal/core | grep versions
    • composer require --dev drupal/core-dev:[copy version above] --update-with-all-dependencies
    • composer require drupal/upgrade_status
    • drush en upgrade_status
  • Run the report
    • /admin/reports/upgrade-status
  • Check if the website is using custom CKEditor plugins with CKEditor Plugin Report

Keep / Kill

  • Based from the report above, determine which modules (if any) could be removed without impacting the site
  • From the remaining, review if the module
    • Has a D10 ready version
    • Has a D10 ready Fork/Patch
    • Has been abandoned
  • Itemize based on the above with notes of efforts to continue using the modules

Custom modules and themes

Patches

  • Review patches in composer.json. Review any that are no longer applying or may be duplicated by the distribution.
  • Carefully review and re-roll custom patches.

Update

At this point you should be ready to update to the latest version of the distribution:

  • Edit the ycloudyusa version in your project root composer.json: "ycloudyusa/yusaopeny":"^10.3",
  • Run composer update
  • If errors occur, review the conflicts, check out the known issues, and attempt to resolve them.
  • Re-run the previous steps until they complete successfully
  • Run drush updb, review the updates, and run them.

Smoke tests

We recommend reviewing critical functionality after the update to ensure any custom functionality still works.

Troubleshooting

Composer issues

Composer can be … tricky. To resolve composer conflicts:

  • If specific modules conflict, try requiring them directly to get more information about the conflict.
  • Make good use of composer why and composer why-not

Update hook conflicts

If you run into an error like this:

> [notice] Update started: y_lb_update_9011

> [error] Configuration core.entity_view_display.node.lb_event.featured depends on the core.entity_view_mode.node.featured configuration that will not exist after import.

you may be able to resolve it yourself.

Breaking down the error message:

  • core.entity_view_mode.node.featured is missing, which is blocking y_lb_update_9011 from installing core.entity_view_display.node.lb_event.featured
  • We need to figure out where core.entity_view_mode.node.featured should be coming from, so we can search our code for that.
    • Use the “Find in files” command in your IDE to search docroot/modules, or
    • from the command line:
      ╰─ grep -rI "core.entity_view_mode.node.featured"
      ./contrib/ws_event/config/optional/core.entity_view_display.node.lb_event.featured.yml:    - core.entity_view_mode.node.featured
      ./contrib/y_lb_article/config/optional/core.entity_view_display.node.article_lb.featured.yml:    - core.entity_view_mode.node.featured
      
    • Looking at those files in the codebase, they are identical, so we could manually import them from either module. Let’s do it.
  1. Add an update hook to your own custom module like this example.

    // This goes in mymodule.install as the next update hook.
    // Increment the number accordingly.
    function mymodule_update_9000() {
        $path = \Drupal::service('extension.list.module')->getPath('ws_event') . '/config/optional';
        /** @var \Drupal\config_import\ConfigImporterService $config_importer */
        $config_importer = \Drupal::service('config_import.importer');
        $config_importer->setDirectory($path);
        $config_importer->importConfigs([
            'core.entity_view_mode.node.featured',
        ]);
    }
    
  2. Use hook_update_dependencies to ensure this new update runs before the failing one.

    // This also goes in mymodule.install.
    function mymodule_update_dependencies() {
      $dependencies['y_lb'][9011] = [
        'mymodule' => 9000,
      ];
    }
    
  3. Re-run drush updb.

  4. If you run into other missing configs, add them to the list to be imported in update hook and re-run updb.

  5. Consider backporting your customization which led to the challenge of doing this upgrade in order for it to be covered and tested by distribution developers.


Planning for Drupal 11

After successfully upgrading to Drupal 10, you may want to plan for Drupal 11 in the future.

See the Drupal 11 Migration Guide for:

  • Drupal 11 beta status and Q4 2025 stable release timeline
  • New features and breaking changes in Drupal 11
  • Known issues (including jQuery 3.x compatibility)
  • Prerequisites and upgrade steps

Note: Most YMCAs should remain on Drupal 10 until the stable Drupal 11 release in Q4 2025. Drupal 10 is supported until December 9, 2026.


Additional Resources

12.19 - Drupal 11 Migration Guide

Upgrade YMCA Website Services from Drupal 10 to Drupal 11.

Overview

YMCA Website Services 11.1.0.0-beta1 brings compatibility with Drupal 11, released September 23, 2024. This is currently a beta release for early adopters and testing. A stable release is targeted for Q4 2025.

What’s New in Drupal 11

From the 11.1.0.0-beta1 release notes:

Major Platform Upgrades:

  • Drupal 11 core upgrade
  • PHP 8.3+ requirement (Symfony 7 integration)
  • Composer-only module management (module upload UI removed)

New Development Features:

  • Single Directory Components (SDC) for streamlined UI component development
  • Object-Oriented Hooks (class-based hooks replacing procedural)
  • New Icon Management API
  • Native WebP image support

Content Editor Improvements:

  • Project Browser for visual module installation
  • Workspaces module for content staging
  • Experimental new admin navigation system

Removed/Deprecated:

  • ckeditor (replaced by CKEditor 5)
  • ckeditor5_font module
  • inline_entity_menu_form module
  • bartik and seven themes
  • panelbutton module

For complete release details, see 11.1.0.0-beta1 on GitHub.


Before You Upgrade

Important: This is a beta release. Only upgrade if:

  • You’re testing for bugs before the stable Q4 2025 release
  • You have a staging environment for testing
  • You’re comfortable troubleshooting potential issues

Most YMCAs should remain on Drupal 10 until the stable Drupal 11 release in Q4 2025.


Prerequisites

Before upgrading to Drupal 11:

  1. Update to latest Drupal 10: Ensure you’re on Drupal 10.3.x or higher
  2. Upgrade PHP: Update server to PHP 8.3 or higher
  3. Backup everything: Database, files, and code
  4. Test on staging: Never upgrade production directly

Known Issues

jQuery 3.x Script Compatibility

Issue: Drupal 11 uses jQuery 3.x, which breaks some legacy jQuery 1.x/2.x scripts.

Solution: As of version 11.1.0.0-alpha2, YMCA Website Services includes jQuery Migrate to provide backward compatibility.

What this means:

  • Legacy jQuery syntax (jQuery 1.x/2.x) continues to work with jQuery 3.x
  • Custom JavaScript and third-party libraries maintain compatibility
  • No immediate action required for most sites

For developers with custom JavaScript:

  • Test your custom modules with jQuery 3.x
  • Update deprecated jQuery methods when possible
  • jQuery Migrate provides console warnings about deprecated code

References:


Getting Help

Testing Drupal 11 beta?

Need professional assistance?


Additional Resources

12.20 - Drupal 9 core dependencies version flexibility

This document is no longer updated.

To update the version of Drupal being used on your site independent of YMCA Website Services see Updating Drupal Core via Composer. Be aware that openy/composer.json may set Drupal core version constraints.


February 2021 release tagged Drupal core both 9.0.x and 9.1.x as allowed to be used.

Composer by default is installing the latest stable version, so a command

composer create-project YCloudYUSA/yusaopeny-project:dev-9.2.x-development OPENY --no-interaction

will install YMCA Website Services on latest 9.1.x Drupal core.

If there is a need to stay on Drupal 9.0.x stable core please use

composer create-project YCloudYUSA/yusaopeny-project:dev-9.2.x-development OPENY --no-interaction
cd OPENY
composer require drupal/core:~9.0.7

where 9.0.7 - is a needed version for your YMCA Website Services instance

For modules see Composer-version-constraints-for-Open-Y

12.21 - Drupal-SA-CORE-2018-004 security update

This document is archived but may contain useful information for troubleshooting future updates. For updated update steps, visit How to upgrade YMCA Website Services.


To update your OpenY site with security fix from Drupal core https://www.drupal.org/SA-CORE-2018-004 OpenY team is suggesting 2 options- via patch and via Drupal core upgrade(or OpenY upgrade). Drupal core upgrade or OpenY upgrade is not always possible, but security issue should be fixed asap. So consider to apply patch and plan OpenY upgrade later.

How to apply the patch

Patching OpenY releases 8.0.1 - 8.1.10 (Drupal cores 8.2.x, 8.3.x, 8.4.x)

For patching your OpenY release, follow steps below:

  • Login to your production server environment via SSH and find docroot folder of your site codebase. If you installed OpenY by following a tutorial - you should: if your site is located in /var/www/html
ssh -l root YOUR_SERVER_DOMAIN_NAME
cd /var/www/html

wget https://raw.githubusercontent.com/YCloudYUSA/yusaopeny-project/8.1.x/scripts/patches/SA-CORE-2018-004.patch

if your site is located in /var/www/openy

ssh -l root YOUR_SERVER_DOMAIN_NAME
cd /var/www/openy

wget https://raw.githubusercontent.com/YCloudYUSA/yusaopeny-project/8.1.x/scripts/patches/SA-CORE-2018-004.patch

Now you are ready to patch your site. But before patching - make a backup of the file which is about to be patched

sudo cp docroot/core/lib/Drupal/Core/Security/RequestSanitizer.php /var/backups/RequestSanitizer.php
sudo cp docroot/core/modules/file/src/Element/ManagedFile.php /var/backups/ManagedFile.php

To patch your site run the command to test if the patch can be applied:

patch -p1 --dry-run < SA-CORE-2018-004.patch

You should see a result

# patch -p1 --dry-run < SA-CORE-2018-004.patch
checking file core/lib/Drupal/Core/Security/RequestSanitizer.php
checking file core/modules/file/src/Element/ManagedFile.php

In case if result different - stop on this step and let us know you have issue. In case if all good proceed with a command below, which will patch your site:

patch -p1 < SA-CORE-2018-004.patch

You should see the same output as previously, but now your site is patched.

TIP: In case if you are using git repository for your site run

git add docroot/core/modules/file/src/Element/ManagedFile.php docroot/core/lib/Drupal/Core/Security && git commit -m "Patching OpenY core" && git push

to store your patched core into your own repository.

==========================

How to patch your Digitalocean OpenY install

In case if you have followed tutorial you should have your OPenY installed on you DigitalOcean server(droplet) in a predictable for current document folder. That’s why we prepared a short how to patch your OpenY site in a most simple way if you are not a Tech Guru, but just a user

  1. Log in as an admin user to your site admin UI by visiting /user/login URI page.
  2. Login to your DigitalOcean cloud console at digitalocean.com and find Access Console in the dropdown for the droplet you are using for the OpenY image
  3. You should see a popup window with a black screen where console asks you for the login. Use root user and a password generated for you upon droplet creation.
  4. After login to a console run the command below, respectively to the version of your Drupal core.

One line script to patch Drupal core for OpenY

Type manually exact line

bash < <(curl -s https://raw.githubusercontent.com/YCloudYUSA/yusaopeny-project/8.1.x/scripts/patches/runSA-CORE-2018-004.sh)

and hit Enter. You should see OpenY was patched message.

12.22 - Google Custom Search Configuration

The YMCA Website Services release 8.2.4 introduces Google Custom Search (aka Google Programmable Search Engine) for the website out of the box.

Enabling the module

Fresh installations

The search feature is included in the Extended installation type. For Standard see the Existing websites section.

If you are installing a fresh YMCA Website Services website and going through the installation process via the web interface, on the third-party integration step, you can specify a Google Search ID. If you specify the Google Search ID in this form, your site’s search feature will be up and running.

Existing websites

The search feature is not automatically enabled after upgrading a YMCA Website Services website. You have to manually enable it.

To do that:

  1. Log in as an admin (or a user with the administrator role).
  2. Go to the YMCA Website Services package install page (Admin menu > YMCA Website Services > Extend > Install, or /admin/openy/extend/list)
  3. Find the Search package there, tick the checkbox, and submit the form.

Now, the search modules are enabled, and the website header should have a search field. Upon installation, the modules create a Landing page for search results and point the header search form to the page.

Configuring the Google Search modules

  1. Go to the Google Search settings form (Admin menu > YMCA Website Services > Settings > Google Search settings, or /admin/openy/settings/google-search).
  2. Set the value of the Google Search ID field (see the following section for details) and submit the form.

Obtaining Search Engine ID

  1. Go to https://cse.google.com/, register if you haven’t yet, and log in if you aren’t logged in.
  2. Create the Search Engine (this process is explained in Google’s documentation:
    1. Click “New Search Engine”.
    2. Specify the domain of your website (e.g. www.example.com).
    3. Specify the name of the Search Engine (e.g. example.com).
    4. Click “Create”.
  3. On the newly created Search Engine page there is the Search engine ID field. Use this value in the YMCA Website Services Google Search configuration form.

Configuring the Search Engine look and feel

  1. Go to the Look and feel section of the Search Engine
  2. In the Layout tab, select the Full width option and click Save

If this change hasn’t been made, the search results on the website are shown in a popup window.

Dealing with ads

By default, newly created Search engines use the Free Edition (with ads) of the service. As YMCAs are non-profit organizations they have the option to switch to Non-profit Edition of the CSE, where it is possible to disable ads.

If you are already registered as a Non-profit in Google:

  1. From the CSE Control Panel, select the search engine you want to change.
  2. Click Overview then Ads
  3. Toggle the Show Ads option to off.

The Google Custom Search Engine can also be used with Layout Builder:

  1. If you have an existing site, disable the old search page:
    • Go to /search.
    • Remove the URL alias by unchecking Generate automatic URL alias in the sidebar then deleting /search.
    • Uncheck Published and Save to un-publish the page.
  2. Create a new Landing Page (Layout Builder) (node/add/landing_page_lb):
    • Set the Title to “Search”.
    • Ensure Generate automatic URL alias is unchecked in the sidebar and set the alias to /search.
      • If that alias results in an error, you can remove the old one at Admin > Configuration > Search and metadata > URL aliases
    • Check Published then Save and edit layout.
  3. Add a Small Banner to the header with a title for the page, like “Search”.
  4. Add the search results code to the page:
    • In the Body section, Add block and choose Code Block
    • In Code, add the embed code from the CSE configuration. You may need to add an outer div to fit your page layout, for example:
      <div class="paragraph paragraph--type--google-search py-4">
        <script async src="https://cse.google.com/cse.js?cx=[id]"></script>
        <div class="gcse-search"></div>
      </div>
      
    • Save layout and check your page
  5. Change the Google Search config to use your new page:
    • Go to Admin > YMCA Website Services > Settings > Google Search settings (/admin/openy/settings/google-search) and set the Search page id to the node id of your new page.
    • Or, change the config with drush:
      drush cset openy_google_search.settings search_page_id <nid>
      
  6. Test the search box in the Layout Builder page header to ensure the new configuration works as expected.

Advanced setup

Google maintains documentation on how to configure advanced search features

You can add multiple domains to the custom search engine if your association maintains multiple websites, for example, if your camps run at different website domains

You can also add not only the whole website but its parts by specifying patterns like example.com/blog/*. See Update sites in your search engine for details.

Refinements and facets

Use Refinements to narrow the scope of search

Refinements let users filter results according to the categories you provide.

Refinements appear in the search results page as tabs. The content of each tab is configured in the Search features > Refinement section of the Custom Search Control panel.

To set up a dedicated tab in search results for Blog posts do the following:

  1. In the Control panel, go to Search features > Refinements
  2. Click Add
    1. Set the name of the refinement to Blog
    2. Select Search only the sites with this label for How to search sites with this label?
    3. Click Ok
  3. Go to Setup
  4. Find Sites to search, click Add
    1. Add the example.org/blog/* in the text field
    2. Select Blog in the Label dropdown
    3. Select Include just this specific page or URL pattern I have entered
    4. Click Save

The search results page now shows the Blog tab that only shows blog entries relevant to the search term.

Promotions

Use Promotions to highlight a page in searches

Information for developers

Google Custom Search Developers documentation

Enabling via Drush

Use the following snippet to enable the package on existing websites:

drush en openy_google_search

Configuring the module via Drush

Use the following snippet when you install YMCA Website Services via Drush to set the Search Engine ID:

drush site-install openy \
   --account-pass=password \
   --db-url="mysql://user:pass@host:3306/db" \
   --root=/var/www/docroot \
   openy_configure_profile.preset=extended \
   openy_theme_select.theme=openy_rose \
   openy_third_party_services.google_search_engine_id="01234567890123456789:abcedefgh"

The openy_third_party_services.google_search_engine_id parameter sets the Search Engine ID (01234567890123456789:abcedefgh in the example).

Use the following snippet to set the Search Engine ID on already installed websites:

drush config-set openy_google_search.settings google_engine_id "01234567890123456789:abcedefgh"

12.23 - GroupEx PRO quick start

This document has been moved to ynorth-projects/openy_pef_gxp_sync.

12.24 - How to contribute large features (back-porting, etc)

These are our best practices for back-porting large features into YMCA Website Services and contributing code for others to use.

Summary

  • The YMCA Website Services core team is excited for you to contribute to the distribution for all to benefit from.
  • There’s a lot that goes into back-porting your code – details below.
  • These steps ensure that we are collaborating while continuing to support YMCA Website Services in a sustainable way.

Before getting started, please keep these notes in mind

  • Back-porting requires a process called decoupling. This is where your developers remove any hard-coded variables or dependencies on any integration from your website code. This makes it so the feature you wish to contribute can work for anyone the broader Y movement. Meaning, as an example , anything that ties into Personify APIs will have to have those hooks replaced with Program Event Framework so that it could function with any CRM source that an YMCA Website Services site might be using.
  • This decoupled code will then need to be thoroughly tested to ensure it can function when not relying on any fee-based, or non-secure, technology or systems .
  • Once the decoupling is complete, the YMCA Website Services core team will need to review every line of code that goes before it goes into the distribution . This helps us ensure it won’t break any of the other elements of YMCA Website Services, and that the code is 100% secure. As of 2019 we have 3 templates in YMCA Website Services that work across mobile, desktop and tablet breakpoints . We need to test new features/code across all these templates to make sure nothing breaks across hundreds of possible use-case scenarios ( example : adding a schedule block to a location landing page using the Carnation template when on the mobile breakpoint that is powered by ActiveNet through Program Event Framework…)
  • Once a feature is in YMCA Website Services, someone must pay to maintain that code . Does this code rely on any other Drupal modules to function? What if there’s an update to that module? That update needs to be tested to ensure it’s compatible with the now contributed code – and if it breaks, we have to write new code to fix it. What if there’s a security patch that involves the contributed code? We would then have to spend time applying the patch, etc.
  • Is your customization a new feature or a replacement of existing YMCA Website Services functionality/UX? We prefer you have A/B testing data demonstrating that your customization is a clear improvement over the current YMCA Website Services experience. There are many ways to run AB tests so please consult with the YMCA Website Services team on your hypothesis, method, and success criteria to ensure that the results are valid and reliable.

Steps/process for back-porting code into YMCA Website Services

Most problems have at least a generic component and can be approached in part through abstracted development.

We recommend beginning development with an eye toward these “abstracted” solutions - providing configuration instead of static templates, solving root causes instead of using local patches, using generic language instead of client specific. This will ensure that your features are easily contributed even before you begin this process.

  1. List each customization/feature you want to contribute to YMCA Website Services
  • It’s plausible that there are portions of your code that it might not make sense to put into the distribution, either because it’s duplicative to what YMCA Website Services already has, or it might be cost prohibitive to decouple it from your site for back-porting.
  • In the early days of YMCA Website Services, we were less stringent on this step. As long as there was no security or technical risk we accepted any contribution into YMCA Website Services. This led to some problems such as having two nearly identical paragraph types called Blog Post and News Post. These were contributed by two different associations. This caused significant confusion until we resolved the issue with the launch YMCA Website Services 2.0 where we deprecated some of this functionality.
  • You can start this process by taking an inventory of all your customizations that you feel would be good to backport into the distribution.
  • The end deliverable of this step is a list of each independent feature you think it makes sense to contribute.
  1. Your Prioritization
  • Rather than taking a ‘big bang’ approach of decoupling and back-porting all your features into YMCA Website Services, it is a better practice to take a bite-size approach, doing one feature at a time . This is because it can be cost and time intensive and expensive to decouple and backport your code into the distribution if you do it all at once.
  • As a guide, YMCA Website Services uses the following prioritization method: Demand for feature (1 to 3 with 1 being high), Impact/Benefit to Ys and visitors (1 to 3 with 1 being high), Effort to build/maintain (1 to 5 with 1 being extra low and 5 being extra high). The sum of these gives us a ‘score’ for each feature which helps us prioritize.
  • This will also help you decide how much, or little, of your back-porting you want to fund as you’ll be able to get a clear feature-by-feature time estimate for the work required.
  • The end deliverable will be a prioritized list of the features that you want to contribute.
  1. Share your prioritized list with YMCA Website Services, and align roadmaps before spending money and time on decoupling
  • There might be things the YMCA Website Services core team is already working on that are similar and would be finished before your decoupling would be complete, thus it would not be the best use of your funds to decouple/backport that feature
  • There may be information the YMCA Website Services team has based on talks with other Ys that influence your demand/impact scores and thus your prioritization
  • We might have technical knowledge that influences your effort scores as well
  • This is when timelines will start to emerge on when your code would be available in the distribution.
  1. Decoupling
  • Your developers and the YMCA Website Services team should align on best practices for code. At a high level, our best practices can be reviewed here: Development FAQ and How we release code
  • When you are ready to begin the decoupling work let us know and we can either talk to you here, on Slack, or even set up a conference call if it would be helpful for you.
  • You would then start the technical/dev work of decoupling the features you wish to contribute back into YMCA Website Services
  • You would test all of your decoupled code to ensure that these features work when no longer reliant on any paid or non-secure technology or partners
  • Deliverable from this step is code that works in a your own dev environment independent of any other Y association specific code/technology
  1. Contributing your code: Pull Requests (PRs)
  • Code gets submitted to YMCA Website Services for review via a process called a Pull Request
  • The YMCA Website Services lead technical architect sees the code, runs it through automated test cases, and provides feedback on any issues detected that may cause problems for other portions of YMCA Website Services code
  • Sometimes the feedback from the YMCA Website Services lead technical architect requires re-work from the original developer making the PR before the code is accepted into the distribution
  1. Release
  • The features contributed from you get scheduled into one of the YMCA Website Services quarterly releases, and we make sure you get ample credit for your contribution.
  • The movement then benefits from your contribution!
  1. Ongoing improvements, maintenance, etc.
  • Over time, you might want to make enhancements to your site due to analytics, or other data inputs from customers and team-members
  • It would be great if you made those same enhancements to the now-decoupled version of your code that exists in YMCA Website Services if you feel it makes sense
  • If you identify any bugs or issues over time on your site that involve code that was contributed to YMCA Website Services, it would be awesome if you fixed that code and contributed the fix via a Pull request (step 5 above)

To be clear, all of the above is only required if you want to get your code into the core YMCA Website Services distribution. You could always take your code as is, ensure any PII or secure information is scrubbed, and post it to your own GitHub repository – however it would be difficult for others to use this code as is if it hasn’t at least been decoupled. If you take this approach please be sure to remove references to OpenY from the code so that the GitHub search engine does not confuse it with core YMCA Website Services. Further, please review the YMCA Website Services license agreement to make sure you are in alignment with GPL and Open Source sharing best practices.

12.25 - How to develop themes in YMCA Website Services

Working with Themes

Each YMCA Website Services theme was developed independently, either by the YMCA Website Services Core Team or by a partner for one specific Y and then contributed back. You can see demos of each theme on the Sandboxes.

Each theme has its own dependencies and build processes. Please read the steps in each README for details.

Inventory of themes

As of December 2021, themes have been decoupled from the YMCA Website Services profile to independent projects on Drupal.org.

Carnation (Current)

Lily and Rose (Deprecated in Drupal 11)

Note: The Lily and Rose themes have been removed from Drupal 11 distributions. For Drupal 11 implementations, use Carnation theme.

For legacy Drupal 10 sites still using these themes:

12.26 - Important versions for upgrade path

YMCA Website Services development moves quickly and in this document, we flag important versions that should not be skipped while you upgrade your sites.

Determining your upgrade path

For example: If you are on YMCA Website Services 8.1.2 and want to upgrade to YMCA Website Services 8.2.8.5 you should make it in a couple of steps

  1. Upgrade 8.1.2 to 8.1.13.1
  2. Upgrade 8.1.13.1 to 8.2.2.1
  3. Upgrade 8.2.2.1 to 8.2.7.3
  4. Upgrade 8.2.7.3 …

These supplemental documents elaborate on a few specific cases:

Important versions

  • 8.1.13.1 - Optional, when you have a lot of customized code and 8.2.2.1 is failing in most places.

  • 8.2.2.1 - This is a very important step everyone should have. After this version, drush entup stops working. In this version, we finally migrated to the core media subsystem, and before going further it is important to upgrade media by upgrading your site to this version first.

  • 8.2.7.3 - This is a very stable Drupal 8 based YMCA Website Services with a bunch of contrib module updates. This is one of the last Drupal 8 based YMCA Website Services versions before the upgrade to Drupal 9 core. Also, in 8.2.7.0 and 8.2.7.1 we started to introduce multiple version constraints in composer.json to allow developers to choose between the minimum or latest dependency versions. This is for securing the upgrade path as well as adding flexibility for version selection if needed.

  • 9.2.8.0 - Drupal 9 version which must be used in the upgrade path before going to 9.2.8.1+. This version added 9.0-9.1 Drupal Core and disabled deprecated components.

  • 9.2.10.0 - Removed a bunch of unused modules from distribution.

  • 9.2.11.3 - Last Open Y Drupal core 9.3.* release

  • 9.2.11.4 - Technical release of YMCA Website Services ( no diff with 9.2.11.3 )

  • 9.2.13.0 - Pre Drupal 10 release, latest Drupal 9 release. Before going into Layout Builder era it is recommended to uninstall geysir, openy_inline_editing, quickedit, rdf modules.

  • 10.2.14 - Drupal 10|9 release, where you may follow the recommendations below:

    1. Upgrade to the latest Drupal 9 core (using version 10.2.14 of the distribution, released in June 2023).
    2. Upgrade all contrib modules and libraries to their latest Drupal 9-compatible versions (with composer update).
    3. Use drupal-rector, drupal-check, and PHPCS to prepare custom modules and themes for Drupal 10.
    4. Upgrade to Drupal 10 and run regression testing to search for hard-to-find bugs (update drupal/core-* projects in composer.json, then run compuser update).
    5. Upgrade all contrib modules on the Drupal 10 site to their latest versions (composer update).
  • 10.3.0.1 - Drupal 10|9 release, before New Demo Content and Initial Replacement Paragraphs to Blocks for Native Layout Builder Experience

  • 10.3.1 - Drupal 10|9 release, New Demo Content and Initial Replacement Paragraphs to Blocks for Native Layout Builder Experience. In this release we bumped a lot of dependencies to become up to date

  • 10.3.2 - Introduced recurring event support in the Event Content Type which requires an automated migration between date_range and smart_date fields. If possible, update to this version during the upgrade process.

  • 10.3.2.3 - Introduced before 10.1 and 10.2 Drupal core. Also upgraded openy_map. This version ensures we support removed modules pre 10.1 for contrib modules

  • 11.1.0.0-beta1 - First Drupal 11 release (beta). Includes PHP 8.3+ requirement, jQuery Migrate for backward compatibility, and removal of deprecated themes/modules. Stable release targeted for Q4 2025. See Drupal 11 Migration Guide for details.


See Version Constraints practices for YMCA Website Services

Known issues

For Drupal 10 Sites (pre-11.0)

If you are not using Rose or Lily theme, you need to uninstall them before applying 10.5.0.0 If you are using Rose theme, you need to re-require Drupal/openy_rose before applying 10.5.0.0. If you are using Lily theme, you need to re-require Drupal/openy_lily before applying 10.5.0.0.

For Drupal 11 Upgrades

Important: Lily and Rose themes have been removed from Drupal 11 distributions. If you are upgrading to Drupal 11, you must migrate to the Carnation theme before upgrading. The Carnation theme is the only supported theme for Drupal 11+.

See the Drupal 11 Migration Guide for:

  • Prerequisites (PHP 8.3+, latest Drupal 10)
  • Known issues (jQuery 3.x compatibility)
  • Upgrade steps and troubleshooting

Note: The Drupal 11 release is currently in beta (11.1.0.0-beta1). Stable release targeted for Q4 2025. Most YMCAs should remain on Drupal 10 until then.

If you are faced with an issue when composer installs an improper version of drupal/core for the chosen version of YMCA Website Services from the list above, please use this trick in order to downgrade:

composer require drupal/core-recommended:9.5.9

Run the above command where your docroot is. Use the current core version instead of 9.5.9.

12.27 - Install Solr site search

YMCA Website Services leverages Apache Solr for a few features:

Quick Start / Upgrade path

  • Log in as admin.

  • Go to admin/modules and enable the YMCA Website Services Search API module.

    image

  • Approve the next step for enabling Database Search.

    image

  • Go to the Search API configuration page admin/config/search/search-api.

  • Verify that the “OpenY Database Search” server is enabled.

  • Visit “Search content” index.

    image

TIP: Admins can enable and the Solr search and switch the index between servers.

  • Index content by clicking “Index now”.

    image

  • Go to the homepage and search for any keyword.

    image

  • Verify search results are displayed correctly.

Starting from the YMCA Website Services installer

  • Find the Select search service step displayed during the YMCA Website Services installation.
  • Choose from one of these options during installation:
    • None
      • Nothing happens if the user chooses this option, search modules are displayed after installation.
    • YMCA Website Services Google Custom Search
      • Google Custom Search configuration form is displayed if the user chooses this option.
      • The YMCA Website Services Google Search module is enabled after installation and ready to use.
    • YMCA Website Services Search API
      • Search API backend options are displayed in this case with the following options:
        • Database
          • The YMCA Website Services Search API module is enabled after installation. The database search API server is enabled. The search is ready to use after content indexation.
        • Solr
          • Additional installation step with Solr configuration form is displayed in this case and user can specify all params for Solr connection. The YMCA Website Services Search API module is enabled after installation, Solr search API server is enabled. The search is ready to use after content indexing (if the correct Solr settings were used).

Switch from database search backend to Solr backend

Watch a video tutorial on how to switch an existing site from the database backend to a Solr server. This requires a Solr server to be configured in your environment.

  • Edit the “Solr search” server from the Search API configuration admin/config/search/search-api.
  • Add the configuration information for your Solr server. Refer to Drupal’s Search API Solr project for troubleshooting connection information.
  • Save the server and observe that Search API has successfully connected to your server.
  • Edit the “Search content” index and change the “Server” field to the newly configured “Solr Search” index.
  • Visit the “Search content” index and click “Index now” to re-index the content.

Solr search can be used with Layout Builder, and requires a few extra steps.

Configure Solr to index the new content types

In order for Solr to index the new content types, they need to be added to the index.

  1. Enable the YMCA Website Services Search API (openy_search_api) module if not already enabled.
  2. Go to Admin > Configuration > Search and metadata > Search API, then Edit the Search content index. (/admin/config/search/search-api/index/search_content/edit)
  3. Configure Solr to index the Layout Builder content types:
    • Scroll down, expand Configure the Content datasource, and check the content types that should be indexed for search.
      “Configure the content datasource” options
    • Save the form.
  4. Configure how Solr indexes the Layout Builder content types:
    • From the Search API configuration, open the dropdown for the Search content index and choose Fields.
      The “fields” option in the options dropdown of the Search API configuration
    • To the right of the Rendered HTML output field options, choose Edit.
    • For each newly added content type, switch “Don’t include the rendered item” to the right view mode.
      Choose the view mode for each content type.
      • In general, new Layout Builder specific content types will use the “Default” view mode, while older Layout Builder-compatible content types should use the “Full content” view mode.

        Content typeView mode
        Article (LB)Default
        BranchFull
        Event (LB)Default
        CampFull
        Camp SubpageFull
        FacilityFull
        Landing Page (LB)Default
        ProgramFull
        Program SubcategoryFull
      • Save the page.

  5. Once your changes have been saved, re-index the content to see the changes reflected in search results.

Set up a Layout Builder search page

  1. If you have an existing site, disable the old search page:
    • Go to /search.
    • Remove the URL alias by unchecking Generate automatic URL alias in the sidebar then deleting /search.
    • Uncheck Published and Save to un-publish the page.
  2. Create a new Landing Page (Layout Builder) (node/add/landing_page_lb):
    • Set the Title to “Search”.
    • Ensure Generate automatic URL alias is unchecked in the sidebar and set the alias to /search.
      • If that alias results in an error, you can remove the old one at Admin > Configuration > Search and metadata > URL aliases
    • Check Published then Save and edit layout.
  3. Add a Small Banner to the header with a title for the page, like “Search”.
  4. Add the search results block to the page:
    • In the Body section, Add block, then expand All system block and choose Content search block from the Paragraph Blocks section.
    • Optionally, choose to hide the title or change the number of items to display.
    • Save layout and check your page.
  5. Change the Search API config to use your new page:
    • Go to Admin > YMCA Website Services > Settings > Search API settings (/admin/openy/settings/search-api) and set the Search page id to the node id of your new page.
    • Or, change the config with drush:
      drush cset openy_search_api.settings search_page_id <nid>
      
  6. Test the search box in the Layout Builder page header to ensure the new configuration works as expected.

Legacy Solr Support

The contrib Search API Solr module supports a broad swath of Solr versions, but occasionally old versions are dropped from support in the main module. If, when enabling YMCA Website Services Search API, you encounter errors that your version of Solr is out of date, you may need to enable the Search API Solr Legacy module. As of January 2022, Search API Solr Legacy supports Solr 3.6 through 6.4.

The error message when using an old version of Solr may look something like this:

Notice: Undefined index: 4.x in Drupal\search_api_solr\Controller\SolrConfigSetController->getConfigFiles()

12.28 - Install SSL certificate

Web Security and YMCA Website Services

As many parties have moved to Encrypt the Web, https sites and SSL certificates have shifted from “nice to have” to necessities.

If you’re running YMCA Website Services on a managed platform you most likely have SSL already configured. If you choose to manage YMCA Website Services on your own, you’ll have to install a certificate.

Let’s Encrypt is “a free, automated, and open certificate authority (CA), run for the public’s benefit. It is a service provided by the Internet Security Research Group (ISRG).” Certbot is “a free, open source software tool for automatically using Let’s Encrypt certificates on manually-administrated websites to enable HTTPS.”

Certbot maintains detailed documentation for installing SSL certificates on a variety of systems. Simply visit Certbot’s instructions wizard and follow the instructions to configure your server.

12.29 - Installation With Drush

Use drush site-install command.

Basically you use something like this:

drush site-install openy --account-pass=password --db-url="mysql://user:pass@host:3306/db" --root=/var/www/docroot

Complete YMCA Website Services profile preset and YMCA Website Services Carnation theme is used in this case.

You can set which preset must be installed by specifying it with openy_configure_profile.preset variable, and theme with openy_theme_select.themevariable e.g.:

drush site-install openy --account-pass=password --db-url="mysql://user:pass@host:3306/db" --root=/var/www/docroot openy_configure_profile.preset=extended openy_theme_select.theme=openy_carnation

12.30 - Module Development

Module content removal

When deleting an entity, where plugins or services of removing module are used, then content removal should be done in the hook_uninstall() of that module. See openy_prgf_camp_menu.install as example.

Creating a new module

When creating a module on Drupal.org, be sure to check the following:

  1. Add all current maintainers.
  2. Edit and add this module template:
<table class="views-view-grid" bgcolor="#d4efcc"><tr><td><h2>🇺🇦</h2></td><td>This module is maintained by Ukrainian developers. Please consider <a href="https://supportukrainenow.org">supporting Ukraine</a> in a fight for their freedom and the safety of Europe.</td></tr></table>

<!-- Edit this section with a short intro to the module -->
This component/module allows you to ... when using the <a href="https://github.com/YCloudYUSA/y_lb">YMCA Layout Builder</a> package.

<!-- Leave this section as is -->

<ul>
    <li>Read our <a href="https://github.com/YCloudYUSA/yusaopeny#installation">instructions for getting started</a>.</li>
    <li><a href="https://ds-docs.y.org/docs/">Search our documentation</a> for assistance.</li>
    <li><a href="https://ds-docs.y.org/community/">Review our Community Resources</a> for more information.</li>
</ul>

<h3 id="project-requirements">Requirements</h3>

This project is meant to be used with the <a href="https://www.drupal.org/project/openy">YMCA's Website Service distribution</a>.

12.31 - one-click install how-to

This walk-through is outdated and is in the process of being updated. Instead, try:

Installing YMCA Website Services on DigitalOcean droplet

  1. Create Ubuntu 16.04 LTS x64 droplet in area close to your location image

Use 2Gb droplet or more powerful if you need. Do not use 1Gb option - YMCA Website Services will fail on it.

  1. Login to the SSH console of the droplet
  2. Follow the comment from https://github.com/YCloudYUSA/yusaopeny-project/blob/8.1.x/scripts/openyonclickinstall.sh Basically - run a command under root
curl -Ls http://bit.ly/initopeny | bash -s

The command above will run approximately 10 minutes. 4. In the end you should see a message similar to

Open http://127.0.0.1/core/install.php to proceed with OpenY installation.
  1. Open the link from the above message(from your console, not from this document) with your browser and proceed with YMCA Website Services installation.

Enjoy.


In order to install the latest beta release of YMCA Website Services 2.0 change the command on step 3:

curl -Ls http://bit.ly/initopeny | bash -s beta

If you find any issues please post a message to the issue queue https://github.com/YCloudYUSA/yusaopeny/issues

12.32 - Open Y analytics sunset

Preamble

Back on 28 Jan 2020 Open Y decided to add an anonymous analytics module openy_analytics which was a free opt-in/opt-out solution for the Core team to gather stats from Open Y sites about the frequency of components used.

The idea behind this was to gather data in order to understand the demand for the components in Open Y and use the data to make better decisions.

Recently, the Open Y Core Team decided to sunset this functionality and remove openy_analytics as well as openy_update modules from the Open Y Distribution, as this feature was rarely used. By sunsetting this functionality, we reduced server load from Open Y instances and archive the analytics server.

How to opt-out from analytics subsystem

Visit YMCA Website Services -> Terms and Conditions in your YMCA Website Services site instance and uncheck the Optional Permissions checkbox

image

After submitting this form your site will stop sending anonymous data.

If the checkbox was not enabled just disregard it, you didn’t opt-in earlier.

Deprecation action

Uninstall and deprecation was done in #2537

12.33 - Participant Agreement

YMCA Website Services PARTICIPATION AGREEMENT

This YMCA Website Services Participation Agreement (this “Agreement”) is between YUSA, and participating YMCA member associations in the United States (“Member Associations”). YUSA has received license rights from the National Council of Young Men’s Christian Associations of the United States of America, an Illinois not-for-profit corporation (“YUSA”) to provide the Platform (as defined below) to you.

The purpose of the YMCA Website Services community is to collectively advance YMCA web and online experiences to better serve the YMCA mission. The terms of this Agreement govern your use of YMCA Website Services’s open-source digital content management system, which facilitates the sharing of YUSA brand-compliant website templates, tools, applications, and related digital assets (“Platform”). The community provides a collaborative environment for individuals to positively interact and participate in the Platform. These guidelines address the standards and expectations of those contributing to and participating in the YMCA Website Services community and are meant to help our YMCA community grow and thrive. Your participation in YMCA Website Services means that you agree to the following guidelines and to the YMCA Website Services Terms of Use.

YMCA BRAND ASSETS

No right is granted by this Agreement to use or license the YUSA brand assets. YMCA brand assets, which include, but are not limited to YMCA trademarks, trade dress, logos and other indicia of origin, are owned and controlled by YUSA. YUSA provides the Platform to you under license from YUSA. Accordingly, neither YUSA nor any Member Association shall, either directly or indirectly, at any time do any act or thing contesting the validity of YUSA’s trademarks or its rights thereto.

Only Member Associations in the United States will have access to use any YUSA brand assets included in YMCA Website Services. All use by Member Associations must be in compliance with YUSA brand standards and guidelines as established by the National Board. YUSA is a third party beneficiary to this Agreement, with the right to enforce each of the terms of this Agreement with respect to YMCA Website Services and you. YMCA Website Services shall send copies of all notices due to you under this Agreement to each of you and YUSA.

BEING A MEMBER OF OUR COMMUNITY

Participation: YMCA Website Services will be at its best if each member participates in the community. There are many different ways you can participate, including through using the platform, presentations, forums, summits, emails, calls, etc. We encourage your active participation to the extent you feel you are able and willing. YUSA may publicly disclose your participation in the project.

Contribution: YMCA Website Services encourages Members to contribute to the enhancement, editing, and building of YMCA Website Services. To ensure valuable contributions to the community, YMCA Website Services encourages Members to stay familiar and up-to-date with the YMCA Website Services roadmap, as well as new features in active development. When you make changes that improve YMCA Website Services features, please contribute those back to the community by ensuring they are re-useable and decoupled.

Collaboration: YMCA Website Services encourages Members to collaborate across the YMCA community to share costs and efforts on building new capabilities.

Transparency: Customizations of code provided by YMCA Website Services for your website will likely increase the initial fees, support, and upgrade costs for your website. When modifying or redistributing code, you must include a notice giving credit to YMCA Website Services for the portion of the YMCA Website Services code you use.

Promotion: YMCA Website Services encourages Members to share their expertise and YMCA Website Services experience to expand its reach and accessibility to experienced and new members alike. There will be many opportunities for members to support YMCA Website Services and its marketing and messaging initiatives.

Reporting Problems

If you believe someone has violated the YMCA Website Services Community Guidelines, or have any questions or concerns, please contact YUSA at https://ymca.org.

12.34 - Patch YMCA Website Services

Here you can find instructions how you can patch YMCA Website Services distribution used on your project.

When you need to patch YMCA Website Services

  • In case you found a bug and prepared a patch for YMCA Website Services on github.
  • In case you developed a new feature that will be good to have in YMCA Website Services and created Pull Request to YMCA Website Services repository
  • In case you want to add a feature that added to YMCA Website Services but not included yet to YMCA Website Services release.

How to patch YMCA Website Services via composer?

If you followed instructions docs/Development/Start new YMCA Website Services project and you have configured composer.json you need just to do a few simple steps:

  1. Build a link to a patch using pull request ID

    https://patch-diff.githubusercontent.com/raw/YCloudYUSA/yusaopeny/pull/XXX.patch
    

Where XXX is a number of pull request you want to use.

  1. Add a new section patches to the section extra and add a patch to YMCA Website Services repository, as on this example:

    "extra": {
        "installer-paths": {
          ...
        },
        "enable-patching": true,
        "patches": {
            "YCloudYUSA/yusaopeny": {
                "Patch description": "https://patch-diff.githubusercontent.com/raw/YCloudYUSA/yusaopeny/pull/XXX.patch"
            }
        }
    }
    
  2. After adding a patch execute command composer update

  3. Verify you can see added changes in YMCA Website Services

  4. Enjoy!

12.35 - Profile custom configuration

The distribution supplements the Drupal install process with a number of custom additions.

There are plenty of YAML configuration files at the root of the profile. Some of them are standard Drupal configuration and others are YMCA Website Services specific.

Basic .yml files

The following ones are very common and can be found in many Drupal modules:

  • openy.info.yml ( documentation) - defines YMCA Website Services as a profile and defines its name and dependencies
  • openy.libraries.yml ( documentation) - defines global YMCA Website Services drupal asset libraries
  • openy.permissions.yml - defines global YMCA Website Services permissions
  • openy.services.yml ( documentation) - if you are introducing a service that is needed by all (or the majority of) YMCA Website Services modules add it here and store the service class file in the openy/src directory

YMCA Website Services specific .yml files

There are also a few configurations related to the YMCA Website Services installation process and the YMCA Website Services package system:

  • openy.installation_types.yml
  • openy.themes.yml
  • openy.packages.yml

YMCA Website Services packages

The YMCA Website Services package system introduces a new level of abstraction, shifting from the Drupal standard module level to packages. Packages represent complete YMCA Website Services features, which could include multiple modules. A package is a declaration of a group of several modules. You can enable and disable a package, which means the whole set of the associated Drupal modules are enabled or disabled.

This approach provides a convenient way of managing YMCA Website Services features.

The YMCA Website Services system module provides a page where the enabled and available packages are listed and can be installed/uninstalled. See the YMCA Website Services Extend page (at /admin/openy/extend).

YMCA Website Services Installation types

When an YMCA Website Services site is installed there is also another abstraction level - the installation type - which groups packages.

The hierarchy is as follows:

  • installation type
    • package
      • module
      • module
    • package
      • module
      • module
      • module
    • package
      • module
  • installation type
    • package
      • module

openy.installation_types.yml

openy.installation_types.yml defines the high-level presets available during website installation.

File structure:

standard:
  name: Standard
  packages:
    - alerts
    - editorial
    - news
    - seo
    - webform

extended:
  name: Extended
  packages:
    - alerts
    - analytics
    - ...

complete:
  name: Complete/Developer
  hidden: true
  packages:
    - activenet
    - ...

Each installation type has a machine name which is a key of the top-level items.

Properties of installation types:

  • name (required) - a human-friendly name of the installation type
  • packages (required) - a list of YMCA Website Services packages that are associated with the installation type. The packages are listed when a website is installed via the web-interface
  • hidden (optional) - if the installation type must be hidden when a website is installed via the web interface

If an YMCA Website Services site is installed using the web interface there is a step where the installation type can be selected.

If an YMCA Website Services site is installed using Drush then the installation type can be specified by an optional argument for the drush site-install command ( Installation with Drush):

  drush site-install openy \
     --db-url="mysql://user:pass@host:3306/db" \
     --root=/docroot \
     openy_configure_profile.preset=extended

openy.packages.yml

Packages are defined in openy.packages.yml. This file is placed in the root of the profile, it’s automatically detected and used by the YMCA Website Services installation process.

File structure

blog:
  name: 'Blog'
  description: "Blog package provides a set of modules to maintain and create different blog post listings."
  help: '<p>Using Blog package you can create and maintain blog posts and create flexible listings of blog posts. Watch a video below to learn more about blog anatomy.</p>
  <iframe width="560" height="315"
               src="https://www.youtube.com/embed/Vg1fy29DhdQ"
               frameborder="0" allow="autoplay; encrypted-media"
               allowfullscreen></iframe>'
  modules:
    - openy_node_blog
    - openy_prgf_blog_listing
    - openy_prgf_featured_blogs
    - openy_prgf_blog_branch
    - openy_prgf_blog_camp
    - openy_prgf_blog_latest
    - openy_txnm_blog_category

camps:
  name: 'Camps'
  description: "Camps package provides a set of modules to maintain camps and add them to the location finder page."
  help: '<p>Using Camps package you can create and maintain Camps and extend location finder page to include them.</p>'
  modules:
    - openy_prgf_camp_menu
    - openy_loc_camp

Each package has a machine name which is a key of the top-level items.

Properties of packages:

  • name (required) - a human-friendly name of the package.
  • description (required) - a short description of the package features to show up on the YMCA Website Services Extend page.
  • help (required) - an HTML markup for the installation via web interface. It contains a help message that pops up when the package name is clicked on the Select installation type step.
  • modules (required) - a list of Drupal modules that are associated with the package. When the package is installed/uninstalled the associated modules are installed/uninstalled respectively. When a website is installed via web interface all the available packages are listed there but split into two groups - the ones that are to be installed (associated with the selected package) and all the rest.

openy.theme.yml

The file defines which YMCA Website Services themes are available for installation when a website is being installed.

If an YMCA Website Services site is installed using Drush then the theme can be specified by an optional argument for the drush site-install command ( Installation with Drush):

  drush site-install openy \
    --db-url="mysql://user:pass@host:3306/db" \
    --root=/docroot \
    openy_configure_profile.preset=extended \
    openy_theme_select.theme=openy_rose

12.36 - Program Event Framework

A robust set of content types and syncer modules that build interactive tools to help members find and book activities.

“Program Event Framework” refers to the entire ecosystem of content and modules in YMCA Website Services that work together to build Activity Finder, Group Schedules, and more.

Content Types

These provide the containers for PEF content in Drupal:

Syncers

These provide integrations to pull content from external systems into the content types:

Displays

These display the content for users to discover:

Data model

The network of data structures in PEF can be confusing. Here’s how it all works

---
title: PEF Relationships
---
erDiagram
    program {
        entityRefTerm field_program_color
        paragraph field_content
        paragraph field_header_content
        paragraph field_sidebar_content
        textFormattedLong field_program_description
        entityRefMedia field_program_icon
        entityRefMedia field_program_image
        layout layout_builder__layout
        meta field_meta_tags
        bool field_use_layout_builder
    }
    program_subcategory {
        paragraph field_bottom_content
        entityRefTerm field_category_color
        paragraph field_content
        paragraph field_sidebar_content
        textFormattedLong field_category_description
        paragraph field_header_content
        entityRefMedia field_category_image
        layout layout_builder__layout
        meta field_meta_tags
        entityRefProgram field_category_program
        bool field_use_layout_builder
    }
    program_subcategory }|--|| program : field_category_program
    activity {
        textFormattedLong field_activity_description
        entityRefProgSub field_activity_category
    }
    activity }o--|| program_subcategory : field_activity_category
    "class" {
        entityRefActivity field_class_activity
        paragraph field_bottom_content
        paragraph field_content
        textFormattedLong field_class_description
        paragraph field_header_content
        meta field_meta_tags
        paragraph field_sidebar_content
    }
    "class" }o--|| activity : field_class_activity
    session {
        listText field_activity_type
        entityRefClass field_session_class
        textFormattedLong field_session_description
        dateRange field_session_exclusions
        listText field_session_gender
        numberInt field_availability
        bool field_session_in_mbrsh
        textPlain field_session_instructor
        entityRefLoc field_session_location
        numberInt field_session_max_age
        listText field_session_max_grade
        numberDec field_session_mbr_price
        numberInt field_session_min_age
        listText field_session_min_grade
        numberDec field_session_nmbr_price
        bool field_session_online
        entityRef field_session_plocation
        numberInt field_productid
        link field_session_reg_link
        textPlain field_session_room
        paragraph field_session_time
        numberInt field_wait_list_availability
    }
    session }|--|| "class" : field_session_class
    session ||--o{ session_time_paragraph : field_session_type
    session_time_paragraph {
        dateRange field_session_time_date
        listText field_session_time_days
        textPlain field_session_time_override
    }
    branch {

    }
    camp {

    }
    facility {

    }
    session }o--|| branch : field_session_location
    session }o--|| camp : field_session_location
    session }o--|| facility : field_session_location
    session }o--|| facility : field_session_plocation

More information on how this data gets out into each display will be coming soon.

12.36.1 - Activity Finder

Provides an interactive tool to help members find and book activities.

YCloudYUSA/yusaopeny_activity_finder is bundled as a “decoupled application” that ships with the YMCA Website Services distribution.

Requirements

This module requires the following modules:

  • openy_map (For pulling the list of location-related content types.)

This module also requires one of the following to store data:

  • A Solr server (preferably a server or index per-environment).
  • A subscription with access to the Daxko API.

Activity Finder is most often used with a syncer to pull data from an external source.

Installation

Activity Finder version 4 is the current major version. Prior to 9.2.10.0, the distribution required ^3.1 || ^4.0, allowing you to choose which version you want to use depending on the project requirements.

Deprecations

Outdated implementations are not removed immediately, allowing you to update your projects and migrate to new components without breaking your site. They are marked with [deprecated] notices in the next version and are planned to be removed in the future releases.

New Projects

Install as you would normally install a contributed Drupal module. For further information, see Installing Drupal Modules.

New projects should enable:

  • Activity Finder (openy_activity_finder)

then choose one or both of the front ends:

  • LB (Layout Builder) Activity Finder (lb_activity_finder)
  • Open Y Paragraph Activity Finder (openy_prgf_activity_finder_4)

and finally enable one of these data stores:

  • Search API Solr (search_api_solr)
  • Daxko API v2 integration (openy_daxko2)

Existing Projects

You have a choice of either staying on the same version you use or to update to the next version. It depends on your project requirements and customizations. We recommend updating to the latest release if you have resources for it.

Update from version 3.x to version 4.x

Activity Finder is a complex functionality, it connects together many different pieces and might require additional steps to make it working. The list of actions below outlines the major steps to get Activity Finder updated to version 4.

  • Update the codebase using the composer command: composer require ycloudyusa/yusaopeny_activity_finder:&#34;^4.0&#34;
  • Run database updates drush -y updb.
    • Verify there were no errors and updates went fine.
  • Install the new "Open Y Paragraph Activity Finder" (openy_prgf_activity_finder_4): drush en openy_prgf_activity_finder_4
  • Create or update a existing Landing Page with Activity Finder.
  • Add Activity Finder paragraph (replace the deprecated paragraph), configure it and save the page.
    • Verify the page and Activity Finder functionality is working fine
  • The previous version of Activity Finder used 2 landing pages with 2 paragraph types - one for wizard and another one for results. Find and remove these pages.
  • Uninstall "OpenY Paragraph Activity Finder" (openy_prgf_activity_finder).
  • Uninstall "OpenY Paragraph Activity Finder Search" (openy_paragraph_activity_finder_search).

Configuration

Set up Solr

In order to install Solr - check the documentation on Drupal.org.

After enabling the above modules you should visit /admin/config/search/search-api and obtain config.zip from preconfigured by Open Y Solr Server setup image

This configuration should be installed on your Solr server as an independent core. it should be extracted to the conf directory of a solr core

image

Once it is done - ensure the name of your core from core.properties file added to Solr Server config in Open Y image

Solr server configuration could be found in Dropdown at /admin/config/search/search-api image image

If you prefer drush configuration you may use commands below, just replace SOLR_CORE_IS_HERE with real core name

drush cset -y search_api.server.solr backend_config.connector_config.host 127.0.0.1 -y
drush cset -y search_api.server.solr backend_config.connector_config.core ${SOLR_CORE_IS_HERE} -y
drush search-api:reset-tracker
drush search-api:index

Once this is done you should see Solr Server as Index as Enabled on a /admin/config/search/search-api

If you installed Open Y with Demo content now it is time to create a Landing Page with the Activity Finder v4 component on it.

In Open Y we have a specially created module which can this for you

Enable openy_prgf_af4_demo by drush command

drush en openy_prgf_af4_demo

and you’d get /activity-finder-v4 Landing Page created automatically which should look like image

when you visited it. By visiting /activity-finder-v4?step=results or clicking on suggested buttons you should see results, activities with filters and all other functionality, shipped with Activity Finder v4 For the Demo content from OpenY, it should look like image

Set Trusted Redirect Host patterns

Activity Finder has a feature to track redirects to 3rd party systems. In order to control the URLs to redirect to you should use the trusted host patterns. This feature works similar to Drupal core trusted_host_patterns setting.

Example - add this section to the settings.php:

// Trusted hosts to redirect to for Activity Finder.
$settings[&#39;activity_finder_trusted_redirect_host_patterns&#39;] = [
  &#39;^apm\.activecommunities\.com$&#39;,
];

It is also recommended to disallow these paths in robots.txt:

# Activity Finder redirects
Disallow: /af/register-redirect/
Disallow: /index.php/af/register-redirect/

Add the Activity Finder block

See the full documentation on Activity Finder for information on how to add the block to your page and block options.

Troubleshooting & FAQ

To demo Activity Finder, see these sandboxes:

Limitations with using Daxko backend

When using the Daxko backend. Developers should be aware of these limitations:

  • We can't use home branch functionality on start screen.
  • We have to use Legacy mode.
  • We can't display count of result for each age on the age's wizard step.
  • We can't display count of available spots for each activity, before user click by activity details.
  • Limited pager on results page. We can display only previous and next page link and can't display count of pages.

How to override processResults in Activity Finder

See openy_activity_finder.api.php

/**
 * Implements hook_activity_finder_program_process_results_alter().
 */
function custom_module_activity_finder_program_process_results_alter(&amp;$data, NodeInterface $entity) {
  // Get formatted session data from some custom service.
  $formatted_session = \Drupal::service(&#39;ymca_class_page.data_provider&#39;)
    -&gt;formatSessions([$entity], FALSE);
  $formatted_session = reset($formatted_session);

  // Fix pricing according to YMCA price customization.
  $data[&#39;price&#39;] = &#39;&#39;;
  if (!empty($formatted_session[&#39;prices&#39;])) {
    foreach ($formatted_session[&#39;prices&#39;] as $price) {
      $data[&#39;price&#39;] .= implode(&#39; &#39;, $price) . &#39;&lt;br&gt;&#39;;
    }
  }

  // Fix availability and registration according to YMCA customization.
  $messages = [
    &#39;begun&#39; =&gt; t(&#39;This class has begun.&#39;),
    &#39;will_open&#39; =&gt; t(&#39;Registration for this class opens shortly. Please check back.&#39;),
    &#39;inperson&#39; =&gt; t(&#39;Online registration is closed. Visit a YMCA branch to register.&#39;),
    &#39;included_in_membership&#39; =&gt; t(&#39;Included in Membership&#39;),
  ];

  if (isset($messages[$formatted_session[&#39;reg_state&#39;]])) {
    $data[&#39;availability_note&#39;] = $messages[$formatted_session[&#39;reg_state&#39;]];
  }
}

How to add external functionality to analytics event

See openy_af4_vue_app/main.js

// Listen to a custom event to pass events in Google Analytics.
document.addEventListener(&#39;openy_activity_finder_event&#39;, (e) =&gt; {
  const { action, label, value, category } = e.detail

  if (window.gtag) {
    window.gtag(&#39;event&#39;, action, {
      event_category: category,
      event_label: label,
      value: value
    })
  } else if (window.ga) {
    window.ga(&#39;send&#39;, &#39;event&#39;, category, action, label, value)
  }
})

Example of custom event

document.addEventListener(&#39;openy_activity_finder_event&#39;, (e) =&gt; {
  const { action, label, value, category } = e.detail // Properties you can use for analitics.
  ...
  { your_functionality }
  ...
})

Add custom component in between of results

it allows flexibility in terms of results rendering for the developer:

          &lt;ResultsList
            :results=&#34;data.table&#34;
            :ages=&#34;ages&#34;
            :selected-ages=&#34;selectedAges&#34;
            :legacy-mode=&#34;legacyMode&#34;
            :disable-spots-available=&#34;disableSpotsAvailable&#34;
            @showActivityDetailsModal=&#34;showActivityDetailsModal($event)&#34;
          /&gt;

can be changed to this:

          &lt;ResultsList
            :results=&#34;data.table.slice(0, 2)&#34;
            :ages=&#34;ages&#34;
            :selected-ages=&#34;selectedAges&#34;
            :legacy-mode=&#34;legacyMode&#34;
            :disable-spots-available=&#34;disableSpotsAvailable&#34;
            @showActivityDetailsModal=&#34;showActivityDetailsModal($event)&#34;
          /&gt;
          &lt;YGBWAds /&gt;
          &lt;ResultsList
            :results=&#34;data.table.slice(2)&#34;
            :ages=&#34;ages&#34;
            :selected-ages=&#34;selectedAges&#34;
            :legacy-mode=&#34;legacyMode&#34;
            :disable-spots-available=&#34;disableSpotsAvailable&#34;
            @showActivityDetailsModal=&#34;showActivityDetailsModal($event)&#34;
          /&gt;

where YGBWAds is custom component to render custom content in between the results. See https://github.com/ymcatwincities/openy_activity_finder/pull/148

12.36.1.1 - Adding Activity Finder to your site

Both v4 and v3 could live together as independent programs on your site, and they will show the same data from the Program Event Framework of Open Y image

On the screenshot above you can see Open Y components in a list for both Activity Finder v3 and v4

In order to create v3 Activity Finder application you need to create 2 landing pages, referencing each other, one with Activity Finder [deprecated], another one with Activity Finder Search [deprecated] image See

image See

In order to create v4 Activity Finder application, you need to create 1 landing page, with the Activity Finder component on it image See sandbox

12.36.1.2 - Bootstrap version support for Activity Finder

In the Carnation theme we use bootstrap v 4.6 and for this case we have a special option Bootstrap version in settings form for Activity Finder v4 (/admin/openy/settings/activity-finder)

image

Carnation theme uses Bootstrap v4 And when we set it to 4 then the AF4 result page looks good for the tablet screen on Carnation image image

12.36.1.3 - Configuring Solr for Activity Finder

In order to install YMCA Website Services and Activity Finder v4 you need to run command

composer create-project ycloudyusa/yusaopeny-project build --no-interaction

Which will pull YMCA Website Services on Drupal stable version with Activity Finder v4 latest stable version Then you should proceed with a regular installation with Demo content enabled as described in our tutorials. It’s better to setup Extended or Custom( only via drush ) in order to skip a bunch of manual steps

When you have YMCA Website Services (former Open Y) installed, list of the command you need to run in order to enable Activity Finder v4

# Solr 8.8.1, Activity Finder v4
drush en -y search_api_solr_legacy openy_prgf_activity_finder_4 || true
drush en -dvy openy_prgf_af4_demo || true

After enabling the above modules you should visit /admin/config/search/search-api and obtain config.zip from preconfigured by Open Y Solr Server setup image

Hint: Open Y module’s infrastructure supports SOLR versions 8 up to the latest 8.8.1 as well. Activity Finder is tested against Solr 8.8.1. In order to install Solr - check the documentation on Drupal.org. Solr versions prior 7.7 are End of Life, Open Y team is working on upgrading support for decent versions of Solr.

This configuration should be installed on your Solr 8.8.1 server as a independent core. it should be extracted to conf directory of a solr core

image

Once it is done - ensure the name of your core from core.properties file added to Solr Server config in Open Y image

Solr server configuration could be found in Dropdown at /admin/config/search/search-api image image

If you prefer drush configuration you may use commands below, just replace SOLR_CORE_IS_HERE with real core name

# Solr 8.8.1, Activity Finder v4

drush cset -y search_api.server.solr backend_config.connector_config.host 127.0.0.1 -y || true
drush cset -y search_api.server.solr backend_config.connector_config.core ${SOLR_CORE_IS_HERE} -y
drush cset -y search_api.server.solr backend_config.connector_config.solr_version 8 -y
drush search-api-mark-all || true
drush sapi-i || true

Once you done this you should see Solr Server as Index as Enabled on a /admin/config/search/search-api

If you installed Open Y with Demo content now it is time to create a Landing Page with the Activity Finder v4 component on it. In Open Y we have a specially created module which can this for you Enable openy_prgf_af4_demo by drush command

# Solr 8.8.1, Activity Finder v4
drush en -dvy openy_prgf_af4_demo || true

and you’d get /activity-finder-v4 Landing Page created automatically which should look like image

when you visited it. By visiting /activity-finder-v4?step=results or clicking on suggested buttons you should see results, activities with filters and all other functionality, shipped with Activity Finder v4 For the Demo content from OpenY, it should look like image See sandbox

Activity Finder v3 also installed when you chose Custom Installation with Demo content and is part of demo content. Could be accessed via /activity-finder url See sandbox

Development SOLR 8 installation

Solr Docker readme https://github.com/docker-solr/docker-solr/blob/master/README.md

mkdir solr8
sudo chown 8983:8983 solr8
docker run -v "$PWD/solr8:/var/solr" -p 8984:8983 --name d9_sandbox_carnation_custom solr solr-precreate d9_sandbox_carnation_custom
# stop docker and remove created container
# unpack solr_8.x_config.zip into data/d9_sandbox_carnation_custom/conf/

docker run -v "$PWD/solr8:/var/solr" -p 8984:8983 --name d9_sandbox_carnation_custom solr solr-precreate d9_sandbox_carnation_custom

Configure Open Y to change Solr version to 8.x Change address port to 8984

Rebuild index information Reindex Check Activity Finder v4 is working now

12.36.2 - PEF Schedules

The “PEF Schedules” module allows Ys to create and manage schedules with a simple, calendar-based view.

YCloudYUSA/y_pef_schedule

The Y PEF Schedule module provides a calendar functionality for scheduling events. It includes a Vue.js component, fullcalendar-app, to display and interact with the calendar.

Requirements

Installation

composer require ycloudyusa/y_pef_schedule
drush en y_pef_schedule lb_simple_schedule
  1. Install as you would normally install a contributed Drupal module. For further information, see Installing Drupal Modules.
  2. Enable the module by navigating to Admin > Extend (/admin/modules) in your Drupal admin interface, then enabling "Y PEF Schedules Admin tool" and "LB Simple Schedule".

Configuration

  1. Configure the calendar settings at Admin > YMCA Website Services > Settings > Schedules calendar settings (/admin/openy/settings/schedules-calendar)
  2. Go to Admin > Content > Schedules Calendar (/admin/openy/branch-schedules) and select a branch.

After choosing a branch, you can view the calendar. The calendar features include:

  1. Viewing events in weekly or daily format.
  2. Viewing the main information of the event (by clicking on the event).
  3. Creating a new event (using the Session Content Type).
  4. Updating existing events.
  5. Downloading the schedule in PDF format.
  6. Filtering results by categories.

Showing the calendar on a page

Once you have added sessions to a calendar, you can add the calendar block to a Layout Builder page to display on the site. Ensure the "LB Simple Schedule" is enabled first.

  1. Edit the Layout of a Layout Builder page (Branch, Landing Page, etc).
  2. Create or find a section, then Add Block.
  3. Choose Add custom/content block then Simple Schedule.
  4. Add a Title and choose a Branch to populate the calendar.
  5. Save the block and the page.

Customization

A few options are available for advanced customization of the calendar.

Retrieving Events

The module provides controllers to handle AJAX requests for fetching events. To create a custom request, use the following route in your JavaScript code:

axios.get(&#39;/fullcalendar-api/get-event-data-date-range/{location}/{start}/{end}/{category}&#39;)
  .then(response =&gt; {
    const events = response.data;
    // Process the received events as needed
  })
  .catch(error =&gt; {
    console.error(&#39;Error fetching events:&#39;, error);
  });

Replace {location}, {start}, {end}, and {category} with the appropriate values.

Creating Events

The fullcalendar-app component allows users to create events interactively. When a date is clicked, a modal form is displayed for users to enter event details such as title, category, time, and date.

To customize the form or extend the functionality, refer to the Vue.js component documentation and customize the handleDateClick and createEvent methods in the fullcalendar-app component.

Troubleshooting

Known issues

  1. After creating a series of events, it is created, but only one event is displayed in the calendar, the page must be refreshed to see the correct data
  2. The color is fixed to the session and not to the category
  3. PDF format is A3

12.36.3 - Traction Rec Integration

Instructions for configuring and importing data from Traction Rec into the Program Event Framework

Via Traction Rec Integration (ycloudyusa/openy_traction_rec)

This module provides YMCA Website Services integration with the Traction Rec CRM.

Installation

Require this module:

composer require ycloudyusa/openy_traction_rec

Then enable the necessary modules and submodules:

drush en openy_traction_rec openy_traction_rec_import openy_tr_activity_finder

Usage

The main module itself provides only API that helps fetch data from TractionRec. More specific functionality is provided in submodules:

  • YMCA Website Services Traction Rec: PEF import provides PEF migrations.
  • YMCA Website Services Traction Rec: Activity Finder extends YMCA Website Services Activity Finder with the new fields and logic.

See modules/openy_traction_rec_import/README.md for details on how to import content once configuration is complete.

Configuration

Create a Connected App in Salesforce

  1. Create a new private key and X509 certificate, customizing the subj options in the command to suit your organization. (See the manual for openssl-req to understand the options here.)
    openssl req -x509 -noenc -sha256 -days 365 \
     -keyout traction_rec.key \
     -out traction_rec.crt \
     -subj &#34;/C=US/ST=Illinois/L=Chicago/O=My YMCA/OU=Org/emailAddress=youremail@example.com&#34;
    
    • The email address in the certificate does not need to match the email on the Connected App.
    • The certificate must be renewed yearly (or after the set number of --days). We recommend you set a reminder in order to prevent unwanted failures.
  2. In Salesforce > Setup > App Manager, create a New Connected App.
    • Set a Name and Email.
      • The Contact Email is not used for authentication.
    • Check Enable OAuth Settings
      • Set the callback url as the base URL of your site
      • Check Use digital signatures and upload the X509 certificate (.crt) created above.
      • Ensure the app has the following Selected OAuth Scopes
        • Full access (full)
        • Manage user data via APIs (api)
        • Manage user data via Web browsers (web)
        • Perform requests at any time (refresh_token, offline_access)
      • Check these options:
        • Require Proof Key for Code Exchange (PKCE) Extension for Supported Authorization Flows
        • Issue JSON Web Token (JWT)-based access tokens for named users
      • Uncheck all other options in the OAuth section.
    • Save the Connected App
  3. Once the app is saved, you will need to get the Consumer Details:
    • In the "My Connected App" screen that appears once you save (or via Setup > App Manager), click Manage Consumer Details.
    • Save the Consumer Key and Consumer Secret for the next step.
  4. Create a Profile OR Permission Set to assign permissions to your app. We recommend using a Permission Set as those are the option recommended by Salesforce.
    1. Your Traction Rec support team should be able to deploy the Traction Rec Activity Finder Permission Set from their dev1 instance. If this Permission Set is deployed, proceed straight to the User creation step. To create a Permission Set from scratch:
      • Setup > Users > Permission Sets > New
      • Fill in the Label as you wish, and leave License as --None--
      • In the new Permission Set, open Object Settings.
      • In the very long list of Object Settings, do the following for each of the 10 Objects listed below:
        • Find the object and click to open it. In the configuration screen for each Object:
          • Under Object Permissions, mark Read as Enabled.
          • Under Field Permissions, mark Read Access on the header field to provide access to all fields.
        • Save the Object Settings and search for the next one.
      • Finally, review the summary of access permissions and ensure Read access is provided for each of the necessary objects.
    2. Create a Profile:
      • You must do this before creating a user.
      • Setup > Users > Profiles > New
      • When asked what Existing Profile to clone from, select Standard User or Standard Platform User. Be sure to note the User License connected to the target profile.
      • In the very large configuration screen, click Edit, then:
      • Save those changes.
  5. Create a new User with the new Profile or Permission Set:
    • Setup > Users > New User
      • User License - The option under which you created the Profile in the previous step, or Salesforce.
      • Email - A working email that you will use to receive login verifications.
      • Username - This is not your email and must be unique across all Salesforce Organizations. This is the name that will be used in the Drupal connection below. If you enter a preexisting username, you will receive this error: > Error: Duplicate Username. > The username already exists in this or another Salesforce organization. Usernames must be unique across all Salesforce organizations. To resolve, use a different username (it doesn't need to match the user's email address).
      • Assign the User to the Profile you created above, or a Permission Set that has the necessary permissions.
        • Under Permission Set Assignments, click Edit Assignments
        • Find the Permission Set you created in the prior step, select it, click Add, then Save.
  6. Confirm your Connected App, Profile, and User are connected:
    • Go to Setup > Apps > Connected Apps > Manage Connected Apps and choose your new app. Assign the Profile or Permission Set that contains your new user if it does not already show under the relevant section.
      • Click Manage Profiles or Manage Permission Sets
      • Search for your Profile or Permission Set and Save.
    • In the Connect App Detail, click Edit Policies:
      • Under OAuth Policies > Permitted Users choose Admin approved users are pre-authorized.
      • Check Issue JSON Web Token (JWT)-based access tokens.
      • Save the Connected App details.

When the process is complete, you should have the following relationships between the User, Permission Set OR Profile, and Connected App:

  • the API User should be assigned the Permission Set OR Profile.
  • the Connected App should be assigned the same Permission Set OR Profile.

Review all of these steps carefully. Missing any of them can result in an inability to query the API.

Salesforce permissions

The Salesforce integration Permission Set OR Profile should have read access to all fields in the following objects:

  • Course Options
  • Courses
  • Course Session Options
  • Course Sessions
  • Locations
  • Products and Discounts
  • Program Categories
  • Program Category Tags
  • Programs
  • Sessions

If using a Profile, it should also have the following Systems Permissions:

  • Apex REST Services
  • View Restriction and Scoping Rules
  • Update Consent Preferences Using REST API

Configure the connection in Drupal

  1. Go to Admin > Configuration > System > Keys (/admin/config/system/keys) and create a new key to store the private key created above.
    • Add key
    • Add a Key name and Description
    • Choose Key Type: "TractionRec JWT Private Key"
    • Choose the Key provider depending on your configuration. See Managing Keys for details.
    • Configure the chosen provider then Save the key.
  2. Go to Admin > YMCA Website Services > Integrations > Traction Rec > Traction Rec auth settings (/admin/openy/integrations/traction-rec/auth) to configure the keys & secrets provided by Traction Rec.
    • Add the Consumer key and Consumer Secret from Manage Consumer Details in Salesforce.
    • Add the User connected to the Connected App.
      • This is the Username of the User, not the Contact email.
    • Enter a Login URL.
      • This will most likely be https://login.salesforce.com
    • Set the Services base URL and REST API Base URL as per their descriptions.
      • Ensure the REST API Base URL responds to curl -I with a 200 response. Replace URLs like *.lightning.force.com with *.my.salesforce.com because the lightning url may result in a redirect, which will cause an authentication error, like ([@&#34;message&#34;:&#34;Session expired or invalid&#34;,&#34;errorCode&#34;:&#34;INVALID_SESSION_ID&#34;]).
    • Set the Community URL based on the publicly accessible registration links.
      • This may be something like https://my-ymca.my.site.com
      • The URL can be found in Salesforce under Setup > Digital Experiences > All Sites.
    • Choose the key as configured above.

Mapping

The TractionRec importer pulls data from many Traction Rec Objects (see TractionRec.php for the full queries):

Object Mapping

The fetcher outputs these files:

  • classes.json - from Courses
    • Maps to both Activities and Classes. Since TREC does not have this distinction, information in the resulting Activities and Classes in Drupal is duplicated.
  • locations.json - from Locations
    • This file is unused, but Locations map to Location via the Session import.
  • program_categories.json - from Program Category Tags
    • Maps to Program.
  • programs.json - from Programs
    • Maps to Program Subcategory.
  • sessions.json - from Course Options
    • Maps to Session.

Note: Traction Rec's labels for "Programs" and their child groupings are different:

  • Traction Rec: "Program Category" is the parent of "Program".
  • Drupal: "Program" is the parent of "Program Subcategory".

Mapping to Drupal fields

Those files are then imported into Drupal content via importers (in config items that start with migrate_plus.). The import goes as follows:

> - Drupal Content Type (bundle) > - Salesforce/TractionRec source fieldDrupal destination field

  • Program - from programs.json / TREC Program Categories
    • Id → id
    • Name → Title
    • Available → Published (status)
  • Program Subcategory - from program_categories.json/ TREC Programs
    • Id → id
    • Name → Title
    • Program → Program (field_category_program) via a lookup to the Programs import
    • Available → Published (status)
  • Activity - from classes.json / TREC Courses
    • Id → id
    • Name → Title
    • Program/Id → Program Subcategory (field_activity_category) via a lookup to the Program Subcategory import
    • Available → Published (status)
  • Class - from classes.json / TREC Courses
    • Id → id
      • The Class Id will also be used to set the Activity (field_class_activity)
    • Name → Title
    • Program/Id → ignored
    • Description/Rich Description → Description (field_class_description)
      • If a Rich Description is set, it will be used, otherwise the Description field will be used.
    • Available → Published (status)
  • Session - from sessions.json / TREC Sessions
    • Course_Option/Name → Title
    • Course_Option/ID → id
      • Also used to generate the Registration link URL using the Community URL set in Traction Rec auth settings (/admin/openy/integrations/traction-rec/auth).
    • Course_Session/Course/Id → Class
    • Course_Session/Course/Name → Course
    • Course_Session/Course/Description & Rich_Description → Description (field_class_description)
      • If a Rich Description is set, it will be used, otherwise the Description field will be used.
    • Course_Option/Start_Date → Session Time > Start date
    • Course_Option/Start_Time → Session Time > Start time
    • Course_Option/End_Date → Session Time > End date
    • Course_Option/End_Time → Session Time > End time
    • Course_Option/Day_of_Week → Session Time > Days
    • Course_Option/Age_Min → Min Age (field_session_min_age) converted to months
    • Course_Option/Age_Max → Max Age (field_session_max_age) converted to months
    • Course_Option/Location/Name → Location (field_session_location)
      • Location Name is used as a backup in case the Location Mapping does not match.
    • Course_Option/Location/Id → Location (field_session_location)
      • Location ID is used to attempt to match a location in the Location mapping in the Traction Rec importer settings (/admin/openy/integrations/traction-rec/importer)
    • Course_Option/Instructor → Instructor (field_session_instructor) trimmed to 255 characters
    • Course_Option/Available_Online → Online registration (field_session_online)
    • Course_Option/Available → Published (status)
    • Course_Option/Register_Online_From_Date → not used
    • Course_Option/Register_Online_To_Date → not used
    • Course_Option/Capacity → Initial Availability (field_availability)
    • Course_Option/Total_Capacity_Available → Initial Availability (field_availability)
    • Course_Option/Unlimited_Capacity → if set, overrides Capacity and sets Initial Availability (field_availability) to 100
    • Course_Option/Unlimited_Waitlist_Capacity → Wait list Unlimited Capacity (waitlist_unlimited_capacity)
    • Course_Option/Waitlist_Total → Wait list capacity (waitlist_capacity)
    • Course_Option/Product/Price_Description → Price description (field_price_description)
    • Course_Session/Id → Class (field_session_class) via a lookup to the Class import

Data Model

This module assumes a Traction Rec "standard" data model in its queries. Any deviations from this model will require overriding the queries in src/TractionRec.php.

This model contains a subset of the fields in Traction Rec that are relevant to our usage. All entities have more fields than listed.

Field types are taken from Salesforce's Setup > Object Manager > {Entity} > Fields & Relationships.

  • Number field options are: number(length_decimal places)
erDiagram
    Program_Category__c {
        id Id
        text(80) Name
    }
    Program__c {
        id Id
        text(80) Name
        checkbox Available__c
        textArea(255) Description__c
    }
    Program_Category_Tag__c {
        id Id
        autoNumber Name
        lookup(Program) Program__c
        lookup(Program_Category) Program_Category_c
    }
    Course__c {
        id Id
        text(80) Name
        checkbox Available__c
        text(128) Code__c
        longTextArea(640) Description__c
        lookup(Program) Program__c
        richTextArea Rich_Description__c
    }
    Course_Session__c {
        id Id
        text(80) Name
        checkbox Available__C
        text(128) Code__c
        lookup(Course) Course__c
        longTextArea(640) Description__c
        number(18_0) Num_Option_Entitlements__c
        lookup(ProductAndDiscount) Product__C
        richTextArea Rich_Description__c
        sum Total_Option_Capacity__c
        formula(number) Total_Option_Capacity_Remaining__C
        sum Total_Option_Registrants__c
        count Total_Options_Available__c
    }
    Course_Option__c {
        id Id
        text(80) Name
        number(3_1) Age_Max__c
        number(3_1) Age_Min__c
        checkbox Available__c
        number(18_0) Capacity__c
        picklist(multiSelect) Day_of_Week__c
        date End_Date__c
        text(8) End_Time__c
        text(128) Instructor__c
        lookup(ProductAndDiscount) Product__c
        number(18_0) Registration_Total_c
        longTextArea(3500) Setup_Notes__c
        number(3_0) Setup_Time_Required___c
        date Start_Date__c
        text(8) Start_Time__c
        longTextArea(3500) Tear_Down_Notes__c
        number(3_0) Tear_Down_Time_Required__C
    }
    Course_Session_Option__c {
        id Id
        autoNumber Name
        lookup(CourseOption) Course_Option__c
        masterDetail(CourseSession) Course_Session__c
        checkbox Option_Available__c
        number(18_0) Option_Capacity__c
        number(18_0) Option_Registration_Total__c
    }
    Program_Category__c ||--|{ Program_Category_Tag__c : &#34;&#34;
    Program__c ||--|{ Program_Category_Tag__c : &#34;&#34;
    Program__c ||--|{ Course__c : &#34;&#34;
    Course__c ||--|{ Course_Session__c : &#34;&#34;
    Course_Session__c ||--|{ Course_Session_Option__c : &#34;&#34;
    Course_Option__c ||--|{ Course_Session_Option__c : &#34;&#34;

Using Google Tag Manager (GTM)

By integrating Google Tag Manager (GTM) with your Salesforce Community, you can enable your marketing team to manage the deployment of marketing tags and tracking pixels, without relying on a developer to modify any code.

You may also want to configure cross-domain tracking on your Drupal site.

Import

The module allows you to synchronize classes and programs from the Traction Rec CRM to the YMCA Website Services Program Event Framework (PEF).

It uses Migrate API to import data fetched from Traction Rec and provides Drush commands and a configuration UI.

The import process consists of 2 drush commands:

  1. openy-tr:fetch-all this command fetches required data from Traction Rec and saves it to JSON files.

    • Alias: tr:fetch
  2. openy-tr:import the command migrates fetched JSON files to YMCA Website Services and creates sessions, classes, activities, categories and programs.

    • Alias: tr:import

You can run the commands manually for one-time import or add both to cron jobs.

Other available drush commands:

  • openy-tr:rollback - Rolls back all imported nodes.

    • Alias: tr:rollback
  • openy-tr:reset-lock - Resets import lock.

    • Alias: tr:reset-lock
  • openy-tr:clean-up - Removes imported JSON files from the filesystem.

    • Alias: tr:clean-up
  • openy-tr:quick-availability-sync - Sync total availability data for sessions.

    • Alias: tr:qas

12.37 - Pull Requests review standard

Check more technical guidelines about our best practices for code quality.

Adherence to Standards

The YMCA Website Services Core Team will adhere to the same standards we set for the community for all areas of development and technologies as per the YMCA Website Services documentation.

The YMCA Website Services Core Team reserves the right to break these standards only in the following scenarios:

  • Emergency - a major defect or security risk has been discovered that requires extreme measures to resolve.
  • When the standards are broken, it is the responsibility of the YMCA Website Services Core Team to explain why the standards needed to be broken, and what the new standards will be moving forward.
  • This communication will be posted to the YMCA Website Services message board, Slack, and the documentation on GitHub will be updated to reflect the new standards.

Requirements for Pull Requests

  • Code in Pull Requests should follow our established best practices
  • Submitters’ profiles on GitHub or Drupal.org should be up to date and contain at least a name and organization.

Template for the PR

In order to create a good quality Pull Request, we prepared a PR template which is automatically added to new Pull Requests on GitHub.

List of requirements from the template:

  • Provide a link to the original issue, which is going to be fixed by the PR you are creating.
  • All coding styles are fulfilled and there are no issues reported by CodeSniffer. See Code of Conduct.
  • Documentation have been updated according to PR changes.
  • Steps for review have been provided according to PR changes.
    Steps for review
  • Make sure you’ve provided all necessary hook_update_N to support upgrade path.
  • Make sure your git email is associated with an account on drupal.org, otherwise you won’t get commits there.
    drupal.org email
  • If you would like to get credits on drupal.org, check documentation.

12.38 - Release processes

Repos involved in releases

  1. YMCA Website Services Drupal Profile Distribution YCloudYUSA/yusaopeny
  2. YMCA Website Services Project for initiating an YMCA Website Services instance - YCloudYUSA/yusaopeny-project
  3. Continuous Integration/DevOps for rebuilding/installing YMCA Website Services - YCloudYUSA/yusaopeny-cibox-build

Release Management

When tagging a new release of YMCA Website Services, the Lead Architect takes the following steps:

  1. Review/Merge/Update YCloudYUSA/yusaopeny-project (usually composer.json or/and oneline script install) and tag a new release there.
  2. Review/Merge all Pull Requests in YCloudYUSA/yusaopeny that were planned for release.
  3. Change the YMCA Website Services version in openy.info.yml.
  4. Change the YMCA Website Services version in major modules if there were changes to them (Activity Finder, PEF, etc).
  5. Create Changelog release notes as a draft and include Contributors as well as major issues fixed/introduced.
  6. Spin up a copy of an YMCA Website Services site and check top priority functionality for regressions.
  7. Send for review to Core Team, get approval.
  8. Change the YMCA Website Services version to next with -dev suffix for developers in openy.info.yml.
  9. Refresh the YMCA Website Services private mirror on the openy.cibox.tools CI server.
  10. Ensure the version of YMCA Website Services is the proper one in site info (admin/reports/status).
  11. Publish announcement in #developers YMCA Website Services Slack channel.
  12. Publish announcement in #general YMCA Website Services Slack channel.

12.39 - Release Schedule and Guidelines

YMCA Website Services Release Guidelines

YMCA Website Services follows Drupal core’s release cycle to ensure compatibility and stability. Releases of the base project YMCA Website Services align with Drupal major and minor versions.

Version Numbering

Current versioning scheme: YMCA Website Services versions follow Drupal core versions:

  • Major releases: 11.x.0.0, 10.x.0.0 - Align with Drupal core major versions (Drupal 11, Drupal 10)
  • Minor releases: 11.3.0.0, 10.6.0.0 - Align with Drupal core minor versions
  • Patch releases: 11.1.0.1, 10.5.0.1 - Bug fixes and security updates
  • Alpha/Beta releases: 11.1.0.0-alpha1, 11.1.0.0-beta1 - Pre-release testing versions

Release Types

Major Drupal Compatibility Releases

Pattern: 11.0.0.0, 10.0.0.0

Major releases bring YMCA Website Services up to compatibility with new Drupal core major versions. These releases may include:

  • Drupal core compatibility updates
  • Breaking changes from Drupal core
  • Deprecated functionality removal
  • New features aligned with Drupal capabilities
  • PHP version requirement updates

Recent major releases:

  • 11.1.0.0-beta1 (September 23, 2024) - Drupal 11 compatibility
  • 10.4.0.0 (June 17, 2024) - Drupal 10.4 core initialization

Minor Releases

Pattern: 11.1.0.0, 10.5.0.0

Minor releases align with Drupal core minor versions and may include:

  • New features
  • Enhancements to existing functionality
  • Bug fixes
  • Security updates
  • Non-breaking changes

Patch Releases

Pattern: 11.1.0.1, 10.5.0.2

Patch releases contain only:

  • Bug fixes
  • Security patches
  • No new features or breaking changes

Release Schedule Alignment

YMCA Website Services releases are coordinated with Drupal core’s release schedule:

Drupal Core Release Windows

  • First Wednesday of the month: Bugfix releases for current minor versions (e.g., Drupal 11.2.x, 10.5.x)
  • Third Wednesday of the month: Security release window for previous minor versions (e.g., Drupal 11.1.x, 10.4.x)

Upcoming Drupal Core Milestones

  • Drupal 11.3.0 / 10.6.0: December 8, 2025
  • Drupal 10 End of Life: December 9, 2026
  • Drupal 12: Expected 2026

YMCA Website Services aims to release updates within 2-4 weeks of major Drupal core releases to ensure compatibility and security.

Current Releases

View all releases and release notes:

Latest stable release: Check GitHub Releases for the most current version.

Supported versions:

  • Drupal 11.x: Latest stable release (11.1.0.0-beta1 as of September 2024)
  • Drupal 10.x: Supported until December 2026

Virtual Y Releases

Virtual Y (Gated Content) releases independently but follows similar versioning and compatibility guidelines.

Subproject Releases

Decoupled modules and themes may release independently:

Security Updates

Security updates follow Drupal core’s security release schedule:

Upgrade Paths

  • Drupal 10 → 11: Upgrade path available via YMCA Website Services 11.x releases
  • Earlier versions: Consult upgrade documentation for multi-step upgrade paths

Contributing to Releases

Want to contribute features or fixes to upcoming releases?

Additional Resources

12.40 - SA-CORE-2018-002 security update

This document is archived but may contain useful information for troubleshooting future updates. For updated update steps, visit How to upgrade YMCA Website Services.


To update your OpenY site with security fix from Drupal core https://www.drupal.org/sa-core-2018-002 OpenY team is suggesting 2 options- via patch and via Drupal core upgrade(or OpenY upgrade). Drupal core upgrade or OpenY upgrade is not always possible, but security issue should be fixed asap. So consider to apply patch and plan OpenY upgrade later.

How to apply patch

Patching OpenY releases 8.0.1 - 8.1.0 (Drupal core 8.2.x)

For patching your very old OpenY release it is highly recommended to upgrade OpenY to latest version or at least to one of the 8.1.1-8.1.6 (Drupal core 8.3.x) with Drupal core upgrade to 8.3.9 https://www.drupal.org/project/drupal/releases/8.3.9 . In case if it is not possible right now, follow steps below:

  • Login to your production server environment via SSH and find docroot folder of your site codebase. If you installed OpenY by following a tutorial - you should:
ssh -l root YOUR_SERVER_DOMAIN_NAME
cd /var/www/html
wget https://raw.githubusercontent.com/YCloudYUSA/yusaopeny-project/8.1.x/scripts/patches/8.2.x.patch

Now you are ready to patch your site. But before patching - make a backup of the file which is about to be patched

cp docroot/core/lib/Drupal/Core/DrupalKernel.php /var/backups/DrupalKernel.php

To patch your site run the command to test if the patch can be applied:

patch -p1 --dry-run < 8.2.x.patch

You should see a result

# patch -p1 --dry-run < 8.2.x.patch
checking file docroot/core/lib/Drupal/Core/DrupalKernel.php
checking file docroot/core/lib/Drupal/Core/Security/RequestSanitizer.php

In case if result different - stop on this step and let us know you have issue. In case if all good proceed with a command below, which will patch your site:

patch -p1 < 8.2.x.patch

You should see the same output as previously, but now your site is patched.

TIP: In case if you are using git repository for your site run

git add docroot/core/lib/Drupal/Core/DrupalKernel.php docroot/core/lib/Drupal/Core/Security && git commit -m "Patching OpenY core" && git push

to store your patched core into your own repository.

Patching OpenY releases 8.1.1 - 8.1.6 (Drupal core 8.3.x)

For patching your relatively old OpenY release it is highly recommended to upgrade OpenY to latest version or at least to one of the 8.1.7-8.1.10 (Drupal core 8.4.x) with Drupal core upgrade to 8.4.6 https://www.drupal.org/project/drupal/releases/8.4.6 . In case if it is not possible right now, follow steps below:

  • Login to your production server environment via SSH and find docroot folder of your site codebase. If you installed OpenY by following a tutorial - you should:
ssh -l root YOUR_SERVER_DOMAIN_NAME
cd /var/www/html
wget https://raw.githubusercontent.com/YCloudYUSA/yusaopeny-project/8.1.x/scripts/patches/8.3.x.patch

Now you are ready to patch your site. But before patching - make a backup of the file which is about to be patched

cp docroot/core/lib/Drupal/Core/DrupalKernel.php /var/backups/DrupalKernel.php

To patch your site run the command to test if the patch can be applied:

patch -p1 --dry-run < 8.3.x.patch

You should see a result

# patch -p1 --dry-run < 8.3.x.patch
checking file docroot/core/lib/Drupal/Core/DrupalKernel.php
checking file docroot/core/lib/Drupal/Core/Security/RequestSanitizer.php

In case if result different - stop on this step and let us know you have issue. In case if all good proceed with a command below, which will patch your site:

patch -p1 < 8.3.x.patch

You should see the same output as previously, but now your site is patched.

TIP: In case if you are using git repository for your site run

git add docroot/core/lib/Drupal/Core/DrupalKernel.php docroot/core/lib/Drupal/Core/Security && git commit -m "Patching OpenY core" && git push

to store your patched core into your own repository.

Patching OpenY releases 8.1.7 - 8.1.9 (Drupal core 8.4.x)

For patching your OpenY release it is highly recommended to upgrade OpenY to latest version (8.1.10 or never) or at least to one of the 8.1.10 (Drupal core 8.4.x) with Drupal core upgrade to 8.4.6 https://www.drupal.org/project/drupal/releases/8.4.6 . In case if it is not possible right now, follow steps below:

  • Login to your production server environment via SSH and find docroot folder of your site codebase. If you installed OpenY by following a tutorial - you should:
ssh -l root YOUR_SERVER_DOMAIN_NAME
cd /var/www/html
wget https://raw.githubusercontent.com/YCloudYUSA/yusaopeny-project/8.1.x/scripts/patches/8.4.x.patch

Now you are ready to patch your site. But before patching - make a backup of the file which is about to be patched

cp docroot/core/lib/Drupal/Core/DrupalKernel.php /var/backups/DrupalKernel.php

To patch your site run the command to test if the patch can be applied:

patch -p1 --dry-run < 8.4.x.patch

You should see a result

# patch -p1 --dry-run < 8.4.x.patch
checking file docroot/core/lib/Drupal/Core/DrupalKernel.php
checking file docroot/core/lib/Drupal/Core/Security/RequestSanitizer.php

In case if result different - stop on this step and let us know you have issue. In case if all good proceed with a command below, which will patch your site:

patch -p1 < 8.4.x.patch

You should see the same output as previously, but now your site is patched.

TIP: In case if you are using git repository for your site run

git add docroot/core/lib/Drupal/Core/DrupalKernel.php docroot/core/lib/Drupal/Core/Security && git commit -m "Patching OpenY core" && git push

to store your patched core into your own repository.

==========================

How to patch your Digitalocean OpenY install

In case if you have followed tutorial you should have your OPenY installed on you DigitalOcean server(droplet) in a predictable for current document folder. That’s why we prepared a short how to patch your OpenY site in a most simple way if you are not a Tech Guru, but just a user

  1. Log in as an admin user to your site admin UI by visiting /user/login URI page.
  2. Go to /admin/reports/status after login and search for Drupal Version string. It should be something like 8.2.x, 8.3.x or 8.4.x (x - some number too, like 8.4.2, for example). Based on your finding follow the steps below to your version
  3. Login to your ВigitalOcean cloud console at digitalocean.com and find Access Console in the dropdown for the droplet you are using for the OpenY image
  4. You should see a popup window with a black screen where console asks you for the login. Use root user and a password generated for you upon droplet creation.
  5. After login to a console run the command below, respectively to the version of your Drupal core.

One line script to patch 8.2.x Drupal core for OpenY

Type manually exact line

bash < <(curl -s https://raw.githubusercontent.com/YCloudYUSA/yusaopeny-project/8.1.x/scripts/patches/run8.2.x.sh)

and hit Enter. You should see OpenY was patched message.

One line script to patch 8.3.x Drupal core for OpenY

Type manually exact line

bash < <(curl -s https://raw.githubusercontent.com/YCloudYUSA/yusaopeny-project/8.1.x/scripts/patches/run8.3.x.sh)

and hit Enter. You should see OpenY was patched message.

One line script to patch 8.4.x Drupal core for OpenY

Type manually exact line

bash < <(curl -s https://raw.githubusercontent.com/YCloudYUSA/yusaopeny-project/8.1.x/scripts/patches/run8.2.x.sh)

and hit Enter. You should see OpenY was patched message.

12.41 - Sandboxes

YMCA Website Services Sandboxes for Evaluation and QA

The YMCA Website Services core team manages sandboxes for various configurations of the distribution to facilitate evaluation, to help with QA, and enable investigation of issues.

Getting started

Anyone can browse the sandboxes. Get started at sandboxes.y.org.

Get access to the sandboxes

To test the content editor experience or dig into the Drupal configuration you need to request login access by emailing us or asking anyone on the project team in the Y-USA Slack.

Behind the scenes

To learn more:

What’s in the sandboxes?

Each set of sandboxes contains 3 profile variations:

  • Standard
  • Extended
  • Custom

And only one theme:

  • Carnation

And there are multiple sandbox environments:

Stable Sandboxes

sandboxes.y.org

These sandboxes are based on the latest stable release of YMCA Website Services. They are set to rebuild completely overnight and clear their database and files every 2 hours.

These sandboxes are built on CI by running:
composer create-project ycloudyusa/yusaopeny-project buildnew --no-interaction

ansible-playbook docroot/reinstall.yml -i /tmp/inventory5068801741271597001.ini -f 5 -e php_env_vars=APP_ENV=dev -e mysql_user=*** -e mysql_password=*** -e mysql_db=sandbox_carnation_custom -e drupal_folder=/var/www/sandbox_carnation_custom -e site_url=https://sandbox-carnation-cus.y.org -e pp_environment=demo -e run_reinstall=true -e "openy_profile_install_settings='openy_configure_profile.preset=complete openy_theme_select.theme=openy_carnation'" -e use_solr=false -i localhost, --connection=local -vvvv

Development Sandboxes

These sandboxes are based on the latest development version of YMCA Website Services or other branches as necessary. They are set to rebuild daily. Development sandboxes are rebuilt at the needs of the team and are not guaranteed. If one is not working, try another.

These sandboxes are built on CI by running:
composer create-project ycloudyusa/yusaopeny-project:10.2.x-development-dev buildnew --no-interaction

ansible-playbook docroot/reinstall.yml -i /tmp/inventory5068801741271597001.ini -f 5 -e php_env_vars=APP_ENV=dev -e mysql_user=*** -e mysql_password=*** -e mysql_db=sandbox_carnation_custom -e drupal_folder=/var/www/sandbox_carnation_custom -e site_url=https://sandbox-carnation-cus.y.org -e pp_environment=demo -e run_reinstall=true -e "openy_profile_install_settings='openy_configure_profile.preset=complete openy_theme_select.theme=openy_carnation'" -e use_solr=false -i localhost, --connection=local -vvvv

Feature-based sandboxes

We also maintain sandboxes with specific features enabled. Each of these builds

Virtual Y Sandboxes

These sandboxes are based on the YMCA Website Services stable Standard profile and the Virtual Experience Platform (aka “Virtual Y”, aka “Open Y Gated Content”) project.

Membership Framework Sandboxes

These are based on the YMCA Website Services stable Standard profile and the development version of the Membership Framework.

To rebuild the sandbox, CI is running:
composer create-project ycloudyusa/yusaopeny-project buildnew --no-interaction
cd buildnew
composer config minimum-stability dev
composer require "openy/openy_memberships":"dev-master as 1.0.0"
ansible-playbook docroot/reinstall.yml -i /tmp/inventory13097841656330601319.ini -f 5 -e php_env_vars=APP_ENV=dev -e mysql_user=*** -e mysql_password=*** -e mysql_db=d9_sandbox_carnation_std_membership_framework -e drupal_folder=/var/www/d9_sandbox_carnation_std_membership_framework -e site_url=https://sandbox-carnation-std-membership-framework-d9.y.org -e pp_environment=membership_framework -e run_reinstall=true -e "openy_profile_install_settings='openy_configure_profile.preset=standard openy_theme_select.theme=openy_carnation openy_select_content.content=0'" -e use_solr=false -i localhost, --connection=local -vvvv

Activity Finder Sandboxes

ThemeLinkWS ProfileActivity FinderThemeBootstrap
Carnationhttps://sandbox-carnation-cus-d9.y.org/activity-finder-v4stableCustomv4 devv4
Carnation (with TractionRec importer)https://traction-ws.y.org/stableCustomv4 devv4
To rebuild the sandbox, CI is running:
composer create-project ycloudyusa/yusaopeny-project:10.2.x-development-dev build --no-interaction
cd ${WORKSPACE}/build
composer require ycloudyusa/yusaopeny_activity_finder:"4.x-dev as 4.0"

ansible-playbook docroot/reinstall.yml -i /tmp/inventory4660848605526222353.ini -f 5 -e php_env_vars=APP_ENV=dev -e mysql_user=*** -e mysql_password=*** -e mysql_db=d9_sandbox_carnation_custom -e drupal_folder=/var/www/d9_sandbox_carnation_custom -e site_url=https://sandbox-carnation-cus-d9.y.org -e pp_environment=demo -e run_reinstall=true -e "openy_profile_install_settings='openy_configure_profile.preset=complete openy_theme_select.theme=openy_carnation'" -i localhost, --connection=local -vvvv

# Solr 4.5-4.9, Activity Finder v4
drush en -y search_api_solr_legacy openy_prgf_activity_finder_4 || true
drush cset -y search_api.server.solr backend_config.connector_config.host 127.0.0.1 -y || true
drush cset -y search_api.server.solr backend_config.connector_config.core ${VHOST_FOLDER} -y
drush cset -y search_api.server.solr backend_config.connector_config.solr_version 4.5 -y
drush search-api-mark-all || true
drush sapi-i || true
drush en -dvy openy_prgf_af4_demo || true

# Solr 4.5-4.9, Activity Finder v4, Carnation theme, bootstrap v4
drush cset -y openy_activity_finder.settings bs_version 4 || true

12.42 - Secure devops for composer 2 release

This article only applies to long-term users of YMCA Website Services. YMCA Website Services supports Composer 2 as of version 8.2.7 in November 2020 and new installs use Composer 2 by default.


Composer was upgraded to 2.x on October 30, 2020. This could cause instability when your older composer 1.x accidentally auto-updates to the 2.x version. Issues could include: composer fails to run any commands and blocks OpenY upgrade/maintenance. The instability would be in the developer environment, not YMCA Website Services/Drupal.

The YMCA Website Services team prepared an avoidance plan for the community to take action steps before the release while YMCA Website Services will be verifying Composer 2.x causes no issues or regressions.

If you use DDEV local environment your composer version will not update automatically, so you’re currently safe from inadvertent updates. Instructions for updating DDEV will be included with any necessary YMCA Website Services updates at a later date.

Case before October 30, 2020, when you are on composer 1.x

Composer 2 is coming and older versions of composer 1.x show the message below.

Composer 2.0 is about to be released and the older 1.x releases will self-update directly to it once it is released. To avoid surprises update now to the latest 1.x version

If you see the message above, ensure your environments have updated composer to the latest 1.x version by running:

composer selfupdate --1

To ensure the above command shows your version 1.x after an upgrade, check the version of composer:

composer --version

You should see something like

MacBook-Pro-Andrii:www podarok$ composer --version
Composer version 1.10.15 2020-10-13 15:59:09

as an output of the command.

If you do not upgrade to the latest 1.x version before October 30, 2020. i.e. if you accidentally upgrade to Composer 2.x

If your composer updated to version 2 and you have issues with this upgrade, the solution is to downgrade Composer to the latest 1.x version by running:

composer selfupdate --1

If you are faced with any issues connect with the YMCA Website Services team on GitHub ( create issue) and the #developers channel on Slack.

12.43 - Server Requirements

If you need to prepare server for the YMCA Website Services instance, here below you should find all needed software to meet its requirements.

System Requirements

For Drupal 11 (Current Version)

  • Drupal: 11.1.x or higher
  • PHP: 8.3 or higher
  • Composer: 2.0 or higher
  • Database:
    • MySQL 8.0+ OR
    • MariaDB 10.6+
  • Web Server:
    • Apache 2.4+ OR
    • Nginx 1.18+
  • Operating System: Linux-based OS (Ubuntu LTS 20.04+ recommended)

For detailed requirements, see the official Drupal system requirements.

Required PHP Modules

  • php8.3 (or higher)
  • php8.3-cli
  • php8.3-common
  • php8.3-curl
  • php8.3-dev
  • php8.3-fpm (for Nginx)
  • php8.3-gd
  • php8.3-mysql
  • php8.3-xml
  • php8.3-mbstring
  • php8.3-soap
  • php8.3-zip
  • Cache: Memcached or Redis for improved performance
  • Search: Apache SOLR 8.x for advanced search functionality
  • HTTP Cache: Varnish or Nginx reverse proxy for high-traffic sites
  • Development Tools:
    • Docker (recommended for local development via DDEV)
    • Ansible (for server provisioning)

Development Environments

Recommended: DDEV (Docker-based development environment)

Alternatives:

Version-Specific Requirements

Drupal 11 (Beta)

Drupal 10

Drupal 9 (End of Life)

12.45 - Start new YMCA Website Services project

Here you can find instructions how you can start project based on YMCA Website Services distribution.

New project from scratch based on YMCA Website Services

In order to start new project from scratch, you can use installation instructions that will build your project and even add development environment.

Add YMCA Website Services to existing Drupal 8 project

Please take a look at the full composer.json file below that you should eventually get.

 Example composer.json (Drupal 8.3.2 + YMCA Website Services 1.2)
{
    "name": "drupal/drupal",
    "description": "Drupal is an open source content management platform powering millions of websites and applications.",
    "type": "project",
    "license": "GPL-2.0+",
    "require": {
        "composer/installers": "^1.0.24",
        "wikimedia/composer-merge-plugin": "~1.4",
        "YCloudYUSA/yusaopeny": "8.*.*",
        "cweagans/composer-patches": "~1.0"
    },
    "minimum-stability": "dev",
    "prefer-stable": true,
    "config": {
        "preferred-install": "dist",
        "autoloader-suffix": "Drupal8",
        "secure-http": false
    },
    "extra": {
        "_readme": [
            "By default Drupal loads the autoloader from ./vendor/autoload.php.",
            "To change the autoloader you can edit ./autoload.php.",
            "This file specifies the packages.drupal.org repository.",
            "You can read more about this composer repository at:",
            "https://www.drupal.org/node/2718229"
        ],
        "merge-plugin": {
            "include": [
                "core/composer.json"
            ],
            "recurse": false,
            "replace": false,
            "merge-extra": false
        },
        "installer-paths": {
          "core": ["type:drupal-core"],
          "libraries/{$name}": ["type:drupal-library"],
          "modules/contrib/{$name}": ["type:drupal-module"],
          "profiles/contrib/{$name}": ["type:drupal-profile"],
          "themes/contrib/{$name}": ["type:drupal-theme"],
          "drush/contrib/{$name}": ["type:drupal-drush"],
          "modules/custom/{$name}": ["type:drupal-custom-module"],
          "themes/custom/{$name}": ["type:drupal-custom-theme"]
        },
        "enable-patching": true
    },
    "autoload": {
        "psr-4": {
            "Drupal\Core\Composer\": "core/lib/Drupal/Core/Composer"
        }
    },
    "scripts": {
        "pre-autoload-dump": "Drupal\Core\Composer\Composer::preAutoloadDump",
        "post-autoload-dump": [
          "Drupal\Core\Composer\Composer::ensureHtaccess"
        ],
        "post-package-install": "Drupal\Core\Composer\Composer::vendorTestCodeCleanup",
        "post-package-update": "Drupal\Core\Composer\Composer::vendorTestCodeCleanup",
        "post-install-cmd": [
            "bash scripts/remove_vendor_git_folders.sh || :"
        ],
        "post-update-cmd": [
            "bash scripts/remove_vendor_git_folders.sh || :"
        ]
    },
    "repositories": [
        {
            "type": "composer",
            "url": "https://packages.drupal.org/8"
        },
        {
            "type": "package",
            "package": {
                "name": "library-kenwheeler/slick",
                "version": "1.6.0",
                "type": "drupal-library",
                "source": {
                    "url": "https://github.com/kenwheeler/slick",
                    "type": "git",
                    "reference": "1.6.0"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "library-dinbror/blazy",
                "version": "1.8.2",
                "type": "drupal-library",
                "source": {
                    "url": "https://github.com/dinbror/blazy",
                    "type": "git",
                    "reference": "1.8.2"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "library-gdsmith/jquery.easing",
                "version": "1.4.1",
                "type": "drupal-library",
                "source": {
                    "url": "https://github.com/gdsmith/jquery.easing",
                    "type": "git",
                    "reference": "1.4.1"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "library-enyo/dropzone",
                "version": "4.3.0",
                "type": "drupal-library",
                "source": {
                    "url": "https://github.com/enyo/dropzone",
                    "type": "git",
                    "reference": "v4.3.0"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "library-jaypan/jquery_colorpicker",
                "version": "1.0.1",
                "type": "drupal-library",
                "source": {
                    "url": "https://github.com/jaypan/jquery_colorpicker",
                    "type": "git",
                    "reference": "da978ae124c57817021b3166a31881876882f5f9"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "library-ckeditor/panelbutton",
                "version": "4.7.0",
                "type": "drupal-library",
                "dist": {
                    "url": "http://download.ckeditor.com/panelbutton/releases/panelbutton_4.7.0.zip",
                    "type": "zip"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "library-ckeditor/colorbutton",
                "version": "4.7.0",
                "type": "drupal-library",
                "dist": {
                    "url": "http://download.ckeditor.com/colorbutton/releases/colorbutton_4.7.0.zip",
                    "type": "zip"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "library-ckeditor/colordialog",
                "version": "4.7.0",
                "type": "drupal-library",
                "dist": {
                    "url": "http://download.ckeditor.com/colordialog/releases/colordialog_4.7.0.zip",
                    "type": "zip"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "library-ckeditor/glyphicons",
                "version": "2.2",
                "type": "drupal-library",
                "dist": {
                    "url": "http://download.ckeditor.com/glyphicons/releases/glyphicons_2.2.zip",
                    "type": "zip"
                }
            }
        }
    ]
}
  1. Add "YCloudYUSA/yusaopeny": "8.*.*" to the require section in your composer.json, like here

  2. Add all required repositories that are listed here to your composer.json

  3. Add installer path as here to your composer json. See example.

  • composer.json inside of docroot Installer path will look like this:

    "installer-paths": {
        "core": ["type:drupal-core"],
        "libraries/{$name}": ["type:drupal-library"],
        "modules/contrib/{$name}": ["type:drupal-module"],
        "profiles/contrib/{$name}": ["type:drupal-profile"],
        "themes/contrib/{$name}": ["type:drupal-theme"],
        "drush/contrib/{$name}": ["type:drupal-drush"],
        "modules/custom/{$name}": ["type:drupal-custom-module"],
        "themes/custom/{$name}": ["type:drupal-custom-theme"]
    }
    
  • composer.json outside of docroot Installer path will look like this:

    "installer-paths": {
        "docroot/core": ["type:drupal-core"],
        "docroot/libraries/{$name}": ["type:drupal-library"],
        "docroot/modules/contrib/{$name}": ["type:drupal-module"],
        "docroot/profiles/contrib/{$name}": ["type:drupal-profile"],
        "docroot/themes/contrib/{$name}": ["type:drupal-theme"],
        "drush/contrib/{$name}": ["type:drupal-drush"],
        "docroot/modules/custom/{$name}": ["type:drupal-custom-module"],
        "docroot/themes/custom/{$name}": ["type:drupal-custom-theme"]
    }
    
  1. Add "cweagans/composer-patches": "~1.0" to the require section in you composer.json. See example.

  2. Add "enable-patching": true to the extra section in your composer.json See example.

  3. Add "secure-http": false to the config section in your composer.json See example.

  4. Remove composer.lock and vendor folder from the project if they are exist in your folder.

  5. Remove "replace" section from your composer.json

  6. (Optional) If you keep vendor folder in your git repository, we recommend to clean up project from .git folder inside modules and libraries. To do so

  • Add cleaner script to your project from YMCA Website Services composer package. You can just copy it and paste onto your project.

  • Adjust folders that you would like to cleanup

  • Execute it in post-install-cmd and post-update-cmd:

    "post-install-cmd": [
        "bash scripts/remove_vendor_git_folders.sh || :"
    ],
    "post-update-cmd": [
        "bash scripts/remove_vendor_git_folders.sh || :"
    ]
    
  1. Run composer install

CIBox

In this section you can learn how to configure development environment and CI server using Open Source product CIBox.

Create project

  1. Generate project based on this quickstart

  2. Add YMCA Website Services to the project using (Add YMCA Website Services to already existing Drupal 8 project)

  3. Init git and add initial commit

cd OPENY_PROJECT
git init
git commit -m "Init YMCA Website Services project"
git remote add origin git@github.com:NAMESPACE/PROJECT.git
git push -u origin master
  1. Spin up your local development environment

Recommended: Use DDEV for local development

  1. Setup CI server for new project based on CIBox documentation.
  • Follow quick start starting from Jenkins Provisioning Step http://docs.cibox.tools/en/latest/Quickstart/#jenkins-provisioning (Here we will get PR builds and DEMO site (DEV environment) with credentials to it )
  • Setup hosting STAGE environment (it should be a 1:1 copy of existing or expected hosting account for ability to provide performance testing there)
  • Setup deployment plans for CI by reusing DEMO builder job

Install YMCA Website Services on DigitalOcean

  1. Create new Droplet using “One-click apps” image Drupal 8.*.* on 14.04
  2. Login to server via SSH or web console
  3. Run command
bash <(curl -s https://raw.githubusercontent.com/YCloudYUSA/yusaopeny/8.x-1.x/build/openy-digital-ocean.sh)
  1. Open link(e.g. http://IP/core/install.php) from console output and finish YMCA Website Services installation

Video tutorial

YMCA Website Services v1.0b - Install Tutorial

End to end installation

YMCA Website Services install - in 16 minutes end to end, no tutorial

12.46 - technology pipeline

To deliver the best technologies for the YMCA movement, the YMCA Website Services development community maintains the following documents and best practices:

  1. Development FAQ
  2. YMCA Website Services Coding Standards
  3. How new technologies and features are added to YMCA Website Services
  4. Sandboxes
  5. Smoke Tests
  6. A Slack Team by invite with a #developers channel where we discuss technical issues with our partners and YUSA.
  7. A YouTube playlist for Developers
  8. A list of 3rd party dependencies which are reviewed periodically for new features and deprecations.

12.47 - Terms and Conditions

These Terms & Conditions must be agreed to upon installing YMCA Website Services

These terms are maintained in the distribution codebase at TermsOfUseForm.php and are subject to change at any time. Any change in the terms will require site owners to agree to the new terms and a record of the date of agreement is maintained in the site database. Terms can be viewed on your site at Admin > YMCA Website Services > Terms and Conditions (/admin/openy/terms-and-conditions).


  • We agree to the Participant Agreement and Terms of Use
  • YMCA of the USA supports the Website Services platform with respect to use by its Member Associations but is not responsible for and does not control the services provided by 3rd party agencies, which are using and modifying YMCA Website Service distribution.
  • YMCA of the USA recommends that each participating YMCA association develop and implement its own cybersecurity policies and obtain cyber liability and data privacy insurance.
  • I acknowledge that YMCA Website Service is open source content and that all content is provided “as is” without any warranty of any kind. YMCA of the USA makes no warranty that its services will meet your requirements, be safe, secure, uninterrupted, timely, accurate, or error-free, or that your information will be secure. YMCA of the USA will not maintain and support YMCA Website Service templates indefinitely. The entire risk as to the quality and performance of the content is with you.
  • YMCA of the USA recommends obtaining a reputable agency to assist with the implementation of the YMCA Website Service platform and further development for your specific needs.
  • All demonstration content, including but not limited to text, images, graphics, videos, audio, and any other materials displayed on this website, is the exclusive property of YMCA of the USA. The demonstration content is provided solely for illustrative purposes and to showcase the capabilities of YMCA’s Website Service. Nonetheless, YMCA member associations may use demonstration content for their websites, as applicable.
    • By accessing and/or using this website, you agree to respect the ownership and intellectual property rights of YMCA of the USA over the demonstration content. Users and visitors are strictly prohibited from reproducing, distributing, modifying, or otherwise using the demonstration content without explicit written permission from YMCA of the USA.
    • Any unauthorized use or misuse of the demonstration content is a violation of these Terms and Conditions and may be subject to applicable laws and regulations, result in your access being revoked, and/or legal action taken, if applicable.
    • YMCA of the USA reserves the right to change, modify, or remove the demonstration content from the website at any time without prior notice. We are not responsible for any inaccuracies or errors in the demonstration content and make no guarantees about its accuracy or completeness.

12.48 - Testing YMCA Website Services for PHP 7.4 version support

Requirements

  • php-cli 7.4 ( memory_limit value should be large ( 2000M ) or unlimiter ( -1 ) in order to not fail
  • composer 2

Steps

  1. Obtain latest development code of YMCA Website Services
composer create-project ycloudyusa/yusaopeny-project:10.2.x-development-dev openy7.4
  1. Add phpcompatibility to require-dev section
cd open7.4
composer require --dev phpcompatibility/php-compatibility
./vendor/bin/phpcs -p . --standard=PHPCompatibility --runtime-set testVersion 7.4 --config-set installed_paths vendor/phpcompatibility/php-compatibility
  1. Generate report
./vendor/bin/phpcs -p . --standard=PHPCompatibility --runtime-set testVersion 7.4 --report-file=report.txt

or if you need to skip warnings

./vendor/bin/phpcs -p . --standard=PHPCompatibility --runtime-set testVersion 7.4 --report-file=report.txt -n

In report.txt you’d find a full list of findings to be resolved in order to pass compatibility

12.49 - Tests

These instructions explain how you can run tests.

Behat

Requirements

Run full test suite

  1. Execute command

    $ cd profiles/contrib/openy
    $ sh runtests.sh
    
  2. Open http://site.com/profiles/contrib/openy/build/reports/behat in browser.

Run selenium container + Behat tests in usual way

In order to run only selenium container + behat in usual way:

$ cd profiles/contrib/openy
$ sh runtests.sh --tags run_selenium
$ bin/behat

Stop selenium container

In order to stop selenium container:

$ cd profiles/contrib/openy
$ sh runtests.sh --tags stop_selenium

If necessary, edit behat.local.yml to match your environment.

Visual debugging - Video

When you develop JS tests, it’s important to see what’s going on the Selenium screen. You can easily see this during development.

  1. Install https://www.realvnc.com/download/viewer
  2. Run selenium using command
$ cd profiles/contrib/openy
$ sh runtests.sh --tags run_selenium
  1. Open installed VNC Viewer and connect to the server with IP 192.168.56.132:5901
  • Password = secret
  1. Run tests and you should see everything that is performed by behat tests in VNC client
$ bin/behat

Debugging JavaScript Behat tests

Custom Behat functionality

  • Create entities in table forms, with key to use in reference and reference entities by key.
    • KEY is optional, and must be all CAPS.
    • Taxonomy
      Given I create "taxonomy_term" of type "color" with key for reference:
        | KEY  | name  | field_color |
        | Blue | Blue  | 0000FF      |
        | Red  | Red   | FF0000      |
      
    • Paragraphs
      Given I create "paragraph" of type "small_banner" with key for reference:
        | KEY     | field_prgf_headline | field_prgf_color |
        | banner1 | Headline 1          | Blue             |
        | banner2 | Headline 2          | Red              |
      
    • Media entities
      Given I create "media" of type "image" with key for reference:
        | KEY       | name            | file         |
        | gallery_1 | Gallery image 1 | gallery.png  |
        | gallery_2 | Gallery image 2 | gallery2.png |
        | gallery_3 | Gallery image 3 | gallery3.png |
      
  • Create nodes in table forms, with key to use in reference and reference entities by key.
    • KEY is optional, and must be all CAPS.
    • Basic create
      Given I create "landing_page" content:
        | KEY       | title           | field_lp_layout | field_content |
        | landing_1 | Test Landing 01 | one_column      | banner1       |
        | landing_2 | Test Landing 02 | one_column      | banner2       |
      
    • Vertical field table
      Given I create large "landing_page" content:
        | KEY             | landing_3       | landing_4       |
        | title           | Test Landing 03 | Test Landing 04 |
        | field_lp_layout | one_column      | one_column      |
        | field_content   | banner1         | banner2         |
      
    • Create & view immediately
      Given I view a "landing_page" content:
        | KEY             | landing_5       |
        | title           | Test Landing 05 |
        | field_lp_layout | one_column      |
        | field_content   | banner1         |
      
    • Multiple referenced entities by key on a field.
      Given I create "landing_page" content:
        | KEY       | title           | field_lp_layout | field_content    |
        | landing_6 | Test Landing 06 | one_column      | banner1, banner2 |
      

Example Address and Latitude + Longitude

Fields with sub field/columns: The machine name and columns can be found in the form markup in the field name property. Inspect form field name depicted The first portion, field_location_address represents the Drupal field machine name, while the second array key address_line1 represents the column.

  • Add Address
    Given I view a "branch" content:
        | title                                | Branch Example  |
        | field_location_address:country_code  | US             |
        | :address_line1                       | Main road 10   |
        | :locality                            | Seattle        |
        | :administrative_area                 | WA             |
        | :postal_code                         | 98101          |
    
  • Add Latitude and Longitude
    Given I view a "branch" content:
      | title                          | Branch Example 2 |
      | field_location_coordinates:lat | 47.293433        |
      | :lng                           | -122.238717      |
      | field_location_phone           | +1234567890      |
    

12.50 - Theming and Design

Welcome to YMCA Website Services Theming and Design documentation.

How to change styles on content type level

Given: As an YMCA Website Services site developer, I want to be able to easily change the CSS for a Camp page independently from a Location page, so I can better customize the site to meet the needs of my customers.

How to:

  • If you need to change CSS on some pages independently, you should enable Custom CSS functionality on the theme configuration page - Custom CSS - check “Enable or disable custom CSS”.
  • Input CSS code into the textarea.

In order to change CSS on each particular page you should use the following selectors:

  • .page-node-type-{node type};
  • .node-id-{node ID};
  • .path-frontpage.

The existing node types are: activity, alert, blog, branch, camp, class, facility, landing-page, membership, news, program, program-subcategory, session.

12.51 - Tour

How to use YMCA Website Services Tour Token with Tour

In someone modules have tour tips and for more interactivity, you can add a token with a click to any selector.

  1. In the module open tour yml file. Configuration project add/update form

  2. Select the tip for edit and in body add token like this [openy_tour:click:button_name:selector] Configuration project add/update form

  3. Create hook update for you changes and in command line run drush updb -y

Token components:

[openy_tour:click:button_name:selector]*

openy_tour - token name;

click - command in the token;

button_name - name of button when show in a tip;

selector - selector to be clicked.

Please see and use jQuery selectors.

12.52 - Upgrade OpenY 8.1.3 to 8.2.2.1

This document is archived but may contain useful information for troubleshooting future updates. For updated update steps, visit How to upgrade YMCA Website Services.


Video tutorials

Upgrade OpenY from 8.0.7 to 8.2.2.1 - https://www.youtube.com/watch?v=U_mg0-yKGOI

Document is work in progress

These are instructions for upgrading a very old version of YMCA Website Services to the latest version. Given the fact Drupal 8.7+ has no support for automatic entity updates ( BaseFieldDefinitions ) we have to upgrade to 8.2.2.1 of OpenY, which is still on 8.6 Drupal Core, and then update to the latest YMCA Website Services version as usual.

Environment

vagrant@vagrant:/var/www/docroot$ uname -a
Linux vagrant 4.15.0-29-generic #31-Ubuntu SMP Tue Jul 17 15:39:52 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux
vagrant@vagrant:/var/www/docroot$ lsb_release -a
No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 18.04.1 LTS
Release:	18.04
Codename:	bionic
vagrant@vagrant:/var/www/docroot$ php -v
**PHP 7.1.31-1**+ubuntu18.04.1+deb.sury.org+1 (cli) (built: Aug  7 2019 10:23:12) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.1.31-1+ubuntu18.04.1+deb.sury.org+1, Copyright (c) 1999-2018, by Zend Technologies
    with Xdebug v2.7.2, Copyright (c) 2002-2019, by Derick Rethans
vagrant@vagrant:/var/www/docroot$ drush --version
 **Drush Version   :  8.2.3**
vagrant@vagrant:/var/www/docroot$ composer --version
**Composer version 1.7.2** 2018-08-16 16:57:12

Step by step guide for update

  • Use PHP7.1 for upgrade and install php7.1-mysql php7.1-mcrypt php7.1-cli php7.1-common php7.1-curl php7.1-dev php7.1-fpm php7.1-gd php7.1-mysql php7.1-memcached php7.1-imagic php7.1-xml php7.1-xdebug php7.1-mbstring php7.1-soap php7.1-zip php7.1-xml
  • Go to the folder of OpenY code tree where docroot folder is contained
  • mv composer.json composer.json.orig
  • wget https://raw.githubusercontent.com/YCloudYUSA/yusaopeny-project/8.2.x/composer.json
  • mkdir -p scripts ; cd scripts && wget https://raw.githubusercontent.com/YCloudYUSA/yusaopeny-project/8.2.x/scripts/remove_libraries_gitignore_files.sh && cd ..
  • composer require YCloudYUSA/yusaopeny:8.2.2.1 --no-suggest --no-update
  • composer install --ignore-platform-reqs --no-suggest
  • composer update --prefer-stable --no-suggest
  • cd docroot
  • drush dl -y plugin-8.x-2.5 contribute-8.x-1.0-beta7 scheduler-8.x-1.0 views_block_filter_block datalayer simple_menu_icons rabbit_hole metatag simple_sitemap-8.x-3.0 easy_breadcrumb-8.x-1.6
  • drush en openy_upgrade_tool openy_er openy_prgf_loc_finder openy_map openy_data_wrapper openy_loc_branch content_moderation focal_point
  • drush ev "Drupal::service('module_installer')->install(['openy']);" <- This steps fixes some hidden bug when openy profile removed from core.extension configuration for unknown reason.
  • Manual step (optional, if you have issues with drush updatedb): Edit all yml files in profiles folder to comment media.type.image , field.field.node.program.field_header_content, field.field.node.branch.field_location_amenities in dependencies sections.

image

image

image

  • run drush updatedb -y <- this will fail for the first time ( Media not installed yet ), disregard
  • run drush updatedb -y <- this should run properly.
  • run drush entup

12.53 - Upgrade path

All changes in configurations should be added to appropriate hook_update_N in order to update already existing environments. We suggest to use https://www.drupal.org/project/confi for working with hook_update_N.

openy.install in profile

In this file we should put updates that are related to the distribution in general and don’t fit into any feature.

  • Enable/Disable module
  • General configs

openy_*.install in modules

In case if you update some configuration for specific feature, make sure that you put updates into appropriate module.

Revert only specific property from config

With config_import module help we can update only part from full config.

For updating specific property in config (use service ‘openy_upgrade_tool.param_updater’):

  1. go to related to this config module

  2. create new hook_update_N in openy_*.install file

  3. in update add next code (this is example):

$config = drupal_get_path('module', 'openy_media_image') . '/config/install/views.view.images_library.yml';
$config_importer = \Drupal::service('openy_upgrade_tool.param_updater');
$config_importer->update($config, 'views.view.images_library', 'display.default.display_options.pager');

Where:

  • $config variable contains path to config with config name
  • “views.view.images_library” - config name
  • “display.default.display_options.pager” - config specific property (you can set value from a nested array with variable depth)

Revert full configs

For updating full config or several configs from directory use service ‘openy_upgrade_tool.importer’.

$config_dir = drupal_get_path('module', 'openy_media_image') . '/config/install';
$config_importer = \Drupal::service('openy_upgrade_tool.importer');
$config_importer->setDirectory($config_dir);
$config_importer->importConfigs(['views.view.images_library']);

Where:

  • $config_dir - path to directory with config
  • “views.view.images_library” - config name

Also you can update several configs from directory:

$config_importer->importConfigs([
  'views.view.images_library',
  'views.view.example_view',
]);

12.54 - Upgrade to Open Y 1.x

This document is archived but may contain useful information for troubleshooting future updates. For updated update steps, visit How to upgrade YMCA Website Services.


Upgrade to old, Open Y 1.x version ( tested on upgrading 8.0.2 to 8.1.1.14 )

See upgrade from 8.1.3 to 8.2.2.1

We found the oldest OpenY instance working on 8.0.2 version of OpenY so this document should cover all the way of updating it to the latest version.

Prepare dedicated environment for upgrade testing

Ensure you have working computer or virtual machine with

  • Ubuntu 14.04(16.04 or any decent Ubuntu LTS versions) 64 bit
  • MySQL 5.5+
  • Apache 2.4
  • PHP 5.6-7.1 (7.2 is not supported yet)

Recommended development environment: DDEV (Docker-based development environment)

Obtain local copy of your production site

You have to create local copy of your site locally to be able to proceed with the upgrade. For that

  • Make a backup of your production database and copy it to your local machine
  • Make a copy of your production site codebase and copy it to your local machine

  1. Detect version of your OpenY

Starting from OpenY 1.10 release you should see a version of OpenY in your site reports dashboard. For previous versions the best way to check your version is to analyze creation date of index.php pr README.txt file in the docroot folder of your site and compare it to the release date from https://github.com/YCloudYUSA/yusaopeny/releases . Your OpenY version should be the one which is older than creation date of the files.

  1. Run command with next never version

In a same folder where is your docroot folder run

mv composer.json composer.json.bak || true
wget https://raw.githubusercontent.com/YCloudYUSA/yusaopeny-project/8.1.x/composer.json
cd docroot/profiles/contrib/openy/
rm -f yparse*
wget https://raw.githubusercontent.com/YCloudYUSA/yusaopeny-project/8.1.x/scripts/yparse.sh
drush cr
sh yparse.sh | xargs drush en -y
cd ../../../../
composer require YCloudYUSA/yusaopeny:NEW_VERSION_HERE --no-update
composer update --prefer-dist --with-dependencies --prefer-stable --update-with-all-dependencies --no-suggest
  1. Update the site

Go to docroot folder of your codebase and run

drush updatedb
drush entup

Sometimes, when updatedb fails, it is important to get stable version of some modules we found causing problems

drush dl -y plugin-8.x-2.5 contribute-8.x-1.0-beta7 scheduler-8.x-1.0 views_block_filter_block datalayer simple_menu_icons rabbit_hole metatag simple_sitemap-8.x-2.9 easy_breadcrumb-8.x-1.6
drush en -y plugin contribute scheduler views_block_filter_block datalayer simple_menu_icons rabbit_hole metatag simple_sitemap || true
drush ev "Drupal::service('module_installer')->install(['content_moderation','openy']);"

Ensure commands above finished with no error messages. Best way to check it - run them one more time. If next run shows

$ drush updatedb
No database updates required                                                                                    [success]
$ drush entup
No entity schema updates required                                                                               [success]

You almost 100% proved updated were executed correctly.

  1. Check for regressions

  1. Backup current state of the updated site

  1. Proceed with an update to next version until succeeded (Start from item 1)

12.55 - Upgrade use case from 8.2.2.3 to 8.2.7.3

This document is archived but may contain useful information for troubleshooting future updates. For updated update steps, visit How to upgrade YMCA Website Services.


1 uninstall lndr and optimizely modules before running composer update commands

2 config to remove


drush cdel image.style.browser_thumbnail

3 enable openy_focal_point and media_directories_ui should be enabled when upgrade from 8.2.2.3 to 8.2.7.3

4 - run drush updatedb and next steps from tutorial

12.56 - Upgrading from 9.2.11.5 to 10.3

Scenario

A YMCA website is currently running on Y USA Open Y (openy-9.x-2.11.5) using Drupal 9. They want to upgrade to the latest YMCA Website Services distribution (10.3) on Drupal 10.

Upgrade Steps

  1. Prepare for Upgrade to WS

    • Ensure your site is on the latest Y USA Open Y 9.x release

      composer require -W ycloudyusa/yusaopeny:9.2.13.0 drupal/core-project-message:^9.5  drupal/core-composer-scaffold:^9.5 drupal/core-recommended:^9.5
      
    • Run database updates

      ../vendor/drush/drush/drush updatedb -l $SITE_URL
      
  2. Upgrade to WS 10.2

    • Require the 10.2.14 release of Y USA Open Y and update Drupal core and dependencies

      composer require -W ycloudyusa/yusaopeny:10.2.14 drupal/core-project-message:^10.0.11  drupal/core-composer-scaffold:^10.0.11 drupal/core-recommended:^10.0.11 drupal/core:^10.0.11 'drupal/smtp:^1.4' consolidation/robo:^4
      
  3. Address QuickEdit/RDF Dependency Issue

    • Temporarily require QuickEdit and RDF

      composer require drupal/quickedit drupal/rdf
      
    • Run database updates

      ../vendor/drush/drush/drush updatedb -l
      
    • Remove and re-add QuickEdit to resolve dependency conflicts

      composer remove drupal/quickedit
      composer require drupal/quickedit drupal/rdf
      
  4. Upgrade to WS 10.3.0.1

    • Require the 10.3.0.1 release

      composer require -W ycloudyusa/yusaopeny:10.3.0.1 drupal/core-project-message:^10.0.11  drupal/core-composer-scaffold:^10.0.11 drupal/core-recommended:^10.0.11 drupal/core:^10.0.11
      
    • Run database updates

      ../vendor/drush/drush/drush updatedb -l $SITE_URL
      
  5. Upgrade to WS 10.3.1

    • Require the 10.3.1 release

      composer require -W ycloudyusa/yusaopeny:10.3.1 drupal/core-project-message:^10.0.11  drupal/core-composer-scaffold:^10.0.11 drupal/core-recommended:^10.0.11 drupal/core:^10.0.11
      
  6. Add CKEditor5 Paste Filter

    • Require the CKEditor5 Paste Filter module

      composer require drupal/ckeditor5_paste_filter
      
    • Run database updates

      ../vendor/drush/drush/drush updatedb -l $SITE_URL
      
  7. Upgrade to WS 10.3.2

    • Require the 10.3.2 release

      composer require -W ycloudyusa/yusaopeny:10.3.2 drupal/core-project-message:^10.0.11  drupal/core-composer-scaffold:^10.0.11 drupal/core-recommended:^10.0.11 drupal/core:^10.0.11
      
  8. Upgrade to WS 10.3.3.2

    • Require the 10.3.3.2 release

      composer require -W ycloudyusa/yusaopeny:10.3.3.2
      
    • Run database updates

      ../vendor/drush/drush/drush updatedb -l $SITE_URL
      
  9. Address CKEditor5 Font Issue

    • Uninstall the existing CKEditor5 Font module

      uninstall ckeditor5_font
      
    • Require the latest beta version of CKEditor5 Font

      composer require 'drupal/ckeditor5_font:^1.1@beta'
      
    • Enable the CKEditor5 Font module

      ../vendor/drush/drush/drush en ckeditor5_font
      

Important Considerations

  • Backup: Always back up your site and database before performing any major upgrades.
  • Testing: Thoroughly test your site after each upgrade step on a staging environment before deploying to production.
  • Customizations: If you have made significant customizations to your site, consult with a Drupal developer to ensure a smooth upgrade process.
  • Drush Path: Adjust the ../vendor/drush/drush/drush path if your Drush installation is located elsewhere.
  • $SITE_URL: Replace $SITE_URL with the actual URL of your site.

Disclaimer: This use case provides a general outline for upgrading the YMCA Website Services Drupal distribution. Specific steps and commands may vary depending on your site’s configuration and any additional modules or customizations you have installed. Always refer to the official YMCA Website Services documentation and Drupal.org for the most up-to-date information and best practices.

12.57 - Upgrading to a new version of the distribution

Review a video about this document.

Before upgrading, please review these required version steps for your upgrade path.

Overview

Upgrade steps

Prepare dedicated environment for upgrade testing

Ensure you have a working computer or virtual machine with:

  • Ubuntu 20.04 (16.04, 18.04, or any decent Ubuntu LTS version) 64 bit
  • MySQL 5.7+ (8+ is preferred because of the performance improvements)
  • Apache 2.4 (or Nginx + php-fpm in case if you are fine with htaccess issues down the road)
  • PHP 8.1 (pre 8.1 could be an issue with some contrib modules)
  • Drush 12 || 10 || 11

Recommended development environment: DDEV (Docker-based development environment)

Obtain local copy of your production site

You have to create a local copy of your site locally to be able to proceed with the upgrade.

For that:

  • Make a backup of your production database and copy it to your local machine
  • Make a copy of your production site codebase and copy it to your local machine
  • Ensure you have not manually removed Drupal modules in your database without the uninstallation step being executed! In this case you’ll need to return the module back to the codebase and uninstall it via Drupal Extend UI or Drush before running the next steps to upgrade YMCA Website Services.
  • Upgrade your site to latest Open Y - 9.2.11.3 See respective docs from Open Y documentation

Run command

In the same folder where your docroot is, run:

mv composer.json composer.json.bak || true
wget https://raw.githubusercontent.com/YCloudYUSA/yusaopeny-project/9.2.x/composer.json
composer update -W

The script above replaces your composer.json file, so it’s only applicable to websites that have the file unmodified.

If your composer.json file is modified, merge the changes manually. Essentially, the repositories section of the file is updated.

Update the site

Go to the docroot folder of your codebase and run:

drush updatedb

If updatedb fails…

you can use Drupal’s hook_update_dependencies API to change the order of running updates to eliminate issues. See this example.

Ensure commands above have finished with no error messages. The best way to check it is to run them one more time. If the next run shows:

$ drush updatedb
No database updates required                                                                                    [success]

You have almost 100% proven updates were executed correctly.

If loading the site fails…

you may receive an error like this:

Error: Class … not found in …

This happens due to Drupal not finding the renamed modules. To resolve this, manually clear the Drupal caches:

drush ev "drupal_flush_all_caches();"
drush cr

which should clear up the errors.

Visit OpenY upgrade tool dashboard

Review and revert or apply an updated version of the configs after the upgrade.

image

Check for regressions

In order to check for regressions during the upgrade, it is best to work with smoke tests. YMCA Website Services maintains the smoke tests database document you should use for the process.

Backup current state of the updated site

Use drush sql-dump or another backup tool to take a backup of the site in its current state.

Proceed with an update to next version until succeeded (Start from item 1)


Version-Specific Upgrade Guides

For major version upgrades between Drupal core versions, refer to these dedicated guides:

Note: Most YMCAs should remain on Drupal 10 until the stable Drupal 11 release in Q4 2025. Drupal 10 is supported until December 9, 2026.


Additional Resources

12.58 - Videos

Video Tutorials

The YMCA Digital Services team maintains a YouTube channel with video tutorials for developers, content editors, evaluators, and more. Visit YouTube for the full list of content.

Playlists

12.59 - Virtual Y Configuration

Virtual Y predefined pages

Once Virtual Y installed system creates set of required Landing pages with predefined URLs. These pages are:

  • Virtual Y Landing page - /virtual-ymca
  • Virtual Y Login Landing page - /virtual-y-login

URLs to pages above then set as configuration values at /admin/openy/virtual-ymca.

Admin user is obligated to keep pages in the system or properly update configuration with new values to keep Virtual Y functionality working correctly.

Protecting Virtual Y Pages

If content editors modify the alias or remove the Virtual Y pages above, the VY site may break. Site administrators may want to add additional protections to the site to prevent editors from making those changes. We recommend Node Keep for this purpose:

  • Add node_keep to your repo with `composer require ‘drupal/node_keep’
  • Enable the module in Drupal
  • Edit each of the pages above and set the Node Keep options as you wish to protect the pages

Screenshot displaying Node Keep options

Virtual Y Log module

Virtual Y Log module can be configured via configuration files. Available settings:

  • activity_granularity_interval: Default value 600 - sets the interval in Seconds to track user activity on the site
  • archiver_enabled: default value true - enable / disable activity logs archiver cron execution
  • archiver_store_period: default value 1 year - set the period when activity logs will be collected and placed to same archive. This value should be set to as Relative Date/Time PHP string, e.g. 1 week, 2 months, 1 year, etc.

12.60 - Website Services Terms of Use

Version 2.1, December 2022

This is a free service provided by YUSA (“we,” “us,” and “our”) for users in the YMCA community (“users,” “you,” and “your”). By using the Website Services distribution repository, you agree to these Terms of Use.

We reserve the right to modify or discontinue, temporarily or permanently any services or the Terms of Use at any time, with or without prior notice to users. YUSA is not liable for any damage to any user or other third party that may result from any such modification, suspension or discontinuance of the service or of the Terms of Use.

Downloading

YUSA is not responsible for the content maintained in the repository. Any material downloaded or otherwise obtained through your use of our services is done at your own discretion and risk, and you will be solely responsible for any damage to your computer system or loss of data that results from the download of any such material. You agree that we have no responsibility or liability for the deletion of or the failure to store or to transmit, any content or communication maintained by the service. We retain the right to create limits on use and storage at our sole discretion at any time with or without notice.

We are not responsible for the content, data, or actions of third parties, and you release YUSA, our directors, officers, employees, and agents from any claims and damages, known and unknown, arising out of or in any way connected with any claim you have against any such third parties. No advice or information, whether oral or written, obtained by you from us or through or from our services creates any warranty not expressly stated in these Terms of Use.

All code downloaded from Website Services distribution is based on the Drupal® code base, which is subject to the terms of the Drupal license ( www.drupal.org). Website Services distribution code is a derivative work of Drupal and any distribution must be under the terms of the GNU General Public License version 2 or later versions.

Unless otherwise stated, all content (excluding code), including user-generated content, such as comments and discussions on the Website Services distribution web site, is licensed under Creative Commons License, Attribution-ShareAlike 2.0.

Contributing

The term “contribution” means any source code, object code, patch, tool, sample, graphic, specification, manual, documentation, comments or any other content posted or submitted by you to Website Services distribution. We welcome proposed contributions, however, all contributions are subject to review and approval, and potential modification, before inclusion in a release as part of Website Services distribution.

It is your responsibility to obtain appropriate licensing and attribution for content that you submit to Website Services distribution. Content without appropriate licensing or attribution will be removed.

You represent and warrant that:

  • Each contribution that you submit is an original work of authorship and you can legally grant the rights set out in these Terms of Use;

  • To the best of your knowledge, each contribution will not violate any third party’s copyrights, trademarks, patents, or other intellectual property rights;

  • Each contribution shall be in compliance with U.S. export control laws and other applicable export and import laws.

You agree to notify us if you become aware of any circumstance which would make any of the foregoing representations inaccurate in any respect.

All code must comply with the reasonable standards issued by Website Services distribution, including architecture and security protocols. All code submitted to the repository that is a derivative work must be GPLv2+ compatible and will automatically be redistributed as GPLv2+.

YUSA in its sole discretion will review, modify and determine whether to include code in its next release. We can refuse or remove any contributions at our discretion and without prior notice.

Disclaimer

All content is provided “as is,” without any warranty of any kind, either expressed or implied, including, but not limited to, the implied warranties of merchantability, fitness for a particular purpose and non-infringement; (ii) YUSA makes no other warranty that its services will meet your requirements, be safe, secure, uninterrupted, timely, accurate, or error-free, or that your information will be secure; and (iii) the entire risk as to the quality and performance of the content is with you.

Limit of Liability

In no event will YUSA, its affiliates or their licensors, service providers, employees, agents, officers, or directors be liable for any indirect, special, incidental, consequential or punitive damages, including but not limited to loss of revenue, loss of profits, loss of business or anticipated savings, loss of goodwill, and whether caused by tort (including negligence), breach of contract or otherwise, even if foreseeable. The foregoing does not affect any liability which cannot be excluded or limited under applicable law.

Copyright DMCA Notice

If a user or other third party believes that its content has been copied in a way that constitutes copyright infringement, that user or third party should provide YUSA with the following information: (a) an electronic or physical signature of the person authorized to act on behalf of the owner of the copyright

interest; (b) a description of the copyrighted work that has been infringed; (c) a description of where the allegedly infringing material is located; (d) the affected user or third party’s address, telephone number and email address; (e) a statement by the affected user or third party that he or she has a good faith belief that the disputed use is not authorized by the copyright owner, its agent or the law; and (f) a statement by the affected user or third party, under penalty of perjury, that the above information is accurate and that such user or third party is the copyright owner or is otherwise authorized to act on the copyright owner’s behalf. Please report any alleged copyright infringements to https://ymca.org.

Venue and Governing Law This Agreement shall be governed by, and construed in accordance with, the laws of the State of Minnesota, without reference to conflicts of laws principles. The parties agree that the federal and state courts in the county of Hennepin, Minnesota will have exclusive jurisdiction and venue under this Agreement, and each party hereby agrees to submit to such jurisdiction exclusively.

13 - Contribution Guidelines

How to contribute to the docs

We use:

  • Hugo to format and generate our website,
  • the Docsy theme for styling and site structure,
  • Netlify for PR previews, and
  • GitHub Actions to manage the deployment of the site to GitHub Pages.

Hugo is an open-source static site generator that provides us with templates, content organisation in a standard directory structure, and a website generation engine. You write the pages in Markdown (or HTML if you want), and Hugo wraps them up into a website.

All submissions, including submissions by project members, require review. We use GitHub pull requests for this purpose. Consult GitHub Help for more information on using pull requests.

Updating a single page

If you’ve just spotted something you’d like to change while using the docs, Docsy has a shortcut for you:

  1. Click Edit this page in the right (second) sidebar.
  2. If you don’t already have an up-to-date fork of the project repo, you are prompted to get one - click Fork this repository and propose changes or Update your Fork to get an up-to-date version of the project to edit. The appropriate page in your fork is displayed in edit mode.
  3. Make your changes and open a Pull Request. The maintainers will review, provide feedback, and merge.

Previewing your changes locally

If you want to run your own local Hugo server to preview your changes as you work:

  1. Follow the instructions in Getting started to install Hugo and any other tools you need.
  2. Fork the yusaopeny_docs repo into your own project, then create a local copy using git clone.
  3. Run hugo server in the site root directory. By default, your site will be available at http://localhost:1313/. Now that you’re serving your site locally, Hugo will watch for changes to the content and automatically refresh your site.
  4. Continue with the usual GitHub workflow to edit files, commit them, push the changes up to your fork, and create a pull request.

Common options

Hugo has a number of flags you can use to change local server behavior, here are a few we like:

  • --tlsAuto generate and use locally-trusted certificates to run the site over https
  • --buildDrafts include content marked as draft
  • --buildFuture include content with publishdate in the future

With all of these, you might end up with something like:

hugo serve --tlsAuto --buildDrafts --buildFuture

Creating an issue

If you’ve found a problem in the docs, but you’re not sure how to fix it yourself, please create an issue in the yusaopeny_docs repo. You can also create an issue about a specific page by clicking the Create Issue button in the top right hand corner of the page.

Useful resources

13.1 - Documentation Tips & Tricks

In addition to the full documentation, here are some commonly used functions in the YMCA Website Services Docs.

General Styles

The YMCA Website Services Docs are written in Markdown, an easy-to read and write formatting language.

The old documentation made heavy use of horizontal rules --- and slashes in headings ## // Heading. We try to use standard Markdown headings for organization and remove those visual indicators for better accessibility.

Headings with a page should start with level 2 ## in order to properly build the in-page navigation.

Internal links should be made with Markdown and page-relative locations, like:

[Blocks](../user-documentation/blocks)

Blocks

Internal paths with spaces in them should have their destination wrapped in angle brackets:

[Accordion Desktop](<../assets/designs/lb/Accordion Desktop.png>)

Accordion Desktop

Images

Image files should be placed in the /assets/img directory at the root of the project, then they can be embedded with relative paths with Markdown:

![Alt text](../../../../assets/img/llama.png "This is a caption.")

A very adorable llama.
A very adorable llama

Image processing is brought to you by Hugo Markdown Render Hooks, editable in layouts/_default/_markup.

Video Embeds

Videos can be embedded using Hugo’s youtube or vimeo shortcodes. These take the form:

{{< youtube w7Ft2ymGmfc >}}
{{< vimeo 146022717 >}}

To replace regular YouTube links with the shortcode you can use the following regex:

find: https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?([\w-]+)
replacement: {{< youtube w7Ft2ymGmfc >}}

Tips

The old community documentation used headings inside blockquotes (starting each line with >). That formatting doesn’t work in Hugo. We can use Docsy alerts instead.

{{% alert title="Warning" %}}
This is a warning.
{{% /alert %}}

Although blockquotes sometimes work just as well:

> **Warning:** This is a warning.

Warning: This is a warning.

Color swatches

The color shortcode can be used to display a small color swatch after a hex or RGB color value. Pass one quoted value for hex, or three numeric values for RGB.

When using this shortcode in code fences, use <> instead of %% as the shortcode delimiter so that the code is not further rendered.

```scss
color: {{< color "#a92b31" >}}
color: {{< color 169 43 49 >}}
```
color: #a92b31
color: 169, 43, 49

Remote Markdown files

The include-remote-md shortcode fetches a remote markdown file and includes it in the page. This happens only when your Docsy project is built, so future changes of the remote markdown file are only included when you rebuild your project. See docsy#1739

If the file has a H1 (# ....) instead of frontmatter, you can put the title line in as the second parameter and it will be removed instead. For example:

{{% include-remote-md "https://raw.githubusercontent.com/google/docsy/main/README.md" "# Docsy" %}}

13.2 - Linting

As with code, it’s good practice to run automated checks on our docs too.

lint•er : noun

  • a machine for removing the short fibers from cotton seeds after ginning
  • a static code analysis tool used to flag programming errors, bugs, stylistic errors and suspicious constructs

Using linkcheck:

Linkcheck has some issues with localhost that we’re working on resolving. Until then, you can set up your local site to run through Cloudflare Tunnel and then run it.

  • linkcheck -e https://your-site-url.example.com/docs/some/path --skip-file .linkcheck_skip.txt - run the linkchecker on internal (default) and external (-e) links with our custom ignore file (--skip-file).

Checking markdown

Using markdownlint:

  • markdownlint-cli2 --fix "content/en/docs/user-documentation/paragraphs/**/*.md" - lint and fix the Paragraphs directory

14 - Glossary

ACTIVENet
“The world’s most powerful facility, registration and membership management software makes it easier to run your organization better than ever before.” Integrates with Activity Finder. Also “Active Network”. ACTIVENet.
Activity Finder
A major component of the distribution which allows users to search Y programs with an interactive interface. Integrates with Daxko, ActiveNet, or Personify. Frontend built with Vue.js. Code at YCloudYUSA/yusaopeny_activity_finder.
Avocado
“A powerful and flexible recreation and facility management platform running on the world’s leading CRM solution” (Salesforce). Used by some Canadian YMCAs to integrate with Activity Finder and Group Exercise. Avocado.
Block
A Drupal data structure that contains a reusable set of content and can be placed on a page using the Block Layout or Layout Builder. Blocks.
Cachet
The official font of YMCA-USA. See Fonts.
Carnation
The newest and most widely used of the distribution themes. “Carnation offers image-rich page layouts and simple, mobile-optimized menus.” See Sandboxes.
Content type
An item of content data with shared fields, like an image, text, and address. Content types have different purposes (Branch, Event, Landing Page) and are displayed in different ways on the site. See the Drupal User Guide and Content Types in the distribution.
Daxko
A service provider offering member management, facility management, and more. Integrates with most features of the distribution that have integrations. Daxko.
Distribution
Full copies of Drupal that include Drupal Core, along with additional software such as themes, modules, libraries, and installation profiles. Used here to refer to the YMCA Website Services distribution. Drupal Distributions.
Drupal
The Content Management System that powers the distribution. Drupal.
EGYM
A service provider offering cloud-connected equipment and services to YMCAs. See EGYM.
Five Jars
A partner agency that works on the distribution and provides services directly to YMCAs. Also “5J”. Five Jars.
GroupEx Pro
A group-exercise management platform. Integrates with the Group Schedules feature. Acquired by Daxko in 2019. GroupEx PRO.
ImageX
A partner agency that works on the distribution and provides services directly to YMCAs. Also “ImageX Media”. ImageX.
ITCare
A partner agency that works on the distribution and provides services directly to YMCAs. IT Care.
Layout Builder
A Drupal module that allows content editors to create visual layouts for displaying content using a drag-and-drop interface. See Layout Builder.
Lily
[Deprecated in Drupal 11] One of the legacy distribution themes. “Lily offers bold banner headings and eye-catching tiles to organize child page content.” For Drupal 11 sites, use Carnation theme. See Sandboxes.
Membership calculator
A feature of the distribution providing a wizard-style flow to assist members with choosing a membership and then funnel them into the member management system. See Membership Calculator.
Membership framework
A more complex version of the Membership calculator with advanced features leveraging Drupal Commerce. See YCloudYUSA/yusaopeny_memberships.
Mid-major
Officially the “Mid-Major YMCA Network”. Organization representing mid-sized YMCAs.
OneEach
: A partner agency that provides development and hosting services directly to YMCAs. OneEach Technologies
Open Y
The original name of the distribution currently known as YMCA Website Services. In 2016 a group of YMCA digital, marketing, and technology experts recognized the digital opportunities that exist if we work together as a community and established Open Y. The original core team was led by a small group of YMCAs including the YMCA North, Greater Seattle and YMCA of Greater Houston.
Paragraph
A Drupal data structure that allows content editors to create sections of content on a page using preset groups of fields. See Paragraphs on Drupal.org and Paragraphs in the distribution.
PEF
The Program Event Framework, also known as PEF, consists of a group of content types and front-end displays that can be used to create related programs, activities, classes, and sessions.
Personify
A service provider that offers member management systems and more. Integrates with a number of features of the distribution. Personify.
Rose
[Deprecated in Drupal 11] One of the legacy distribution themes. Rose offers sprawling site menu options and high accessibility for blind and low-vision users. For Drupal 11 sites, use Carnation theme. See Sandboxes.
Sandbox
A set of example sites for evaluating and testing the distribution. See Sandboxes.
Small Y:
YMCAs that have only a single or a few branches. Represented by the “Small and Mid-Size YMCA Network”.
SSO
Single Sign-On. A feature of some member management systems that can provide integrations into the distribution.
Theme
A set of templates, styles, and code that define the presentation layer of a site. See Theming Drupal.
YMCA Canada
Y Canada
The Canadian YMCA Federation is made up of a national office and Member Associations across the country. See ymca.ca.
YMCA North American Network
YNAN
The organization representing the largest YMCA associations in the country.
YMCA of the North
Y North
Formerly YMCA of the Twin Cities. One of the founding associations of Open Y. Lovers of llamas. See ynorth.org.
YMCA of the USA
YUSA
Y-USA
The national resource office, supporting thousands of YMCAs, tens of thousands of staff, and hundreds of thousands of volunteers in 10,000 communities across the USA. Headquartered in Chicago. YMCA of the USA.
YMCA’s Cloud Hosting Service
An enterprise-grade platform that enables Associations (Y’s) to create, host and personalize digital experiences. A product of YMCA’s Digital Services. Formerly YCloud Hosting. See ds.ymca.org.
YMCA‘s Digital Content Hub
A submodule of YMCA’s Website Service enabling content sharing across YMCA websites. Formerly known as Y Content Hub A product of YMCA’s Digital Services.
YMCA’s Digital Services
The collection of mostly open-source cloud-based services maintained in collaboration between YUSA, the movement, and agency partners. Formerly known as the YCloud Ecosystem. See ds.ymca.org.
YMCA’s Mobile Experience Platform
A mobile app to engage YMCA associations’ members across the USA. A product of YMCA’s Digital Services. Formerly known as the Universal App. See ds.ymca.org.
YMCA’s Virtual Experience Platform
A gated and secure digital space created to provide content, programming, and other resources to YMCA Association members. A product of YMCA’s Digital Services. Formerly known as Virtual Y. See ds.ymca.org.
YMCA’s Website Service
A collection of Drupal modules, themes, configuration, and content bundled together in a “distribution” to enable digital transformation for YMCAs across the country. A product of YMCA’s Digital Services. Formerly known as Open Y. See ds.ymca.org.