Content Structure

• 1: Blocks
• 1.1: Basic
• 1.2: Block Menu
• 1.3: Branch Amenities
• 1.4: Custom Simple
• 1.5: Flexible
• 2: Content Types
• 2.1: Activity
• 2.2: Alert
• 2.3: Article
• 2.4: Blog
• 2.5: Branch
• 2.6: Camp
• 2.7: Class
• 2.8: Event
• 2.9: Facility
• 2.10: Landing Page
• 2.11: Landing Page (Layout Builder)
• 2.12: Membership
• 2.13: News
• 2.14: Program
• 2.15: Program Subcategory
• 2.16: Promotion
• 2.17: Session
• 2.18: Social Post
• 3: Layout Builder
• 4: Media
• 4.1: WYSIWYG View Modes
• 5: Paragraphs
• 5.1: 1 Column
• 5.2: 2 Columns
• 5.3: 3 Columns
• 5.4: 4 Columns
• 5.5: All Amenities
• 5.6: Banner
• 5.7: Blog Posts Listing
• 5.8: Branches Popup (All)
• 5.9: Branches Popup (Class)
• 5.10: Categories Listing
• 5.11: Class Location
• 5.12: Class Sessions
• 5.13: Classes Listing
• 5.14: Code
• 5.15: Featured Blog Posts
• 5.16: Featured Content
• 5.17: Featured Highlights
• 5.18: Featured News Posts
• 5.19: Gallery
• 5.20: Grid columns
• 5.21: Grid Content
• 5.22: Group Schedules
• 5.23: Latest Blog Posts
• 5.24: Latest Blog Posts (Branch)
• 5.25: Latest Blog Posts (Camp)
• 5.26: Latest News Posts
• 5.27: Latest News Posts (Branch)
• 5.28: Latest News Posts (Camp)
• 5.29: Limited Time Offer
• 5.30: Location finder
• 5.31: Location Finder Filters
• 5.32: Membership Information Paragraph
• 5.33: Microsites Menu
• 5.34: News Posts Listing
• 5.35: Program Registration (Daxko)
• 5.36: Promo Card
• 5.37: Schedule search form
• 5.38: Schedule search list
• 5.39: Secondary Description and Sidebar
• 5.40: Session Time
• 5.41: Simple Content
• 5.42: Small Banner
• 5.43: Social Post Listing
• 5.44: Social Share Icons
• 5.45: Story Card
• 5.46: Teaser
• 5.47: Webform
• 6: Taxonomy
• 6.1: Amenities
• 6.2: Area
• 6.3: Blog Category
• 6.4: Color
• 6.5: Facility Type
• 6.6: Media Tags
• 6.7: News Category

1 - Blocks

What are Blocks?

Blocks are boxes of content rendered into a specific area, or region, of a web page. Blocks are placed and configured specifically for each theme, allowing for customization of content display and layout. Think of them as reusable content containers.

What are Content Blocks?

Content blocks are a specific type of block, where you can edit the content directly through the administrative interface. You can define one or more block types and attach fields to each block type, enabling structured content creation for blocks. Content blocks can be placed just like blocks provided by other modules.

What is the Block Description?

The block description is an administrative label for a block, which is displayed in the administrative interface to help identify the block. It is not displayed to site visitors on the live website.

What is the Block Title?

The block title is the heading that is optionally displayed to site visitors when the block is placed in a region. The visibility of the title can be configured within the block’s settings.

Managing Blocks

The Block module allows you to place existing blocks in regions of your installed themes and configure various block settings, such as title visibility, and user roles. The Block Content module allows you to manage custom block types and create/edit their content.

Additional Resources

• Blocks (Drupal User Guide)
• Refer to the related topics listed below for specific tasks.

1.1 - Basic

A simple block with a description. This block type is commonly used for displaying basic content on a website. It offers a single WYSIWYG field for content creation.

Fields

1.2 - Block Menu

The Block Menu implements a custom block type with links. Blocks are boxes of content rendered into a region of a web page. Content blocks are blocks whose content you can edit, placing them like blocks provided by other modules. The block description is an identification name for a block, shown in the administrative interface but not displayed on the site. The block title is the heading optionally shown to site visitors when the block is placed in a region.

Fields

1.3 - Branch Amenities

A block displaying a list of amenities for the current branch.

Fields

1.4 - Custom Simple

A simple block with a body, title, icon and link.

Fields

1.5 - Flexible

The Flexible block provides a way to display content from a referenced node.

Fields

2 - Content Types

Welcome to the YMCA Website Services Content Types documentation.

In terms of YMCA Website Services, content types are “bundles” of a “node” entity within the Drupal Framework. For more low-level documentation, refer to drupal.org.

YMCA Website Services ships with a set of content types to simplify site usage. While the number of content types isn’t restricted and developers can add more, the goal is to ensure that the shipped list of content types is covered by the YMCA Website Services upgrade path.

Understanding Content Types

• Content Entity: A content entity is an item of content data like text, images, or files. Content entities are grouped into entity types, which are further divided into entity sub-types to allow for variations in how the entities are used and displayed.
• Fields: Data within content entities is stored in individual fields. Each field holds a specific data type (formatted text, plain text, images, etc.) Fields can be single or multiple-valued.
• Reference Field: A reference field stores a relationship between one entity and one or more other entities.
• Formatter: A formatter determines how a field is displayed.
• Widget: A widget determines how a field is edited.

Managing Content Structure

Several core modules are used to manage content structure:

• Node, Comment, Content Block, Custom Menu Links, User, File, Image, Media, Taxonomy, and Contact modules: Provide content entity types.
• Field UI module: Provides a user interface for managing fields and their display on entities.
• Layout Builder module: Provides a user interface for configuring the display of entities.
• Filter, Responsive Image, and Path modules: Provide settings and display options for entities and fields.

