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.
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.
Everything you’ve wanted to know about using YMCA Website Services.
These documents are a combination of the former YMCA Website Services Community User Documentation and the
User Manual.
If you see something missing or would like to request a new topic, please
open an issue.
1.1 - 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.
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):
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.
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.
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.
We recommend only using custom buttons in large text blocks, like the
Table or
Code blocks.
Open the Bootstrap Button Options.
Add the button classes for Color, Size, and Style (see
Button Classes). Do not use the btn prefix when entering options in the Bootstrap Button fields, those will be added for you.
Button styles in the editor may not match the displayed 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.
Anchor links
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:
Adding the in-page anchor.
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.
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:
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:
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://.
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.
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.
Add or select media
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.
Choose the media type (Image, Document, etc.) that you would like to embed from the list on the left.
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 > MediaAdd 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.
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.
Toggle caption on
Displays a Caption area below your image. Once toggled, type your caption below the image.
Link media
Allows the media to be linked. See
Adding Links for more information.
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.
1.1.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.
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.
Special characters - Insert mathematical operators, currency symbols, punctuation, or graphic symbols not typically accessible from the keyboard.
Language - Mark specific sections of the content as different languages so that browsers and screen readers can correctly interpret them.
More info.
Bold Text - Ctrl+B (Windows) or Command(⌘)+B (Mac) or clicking/unclicking the B icon
Italics - Ctrl+I (Windows) or Command(⌘)+I (Mac) or clicking/unclicking the I icon
Underline - Ctrl+U (Windows) or Command(⌘)+U (Mac)or clicking/unclicking the U icon
Strikethrough - Clicking/unclicking the S icon
Alignment controls - Left, Center, Right, and Justify.
Font Color - A small grid of swatches you can apply to your text. Overrides the default font-color
Text Background color (not recommended)
Font (should remain Cachet or Verdana to conform to YMCA brand standards)
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.
Indent - Add one or more indents to your copy. Also, have the option to undo the indent.
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.
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
1.1.4 - Building Buttons
Note: The Button editor for CKEditor 5 in Drupal 10 is not yet complete. We have documented
an alternative process.
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.
You can also edit a button you’ve created previously by clicking on the link in the text editor.
There are three tabs for creating your button: an info tab, a target tab, and an icon tab.
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 Lily, all button styles other than link default to purple.
In Rose, all options except “default” will output a blue button. “Default” outputs a white button.
In Carnation, the button options all output different colors.
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.
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://.
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…
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.
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.
1.1.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.
Tables in CKEditor 4
Adding a New Table
To add a table, click on the table icon. A popup will appear with your initial setup options:
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.”
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.
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.
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
<h2>Registration and Pricing</h2><tablealign="left"border="1"cellpadding="5"cellspacing="1"style="width: 500px;"><caption>*A $25 deposit is due at the time of registration.</caption><thead><tr><thscope="col">Pricing Period</th><thscope="col">Dates</th><thscope="col">Member Pricing</th><thscope="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
<style>//Toachievethefulleffectofthistable,insertthisstyletagabovethetableorinsertitintotheCSSEditormodule./* 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-answertr,.field-answertd,.paragraph--type--simple-contenttr,.paragraph--type--simple-contenttd{display:block!important;border:none;}.field-answertd,.paragraph--type--simple-contenttd{padding:.75rem.31rem;text-align:left;vertical-align:middle;}.field-answertr,.paragraph--type--simple-contenttr{padding:.625rem0;}.field-answerthead,.paragraph--type--simple-contentthead{display:none;}@media(min-width:992px){.field-answertr,.paragraph--type--simple-contenttr{display:table-row!important;}.field-answertd,.paragraph--type--simple-contenttd{display:table-cell!important;}.field-answerthead,.paragraph--type--simple-contentthead{display:table-header-group;}}</style><divclass="table-responsive"><tablealign="left"cellpadding="10"cellspacing="10"class="w-100 table table-striped"><thead><tr><thscope="col"><h5>Center</h5></th><thscope="col"><h5>Address</h5></th><thscope="col"><h5>Contact</h5></th><thscope="col"><h5>Schedule (PDF)</h5></th><thscope="col"> </th></tr></thead><tbody><tr><td><h5>Bellevue</h5></td><td>8101 TN-100<br/> Nashville, TN 37221</td><td><ahref="tel:615-646-9622">615-646-9622</a></td><td><p><ahref="/sites/default/files/2020-01/dycmp-20-dycmp-pdf-bellevue-menu.pdf"><iclass="far fa-file-pdf"> </i>Print Info</a></p></td><td><strong><aclass="btn btn-outline-primary"href="https://operations.daxko.com/Online/4002/ProgramsV2/Search.mvc?program_id=TMP8151&location_ids=B58&category_ids=TAG12062">Register ></a></strong></td></tr><tr><td><h5>Brentwood</h5></td><td>8207 Concord Rd.<br/> Brentwood, TN 37027</td><td><ahref="tel:615-373-9622">615-373-9622</a></td><td><ahref="/sites/default/files/2020-01/dycmp-20-dycmp-pdf-brentwood-menu.pdf"><iclass="far fa-file-pdf"> </i>Print Info</a></td><td><strong><aclass="btn btn-outline-primary"href="https://operations.daxko.com/Online/4002/ProgramsV2/Search.mvc?program_id=TMP8151&location_ids=B45&category_ids=TAG12062">Register ></a></strong></td></tr><tr><td><h5>Clarksville</h5></td><td>260 Hillcrest Dr.<br/> Clarksville, TN 37043</td><td><ahref="tel:931-647-2376">931-647-2376</a></td><td><ahref="/sites/default/files/2020-01/dycmp-20-dycmp-pdf-clarksville-menu.pdf"><iclass="far fa-file-pdf"> </i>Print Info</a></td><td><strong><aclass="btn btn-outline-primary"href="https://operations.daxko.com/Online/4002/ProgramsV2/Search.mvc?program_id=TMP8151&location_ids=B54&category_ids=TAG12062">Register ></a></strong></td></tr><tr><td><h5>Donelson</h5></td><td>3001 Lebanon Pike<br/> Nashville, TN 37214</td><td><ahref="tel:615-889-2632">615-889-2632</a></td><td><ahref="/sites/default/files/2020-01/dycmp-20-dycmp-pdf-donelson-menu.pdf"><iclass="far fa-file-pdf"> </i>Print Info</a></td><td><strong><aclass="btn btn-outline-primary"href="https://operations.daxko.com/Online/4002/ProgramsV2/Search.mvc?program_id=TMP8151&location_ids=B41&category_ids=TAG12062">Register ></a></strong></td></tr><tr><td><h5><a>Franklin</a></h5></td><td>501 S Royal Oaks Blvd.<br/> Franklin, TN 37064</td><td><ahref="tel:615-591-0322">615-591-0322</a></td><td><ahref="/sites/default/files/2020-01/dycmp-20-dycmp-pdf-franklin-menu.pdf"><iclass="far fa-file-pdf"> </i>Print Info</a></td><td><strong><aclass="btn btn-outline-primary"href="https://operations.daxko.com/Online/4002/ProgramsV2/Search.mvc?program_id=TMP8151&location_ids=B53&category_ids=TAG12062">Register ></a></strong></td></tr></tbody></table>
1.1.6 - CKEditor 4: Adding and Embedding Videos
This document applies to the legacy WYSIWYG editor, CKEditor 4. See
Adding Media for updated instructions.
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.
1.1.7 - CKEditor 4: Adding Images
This document applies to the legacy WYSIWYG editor, CKEditor 4. See
Adding Media for updated instructions.
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.
This document applies to the legacy WYSIWYG editor, CKEditor 4. See
Adding Media for updated instructions.
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.
1.2 - 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.
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.
Standalone Content Types
These content types are built for Layout Builder or are Layout Builder-compatible when the supporting module is enabled:
The Article content type combines all news-related content into a single content type.
This gives content editors the ability to vary the layout and views display depending on the type of article created (news item, blog post, or press release). This way, if an association wants to display news items on a news page, and blog posts on a blog page, they can differentiate based on where they would like the article to display on the site.
Article also allows content editors to include Layout Builder components within the page.
Go to Admin > Content > Add Content > Article (Layout Builder)
Fill in the content fields:
Title (required)
Subtitle
Type: Select “Blog”, “News”, or “Press Release”. Each type has the same fields, but allows admins to group articles for display on different pages (i.e. Blog types will display on a Blog page, Press Releases on a Press Release page, etc.)
Header image: This image is displayed on the Article page and in listing views.
Tags: References terms in the Tags vocabulary. See
Taxonomy for more information on tags.
Locations: If the Article relates to a
Branch then select it here so that the Article shows in listings on the Branch page.
Published Date (required): Defaults to today. This is the date that will be displayed on the Article page, used for sorting, and in listings.
Customizing Articles
Once you create an Article you can customize the layout with
Layout Builder. These components are built specifically to work with the Article content type:
Go to Admin > Content > Add Content > Event (Layout Builder)
Fill in the content fields:
Title (required)
Subtitle
Location info: Select the event location either by choosing from your list of locations or adding the address manually. You must either fill out the Event location OR Address fields.
Event Location: A list of Branch, Camp, and Facilities. Select any number of these.
Address: If your event does not happen at an existing location, you can add the address directly. Any content in this field will cause the Event Location to be overridden. To clear out the field, reset Country to “- None -”.
Directions: By default, a link with directions is auto-generated using the address field of either the Event Location or Address. Use this field to substitute your own directions link.
Event Date(s): Add a start and end date and time for the event. If the event does not have an end time, choose the start time for both the start and end.
As of March 2023, this field supports recurring events.
To create a recurring event:
set the Repeats option,
choose the Number of recurrences and when to End, then
expand the Advanced options to select specific days.
Once you save the event, Manage Instance will allow you to customize or remove individual instances.
To select multiple dates for your event that do not fit a regular rule, use Add another item below the date selector.
Header image: This image is displayed on the Article page and in listing views.
Tags: References terms in the Tags vocabulary. See
Taxonomy for more information on tags.
Locations: If the event relates to a
Branch then select it here so that the event shows in listings on the Branch page.
Customizing Events
Once you create an Event you can customize the layout with
Layout Builder. These components are built specifically to work with the Event content type:
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)
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.
1.2.4 - Alert
Displays timely information in a thin banner across your site, just below the header or above the footer.
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.
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.
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.
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.
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.
Related to a location
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”
1.2.5 - Blog Post
Timely content, articles and news pieces tagged with one or more physical locations.
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:
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.
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.
Story Card
Carnation
Lily
Photo Card
Carnation
Lily
News Card
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.
Carnation
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.
Description:
Using the text editor, you can enter anything from a brief summary to the entire body of your text.
Sidebar Area
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.
1.2.6 - 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.
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.
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 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.
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.
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:
Type in and select which amenities are available or not available at your branch using the autocomplete field.
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.
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.
Menu
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.
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:
Branch Hours: Combines the branch title, contact information, hours, and more into a dynamic page header.
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.
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:
Go to Admin > Extend > Uninstall module (/admin/modules/uninstall)
Disable WS Home Branch, then disable Open Y Home Branch
Alternatively, developers can run:
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:
Either clone the page or open it in a separate tab so that it’s easier to compare content.
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.
Your Branch will now display a set of default blocks: Hours (and header), Menu, Social Links, and Amenities.
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.
When you’re finished, Save the layout and Publish the Branch!
1.2.7 - 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.
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.
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.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:
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.
Camp Quick Links provide a single-level utility menu for additional camp information.
Camp Quick Links
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.
Using the on the first Camp Quick Links block, click Configure.
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.
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.
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.
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.
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 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!
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.
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.
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.
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
1.2.8 - 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.
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.
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.
Sidebar area
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).
Flexible content types that use regions and paragraphs to build content.
Fields in Landing Page
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
One Column (Full Width)
Two Columns
Two Columns (Fixed Sidebar)
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.
1.2.10 - Landing Page (Layout Builder)
A flexible content type that uses Sections and Blocks, managed with Layout Builder, to build content.
This page is the base for building pages with
Layout Builder.
Creating a Landing Page
Go to Admin > Content > Add Content > Landing Page (Layout Builder)
Fill in the content fields:
Title (required): The title of the page. It will not be added to the page and should be added manually with a block in the
Banner section.
Sections can be
edited, reordered, or removed to configure your page as you like. You can even remove the header and footer altogether if you need to create content for a digital display or other embedded system.
1.2.11 - Membership Content Type
Membership items are the building blocks of the
Membership Calculator and are only displayed within the Membership Calculator Paragraph.
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.
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.
Finding your registration link
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.
1.2.12 - News Post
Designed for timely content, articles and news pieces tagged with one or more physical locations.
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?
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.
Image: Displays above your description and inside a News Post listing. Not required. Uses the
media browser and image field.
Description:
Using the text editor, you can enter anything from a brief summary to the entire body of your text.
Sidebar Area
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.
1.2.13 - Program
A generic category page for program offerings.
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.
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
Standard Title with Purple
Small Banner
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.
Sidebar Area
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:
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
Carnation: Desktop 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.
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.
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.
Subcategories, likewise, appear as horizontal cards on Program pages.
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 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.
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
Sidebar Area
The Sidebar Area will change the layout of the page into two columns once you enter content.
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.
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.
Version 2 is planned for March 2024 and will support more components with more granular placement criteria.
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.
If Promotion Categoryis not set on a block, then the block will be overridden by any available (published) promo.
If Promotion Categoryis set on a block, then the block will be overridden by only matching promos that have the same category set.
1.3 - 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.
You can now embed that block on another page simply by typing its name and click on it from a list of results.
Site-wide Blocks
While you will not need to edit these that often, blocks can also be added and configured on a site-wide level using the Block Layout. These blocks contain certain features that are considered “Global”, such as your Menus.
Themes are created with a set of Regions where certain section of content, or Blocks, can be placed. On a day-to-day basis, these regions are static in YMCA Website Services.
To view your site’s regions, head over to Structure > Block Layout and click on Demonstrate block regions. It is not recommended to change the configuration in your Block Layout.
To change layouts in individual pieces of content, editors and website managers typically use Paragraphs or Layout Builder.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Your YMCA website has a wide array of blocks to choose from. In this section, you will find detailed descriptions of those blocks.
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.
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.
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.
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.
Blue
Green
Purple
Red
Canadian Colourways
YMCA of the USA has partnered with
YMCA Canada to create a brand-compliant and accessible colourway for use by Canadian YMCAs.
Each of these components is available on
Layout Builder pages via the Create custom block selector.
Component
Design
Accordion
Amenities
Article List
(Hero) Banner
Branch Hours
Branch Menu
Branch Preferred Branch
Branch Social Links
Breadcrumbs
Camp Menu
Camp Video Banner
Card
Card - Column Variations
Carousel
Donate
Event List
Forms
Global Footer
Global Header
Grid Content
Icon Grid
Icons and Logos
Locations
Menu and Search
Modal
Ping Pong
Promo Cards
Side Menu
Sponsors
Staff
Statistics
Table (Simple Content)
Tabs
Testimonials
Utility Menu
Pre-release
View the designs
Component
Mobile
Desktop
Accordion
Article (/News /Blog /Press Release)
Branch
Branch Amenities
Branch Hours
Branch Menu
Branch Social Links
Breadcrumbs
Cards
Carousels
Event
Grid Content
Hero Banner
Modals
Modals
Partners (/Sponsors)
Ping Pong
Promo Cards
Simple Menu
Staff
Statistics
Tables
Tabs
Testimonials
Webforms
1.4.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.
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.
Edit the Layout on a page
Expand the Y Styles section
Choose your configuration options.
Color scheme: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 curvature of container corners.
0px (square)
10px (small curve)
20px (larger curve)
Border style:The style of container borders.
No border
1px border
Drop shadow
Text/Button alignment:The vertical placement of elements in containers.
Left
Center
Button position:Where buttons sit in containers.
Inside container
Overlapping container
Button fill: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: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: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.
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.
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.
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.
1.4.3 - Accordion
Expandable pairs of question/answer or header/section fields.
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.
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.
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:
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:
Enable the YMCA Website Services Donation Embed Form (y_donate) module at Administration > Extend.
Select the Layout Tab of a Layout Builder-enabled page.
Select Add block on the page, then search or scroll to find Donation Form Embed Block.
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.
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.
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.
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
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
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.
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.
Main navigation
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.
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.
Tips
Refer to the Drupal User Guide for more information about
managing menus.
We recommend you limit the main menu to 6 items or fewer when using Layout Builder, as additional items can cause the menu to be wider than the supported area. Additional menu items can be added to the footer, if needed.
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.
Footer Section
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
Site Logo
See above. The “white logo” is recommended for the footer.
Footer Menu Left, Center, Right
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.
Go to Structure > Block layout > Custom block library
Find the Footer Copyright Block
Edit the block, then Save when finished.
Footer Menu
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.
Main Menu 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.
Click the in the Main Menu section, then choose Edit menu.
Go to Admin > Structure > Menus > Main navigation then Edit a link.
In the CTA block section, click Add new custom block.
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.
1.4.15 - 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.
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.
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.
The Location Finder block provides search, filters, a map, and a listing your YMCA locations.
Amenities filters
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
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
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.
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.
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.
Note:
The position on the page does not matter for the Modal block. It will always display as a popup in the center of the page and be completely hidden when dismissed.
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.
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 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.
After filling in the fields for an item, click Create custom block to save the item.
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:
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.
Note:
Related Events will always be sorted by the Event Date unless Manual filtering is selected, in which case events are displayed in the order in which they appear in the configuration.
It may display in the preview, but the current page will not display in the list of Related Events once published.
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.
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").
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.
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.
Embed simple text, images, blocks and interactive components with blocks, YMCA Website Services’s layout-building component.
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.
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.
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.
1.5.1 - 1 Column
Embeds a single column of content into an container, with an option to embed reusable content.
Examples
Rose - Without Block
Rose - With Block
Carnation - With Custom Block
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.
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.
There is an optional checkbox to display a horizontal rule above the two columns.
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).
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).
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).
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.
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.
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.
Exclude by location - Remove specific locations from the results.
Limit by category - Only show specific categories in the results.
Exclude by category - Remove specific categories 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 on /admin/openy/settings/activity-finder.
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.
1.5.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.
Add large, full width images to the top of your page, along with a title, optional description and optional link.
How to Use a Banner
In the Header Area of your content, select “Add Banner” from the 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. 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:
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.
To add additional links to your menu, click on the 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.
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.
When you add your block, you will see a blank, unformatted text field. Type your HTML text into this field.
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.
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.
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.
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.
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.
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.
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.
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.
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.
To delete a photo from the gallery, click the delete button below the image.
Description - A standard text editor field. Because of how each grid content item styles, it’s recommended that the text in this field be shorter than 200 characters.
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.
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
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.
Add an anchoring element to the bottom of a page, similar to a small banner. Best for promotional offers.
Example
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.
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 aith 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.
Save the page.
What fields are where
Data from Session, Class, 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:
Fields used in the popup view:
1.5.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
Lily
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.
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.
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.
A wide, short image with fields for a title, background color, description and image.
Examples
Carnation
Desktop
Mobile
Lily
Desktop
Mobile
Rose
Desktop
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 Lily and Rose, this background color displays behind your title and description.
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.
Note -> This does not work in Rose.
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.
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.
1.5.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:
Add a wide feature with an image, text, and a call to action.
Example
Carnation
Lily
Rose
Areas it should be used
Content area
How to use Teaser
Insert the paragraph from the dropdown into the Content Area.
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.
1.5.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.
Once you’ve selected Webform from the paragraphs dropdown, select the name of the webform you want to embed onto your page.
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.
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.
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.
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.
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.
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.
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.
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
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
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.
1.8 - 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.
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.
1.9.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.
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.
1.9.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.
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.
1.9.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
Enable Daxko Barcode Virtual YMCA integration
OPTIONAL (but highly recommended): configure reCaptcha settings at /admin/config/people/captcha/recaptcha.
Add your validation secret and form url and check help messages at /admin/openy/virtual-ymca/gc-auth-settings/provider/daxkobarcode.
Save your settings.
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.
Once the module is enabled, members will be presented with the appropriately titled field to log in to Virtual Y.
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.
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.
1.9.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:
Log into the ReClique Core portal using a user with YMCA super administrator role.
Click “Profile” in the top-right corner of the CORE portal.
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.
Click “Users” from the navigation menu (Users > Add New User)
Select the “+ Add User / Staff” button.
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.
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.
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:
Find the ReClique Provider option and click the Edit Action
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.
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.
Add ReClique CORE API settings
Here, you’ll add the values needed to connect to the ReClique Core API.
Field
Value
Verification URL
The 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 login
The login for the dedicated user created with ‘Use Core API’ access in the ReClique Core portal.
Authentication password
The password for the dedicated user created with ‘Use Core API’ access in the ReClique Core portal.
ID field text
The text to be displayed on the Virtual Y login form. Default value is “Enter your Email:”
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.
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.
After configuring the ReClique provider, click “Save”.
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).
1.9.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 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.
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
.
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.
1.9.4 - Go-live Checklist
Here are some things you should check before you go live with your Virtual Y site:
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.
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.
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?
Here are the Agency Partner/Internal Developer Steps:
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.
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?
Virtual Y supports the most recent versions of all modern web browsers such as
Edge,
Firefox,
Chrome,
Safari, and
Opera
Internet Explorer 11 and earlier are not supported due to the inability of that browser to play videos from services such as
https://youtube.com. Here is
YouTube’s official statement on not supporting Internet Explorer.
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.
I’m a live-streaming novice. How do I learn about it?
We’ve got your back. It’s technically possible to do a reasonably good stream with just a smartphone camera. Some associations have opted to invest in more professional technology.
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
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
Go to Admin > Extend (/admin/modules) and enable the Virtual Y 1on1 Meeting (openy_gc_personal_training) module.
Go to Admin > Virtual Y > 1on1 Meeting > Settings (/admin/virtual-y/personal_training/settings) and put signals.cibox.tools:8091 as the Signaling PRL.
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.
Also at Admin > People (/admin/people), add the Virtual trainer role to at least one user.
If you are starting a new site, log in as a Virtual Y member at least once.
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.
The community-maintained server, signals.cibox.tools, will work for most sites at small to medium levels of 1-on-1 traffic. If you are planning to scale up this service you may need to maintain a separate
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.
1.9.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…
Log into site as Site Owner
Manage > Content (click directly on Content, not one of its sub-menus)
In the grid, find “Virtual YMCA Login” and click the Edit button for that row.
Expand the “Header Area”
Click the “Edit” button next in the Banner row.
Expand the “Image” section, and where the current image is and click the Remove button underneath the image (not Edit).
Re-expand the “Image” section, and click the “Select Images” button.
If the desired image is not already in the system, click the Upload images link to add that picture.
If the image is already in the system, select that image and click “Select media”.
Scroll down to the bottom of the page and click Save.
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”.
1.9.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.
1.9.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.
Initial configuration
Go to Admin > Extend (/admin/modules) and enable the Virtual Y Livechat (openy_gc_livechat) module.
Go to Admin > Virtual Y > Virtual YMCA Settings > Livechat Settings (/admin/openy/virtual-ymca/gc-livechat-settings). Review the settings, and modify if necessary.
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
Visit any Live Stream event. At the time that the event starts, a Live Chat button will appear below the video.
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.
All participants can enter the chat, set their name, and chat throughout the entire Live Stream event.
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.
Users will see a message saying “Instructor disabled chat for users”
Chat can be restarted using the Restart Livechat button on the event page, next to the chat icon.
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.
1.9.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
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
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:
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.
1.9.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.
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
Editing the block
On in the Block editor you will see a Content field with links to your social media sites.
Adding a link
Add a new item to the bulleted list.
Select the text.
Click the link icon.
Editing links
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
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.
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
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.
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.
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.
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”.
To share multiple items, visit the Content list (/admin/content) then:
Check the Update this item checkbox.
In the Action dropdown, select Share to Virtual Y.
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.
1.9.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 7.4+ ( PHP 8.1+ is recommended)
Composer
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.
1.9.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
On your Drupal toolbar, hover over Virtual Y, and click Virtual YMCA Settings.
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.
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.
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.
Continue adding all accepted membership types by clicking the Add one more button until all accepted membership types are listed.
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.
Click People in the Drupal toolbar
Select the Roles tab at the top of the page
Click the Add Role blue button
Enter in your new role name in the 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.
1.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.
Click the blue button that says “Add New Content.”
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
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).
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.
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.
Dropdowns/Radio Buttons
Select one of the options provided. Occasionally, you’ll have to click a button to apply or submit your selection.
Multiselect Fields
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.
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.
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.’
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.
1.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.
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
1.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.
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:
Membership Type
Primary Location
Summary
Membership Type
This step lists the Title, Image, and Description of each published Member node.
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.
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.
Placing the Calculator on a page
Once configured, the Membership Calculator can be placed on a page using:
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.
1.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.
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
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
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
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
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
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
1.13 - Schedules
The distribution provides two separate applications for managing schedules at your YMCA.
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.
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.
Once those settings are saved, you can visit an Activity Finder page with UTM codes attached, for example:
and see that the codes are maintained as the filters are changed.
1.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 focused more on recurring, often drop-in classes. You can see
an example of this on our sandbox site.
Our guides are always evolving. If you have a request for a guide, please
get in touch.
2.1 - 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
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.
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.
2.2 - 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.
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).
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.
Click + Add Custom Font and add each of the Cachet font files you downloaded above with the following settings:
Label
Font Family
Font Style
Font Weight
Font Classification
Font File
Cachet Extra Light
Cachet
Normal
300
Sans Serif
CachetW05-ExtraLight.woff
Cachet Book
Cachet
Normal
400
Sans Serif
CachetW05-Book.woff
Cachet Medium
Cachet
Normal
500
Sans Serif
CachetW05-Medium.woff
Cachet Bold
Cachet
Normal
700
Sans Serif
CachetW05-Bold.woff
After you’ve added each font, Enable them.
Your site should now use the Cachet font in headers and other areas. Usage is dependent on the YMCA Website Services theme you choose.
2.3 - 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.
AddToAny is the perfect drop-in replacement for AddThis.
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)
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.
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
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.
2.5 - 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.
If you are starting with an internal toolchain, composer require ycloudyusa/yusaopeny at the root of the project.
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:
To install only selected modules: Go to Admin > Extend (/admin/modules) and enable only the components that you choose to use.
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.
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:
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.
After enabling the new colorway, be sure to set the
default layout styles to use the Canadian colorway of your choice.
Enabling ws_colorway_canada will immediately change the site logo from the Y-USA logo to the Y Canada logo, so this should be done on a development environment first.
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
Log in to Google Analytics account that configured to track your YMCA Website Services site.
Click Admin button in bottom right corner of main screen
Click View Settings
Scroll to “Site Search Settings” section and enable “Site Search Tracking” switch
Fill query parameter field with q, query values and click Save
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).
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().
Altering which properties will be output can be done via hook_datalayer_meta_alter().
functionmy_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().
To alter the data to be output use hook_datalayer_alter().
functionmy_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=.....
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
Enable the “YMCA Website Services Cross-domain Tracking (XDT)” module at Administration > Extend, or via drush:
drush en openy_xdt
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.
2.8 - 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
Press Release →
Article (there is currently no other 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).
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.
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.
2.9 - 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.
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.
3 - 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.
3.1 - Blocks
3.1.1 - Basic
A simple block with a description.
Fields
Name
Machine name
Required
Description
Content
field_block_content
Yes
WYSIWYG field without summary.
3.1.2 - Block Menu
Implements custom block type with a links.
Fields
Name
Machine name
Required
Description
Menu Links
field_menu_block_links
Yes
The Menu Links.
Color
field_menu_block_color
Yes
Select colors for menu block background gradient.
Text color
field_menu_block_text_color
Yes
Select text color of the menu block.
3.1.3 - Branch Amenities
A block with amenities list of the current branch.
Fields
Name
Machine name
Required
Description
Branch amenities
field_branch_am
Yes
Uses only Custom Formatter to display a list of amenities within Paragraph block.
Link
field_sb_link
No
Link to display at the bottom of the block.
Title
field_sb_title
No
Title to display at top of block.
Icon class
field_icon_class
No
Provide a “Font Awesome” icon name, e.g. flag, car, info. Overrides image icon.
3.1.4 - Custom Simple
A simple block with a body.
Fields
Name
Machine name
Required
Description
Icon
field_icon
No
Icon for block.
Icon class
field_icon_class
No
Provide a “Font Awesome” icon name, e.g. flag, car, info. Overrides image icon.
Body
field_sb_body
No
Enter body text.
Link
field_sb_link
No
Add link to the block.
Title
field_sb_title
No
Title to display at top of block.
3.1.5 - Flexible
A block with amenities list of the current branch.
Fields
Name
Machine name
Required
Description
Node reference
field_node_ref
Yes
Provide reference to Node.
3.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.
3.2.1 - Activity
Activity content type is used for adding Activities on the site.
Fields
Name
Machine name
Required
Description
Title
drupal’s default
Yes
Title of the activity item.
Program Subcategory
field_activity_category
Yes
A reference field for selecting the program subcategory.
Content Area
Field group
Description
field_activity_description
No
Textarea 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]
3.2.2 - Alert
Alert content type is used for adding alerts on the site.
Fields
Name
Machine name
Required
Description
Title
drupal’s default
Yes
Title of the activity item.
Background color
field_alert_color
Yes
Reference field for choosing the term from “Color” vocabulary.
Text color
field_alert_text_color
Yes
Reference field for choosing the term from “Color” vocabulary.
Icon color
field_alert_icon_color
No
Reference field for choosing the term from “Color” vocabulary. Description for field: “Leave empty to hide icon.”
Placement
field_alert_place
Yes
Select list field (singular) for choosing place:
Header
Footer
Description
field_alert_description
Yes
Textarea for the description/body with WYSIWYG, without summary.
Link
field_alert_link
No
Internal or external link.
Reference
field_alert_belongs
No
Entity 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].
3.2.3 - Article
Article content type is used for adding blog posts, news items, and press releases on the site.
Fields
Name
Machine name
Required
Description
Title
drupal’s default
Yes
Title of the article item.
Sub-title
default??
No
Sub-title of the article item
Locations
field_article_location
Yes
Reference field to branch and camp nodes. Multiple Values.
Category
field_article_category
No
Reference field for choosing the term from “Blog Category” vocabulary. Multiple Values.
Meta Tags
field_meta_tags
No
A meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Type
field_article_type
Yes
Select list field with multiple options for choosing article type:
News Item (default)
Blog Post
Press Release
Image
field_article_image
No
Image field for the Blog item. Entity reference to Media bundle.
Body
body
No
Textarea for the description/body with WYSIWYG, without summary.
Content
field_content
No
Filter list of available layout builder components
Related Content
field_article_related
No
Reference 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]
3.2.4 - Blog
Blog Post content type is used for adding blog posts on the site.
Fields
Name
Machine name
Required
Description
Title
drupal’s default
Yes
Title of the blog item.
Locations
field_blog_location
Yes
Reference field to branch and camp nodes. Multiple Values.
Category
field_blog_category
No
Reference field for choosing the term from “Blog Category” vocabulary. Multiple Values.
Meta Tags
field_meta_tags
No
A meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Styles
Field group
Style
field_blog_style
Yes
Select list field with multiple options for choosing style:
Story Card
Photo Card
News Card (default)
Color Card
Background color
field_blog_color
No
teaser background color (used when Color Card style is selected.)
Text color
field_blog_text_color
No
teaser text color (used when Color Card style is selected.)
Content Area
Field group
Image
field_blog_image
No
Image field for the Blog item. Entity reference to Media bundle.
Description
field_blog_description
No
Textarea for the description/body with WYSIWYG, without summary.
Content
field_content
No
A paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Sidebar Area
Field group
Related content
field_blog_related
No
Reference field for choosing related Blog nodes. Multiple Values.
Content
field_sidebar_content
No
A 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]
3.2.5 - Branch
Branch content type is used for adding Branches on the site.
Fields
Name
Machine name
Required
Description
Title
drupal’s default
Yes
Title of the branch item.
Neighborhood
field_location_area
No
A taxonomy reference field using the “Area” vocabulary.
Coming Soon
field_location_state
No
A checkbox field to determine branches in development.
Temporary URL
field_location_temp_url
No
A link field to provide a temporary page URL (a blog post, or something else) if the branch is coming soon.
Meta Tags
field_meta_tags
No
A meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Contact
Field group
Address
field_location_address
Yes
An address field that will provide the ability to add details about the locations. Details to be completed:
Address
City
State
Zip Code
Branch Coordinates
field_location_coordinates
No
Input for providing the latitude and longitude information.
Phone
field_location_phone
Yes
Input for providing the phone information.
Fax
field_location_fax
No
Input for providing the fax information.
Email
field_location_email
No
Input for providing the email information.
Directions
field_location_directions
No
A link field for adding the directions link.
Branch Hours
Field group
Branch Hours
field_branch_hours
Paragraph
Paragraph to indicate the branch hours.
Day of the week
field_branch_hours_day
No
Select list with following values:
sunday|Sunday
monday|Monday
tuesday|Tuesday
wednesday|Wednesday
thursday|Thursday
friday|Friday
saturday|Saturday
Start/End Time
field_branch_hours_time
No
Textfield with description “e.g. 9am - 5pm, closed.”
Header Area
Field group
Content
field_header_content
No
A paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Content Area
Field group
Content
field_content
No
A paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Bottom Area
Field group
Content
field_bottom_content
No
A 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]
3.2.6 - Camp
Camp content type is used for adding Camps on the site.
Fields
Name
Machine name
Required
Description
Title
drupal’s default
Yes
Title of the camp item.
Menu links
field_camp_menu_links
Yes
Link field with multiple values, that should have the Title and Link field. Based on it, we will complete the Camp Menu.
Meta Tags
field_meta_tags
No
A meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Contact
Field group
Address
field_location_address
Yes
An address field that will provide the ability to add details about the locations. Details to be completed:
Address
City
State
Zip Code
Camp Coordinates
field_location_coordinates
No
Input for providing the latitude and longitude information.
Phone
field_location_phone
Yes
Input for providing the phone information.
Fax
field_location_fax
No
Input for providing the fax information.
Email
field_location_email
No
Input for providing the email information.
Directions
field_location_directions
No
A link field for adding the directions link.
Header Area
Field group
Content
field_header_content
No
A paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Content Area
Field group
Content
field_content
No
A paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Bottom Area
Field group
Content
field_bottom_content
No
A 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]
3.2.7 - Class
Class content type is used for adding Classes on the site.
Fields
Name
Machine name
Required
Description
Title
drupal’s default
Yes
Title of the class item.
Activity
field_class_activity
No
A reference field for selecting the class.
Meta Tags
field_meta_tags
No
A meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Header Area
Field group
Content
field_header_content
No
A paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Content Area
Field group
Description
field_class_description
No
Textarea for the description/body with WYSIWYG, without summary.
Content
field_content
No
A paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Sidebar Area
Field group
Content
field_sidebar_content
No
A paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Bottom Area
Field group
Content
field_bottom_content
No
A 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
3.2.8 - Event
Event content type is used for adding events on the site.
Fields
Label
Machine Name
Required
Description
Field Settings
Notes
Title
drupal’s default
Yes
Title of the event item.
Sub-title
default??
No
Sub-title of the event item.
plain text
Locations
field_event_location
Yes
Reference field to branch and camp nodes. Multiple Values.
Address for event; can be either a branch or non-branch location.
Category
field_event_category
No
Reference field for choosing the term from “Event Category” vocabulary. Multiple Values.
Meta Tags
field_meta_tags
No
A meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Image
field_event_image
No
Image field for the Event item. Entity reference to Media bundle.
media
Date
field_event_date
Yes
This will use Drupal date/time fields.
Add to Calendar
field_add_to_calendar_link
No
link
Body
body
No
Textarea for the description/body with WYSIWYG, without summary.
Content
field_content
No
Filter list of available layout builder components
Related Content
field_event_related
No
Reference field for choosing related Event nodes. Multiple Values.
URL pattern
Content type is using following pattern:
/event/[node:title]
3.2.9 - Facility
Facility content type is used for adding facilities on the site.
Fields
Name
Machine name
Required
Description
Title
drupal’s default
Yes
Title of the facility item.
Neighborhood
field_location_area
No
A taxonomy reference field using the Area Vocabulary(area).
Type
field_facility_type
No
A taxonomy reference field using the “Facility Type” vocabulary.
Facility Branch
field_facility_loc
No
A entity reference field to reference the related Branch node.
Meta Tags
field_meta_tags
No
A meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Contact
Field group
Address
field_location_address
No
An address field that will provide the ability to add details about the locations. Details to be completed:
Address
City
State
Zip Code
Facility Coordinates
field_location_coordinates
No
Input for providing the latitude and longitude information.
Phone
field_location_phone
Yes
Input for providing the phone information.
Fax
field_location_fax
No
Input for providing the fax information.
Email
field_location_email
No
Input for providing the email information.
Directions
field_location_directions
No
A link field for adding the directions link.
Facility Hours
field_branch_hours
No
The facility hours
Facility Holiday Hours
field_branch_holiday_hours
No
Any special holiday hours for the facility.
Content Area
Field group
Content
field_content
No
A paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Sidebar Area
Field group
Content
field_sidebar_content
No
A 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]
3.2.10 - Landing Page
Landing Page content type is used for adding landing pages on the site.
Fields
Name
Machine name
Required
Description
Title
drupal’s default
Yes
Title of the landing page item.
Layout
field_lp_layout
Yes
Select 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 Tags
field_meta_tags
No
A meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Header Area
Field group
Content
field_header_content
No
A paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Content Area
Field group
Content
field_content
No
A paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Sidebar Area
Field group
Content
field_sidebar_content
No
A paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Bottom Area
Field group
Content
field_bottom_content
No
A 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]
3.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
Label
Machine Name
Required
Description
Field Settings
Notes
Title
title
yes
Title of Landing Page
Metadata
Field group
Meta description
field_meta_description
no
Short text used for metatags and cards
Text (plain, long)
Meta image
field_meta_image
no
Media image reference for use in metatags and cards
Entity reference (Media image)
Meta tags
field_meta_tags
no
Provided by Metatag module
URL pattern
Content type is using following pattern: [node:title]
3.2.12 - Membership
Membership content type is used for adding membership on the site.
Fields
Name
Machine name
Required
Description
Title
drupal’s default
Yes
Title of the membership item.
Description
field_mbrshp_description
Yes
Textarea for the description/body with WYSIWYG, without summary.
Image
field_mbrshp_image
Yes
Media field to upload the image.
Membership info
field_mbrshp_info
Paragraph
Paragraph to indicate the location where the membership is available and the URL.
Location
field_mbrshp_location
No
Select list with locations (branches). Single value.
Link
field_mbrshp_link
No
Link field to provide the membership redirect URL.
Join Fee
field_mbrshp_join_fee
No
Dollar value for how much someone has to pay to join.
Monthly Rate
field_mbrshp_monthly_rate
No
Dollar value for the monthly fee of the membership.
URL pattern
Content type is using following pattern:
/membership/[node:title]
3.2.13 - News
News Post content type is used for adding news posts on the site.
Fields
Name
Machine name
Required
Description
Title
drupal’s default
Yes
Title of the news item.
Locations
field_news_location
Yes
Reference field to branch and camp nodes. Multiple Values.
Category
field_news_category
No
Reference field for choosing the term from “News Category” vocabulary. Multiple Values.
Meta Tags
field_meta_tags
No
A meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Content Area
Field group
Image
field_news_image
No
Image field for the News item. Entity reference to Media bundle.
Description
field_news_description
No
Textarea for the description/body with WYSIWYG, without summary.
Content
field_content
No
A paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Sidebar Area
Field group
Related content
field_news_related
No
Reference field for choosing related News nodes. Multiple Values.
Content
field_sidebar_content
No
A 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]
3.2.14 - Program
Program content type is used for adding Programs on the site.
Fields
Name
Machine name
Required
Description
Title
drupal’s default
Yes
Title of the program item.
Meta Tags
field_meta_tags
No
A meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Header Area
Field group
Icon
field_program_icon
No
A image field, supporting .svg for uploading the program icon.
Image
field_program_image
No
A image field, for uploading the program image.
Color
field_program_color
No
Reference field for choosing the term from “Color” vocabulary.
Content
field_header_content
No
A 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 Area
Field group
Description
field_program_description
No
Textarea for the description/body with WYSIWYG, without summary.
Content
field_content
No
A paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Sidebar Area
Field group
Content
field_sidebar_content
No
A 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]
3.2.15 - Program Subcategory
Program Subcategory content type is used for adding program subcategories on the site.
Fields
Name
Machine name
Required
Description
Title
drupal’s default
Yes
Title of the program subcategory item.
Program
field_category_program
Yes
A reference field for selecting the program.
Meta Tags
field_meta_tags
No
A meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Header Area
Field group
Image
field_category_image
No
A image field, for uploading the category image.
Color
field_category_color
No
Reference field for choosing the term from “Color” vocabulary.
Content
field_header_content
No
A paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Content Area
Field group
Description
field_category_description
No
Textarea for the description/body with WYSIWYG, without summary.
Content
field_content
No
A paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Sidebar Area
Field group
Content
field_sidebar_content
No
A paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Bottom Area
Field group
Content
field_bottom_content
No
A 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]
3.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
Name
Machine name
Field type
Required?
Title
title
yes
Subtitle
field_subtitle
Text (plain)
CTA / link
field_link
Link
no
Description
field_promo_description
Text (formatted, long)
no
Image
field_promo_media
Entity reference
yes
Pages
field_promo_visibility_pages
Text (plain, long)
Promotion Category
field_promo_category
Entity reference
no
Promotion Priority
field_promo_priority
List (text)
yes
Promotion visibility state
field_promo_visibility_state
List (text)
yes
URL pattern
No URL pattern. This content should not be visible on its own.
3.2.17 - Session
Session content type is used for adding Sessions on the site.
Fields
Name
Machine name
Required
Description
Title
drupal’s default
Yes
Title of the session item.
Class
field_session_class
Yes
A reference field for selecting the program subcategory.
Session Info
Field group
-
-
Description
field_session_description
No
Textarea for the description/body with WYSIWYG, without summary.
Gender
field_session_gender
No
Select List with Gender options: Coed, Male, Female.
Online registration
field_session_online
No
Boolean field that determines if the Register Now button/link gets displayed.
Ticket required
field_session_ticket
No
Checkbox field to indicate that there is a ticket required.
Min Age
field_session_min_age
No
Input field for adding the min age.
Max Age
field_session_max_age
No
Input field for adding the max age.
Registration link
field_session_reg_link
No
A link field with the Registration link Value.
Membership
Field group
-
-
In membership
field_session_in_mbrsh
No
Boolean field that helps determine if the session is included into membership package.
Member price
field_session_mbr_price
No
Input with with the price information for members.
Non Member Price
field_session_nmbr_price
No
Input with with the price information for members.
Location
Field group
-
-
Location
field_session_location
Yes
A reference field for selecting the branch or camp.
Physical Location
field_session_plocation
No
A reference field for selecting the facility.
Time
Field group
-
-
Exclusions
field_session_exclusions
No
A 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).
Time
field_session_time
Paragraph
Session schedule.
Date & Time
field_session_time_date
No
This will use Drupal date/time fields & should be a single date field with ’end date’ and ’end time’ option enabled.
Days
field_session_time_days
No
Checkboxes 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.
3.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
Name
Machine name
Required
Description
Title
drupal’s default
Yes
Title of the program item.
ID
field_id
Yes
Post Id in social network. This is system field. Is used by post fetcher.
Image
field_image
No
Image field for saving post image. Can save jpg and png formats.
Link
field_link
no
Contains link to original post in social network.
Platform
field_platform
no
The name of platform where post was imported from.
Post
field_post
yes
Text of post.
Posted
field_posted
no
Date when post was posted in social network
URL pattern
Content type is using following pattern:
/social_post/[node:title]
3.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.
Listed view modes are available for embedding in WYSIWYG editor.
View Modes
Name
Machine name
Description
Full
embedded_full
This view mode displays media asset with full width.
Half
embedded_half
This view mode displays media asset with half width and uses alignment.
Link
embedded_link
This 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.
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.
3.5.1 - 1 Column
This is a paragraph type that will be used for implements a paragraph with 1 column.
Fields
Name
Machine name
Required
Description
Notes
Line Above
field_prfg_display_line_above
No
Display a line above the column.
Column
field_prgf_1c_column
No
Enter column body.
Paragraph Title
field_prgf_1c_title
No
Enter title to display at the top of 1 column paragraph.
Paragraph Description
field_prgf_1c_description
No
Enter description to display under the 1 column paragraph title.
3.5.2 - 2 Columns
This is a paragraph type that will be used for implements a paragraph with 2 column.
Fields
Name
Machine name
Required
Description
Notes
Line Above
field_prfg_display_line_above
No
Display a line above the column.
Left Column
field_prgf_2c_left
No
Enter left column body.
Right Column
field_prgf_2c_right
No
Enter right column body.
3.5.3 - 3 Columns
This is a paragraph type that will be used for implements a paragraph with 3 column.
Fields
Name
Machine name
Required
Description
Notes
Line Above
field_prfg_display_line_above
No
Display a line above the column.
Left Column
field_prgf_3c_left
No
Enter left column body.
Center Column
field_prgf_3c_center
No
Enter center column body.
Right Column
field_prgf_3c_right
No
Enter right column body.
Paragraph Title
field_prgf_title
No
Enter title to display at the top of 3 columns paragraph.
3.5.4 - 4 Columns
This is a paragraph type that will be used for implements a paragraph with 4 column.
Fields
Name
Machine name
Required
Description
Notes
Line Above
field_prfg_display_line_above
No
Display a line above the column.
First Column
field_prgf_4c_1st
No
Enter first column body.
Second Column
field_prgf_4c_2nd
No
Enter second column body.
Third Column
field_prgf_4c_3rd
No
Enter third column body.
Fourth Column
field_prgf_4c_4th
No
Enter forth column body.
Button
field_prgf_4c_button
No
Button with link to display under 4 column paragraph
Paragraph Title
field_prgf_title
No
Enter title to display at the top of 4 columns paragraph.
Paragraph Description
field_prgf_description
No
Enter description to display under the 4 columns paragraph title.
3.5.5 - All Amenities
Provide a paragraph with a table view shows list of Branches.
Fields
Name
Machine name
Required
Description
All amenities
field_field_prgf_amnts_view
No
Predefined reference to a view to display all amenities.
Title
field_prgf_title
No
Enter title which is going to be displayed on top of the paragraph.
3.5.6 - Banner
This is a paragraph type that will be used for the banner content.
Fields
Name
Machine name
Required
Description
Notes
Headline
field_prgf_headline
Yes
Headline of the banner.
Plain text, 255 characters
Color
field_prgf_color
Yes
Reference field for choosing the term from “Color” vocabulary.
Image
field_prgf_image
No
Entityreference to media image. Single value.
Description
field_prgf_description
No
WYSIWYG field without summary.
Link
field_prgf_link
No
Link field that should store internal and external links.
3.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
Name
Machine name
Required
Description
Block
field_prgf_block
Yes
Block reference to the view/block. Should have default value and should be hidden in form display.
3.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
Name
Machine name
Required
Description
Block
field_prgf_block
Yes
Block reference to the view/block. Should have default value and should be hidden in form display.
3.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
Name
Machine name
Required
Description
Block
field_prgf_block
Yes
Block reference to the view/block. Should have default value and should be hidden in form display.
3.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
Name
Machine name
Required
Description
Block
field_prgf_block
Yes
Block reference to the view/block. Should have default value and should be hidden in form display.
3.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
Name
Machine name
Required
Description
Block
field_prgf_block
Yes
Block reference to the view/block. Should have default value and should be hidden in form display.
3.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
Name
Machine name
Required
Description
Block
field_prgf_block
Yes
Block 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)
3.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
Name
Machine name
Required
Description
Block
field_prgf_block
Yes
Block 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
3.5.14 - Code
Provide paragraph containing a Code block. Can be used to embed Youtube video for instance.
Fields
Name
Machine name
Required
Description
Code
field_prgf_code_block
Yes
Block reference to Code block. Create a new one or pick up an existed Code block.
3.5.15 - Featured Blog Posts
This is a paragraph type that will be used for the featured stories.
Fields
Name
Machine name
Required
Description
Headline
field_prgf_headline
No
Headline of the banner.
Blog Posts
field_fblog_posts
Yes
Multiple values. Reference field to Blog posts.
3.5.16 - Featured Content
This is a paragraph type that will be used for the featured content.
Fields
Name
Machine name
Required
Description
Headline
field_prgf_headline
No
Headline of the featured content.
Description
field_prgf_description
No
Textarea for the description/body with WYSIWYG, without summary.
Link
field_prgf_link
No
Link field that supports internal and external URLs.
Style
field_prgf_grid_style
Yes
Select list with following values: 2:2 items per row, 3:3 items per row, 4:4 items per row
Column description
field_prgf_fc_clm_description
No
Multiple values. Textarea for the column with WYSIWYG, without summary.
3.5.17 - Featured Highlights
Provides a paragraph containing blocks of specific types positioned as 2, 3 or 4 blocks per row.
Fields
Name
Machine name
Required
Description
Title
field_prgf_title
No
Paragraph title.
Style
field_prgf_grid_style
Yes
Select list with following values: 2:2 items per row, 3:3 items per row, 4:4 items per row.
Featured Highlights block
field_prgf_block_ref_unlim
Yes
Create a new one or pick up an existing block of given types: Featured Highlight Block, Basic Block, Simple Block, Date block.
3.5.18 - Featured News Posts
This is a paragraph type that will be used for the featured news.
Fields
Name
Machine name
Required
Description
Headline
field_prgf_headline
No
Headline of the banner.
News Posts
field_fnews_posts
Yes
Multiple values. Reference field to News posts.
3.5.19 - Gallery
This is a paragraph type that will be used for the gallery content.
Fields
Name
Machine name
Required
Description
Headline
field_prgf_headline
Yes
Headline of the gallery.
Description
field_prgf_description
No
WYSIWYG field without summary.
Link
field_prgf_link
No
Link field that should store internal and external links.
Images
field_prgf_images
No
Entityreference to media image. Multiple values.
3.5.20 - Grid columns
This is a paragraph type that will be used for field_grid_columns the in Grid Content paragraph.
Fields
Name
Machine name
Required
Description
Description
field_prgf_grid_clm_description
No
Textarea for the description/body with WYSIWYG, without summary.
Headline
field_prgf_clm_headline
No
Headline of the grid content.
Icon
field_prgf_clm_icon
No
Entityreference to media asset. Should allow to upload svgs.
Icon class
field_prgf_clm_class
No
Input 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.”
Link
field_prgf_clm_link
No
Link field that supports internal and external URLs.
3.5.21 - Grid Content
This is a paragraph type that will be used for the grid content stories.
Fields
Name
Machine name
Required
Description
Style
field_prgf_grid_style
Yes
Select list with following values: 2:2 items per row, 3:3 items per row, 4:4 items per row
Content
field_grid_columns
Paragraph
Grid columns
Description
field_prgf_grid_clm_description
No
Textarea for the description/body with WYSIWYG, without summary.
Headline
field_prgf_clm_headline
No
Headline of the grid content.
Icon
field_prgf_clm_icon
No
Entityreference to media asset. Should allow to upload svgs.
Icon class
field_prgf_clm_class
No
Input 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.”
Link
field_prgf_clm_link
No
Link field that supports internal and external URLs.
3.5.22 - Group Schedules
This is dynamic paragraph that renders the group schedules from GroupEx Pro.
Fields
Name
Machine name
Required
Description
Block
field_prgf_block
Yes
Block reference to the view/block. Should have default value and is configurable in form display.
3.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
Name
Machine name
Required
Description
Block
field_prgf_block
Yes
Block reference to the view/block. Should have default value and should be hidden in form display.
3.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
Name
Machine name
Required
Description
Block
field_prgf_block
Yes
Block reference to the view/block. Should have default value and should be hidden in form display.
3.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
Name
Machine name
Required
Description
Block
field_prgf_block
Yes
Block reference to the view/block. Should have default value and should be hidden in form display.
3.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
Name
Machine name
Required
Description
Block
field_prgf_block
Yes
Block reference to the view/block. Should have default value and should be hidden in form display.
3.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
Name
Machine name
Required
Description
Block
field_prgf_block
Yes
Block reference to the view/block. Should have default value and should be hidden in form display.
3.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
Name
Machine name
Required
Description
Block
field_prgf_block
Yes
Block reference to the view/block. Should have default value and should be hidden in form display.
3.5.29 - Limited Time Offer
This Paragraph add limited time offer for Home Page based on Landing Page CT.
Fields
Name
Machine name
Required
Description
Subtitle
field_lto_subtitle
No
Enter subtitle for Limited time offer.
Link
field_lto_link
No
Add link for Latest time offer.
Title
field_lto_title
No
Enter title for the Limited Time Offer.
3.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
Name
Machine name
Required
Description
Location finder
field_prgf_location_finder
No
Block reference to the location_finder block. Should have default value and should be hidden in form display.
3.5.31 - Location finder filters
This is paragraph that renders the Location finder map with pins and filters.
Fields
Name
Machine name
Required
Description
Location finder
field_prgf_location_finder
No
Block reference to the location_finder block. Should have default value and should be hidden in form display.
Tags style
field_prgf_lf_tags_style
Yes
Tags style that will be used for map tags filter. Default - checkboxes. Second option is multiselect widget with checkboxes.
3.5.32 - Membership info
This is a paragraph type that will be used for field_mbrshp_info the in Membership CT.
Fields
Name
Machine name
Required
Description
Location
field_mbrshp_location
No
Select list with locations (branches). Single value.
Link
field_mbrshp_link
No
Link field to provide the membership redirect URL.
Join Fee
field_mbrshp_join_fee
No
Dollar value for how much someone has to pay to join.
Monthly Rate
field_mbrshp_monthly_rate
No
Dollar value for the monthly fee of the membership.
3.5.33 - Microsites menu
Provide paragraph containing a microsites menu block.
Fields
Name
Machine name
Required
Description
Menu Block
field_prgf_block_ref
Yes
Block reference to the view/block. Create a new one or pick up an existed menu block.
Hide Main Menu
field_prgf_ms_menu_hide_menu
No
Whether to hide or not the main website menu.
3.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
Name
Machine name
Required
Description
Block
field_prgf_block
Yes
Block reference to the view/block. Should have default value and should be hidden in form display.
3.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.
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
Name
Machine name
Required
Description
Program registration block
field_prgf_reg_block
No
Block reference to the programs_search_block block. Should have default value and should be hidden in form display.
3.5.36 - Promo Card
This is a Paragraph type that will be used for the Promo Cards.
Fields
Name
Machine name
Required
Description
Title
field_prgf_title
No
Title of the Promo Card.
Headline
field_prgf_headline
Yes
Headline of the Promo Card.
Description
field_prgf_description
No
WYSIWYG field without summary.
Link
field_prgf_link
No
Link field that should store internal and external links.
3.5.37 - Schedule search form
This is dynamic paragraph that renders the session instances filters for [Schedule search list](Schedule search list.md).
Fields
Name
Machine name
Required
Description
Block
field_prgf_block
Yes
Block reference to the view/block. Should have default value and should be hidden in form display.
3.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
Name
Machine name
Required
Description
Block
field_prgf_block
Yes
Block 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
3.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
Name
Machine name
Required
Description
Left Column
field_prgf_left_column_block
No
Block reference to: Basic Block, Code Block, Date block or Simple Block. Create a new one or pick up an existed block.
Right Column
field_prgf_right_column_block
No
Block reference to: Basic Block, Code Block, Date block or Simple Block. Create a new one or pick up an existed block.
3.5.40 - Session Time
This is a paragraph type that will be used for field_session_time the in Session CT.
Fields
Name
Machine name
Required
Description
Date & Time
field_session_time_date
No
This will use Drupal date/time fields & should be a single date field with ’end date’ and ’end time’ option enabled.
Days
field_session_time_days
No
Checkboxes with following values: Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday
3.5.41 - Simple Content
Simple Content is used for adding text to the pages.
Fields
Name
Machine name
Required
Description
Content
field_prgf_description
Yes
WYSIWYG field without summary.
3.5.42 - Small Banner
This is a paragraph type that will be used for the banner content.
Fields
Name
Machine name
Required
Description
Notes
Color
field_prgf_color
Yes
Reference field for choosing the term from “Color” vocabulary.
Headline
field_prgf_headline
Yes
Headline of the Small banner.
Plain text, 255 characters
Image
field_prgf_image
No
Entityreference to media image. Single value.
Description
field_prgf_description
No
WYSIWYG field without summary.
3.5.43 - Social Post Listing
This is dynamic paragraph that renders the latest social posts that were imported from social networks.
Fields
Name
Machine name
Required
Description
Title
field_prgrf_sl_title
No
Title for block with social posts.
Description
field_prgrf_sl_description
No
Description for block with social posts.
Social List
field_prgrf_sl_block
No
Reference to views block which select posts and show them as masorny grid.
3.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
Name
Machine name
Required
Description
Notes
3.5.45 - Story Card
This is a Paragraph type that will be used for the Story Cards.
Fields
Name
Machine name
Required
Description
Title
field_prgf_title
No
Title of the Story Card.
Headline
field_prgf_headline
Yes
Headline of the Story Card.
Link
field_prgf_link
No
Link field that should store internal and external links.
3.5.46 - Teaser
This is a paragraph type that will be used for the teaser content.
Fields
Name
Machine name
Required
Description
Title
field_prgf_title
No
Title of the Teaser.
Image
field_prgf_image
No
Entityreference to media image. Single value.
Description
field_prgf_description
No
WYSIWYG field without summary.
Link
field_prgf_link
No
Link field that should store internal and external links.
3.5.47 - Webform
This is a paragraph type that will be used for the embedding webforms.
Fields
Name
Machine name
Required
Description
Embedded Webform
field_prgf_webform
No
Embedded webform entityreference (select). Single value.
Default webform submission data (YAML)
field_prgf_webform_default_data
No
YAML code for passing in default values to webform.
Webform status
field_prgf_webform_status
No
Status of webform on render. Radio with 2 options, open or closed (Closed prevents further submissions).
3.6 - Taxonomy
3.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
3.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
3.6.3 - Blog Category
This is a vocabulary that will be used for adding blog categories on the site.
Machine_name: blog_category
3.6.4 - Color
This is a vocabulary that will be used for adding colors on the site.
Machine_name: color
Fields
Name
Machine name
Required
Description
Name
drupal’s default
Yes
Color name.
Color
field_color
Yes
Color selector.
3.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
3.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
3.6.7 - News Category
This is a vocabulary that will be used for adding news categories on the site.
Machine_name: news_category
4 - Development
Welcome to the development corner of the YMCA Website Services distribution.
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.
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.
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.
4.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
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”.
4.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.
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.
Module naming conventions - Depending on the context we should choose the name from this list:
${project_name|abbr}_${business_name|abbr} - when the code looks like legacy and has specifics that are not ready to be open-sourced
openy_${business_name|abbr} - when the code is ready to be ejected to OpenY package
${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:
<?phpfunctionfoo($bar,$baz){if($foo){// logic goes here
return$calculated_value;}else{returnnull;}}?>
It’s better to return early, keeping indentation and brainpower needed to follow the code low.
<?phpfunctionfoo($bar,$baz){if(!$foo){returnnull;}// 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.
...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.
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.
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);.
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.
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.
#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
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.
4.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.
"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.
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.
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.
Create Drupal tour module, based on steps for review and ship it with the module which provides a functionality.
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.
Drupal.org credits
If you would like to get drupal.org credits for your contribution:
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
Deprecation Notice
On February 28, 2023, Daxko is planning to sunset the GroupEx PRO Public API in favor of their Daxko Group API v1.
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.
Embed code for GroupEx Pro schedules can be found in your GroupEx Pro admin interface.
Look for the “New embed” toggle.
Expand the options and choose any filters or colors that you prefer.
Disable the “Fixed Header” option.
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:
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.
Responsive schedule link
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.
4.13 - Decoupled (external) projects
Inventory of external modules available via Composer
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
GitHub should be used when there is no strategy to make a component or project available for the wider Drupal community - that is, when it is tied to YMCA business and unlikely to be leveraged by somebody else.
Drupal.org should be used when the component could be useful to projects outside of YMCA Website Services.
Process
for creating a new decoupled component
Create a new GitHub/Drupal.org repository.
Work on getting an initial release with at least beta version stability.
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.
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.
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.
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.
4.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:
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.
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.
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.
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:
The release where the deprecated component has been uninstalled should be added to the
important versions document in the Wiki.
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.
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.
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.
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.
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.
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.
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.
4.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.
The YMCA Website Services team has pre-built environments and walkthroughs using either
Vagrant and VirtualBox or
Docker and Docksal. Choose the method that you’re most comfortable with and get started!
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.
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
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.
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:
Re-run the most recent related update hook.
Import the config with drush.
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.
y_lb_update_9001(); runs the individual function from the file.
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:
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.
4.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.
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
CKEditor
If any custom/contrib modules are used, CKE5 should likely be done AFTER your D10 upgrade
Contrib checks will NOT be found in the next step, be sure to check these manually
Dependency cleanup
Modules not installed, but in composer.json should be cleaned up to prevent unwanted dependency issues in trying to update.
Admin theme
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
fin composer show drupal/core | grep versions
fin composer require --dev drupal/core-dev:[copy version above] --update-with-all-dependencies
Search for hook_field_widget_form_alter, hook_field_widget_multivalue_form_alter, hook_field_widget_WIDGET_TYPE_form_alter and hook_field_widget_multivalue_WIDGET_TYPE_form_alter. These hooks have been deprecated in Drupal 9.2 and not available anymore in Drupal 10.
Streamline field widget hooks
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.
> [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.featuredshould 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
// This goes in mymodule.install as the next update hook.
// Increment the number accordingly.
functionmymodule_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',]);}
// This also goes in mymodule.install.
functionmymodule_update_dependencies(){$dependencies['y_lb'][9011]=['mymodule'=>9000,];}
Re-run drush updb.
If you run into other missing configs, add them to the list to be imported in update hook and re-run updb.
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.
4.19 - Drupal 9 core dependencies version flexibility
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.
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
https://www.youtube.com/watch?v=V3K4-RLjxQo - 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
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
to store your patched core into your own repository.
==========================
How to patch your Digitalocean OpenY install
In case if you have followed tutorial
https://www.youtube.com/watch?v=V3K4-RLjxQo 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
Log in as an admin user to your site admin UI by visiting /user/login URI page.
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
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.
After login to a console run the command below, respectively to the version of your Drupal core.
and hit Enter.
You should see OpenY was patched message.
4.21 - 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:
Log in as an admin (or a user with the administrator role).
Go to the YMCA Website Services package install page (Admin menu > YMCA Website Services > Extend > Install, or /admin/openy/extend/list)
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
Go to the Google Search settings form (Admin menu > YMCA Website Services > Settings > Google Search settings, or /admin/openy/settings/google-search).
Set the value of the Google Search ID field (see the following section for details) and submit the form.
Obtaining Search Engine ID
Go to
https://cse.google.com/, register if you haven’t yet, and log in if you aren’t logged in.
Specify the domain of your website (e.g. www.example.com).
Specify the name of the Search Engine (e.g. example.com).
Click “Create”.
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
Go to the Look and feel section of the Search Engine
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:
From the
CSE Control Panel, select the search engine you want to change.
Click Overview then Ads
Toggle the Show Ads option to off.
Layout Builder and Google Search
The Google Custom Search Engine can also be used with
Layout Builder:
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.
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.
Add a
Small Banner to the header with a title for the page, like “Search”.
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:
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.
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 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:
In the Control panel, go to Search features > Refinements
Click Add
Set the name of the refinement to Blog
Select Search only the sites with this label for How to search sites with this label?
Click Ok
Go to Setup
Find Sites to search, click Add
Add the example.org/blog/* in the text field
Select Blog in the Label dropdown
Select Include just this specific page or URL pattern I have entered
Click Save
The search results page now shows the Blog tab that only shows blog entries relevant to the search term.
4.23 - 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.
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.
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.
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.
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
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
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!
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.
4.24 - 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.
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
Upgrade 8.1.2 to 8.1.13.1
Upgrade 8.1.13.1 to 8.2.2.1
Upgrade 8.2.2.1 to 8.2.7.3
Upgrade 8.2.7.3 …
These supplemental documents elaborate on a few specific cases:
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:
Upgrade to the latest Drupal 9 core (using
version 10.2.14 of the distribution, released in June 2023).
Upgrade all contrib modules and libraries to their latest Drupal 9-compatible versions (with composer update).
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).
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.2 - Introduced before 10.1 and 10.2 Drupal core. This version ensures we support removed modules pre 10.1 for contrib modules
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.
4.26 - Install Solr site search
YMCA Website Services leverages
Apache Solr for a few features:
Go to admin/modules and enable the YMCA Website Services Search API module.
Approve the next step for enabling Database Search.
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.
TIP: Admins can enable and the Solr search and switch the index between servers.
Index content by clicking “Index now”.
Go to the homepage and search for any keyword.
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.
Layout Builder and Solr search
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.
Enable the YMCA Website Services Search API (openy_search_api) module if not already enabled.
Go to Admin > Configuration > Search and metadata > Search API, then Edit the Search content index. (/admin/config/search/search-api/index/search_content/edit)
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.
Save the form.
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.
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.
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 type
View mode
Article (LB)
Default
Branch
Full
Event (LB)
Default
Camp
Full
Camp Subpage
Full
Facility
Full
Landing Page (LB)
Default
Program
Full
Program Subcategory
Full
Save the page.
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
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.
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.
Add a
Small Banner to the header with a title for the page, like “Search”.
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.
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.
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()
4.27 - 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.
Complete YMCA Website Services profile preset and YMCA Website Services Rose 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.:
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:
Add all current maintainers.
Edit and add this module template:
<tableclass="views-view-grid"bgcolor="#d4efcc"><tr><td><h2>🇺🇦</h2></td><td>This module is maintained by Ukrainian developers. Please consider <ahref="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 <ahref="https://github.com/YCloudYUSA/y_lb">YMCA Layout Builder</a> package.
<!-- Leave this section as is --><ul><li>Read our <ahref="https://github.com/YCloudYUSA/yusaopeny#installation">instructions for getting started</a>.</li><li><ahref="https://ds-docs.y.org/docs/">Search our documentation</a> for assistance.</li><li><ahref="https://ds-docs.y.org/community/">Review our Community Resources</a> for more information.</li></ul><h3id="project-requirements">Requirements</h3>This project is meant to be used with the <ahref="https://www.drupal.org/project/openy">YMCA's Website Service distribution</a>.
4.30 - one-click install how-to
This walk-through is outdated and is in the process of being updated. Instead, try:
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
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.
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.
4.33 - 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.
After adding a patch execute command composer update
Verify you can see added changes in YMCA Website Services
Enjoy!
4.34 - 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.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.
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):
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>UsingBlogpackageyoucancreateandmaintainblogpostsandcreateflexiblelistingsofblogposts.Watchavideobelowtolearnmoreaboutbloganatomy.</p><iframewidth="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_categorycamps:name:'Camps'description:"Camps package provides a set of modules to maintain camps and add them to the location finder page."help:'<p>UsingCampspackageyoucancreateandmaintainCampsandextendlocationfinderpagetoincludethem.</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):
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:
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.
When tagging a new release of YMCA Website Services, the Lead Architect takes the following steps:
Review/Merge/Update
YCloudYUSA/yusaopeny-project (usually composer.json or/and oneline script install) and tag a new release there.
Review/Merge all Pull Requests in
YCloudYUSA/yusaopeny that were planned for release.
Change the YMCA Website Services version in
openy.info.yml.
Change the YMCA Website Services version in major modules if there were changes to them (Activity Finder, PEF, etc).
Create Changelog release notes as a draft and include Contributors as well as major issues fixed/introduced.
Spin up a copy of an YMCA Website Services site and check top priority functionality for regressions.
Send for review to Core Team (Craig Paulnock, Paige Kiecker), get approval.
Change the YMCA Website Services version to next with -dev suffix for developers in
openy.info.yml.
Refresh the YMCA Website Services private mirror on the openy.cibox.tools CI server.
Check that the
one-click install is working on a fresh DigitalOcean instance ($10: 1CPU 2Gb RAM). Ensure the version of YMCA Website Services is the proper one in site info (admin/reports/status).
Publish announcement in #developers YMCA Website Services Slack channel.
Publish announcement in #general YMCA Website Services Slack channel.
4.38 - Release Schedule and Guidelines
YMCA Website Services Release Guidelines
YMCA Website Services releases major releases of the base project
YMCA Website Services and
Virtual Y quarterly. Minor releases and sub-project releases occur as needed.
Major releases (Quarterly)
Major releases are scheduled for the second Tuesday of the second month of each quarter (February, May, August, November). They are numbered 2.x and consist of:
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.
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
https://www.youtube.com/watch?v=V3K4-RLjxQo - 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
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
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
https://www.youtube.com/watch?v=V3K4-RLjxQo - 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
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
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
https://www.youtube.com/watch?v=V3K4-RLjxQo - 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
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
to store your patched core into your own repository.
==========================
How to patch your Digitalocean OpenY install
In case if you have followed tutorial
https://www.youtube.com/watch?v=V3K4-RLjxQo 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
Log in as an admin user to your site admin UI by visiting /user/login URI page.
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
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
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.
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
and hit Enter.
You should see OpenY was patched message.
4.40 - 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.
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 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 based on the YMCA Website Services stable Standard profile and the
Virtual Experience Platform (aka “Virtual Y”, aka “Open Y Gated Content”) project.
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 Docksal or Vagrant local environments your composer version will not update automatically, so you’re currently safe from inadvertent updates. Instructions for updating those environments 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.
4.42 - 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.
List of requirements
Ubuntu LTS (14 or 16) is preferred. CentOS is ok as well. Or even any other Linux distribution, but was not tested by YMCA Website Services team so far.
(Drupal 8 server requirements should be met)[https://www.drupal.org/docs/system-requirements/php-requirements].
PHP 5.6+ (PHP 7 is better in terms of performance)
Open link(e.g. http://IP/core/install.php) from console output and finish YMCA Website Services installation
Video tutorial
End to end installation
4.45 - technology pipeline
To deliver the best technologies for the YMCA movement, the YMCA Website Services development community maintains the following documents and best practices:
A list of
3rd party dependencies which are reviewed periodically for new features and deprecations.
4.46 - 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).
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.
4.47 - 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
Obtain latest development code of YMCA Website Services
$ cd profiles/contrib/openy
$ sh runtests.sh --tags run_selenium
Open installed VNC Viewer and connect to the server with IP 192.168.56.132:5901
Password = secret
Run tests and you should see everything that is performed by behat tests in VNC client
$ bin/behat
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.
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 |
4.49 - 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:
This document is archived but may contain useful information for troubleshooting future updates. For updated update steps, visit
How to upgrade YMCA Website Services.
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/Linuxvagrant@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 72019 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
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.
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
4.52 - 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.
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 )
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
…
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.
Run command with next never version
In a same folder where is your docroot folder run
mv composer.json composer.json.bak ||truewget 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
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
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.
Check for regressions
…
Backup current state of the updated site
…
Proceed with an update to next version until succeeded (Start from item 1)
…
4.54 - 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.
Your own YMCA Website Services instance should have a virtual machine injected into your site codebase. Just find Vagrantfile and proceed with vagrant upaccordingly to the documentation.
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.
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.
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)
4.56 - Videos
Video Tutorials
The YMCA Website Services team maintains a
YouTube channel with video tutorials for developers, content editors, evaluators, and more. Visit YouTube for the full list of content.
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
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_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.
4.58 - 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.
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:
Click Edit this page in the right (second) sidebar.
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.
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:
Follow the instructions in
Getting started to install Hugo and any other tools you need.
Fork the
yusaopeny_docs repo into your own project, then create a local copy using git clone.
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.
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
Docsy user guide: All about Docsy, including how it manages navigation, look and feel, and multi-language support.
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.
Links
Internal links should be made with Markdown and page-relative locations, like:
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.
{{%alerttitle="Warning"%}}This is a warning.
{{%/alert%}}
Warning
This is a warning.
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:#a92b31color:169, 43, 49
5.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
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).
markdownlint-cli2 --fix "content/en/docs/user-documentation/paragraphs/**/*.md" - lint and fix the Paragraphs directory
6 - 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.
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
One of the distribution themes. “Lily offers bold banner headings and eye-catching tiles to organize child page content.” 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.
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.
A service provider that offers member management systems and more. Integrates with a number of features of the distribution.
Personify.
Rose
One of the distribution themes. Rose offers sprawling site menu options and high accessibility for blind and low-vision users. 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.
.
The first portion, 