2.1 - Activity

The Activity content type is used for adding Activities to the site. Activities are typically associated with Programs and Classes.

Fields

URL pattern

This content type uses the following URL pattern:

/programs/[node:field_activity_category:entity:field_category_program:entity:title]/[node:field_activity_category:entity:title]/[node:title]

Explanation:

• /programs/: Indicates that this is part of the Programs section of the site.
• [node:field_activity_category:entity:field_category_program:entity:title]: This part of the URL is dynamically generated from the title of the Program to which the activity subcategory is associated.
• [node:field_activity_category:entity:title]: This is dynamically generated from the title of the Activity Category.
• [node:title]: This part is dynamically generated from the title of the Activity node itself.

2.2 - Alert

The Alert content type is used for displaying timely information in a banner across the site. Unlike most content types, you don’t use Alert to create pages. Instead, Alerts display as a rendered entity, as a section of content on other pages, either just below the header or above the footer.

Fields

URL pattern

Content type uses the following pattern: /alert/[node:title].

2.3 - Article

The Article content type is used for creating blog posts, news items, and press releases on the site.

Fields

URL patterns

The Article content type uses the following URL patterns:

• /blog/[node:title]
• /news/[node:title]
• /press-release/[node:title]

2.4 - Blog

The Blog Post content type is used for adding blog posts to the site.

Fields

URL pattern

This content type uses the following URL pattern:

/blog/[node:title]

2.5 - Branch

The Branch content type is used for adding and managing branch locations on the site. Each branch can have detailed information, including address, contact details, hours of operation, and associated content.

Fields

URL pattern

The Branch content type uses the following URL pattern:

/locations/[node:title]

2.6 - Camp

The Camp content type is used for adding camp information to the site.

Fields

URL pattern

This content type uses the following URL pattern:

/camps/[node:title]

2.7 - Class

The Class content type is used for adding Classes to the site.

Fields

Note: Fields marked as “Field group” are not actual fields but are used to group the fields in the table for better readability.

URL pattern

The Class content type uses the following URL pattern:

/programs/[program-category]/[activity-category]/[class-title]/class-times

Example:

/programs/adult-programs/yoga/beginner-yoga-class/class-times

Explanation:

• /programs: Base path for program content.
• [program-category]: The title of the program category, derived from the field_class_activity reference field to the Activity taxonomy term, which in turn references the Program taxonomy term: [node:field_class_activity:entity:field_activity_category:entity:field_category_program:entity:title].
• [activity-category]: The title of the activity category, derived from the field_class_activity reference field to the Activity taxonomy term: [node:field_class_activity:entity:field_activity_category:entity:title].
• [class-title]: The title of the class node: [node:title].
• /class-times: A fixed suffix for the class times page.

2.8 - Event

The Event content type is used for adding and managing events on the site.

Fields

URL pattern

The Event content type uses the following URL pattern:

/event/[node:title]

2.9 - Facility

Facility content type is used for adding facilities on the site.

Fields

URL pattern

Content type is using the following pattern:

/facility/[node:title]

2.10 - Landing Page

The Landing Page content type is used for creating landing pages on the site.

Fields

URL pattern

The content type uses the following pattern:

[node:title]

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 “Published” 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. You can also use the “Save and edit layout” button to stay in Layout Builder after saving.

Fields

URL pattern

This content type uses the following pattern by default: [node:title]

2.12 - Membership

The Membership content type is used for adding membership information to the site.

Fields

URL pattern

The content type uses the following pattern for its URLs:

/membership/[node:title]

2.13 - News

The News Post content type is used for adding news posts to the site. News posts are typically displayed in a list or grid format, with the most recent posts appearing first.

Fields

URL pattern

This content type uses the following URL pattern:

/news/[node:title]

The [node:title] token is replaced with the title of the news item, with spaces replaced by hyphens. For example, a news item with the title “New Branch Opens” would have the URL /news/new-branch-opens.

2.14 - Program

The Program content type is used for adding Programs to the site.

Fields

URL pattern

This content type uses the following URL pattern:

/programs/[node:title]

2.15 - Program Subcategory

The Program Subcategory content type is used for adding program subcategories to the site.

Fields

URL pattern

This content type uses the following URL pattern:

/programs/[node:field_category_program:entity:title]/[node:title]

This means that the URL will be constructed using the title of the parent program and the title of the subcategory itself. For example, if the parent program is “Youth Programs” and the subcategory is “Summer Camp”, the URL would be /programs/youth-programs/summer-camp.

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. This content type is typically not displayed on its own page.

Fields

URL pattern

Promotions are generally embedded within other pages and do not have their own dedicated URL. Therefore, no URL pattern is defined for this content type.

2.17 - Session

The Session content type is used for adding Sessions to the site. Sessions typically represent events, classes, or other scheduled activities.

Fields

URL pattern

No dedicated URL pattern is defined for the Session content type by default. The intention is that this content type may not be directly accessed by end-users via a dedicated URL.

2.18 - Social Post

The Social Post content type is used for adding social media posts to the site. Social Posts are typically fetched from social networks using a module like the Social Feed Fetcher.

Fields

URL pattern

The content type uses the following URL pattern:

/social_post/[node:title]

3 - Layout Builder

These custom block types exist to support page building with Layout Builder. Blocks are boxes of content rendered into a region of a web page. Content blocks are blocks whose content you can edit.

Global Fields

These fields are reused across many of the below components.

Accordion

• Machine name: lb_accordion
• Project: lb_accordion
• User Docs & Designs

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

Accordion Item

• Machine name: accordion_item

Branch Amenities

• Machine name: lb_branch_amenities
• Project: lb_branch_amenities_blocks
• Designs: Mobile | Desktop

Display of all amenities available at a branch location.

Cards

• Machine name: lb_cards
• Project: lb_cards
• User Docs & Designs

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

Card Item

Machine name: card_item

The Card item block is referenced by the Cards block.

Carousel

• Machine name: lb_carousel
• Project: lb_carousel
• User Docs & Designs

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

Carousel Item

Machine name: carousel_item

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.

Grid CTA

• Machine name: lb_grid_cta
• Project: lb_grid_cta
• User Docs & Designs

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.

Grid Item

Machine name: grid_item

The Grid Item block is referenced by the Grid CTA component.

Hero Banner

• Machine name: lb_hero
• Project: lb_hero
• Designs: Mobile | Desktop

A full-width, almost full-height display with a header, description, and call to action overlaid on an image.

Partners

• Machine name: lb_partners
• Project: lb_partners_blocks
• Designs: Mobile | Desktop

List of multiple partner / sponsor logos.

Partner Item

Machine Name: lb_partner_item

Ping-pong

• Machine name: lb_ping_pong
• Project: lb_ping_pong
• Designs: Mobile | Desktop

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

Promo Card

• Machine name: lb_promo
• Project: lb_promo
• Designs: Mobile | Desktop

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

Related Articles

• Machine name: lb_related_articles
• Project: lb_related_articles_blocks
• Designs: Mobile | Desktop

Component for displaying related articles within a page.

Related Events

• Machine name: lb_related_events
• Project: lb_related_events_blocks
• Designs: Mobile | Desktop

Component for displaying related events within a page.

Simple Content

• Machine name: lb_simple_content
• Project: lb_simple_content
• Designs: Mobile | Desktop

Allows users to be able to view responsive tables within a page.

Simple Menu

• Machine name: lb_simple_menu
• Project: lb_simple_menu
• Designs: Mobile | Desktop

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

Staff

• Machine name: lb_staff
• Project: lb_staff_members_blocks
• Designs: Mobile | Desktop

Displays simple staff member info cards with image, name, title, email

Staff Item

Machine name: lb_staff_item

Statistics

• Machine name: lb_statistics
• Project: lb_statistics
• User Docs & Designs

Infographic-like display that highlights relevant statistics to users.

Statistics Item

Machine name: statistics_item

Tabs

• Machine name: lb_tabs
• Project: ws_lb_tabs
• User Docs & Designs

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.

Tab Item

Machine name: tab_item

The Tab Item block is referenced by the Tabs block.

Testimonials

• Machine name: lb_testimonials
• Project: lb_testimonial_blocks
• Designs: Mobile | Desktop

Display of short testimonials or quotes.

Testimonial Item

Machine Name: lb_testimonial_item

Webform

• Machine name: lb_webform
• Project: lb_webform
• Designs: Mobile | Desktop

Embed an existing webform on a page.

4 - Media

What are Media Items?

Core media items include audio, images, documents, and videos. You can add other media types, such as social media posts, through the use of contributed modules. Media items may be files located in your site’s file system or remote items referenced by a URL. Media items are content entities, and they are divided into media types (which are entity sub-types); media types can have fields. Refer to the Content Structure documentation for more information on content entities and fields.

What is the Media Library?

The media library is a visual user interface for managing and reusing media items. Add media items to content using Media reference fields and the Media library field widget.

What is an Image Style?

An image style is a set of processing steps, known as effects, that can be applied to images. Examples of effects include scaling and cropping images to different sizes. Responsive image styles can associate image styles with your theme’s size breakpoints. This allows serving images sized for the browser width.

Overview of Managing Media

The following modules provide media-related functionality:

• Media items and media types are managed by the core Media module.
• The core Media module provides a Media reference field to add media to content entities. The core File and Image modules also provide reference fields. It is recommended to use the Media reference field because it is more versatile.
• The core Media Library module provides the media library and the Media library field widget. With this module installed, the Media library field widget becomes the default widget for editing Media reference fields.
• The core Image module provides a user interface for defining image styles. The core Responsive Image module provides responsive image styles. Using the core Breakpoint module and a breakpoint-enabled theme, these responsive styles can serve images sized for the browser.

See the related topics listed below for specific tasks.

Additional Resources

• Media module documentation

4.1 - WYSIWYG View Modes

The following view modes are available for embedding media assets within a WYSIWYG editor, such as CKEditor 5. These view modes offer different display options for media assets, allowing content creators to choose the most appropriate presentation for their content.

View Modes

Bundle Details

The display of each media asset type (Image, Video, Document) varies depending on the selected view mode. The following outlines the specific rendering for each bundle:

Image

• Full & Half View Modes: Images are displayed using the <img> tag with appropriate CSS classes applied for styling and responsiveness. The specific classes may vary depending on the theme and styling configuration.
• Link View Mode: A hyperlink (<a> tag) is generated, pointing to the original image file. The link includes target="_blank" to open the image in a new tab or window.

Video

• Full & Half View Modes: Videos are displayed as embedded video players, likely using the <video> tag or an <iframe> to embed from a video hosting platform. Appropriate CSS classes are applied for styling.
• Link View Mode: A hyperlink (<a> tag) is generated, pointing to the original video file. The link includes target="_blank" to open the video in a new tab or window.

Document

• Full & Half View Modes: Documents are displayed using an <iframe> tag. The src attribute of the <iframe> points to a service like Google Docs Viewer, which renders the document within the iframe. Replace URL with the actual URL of the document. Appropriate CSS classes are applied for styling.

  <iframe src="//docs.google.com/gview?url=URL&embedded=true" frameborder="0"></iframe>
  

• Link View Mode: A hyperlink (<a> tag) is generated, pointing to the original document file. The link includes target="_blank" to open the document in a new tab or window.

5 - Paragraphs

Welcome to YMCA Website Services Paragraphs.

Paragraphs are content components, aligning with component-based design principles. Within the YMCA Website Services architecture, paragraphs are based on the Paragraphs Drupal module. This module enables the creation of Paragraphs entities.

The core idea is to provide a user-friendly widget for adding predefined content blocks directly within a page or other content item, without needing to reference external entities. It’s important to note that paragraphs are not intended as reusable content types. For reusable content, consider using blocks or other entities within Drupal.

Paragraphs enhance the user experience by offering a convenient and structured way to build content. They allow content editors to create unique layouts for their pages. Each paragraph represents a distinct content section, complete with its own styling, functionality, and fields.

Here’s a breakdown of key aspects:

• Paragraphs Module: Facilitates the creation of paragraph entities within Drupal.

• Component-Based Design: Paragraphs align with the principle of building interfaces from independent, reusable components.

• User Experience (UX): Paragraphs are designed to make content creation more intuitive and efficient.

• Non-Reusable Types: Paragraphs are not designed to be reused across multiple content items. Instead, look at Drupal blocks or entities.

• Paragraphs Types: Paragraphs are pre-defined sets of fields that are made available to the content editors. These are configured under Structure > Paragraphs Types.

To get started with Paragraphs:

1. Install the Paragraphs module.
2. Create Paragraphs types.
3. Add a Paragraph field to a content type.
4. Begin creating content and adding paragraphs.

5.1 - 1 Column

The 1 Column paragraph type allows you to create a single-column layout within your content.

Fields

5.2 - 2 Columns

The 2 Columns paragraph type allows you to create a paragraph with two columns for content. This is useful for displaying related information side-by-side or creating visually appealing layouts.

Fields

5.3 - 3 Columns

The 3 Columns paragraph type allows you to create a paragraph with three distinct columns of content. This paragraph type is useful for displaying information in a structured and visually appealing manner.

Fields

5.4 - 4 Columns

The 4 Columns paragraph type allows you to create a content block with four columns of information. This is useful for displaying related content side-by-side.

Fields

5.5 - All Amenities

This paragraph displays a list of amenities, typically in a table view. It’s useful for showcasing available features or services.

Fields

Important Considerations:

• View Configuration: The “All amenities” field relies on a pre-existing view. Ensure this view is properly configured to display the desired amenity information.
• Paragraph Usage: This paragraph type is generally intended for use within a larger page structure, like a landing page or a branch details page.
• Alternative: Consider using “Branch Amenities” block if you want to show the amenities for the current branch.

5.6 - Banner

The Banner paragraph type is used to display eye-catching content, often at the top of a page or section. It typically includes a headline, description, image, and a call to action link.

Fields

5.7 - Blog Posts Listing

This paragraph is dynamic and renders the latest blog posts, utilizing exposed filters for enhanced content discovery. It’s based on the openy_prgf_blog_listing module.

Key Features:

• Filtering: Allows users to filter blog posts based on:
  • Location
  • Category
  • Text (Search Keywords)
• Sticky at Top: Supports the “sticky at top” functionality to highlight important posts.
• Ordering: Orders blog posts by published date, displaying the newest posts first.
• Views Integration: Leverages Drupal’s Views module for flexible content display and filtering. The exposed filters are part of the View configuration.
• Infinite Scroll: Supports the views_infinite_scroll module for a better user experience.

Fields

Module Dependencies:

• openy_prgf_blog_listing
• views_infinite_scroll

Related Paragraphs:

• Latest Blog Posts: Displays blog posts promoted to the front page.
• Latest Blog Posts (Branch): Displays blog posts associated with a specific branch.
• Latest Blog Posts (Camp): Displays blog posts associated with a specific camp.
• News Posts Listing

5.8 - Branches Popup (All)

This dynamic paragraph renders the locations selection popup, based on the current node. It’s typically used to allow users to select a branch or location from a popup window. This selection can then influence other elements on the page, such as filtering schedules or classes.

Relates to:

• [Schedule search list](Schedule search list.md)
• [Classes Listing](Classes Listing.md)

Fields

Usage

This paragraph is often used in conjunction with other paragraphs and blocks to create a location-aware experience. For example, it might be used on a page with a schedule search to allow users to filter the schedule by location.

The openy_branch_selector module is often used to provide the functionality for selecting and saving a user’s preferred branch. The selected branch can then be used to pre-populate location filters and customize the user’s experience.

The specific appearance and behavior of the popup are determined by the view/block referenced in the field_prgf_block field. This allows for a high degree of customization to match the specific needs of the site.

5.9 - Branches Popup (Class)

This dynamic paragraph renders the location selection popup based on the current node. It’s typically used to allow users to select a location from a list of branches.

Relates to:

• [Class Sessions](Class Sessions.md)
• [Class Location](Class Location.md)

Fields

5.10 - Categories Listing

This is a dynamic paragraph that renders all published categories associated with the current program page.

It typically includes a “sticky at the top” option and orders items based on their published date (newest at the top).

Fields

Note: The Categories Listing paragraph type displays taxonomy terms. Taxonomy terms are categorized under: plain text, number, reference, date and time and general.

5.11 - Class Location

This dynamic paragraph renders the location’s “class location” view mode based on the location URL query parameter with a valid ID. This paragraph is typically used on class pages to display location-specific information.

Context:

• This paragraph is used to display location information, such as address, phone number, and hours, for a specific class.
• The “class location” view mode defines how the location information is displayed.

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, allowing the user to select a different location.

Fields

5.12 - Class Sessions

This dynamic paragraph renders class session instances based on the URL query parameter location with a valid ID.

Relates to [Branches Popup (Class)](Branches Popup (Class).md).

Fields

Displayed Table

The following fields are displayed in a table format:

• Location: Displayed unless &location=% is present in the URL, in which case it is hidden.
• Time + Date
• Registration: A link to the registration page.
• Details:
  • Online registration information
  • Ticket requirement status
  • Membership eligibility
• Age: Minimum and maximum age range for the class.

Use Cases

These use cases describe the behavior of the Class Sessions paragraph in different scenarios, specifically regarding location filtering.

Class Page WITHOUT Location Popup

Use case 3: Class page WITHOUT location popup

Location Specified in URL

3. 1 Location in specified URL

   • When a Class page without a location popup is opened.
   • And the URL contains location=%.
   • The system skips any existing cookie values.
   • The class session results are filtered based on the location specified in the URL.
   • A location teaser is displayed in the sidebar.

Preferred Branch Empty or Selected, No Location in URL

3. 2 Preferred branch is empty and no location in URL or Preferred branch is selected and no location in URL

   • When a Class page without a location popup is opened.
   • And either:
     • No preferred branch is selected.
     • A preferred branch is selected, but the URL does not contain location=%.
   • The class session results include all branches.
   • “All locations…” is displayed in the sidebar.

Class Page WITH Location Popup

Use case 4: Class page WITH location popup

Location Specified in URL

4. 1 Location in specified URL

   • When a Class page with a location popup is opened.
   • And the URL contains location=%.
   • The system skips any existing cookie values.
   • The class session results are filtered based on the location specified in the URL.
   • A location teaser is displayed in the sidebar.
   • The location teaser in the sidebar includes an “Edit” link that opens the location popup.

Preferred Branch Empty or Selected, No Location in URL

5. 2 Preferred branch is empty and no location in URL or Preferred branch is selected and no location in URL

   • When a Class page with a location popup is opened.
   • And either:
     • No preferred branch is selected.
     • A preferred branch is selected, but the URL does not contain location=%.
   • The class session results include all branches.
   • “All locations…” is displayed in the sidebar.
   • The location popup is displayed, unless only one location is associated with the class.

5.13 - Classes Listing

The Classes Listing paragraph displays all published classes, grouped by activity.

The Classes Listing Filters provide a filter form with the following fields:

• Location
• Program
• Sub-program
• Activity

Relates to [Branches Popup (All)](Branches Popup (All).md).

Fields

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 a Program subcategory page with the Classes Listing paragraph WITHOUT a location popup on the page.
• And I have a preferred branch set (via cookie).
• And I don’t have location=% in the URL.
• Then the filter by location should be pre-defined based on the cookie value.
• And the results should be filtered accordingly.

1.2 Preferred branch is empty and no location in URL

• When I open a Program subcategory page with the Classes Listing paragraph WITHOUT a location popup on the page.
• And I don’t have a preferred branch set (cookie is empty).
• And I don’t have location=% in the URL.
• Then the filter by location should show “All”.
• And the results should be shown for all branches.

1.3 Location specified in URL

• When I open a Program subcategory page with the Classes Listing paragraph WITHOUT a location popup on the page.
• And I have location=% in the URL.
• Then the preferred branch cookie should be ignored, regardless of its value.
• And the filter by location should show the branch from the URL.
• And the results should be filtered accordingly.

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 a Program subcategory page with the Classes Listing paragraph WITH a location popup on the page.
• And I have a preferred branch set (via cookie).
• And I don’t have location=% in the URL.
• Then the location popup shouldn’t be shown.
• And the filter by location should be pre-defined based on the cookie value.
• And the results should be filtered accordingly.

2.2 Preferred branch is empty and no location in URL

• When I open a Program subcategory page with the Classes Listing paragraph WITH a location popup on the page.
• And I don’t have a preferred branch set (cookie is empty).
• And I don’t have location=% in the URL.
• Then the filter by location should show “All”.
• And the results should be shown for all branches.
• And the location popup should be shown.

2.3 Location specified in URL

• When I open a Program subcategory page with the Classes Listing paragraph WITH a location popup on the page.
• And I have location=% in the URL.
• Then the preferred branch cookie should be ignored, regardless of its value.
• And the location popup shouldn’t be shown.
• And the filter by location should show the branch from the URL.
• And the results should be filtered accordingly.

5.14 - Code

The Code paragraph type allows you to embed code snippets, or even embed content from other websites such as YouTube videos. It leverages the Code block type for its functionality.

Fields

5.15 - Featured Blog Posts

The “Featured Blog Posts” paragraph type displays a listing of featured blog posts. It utilizes the openy_prgf_featured_blogs module.

Fields

Module Information

• Module: openy_prgf_featured_blogs
• Description: Provides a dynamic paragraph that renders a featured blog posts listing.
• Dependencies:
  • drupal:field
  • drupal:node
  • openy_node_blog:openy_node_blog
  • openy_prgf:openy_prgf
  • paragraphs:paragraphs

Templates

The appearance of this paragraph can be customized via Twig templates. The following templates are used by default, and can be overridden in your theme:

• themes/contrib/openy_rose/templates/paragraph/paragraph--featured-blogs--default.html.twig
• themes/contrib/openy_lily/templates/paragraphs/paragraph--featured-blogs--default.html.twig
• themes/contrib/openy_carnation/templates/paragraph/paragraph--featured-blogs--default.html.twig

5.16 - Featured Content

The Featured Content paragraph type is used to create dynamic listings of content with various grid layouts. It’s part of the openy_prgf_featured_content module.

Fields

5.17 - Featured Highlights

The Featured Highlights paragraph type provides a way to display specific content blocks in a grid layout, with options for 2, 3, or 4 blocks per row.

Fields

5.18 - Featured News Posts

The Featured News Posts paragraph type displays a set of news articles. It allows content editors to highlight timely and relevant news items on a page. This paragraph leverages the openy_prgf_featured_news module.

Fields

Usage

1. When creating or editing a page or content type that supports paragraphs, select the “Featured News Posts” paragraph type.
2. Enter a “Headline” for the section (optional).
3. In the “News Posts” field, select one or more existing News posts. Use the autocomplete functionality to search for news posts by title.
4. Save the paragraph and the parent content.

The selected news posts will now be displayed on the page, under the specified headline. The display of each news post will use the “teaser” view mode.

5.19 - Gallery

The Gallery paragraph type is used to display a collection of images, often with accompanying text and links.

Fields

5.20 - Grid columns

This paragraph type is used for the field_grid_columns within the Grid Content paragraph. It defines the structure and fields for individual columns within a grid layout.

Fields

5.21 - Grid Content

The Grid Content paragraph type is used to create grid layouts within stories.

Fields

5.22 - Group Schedules

This is a dynamic paragraph that renders group schedules from the GroupEx Pro system. It leverages the openy_prgf_group_schedules module. This paragraph type allows content editors to embed schedules directly within content, providing users with up-to-date class and activity information.

Fields

5.23 - Latest Blog Posts

This paragraph is a dynamic element that displays the most recent blog posts. It’s designed to showcase content that is promoted to the front page.

Key features:

• Sticky at the top: This ensures the most important blog posts remain visible.
• Order: Items are ordered by published date, with the newest posts appearing first.

Fields

5.24 - Latest Blog Posts (Branch)

This dynamic paragraph renders the latest blog posts associated with a specific branch. It displays posts in chronological order, with the newest posts at the top, and utilizes the “sticky at the top” option to highlight important content.

Functionality

This paragraph type automatically filters and displays blog posts based on the branch context in which it is placed. For example, if this paragraph is added to a “Downtown YMCA” branch page, it will only display blog posts associated with the “Downtown YMCA” branch. If placed on a non-branch page, only the headline will be visible.

Fields

5.25 - Latest Blog Posts (Camp)

This paragraph dynamically renders the latest blog posts associated with a specific camp. It displays posts in reverse chronological order (newest first).

Functionality

• Filtering: Displays only blog posts associated with the current camp. If placed on a non-camp page, only the title will render.
• Ordering: Blog posts are ordered by published date, with the newest posts appearing at the top.
• Styling: Blog posts are displayed in a card format.

Usage

This paragraph is typically used in the content area or bottom area of a Camp page to showcase relevant blog content. To use it, select “Latest Blog Posts (Camp)” from the paragraphs dropdown, and enter a header title.

Supported Content Types

• Camp

Fields

Related Paragraphs

• Blog Posts Listing
• Latest Blog Posts
• Latest Blog Posts (Branch)
• Latest News Posts/(Camp)/(Branch)
• News Posts Listing
• Event Posts Listing

5.26 - Latest News Posts

This paragraph type dynamically renders the latest news posts. It is typically used to display news promoted to the front page, ordering them by published date with the newest at the top. The “sticky at the top” option can be used to highlight certain posts.

This paragraph leverages a block reference to display content.

Fields

5.27 - Latest News Posts (Branch)

The “Latest News Posts (Branch)” paragraph type is a dynamic element that displays the most recent news articles associated with a specific branch location. It’s designed to highlight timely and relevant information, ensuring that users are presented with the newest content first.

This paragraph automatically orders news items by their published date, with the most recent articles appearing at the top. Additionally, it utilizes a “sticky at the top” feature, which can be configured in the associated View to keep specific, important news posts prominently displayed.

Fields

Module Dependencies

This paragraph type is provided by the openy_prgf_news_branch module, which has the following dependencies:

• field: Part of Drupal core.
• node: Part of Drupal core.
• openy_loc_branch: Open Y Branch Location module.
• openy_node_news: Open Y News Node module.
• openy_prgf: Open Y Paragraphs base module.
• paragraphs: Paragraphs module for creating structured content.
• plugin: Part of Drupal core.
• user: Part of Drupal core.
• views: Part of Drupal core.
• views_infinite_scroll: Views Infinite Scroll module for paginating results.

5.28 - Latest News Posts (Camp)

This paragraph type dynamically renders the latest news posts associated with a specific camp. It displays news articles in reverse chronological order (newest first) and can utilize a “sticky” option to highlight certain posts at the top of the list.

Functionality

This paragraph is designed to be placed on a Camp page. When placed on a Camp page, it will display only news posts associated with that specific camp. If placed on a non-Camp page, it will display only the title (if one is configured).

Fields

5.29 - Limited Time Offer

This Paragraph type is used to add a limited-time offer section to a page, often the home page, and is based on a Landing Page Content Type.

Fields

5.30 - Location finder

This paragraph describes the Location finder paragraph type, which renders a block.

The Location finder block displays locations such as branches, camps, and facilities using a map and associated views. It may also include a filter block. For the Location finder block and Location finder filter block, see the Open Y Map documentation.

Fields

5.31 - Location Finder Filters

This paragraph renders the Location Finder map with pins and filters. It allows users to filter locations displayed on the map based on tags or other criteria.

Fields

5.32 - Membership Information Paragraph

This document describes the “Membership Information” paragraph type, which is used to display membership details such as location, link, fees, and rates. This paragraph is intended for use in the Membership content type.

Fields

5.33 - Microsites Menu

This paragraph type provides a microsites menu block.

Fields

5.34 - News Posts Listing

This dynamic paragraph renders the latest news posts and utilizes exposed filters, allowing users to refine the displayed content.

The available filters are:

• Location
• Category
• Text

The News Posts Listing also features a “sticky at the top” option, ensuring important news remains visible. Items are ordered by published date, with the newest posts appearing first. This functionality relies on the Views module.

Fields

5.35 - Program Registration (Daxko)

This paragraph renders the Programs Search Block.

The Programs Search Block provides a form to search programs from Daxko.

Related topics: Daxko

Important: The Daxko and Program Registration (Daxko) configurations must be set up before the Program Registration paragraph will work.

Configuration settings are located at /admin/config/development/daxko/programs-search. You must have the administer daxko permission to configure these settings. See the Daxko settings documentation for more information on configuring the connection to Daxko.

Fields

5.36 - Promo Card

The Promo Card is a Paragraph type used to create promotional content. It is often used in sidebars or other secondary areas of a page.

Fields

5.37 - Schedule search form

This paragraph renders the session instance filters for the [Schedule search list](Schedule search list.md). It provides a dynamic form allowing users to filter session instances based on various criteria. The form is rendered using the SchedulesSearchFormBlock plugin, which utilizes the SchedulesSearchForm form.

Fields

Usage

This paragraph is typically used in conjunction with the [Schedule search list](Schedule search list.md) paragraph to provide a filtering mechanism for session instances. It is rendered using the SchedulesSearchFormBlock plugin.

Technical Details

• Plugin ID: schedules_search_form_block
• Class: Drupal\openy_schedules\Plugin\Block\SchedulesSearchFormBlock
• Form: Drupal\openy_schedules\Form\SchedulesSearchForm

5.38 - Schedule search list

This dynamic paragraph renders the session instances based on URL parameters and/or filters from the [Schedule search form](Schedule search form.md).

Relates to [Branches Popup (All)](Branches Popup (All).md).

Fields

Use Cases

Use Case 1: Schedule search list paragraph on a page WITHOUT a location popup paragraph

1.1 Preferred branch is selected and no location in URL

• When I open the Schedule search list page WITHOUT a location popup on the page
• And I have a preferred branch
• And I don’t have location=% in the URL
• Then the filter by location should be predefined based on the cookie
• And the results should be filtered

1.2 Preferred branch is empty and no location in URL

• When I open the Schedule search list page WITHOUT a location popup on the page
• And I don’t have a preferred branch
• And I don’t have location=% in the URL
• Then the filter by location should show “All”
• And the results should be shown for all branches

1.3 Location specified in URL

• When I open the Schedule search list page WITHOUT a location popup on the page
• And I have location=% in the URL
• Then we skip the cookie, whether it is empty or exists
• And the filter by location should show the branch from the URL
• And the results should be filtered

Use Case 2: Schedule search list paragraph on a page WITH a location popup

2.1 Preferred branch is selected and no location in URL

• When I open the Schedule search list page WITH a location popup on the page
• And I have a preferred branch
• And I don’t have location=% in the URL
• Then the location popup shouldn’t be shown
• And the filter by location should be predefined based on the cookie
• And the results should be filtered

2.2 Preferred branch is empty and no location in URL

• When I open the Schedule search list page WITH a location popup on the page
• And I don’t have a preferred branch
• And I don’t have location=% in the URL
• Then the filter by location should show “All”
• And the results should be shown for all branches
• And the location popup should be shown

2.3 Location specified in URL

• When I open the Schedule search list page WITH a location popup on the page
• And I have location=% in the URL
• Then we skip the cookie, whether it is empty or exists
• And the location popup shouldn’t be shown
• And the filter by location should show the branch from the URL
• And the results should be filtered

5.39 - Secondary Description and Sidebar

The Secondary Description and Sidebar paragraph type is designed for content layouts featuring a left column (secondary description) and a right column (sidebar). Both columns utilize blocks for flexible content placement.

Fields

Note: Blocks provide a modular way to organize and display content within the columns. Consider using Basic Blocks for standard text and media, Code Blocks for displaying code snippets, Date Blocks for event dates, and Simple Blocks for streamlined content elements. You can create these blocks in the “Blocks” section of the administrative interface. The “Block Content” module allows you to manage block types and content blocks. The block description is an identification name for a block, which is shown in the administrative interface and not displayed on the site. The block title is the heading that is optionally shown to site visitors when the block is placed in a region.

5.40 - Session Time

The Session Time paragraph is used within the Session content type to define the schedule for a session. It allows you to specify the date and time range, as well as the days of the week the session repeats.

Fields

5.41 - Simple Content

The Simple Content paragraph type is used for adding formatted text to pages. It provides a WYSIWYG editor for rich text input.

Fields

5.42 - Small Banner

The Small Banner paragraph type is used to display banner content in a compact format.

Fields

5.43 - Social Post Listing

This paragraph type renders the latest social posts imported from social networks and displays them in a masonry grid. It leverages a View block to select and format the posts.

Fields

Details about the Social List (field_prgrf_sl_block) View Block:

• View: social_posts_view
• Block Display: social_posts_block
• This view selects nodes of the social_post content type.
• The view provides an administrative interface at admin/social-posts to manage social posts.
• The view displays the platform, ID, post content, and posted date for each social post.

5.44 - Social Share Icons

This paragraph type was used to add social media share icons, leveraging the AddThis service.

Important: The AddThis service has been deprecated as of May 31, 2023. This paragraph type no longer functions. See Using AddToAny for its replacement.

See more How to configure AddThis

Fields

5.45 - Story Card

The Story Card is a Paragraph type designed for use in sidebars, featuring a title, headline, and a link that turns the entire card into a call to action. This paragraph type is commonly used to highlight specific information or direct users to related content.

Fields

Usage Notes

• Themes: The Story Card Paragraph renders with specific styling in the Lily and Rose themes, including a border. It may not have the same visual emphasis in other themes like Carnation.

• Best Practices: To enhance usability, consider adding a > or other special character to the link text to visually indicate it’s a clickable link.

• Content Types: Story Cards are primarily designed for use in the sidebar region of content types, including:

  • Landing Page
  • News Post
  • Blog Post
  • Facility
  • Program
  • Program Subcategory

Advanced

• Custom CSS: To disable the quotation mark in the headline area (Lily and Rose), use the following CSS:

  .story-card .quote svg {
    display: none;
  }
  

5.46 - Teaser

The Teaser paragraph type is used to create visually engaging previews of content, often linking to more detailed information. It typically includes a title, image, short description, and a link.

Fields

Usage

Teaser paragraphs are commonly used on landing pages, content hubs, and in listing pages to promote specific articles, products, or sections of a website. They provide a concise overview and encourage users to explore further. The field_prgf_link will take the user to the page that the Teaser is promoting.

Best Practices

• Image Dimensions: Use appropriately sized images to ensure optimal display and page load times.
• Concise Descriptions: Keep descriptions brief and focused on highlighting the key benefits or features of the linked content.
• Clear Call to Action: The link text should clearly indicate the destination and encourage user interaction (e.g., “Read More,” “Learn More,” “View Details”).

5.47 - Webform

This is a paragraph type used for embedding webforms within content. It allows you to add existing webforms to a page.

Prerequisites

• You must have already created your webform using the Webform module before embedding it. This paragraph type does not create a new webform.
• Consider reviewing the Drupal Webform Tutorials (by Jacob Rockowitz) for comprehensive guidance on creating and managing webforms.

How to Use the Webform Paragraph

1. Add the Webform Paragraph: Select “Webform” from the available paragraph types when editing a content item.

2. Select the Webform: Choose the desired webform from the “Embedded Webform” field. This field displays a list of available webforms created using the Webform module.

   

3. Configure Webform Status: Use the “Webform status” field to control the webform’s availability:

   • Open: Allows users to submit the webform.
   • Closed: Prevents new submissions. Existing submissions remain accessible.
   • Scheduled: Set open and close dates for the webform.

4. Default Webform Submission Data (Optional): The “Default webform submission data (YAML)” field allows you to pre-populate webform fields with default values.

   • Enter YAML code to define the default values.
   • This is useful for providing guidance or setting common values for users.
   • Consult the YAML specification for correct syntax.

Fields

Content Types That Support Webform

• Landing Page
• Branch
• Camp
• Facility
• Program
• Program Subcategory
• Blog Post (Lily/Rose only)
• News Post
• Event

6 - Taxonomy

6.1 - Amenities

This vocabulary is used to categorize branch amenities. It is used to tag Branch content.

Machine name: amenities

To manage the available amenities, navigate to: admin/structure/taxonomy/manage/amenities/overview.

6.2 - Area

The Area vocabulary is used to categorize location areas on the site. This vocabulary is used by the Location Branch and Facility content types to classify the areas they serve. Areas can represent neighborhoods, regions, or any other relevant geographical or logical division.

Machine name: area

Details:

• This vocabulary is implemented as a taxonomy.
• Terms within this vocabulary are referenced by the field_location_area field on the Location Branch and Facility content types.
• Consider using a hierarchical structure for your Area taxonomy to allow for more granular categorization (e.g., Continent > Country > Region > City > Neighborhood).
• When creating terms, ensure that the names are clear, concise, and representative of the area they describe. Use title case for term names (e.g., “Downtown”).

Related Content Types:

• Location Branch
• Facility

6.3 - Blog Category

This is a vocabulary that will be used for adding blog categories on the site. A vocabulary is a set of taxonomy terms. Taxonomy terms are used to classify website content.

Machine name: blog_category

Definition: A vocabulary for categorizing blog posts. Individual categories are known as terms.

See also:

• Taxonomy in the Drupal User Guide.
• Taxonomy Overview

6.4 - Color

This is a vocabulary used for adding colors. It is typically used as a reference field in other content types, such as Paragraphs.

Machine name: color

Fields

6.5 - Facility Type

This is a vocabulary used for categorizing facilities on the site, specifically for the Facility content type.

Machine name: facility_type

6.6 - Media Tags

This vocabulary is used for adding media tags, which allow you to structure your media assets library. These tags are crucial for organizing, searching, and managing your media files effectively within the system.

Machine name: media_tags

Media tags, when applied correctly, enhance the discoverability and reusability of your media assets. They provide a controlled vocabulary for categorizing different types of media, such as images, videos, audio files, and documents. This categorization enables efficient filtering and sorting within the media library.

Consider the following benefits of using media tags:

• Improved Search: Users can quickly locate specific media assets by searching for relevant tags.
• Enhanced Organization: Media assets are neatly categorized, making it easier to browse and manage the library.
• Content Relationships: Tags can define relationships between different media items, showcasing related content.
• Workflow Automation: Automate media processing tasks based on assigned tags.

Best Practices

• Consistency: Use consistent tagging practices across all media assets.
• Specificity: Choose the most specific tags that accurately describe the media.
• Relevance: Ensure that tags are relevant to the content of the media asset.
• Hierarchy: When creating tags, it’s important to have a hierarchy so that filtering and searching can find all of the related tags.

By implementing a well-defined media tagging strategy, you can significantly improve the usability and effectiveness of your media asset library.

6.7 - News Category

This vocabulary is used for categorizing news articles on the site. Taxonomy terms are grouped into vocabularies. This vocabulary provides a predefined set of categories for news content, ensuring consistency and facilitating content organization and filtering.

Machine Name: news_category

Description:

• Used to classify news content.
• Terms within this vocabulary can be used to create lists of related articles, filter news feeds, and improve site navigation.
• Allows content editors to assign one or more categories to each news item.

Usage:

1. The news_category vocabulary is used with a “Taxonomy term” reference field attached to the “News” content type.
2. When creating or editing a news article, users can select relevant categories from the available terms in this vocabulary.

See Also:

• Managing taxonomy
• Taxonomy overview