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

Return to the regular view of this page.

Open Y Distribution Documentation

The Open Y 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 Open Y and run Open Y 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 Open Y.

A core team led by a small group of YMCAs including the YMCA of the North ( former Greater Twin Cities ), Greater Seattle and Greater Houston:

  • Pays for expenses associated with managing Open Y
  • Maintains the Open Y 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 Open Y 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 Open Y Specialists—digital partners that are very familiar with the platform
  • Offers certification for Open Y Integrators—digital partners that can install and work directly on the codebase
  • Distributes communication about Open Y
  • Organizes events for the Open Y community—including an annual meeting each June

Open Y 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.

Details

For more details please visit https://openy.org.

1 - Contribution Guidelines

How to contribute to the docs

We use Hugo to format and generate our website, the Docsy theme for styling and site structure, and GitHub Actions to manage the deployment of the site to GitHub Pages. Hugo is an open-source static site generator that provides us with templates, content organisation in a standard directory structure, and a website generation engine. You write the pages in Markdown (or HTML if you want), and Hugo wraps them up into a website.

All submissions, including submissions by project members, require review. We use GitHub pull requests for this purpose. Consult GitHub Help for more information on using pull requests.

Updating a single page

If you’ve just spotted something you’d like to change while using the docs, Docsy has a shortcut for you:

  1. Click Edit this page in the top right hand corner of the page.
  2. If you don’t already have an up to date fork of the project repo, you are prompted to get one - click Fork this repository and propose changes or Update your Fork to get an up to date version of the project to edit. The appropriate page in your fork is displayed in edit mode.
  3. Make your changes and open a Pull Request. The maintainers will review, provide feedback, and merge.

Previewing your changes locally

If you want to run your own local Hugo server to preview your changes as you work:

  1. Follow the instructions in Getting started to install Hugo and any other tools you need. You’ll need at least Hugo version 0.45 (we recommend using the most recent available version), and it must be the extended version, which supports SCSS.

  2. Fork the openy_docs repo into your own project, then create a local copy using git clone. Don’t forget to use --recurse-submodules or you won’t pull down some of the code you need to generate a working site.

    git clone --recurse-submodules --depth 1 https://github.com/open-y-subprojects/openy_docs
    
  3. Run hugo server in the site root directory. By default your site will be available at http://localhost:1313/. Now that you’re serving your site locally, Hugo will watch for changes to the content and automatically refresh your site.

  4. Continue with the usual GitHub workflow to edit files, commit them, push the changes up to your fork, and create a pull request.

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 openy_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

1.1 - Documentation Tips & Tricks

In addition to the full documentation, here are some commonly used functions in the Open Y Docs.

General Styles

The Open Y Docs are written in Markdown, an easy-to read and write formatting language.

The old documentation made heavy use of horizontal rules --- and slashes in headings ## // Heading. We try to use standard Markdown headings for organization and remove those visual indicators for better accessibility.

Headings with a page should start with level 2 ## in order to properly build the in-page navigation.

Internal links should be made with Markdown and page-relative locations, like:

[Blocks](../user-documentation/blocks)

Blocks

Images

Image files should be placed in the /assets/img directory at the root of the project, then they can be embedded with relative paths with Markdown:

![Alt text](../../../../assets/img/llama.png "This is a caption.")

A very adorable llama.
A very adorable llama

Image processing is brought to you by Hugo Markdown Render Hooks, editable in layouts/_default/_markup.

Video Embeds

Videos can be embedded using Hugo’s youtube or vimeo shortcodes. These take the form:

{{< youtube w7Ft2ymGmfc >}}
{{< vimeo 146022717 >}}

To replace regular YouTube links with the shortcode you can use the following regex:

find: https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?([\w-]+)
replacement: {{< youtube w7Ft2ymGmfc >}}

Tips

The old community documentation used headings inside blockquotes (starting each line with >). That formatting doesn’t work in Hugo. We can use Docsy alerts instead.

{{% alert title="Warning" %}}
This is a warning.
{{% /alert %}}

2 - User Documentation

Everything you’ve wanted to know about using Open Y.

These documents are a combination of the Open Y Community User Documentation and the User Manual.

If you see something missing or would like to request a new topic, please open an issue.

2.1 - Text Editor

Some fields in Open Y allow you to format your text like in a Word doc. This feature is called the Text Editor or WYSIWYG (What Your See Is What You Get).

blog-description__text-editor|690x307

The description field inside a blog is an example of the WYISWYG Editor in action.

If you have worked in a Content Management System like Drupal, Wordpress or Joomla!, you are likely familiar with what a text editor does. This tool allows you the flexibility to format content however you want within a certain container or area.

blog-description_text-editor-example|690x385

Open Y’s text editor (CKEditor) provides a number of different buttons for styling and formatting, as well as a Source editor if you are so inclined to use HTML.

2.1.1 - Adding and Embedding Videos

Adding/Embedding Videos with the Open Y Text Editor

Open Y allows you to upload and embed images directly into a block of text, either from your computer or from the Open Y 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, Open Y 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.

2.1.2 - Adding Images

NOTE TO USERS OF OPEN Y 2.4+

This documentation is not up-to-date if you are using Open Y 2.4 and later.

View video tutorial for Open 2.4 and later ⇒

Adding Images with the Open Y Text Editor

Open Y allows you to upload and embed images directly into a block of text, either from your computer or from the Open Y 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, Open Y comes with Full, Half, and Link display modes
    • Full means your image fills the area where it’s inserted
    • Half mean the picture is half the size of its area.
    • Link outputs the image as a simple link to the picture.
  • Link to wraps the image in a link so that when users click on it, it goes to another page.
  • Align allows you to float an image to the center or either side of the page.
  • Caption outputs a caption below the image.

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

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

More on Images

2.1.3 - Adding Links

Using Links with the Text Editor Links are simple in Open Y - just highlight your text and click the link icon or type Ctrl+K (Windows)/Command(⌘)+K (Mac). Once the pop-up appears, type your URL into the field and click “Save.”

blog-description_text-editor-links
The link button in the CKEditor toolbar.

blog-description__text-editor-link-popup

Demo this on CKEditor Site >


Open Y 2.5 and later

Ys with newer versions of Open Y can add attributes to their links, including a title ( for tooltips) HTML ID, HTML rel and CSS classes. You can also opt to have your link open in a new window/tab.

landing-page_text-editor-link-and-title-popup|690x300, 50%
landing-page_text-editor-link-attributes-popup|628x500, 50%

Linking Tips

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

To update/change a link, highlight the link text and click the link icon or Ctrl+K (Windows) /Command(⌘)+K (Mac).

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

Pro Tip: The link button doesn’t support opening links in a new window or tab, such as with a "target='_blank'" You can either use HTML or the WYSIWYG button tool to create links in new tabs.

2.1.4 - Adding/Embedding Documents

Open Y allows you to upload and embed documents directly into a block of text, either from your computer or from the Open Y 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, Open Y 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.

2.1.5 - Basic Text Formatting

Basic Text Formatting in Text Editor

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, just highlight the text and then click on the button in the editor.

blog-description__text-editor-buttons|690x56

Demo Basic Text Formatting on CKEditor 4 >

Text Formatting/Styling Buttons

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

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

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

Pro tip: The Text Editor also ships with a custom “Styles” dropdown that allows you to customize additional text formats/styles for content editors. This is disabled by default in Open Y. Advanced users can enable this by going to Configuration > Content authoring > Text formats and editors

2.1.6 - Building Buttons

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

WYSIWYG Editor options with the button tab highlighted in green.

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

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

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

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


Info Tab

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

  • The link option will allow you to embed your link text in line with a paragraph.
  • In 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.

blog-destiption__text-editor-button_style|166x500,50%

blog-destiption__text-editor-button_size|282x200,50%

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

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

https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/


Target Tab

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

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

» Learn about link targets


Icons Tab

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

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

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

View free font awesome icons at fontawesome.com

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

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.

2.1.7 - Building Tables

The tables tool in the Open Y text editor provides the ability to create flexible tables for a number of different use cases, including displaying contact information, pricing tables, and more.


Adding a New Table

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

landing-page-simple-content__table|586x176, 50%
paragraph-simple-content__table-options|320x469, 50%

  • 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.”

landing-page-|296x500, 50%

You can also double-click inside a table cell.

Adding Rows/Columns

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

Deleting Rows/Columns

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

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

Formatting Individual Cells/Groups of Cells

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

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

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

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.

https://www.pluralsight.com/blog/tutorials/understanding-hexadecimal-colors-simple

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

landing-page-simple-content__pricing-example|690x426, 75%

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

// Camp Locations

landing-page-simple-content__camp-locations-example|690x386

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

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

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

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

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

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

2.2 - Page/Content Types

Open Y features 20 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.

2.2.1 - Activity, Class, and Session

These content types format data/content pulled from third parties, such as Daxko, Personify and ActiveNet, for display in Open Y.

Content editors rarely, if ever, enter information directly into these content types on a day-to-day basis. However, it is important to know how they work and how they relate to manually-entered content.

Example - Swim Lessons

  • Swimming and Aquatics (Program Page, manually entered)
  • Swim Lessons (Program Subcategory Page, manually entered)
  • Youth Group Swim Lessons (Activity, mapped from CRM or custom automation)
  • Stage 3 (Class, mapped from CRM)
  • Monday/Wednesday/Friday 9:30-10 a.m. at Franklin Family YMCA (Session, mapped from CRM)

Note: This is an example only. Depending on your CRM and any customizations you make, your setup for Swim Lessons or any program may look different that the example listed above.

Activity

Often used as the top-level filter in Activity Finder and Repeat Schedules, Activity consists of three fields:

  • Title: The name of the Activity (and the filter in Activity Finder).
  • Program subcategory: An entity reference to or tag for a Program Subcategory. Maps the Activity to higher-levels of user-entered content. *Description: A description for the Activity. Usually pulled from a description in a CRM through an API.

Class

A narrower selection of Program Offerings. Not an individual instance, but a smaller selection of instances.

Classes have three ields that map into Activity Finder and Repeat Schedules: a description, a title and entity reference/tag to an Activity.

Class also contains Areas for content editors to add paragraphs; however, depending on how your CRM and the number of programs your Y runs, it may not be practical use these fields.

Session

An individual program offering. Contains fields for pricing, session date/time, instructor, ages and a registration link. This are the individual rows/instances in Repeat Schedules and Activity Finder.

2.2.2 - Alert

Alerts display timely information in a thin banner across your site, just below the header or above the footer.

Screen Shot 2020-03-24 at 10.07.11 PM|690x67

Unlike most content types in Open Y, 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. By design, the layout of Alerts are rigid; however, text editor and the 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

Click on “Content” from your admin toolbar, and then click on the blue “Add Content” button." Select “Alert” on the next page.

  • 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 Open Y Text Editor.

  • Color Fields: These three dropdown fields control different aspects of color in your alert. All three dropdowns reference the the Open Y 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. Button color defaults to black. Learn more about the link field ⇒

  • Placement: Choose “Header” to show your alert above your main content or “Footer” to show below your main content.

admin__alert&ndash;dropdowns|662x396, 75%

  • 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.

    You also have the option to use an asterisk character * as a wildcard so you don’t have to enter in 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.

admin__alert&ndash;visibility-pages|320x191

What is a relative path? A relative path is the part of your url after your domain name.

At https://openy.org/community, for example, the domain name is openy.org, 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.

2.2.3 - Blog Post

Designed for timely content, articles and news pieces tagged with one or more physical locations.

Note: This Content Type is similar to the News Post content type.

carnation&ndash;blog&ndash;desktop|690x479, 75%

Blog posts in Open Y allow you the flexibility to both create simple posts using only the text editor and more robust layouts with paragraphs.

When Should I Use a Blog Post?

When you decide to use a blog post depends greatly on your Association’s content strategy. However, blog posts are designed so you can post timely pages and list them throughout your site. Examples of blogs may include:

  • Member Stories
  • Workouts and Recipes
  • Updates about a Center/Branch
  • Promotions and Contests
  • Press Releases

How Do I Use a Blog Post?

There are three fields that appear above the accordion tabs below:

  • Title: The name of the blog. Displays in the header area on your blog post and in the cards that display in a list of blogs.

  • Locations: An option select for you to tag a post with one or more locations (Camp or Branch). Use Ctrl+Click (Windows) or Cmd⌘+Click (Mac) to select multiple locations.

Each time you create a new Branch Page or Camp Page it populates into the locations field automatically

  • Category: An entity reference to the Blog Category vocabulary. Type in the name of the category and select from the options that appear, or create a new category/term by typing in a new one.

admin&ndash;blog-posts__category|662x204, 75%

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.

admin&ndash;blog-post__style|564x434, 50% #### Story Card carnation&ndash;landing-page__blog-posts&ndash;story-card|610x500, 50% lily&ndash;landing-page__blog-posts&ndash;story-card|394x500, 50%

#### Photo Card carnation&ndash;landing-page__blog-listing&ndash;photo-card|590x500, 50% lily&ndash;landing-page__blog-posts&ndash;photo-card|434x500, 50%

#### News Card carnation&ndash;landing-page__blog-listing&ndash;news-card|590x500, 50%

#### 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.

Content Area

The content area is the main body of your page. You can use the default fields entered below for a simple block post or build a more robust layout using paragraphs.

The sidebar area also allows you embed paragraphs below a section that links to the centers tagged in the post, the categories and a Related Content field that allows you to promote other Blog Posts by tagging them with the autocomplete widget.

Layouts

While you have the option to build layouts in blog posts using paragraphs, all blog posts are strictly two-column layouts. The Content Area displays on the left while the Sidebar Area displays on the right.

2.2.4 - Branch

One of the first places members go when they visit a Y website is to their local Y’s page. In Open Y, you create pages for a wellness facility with the Branch content type.


carnation&ndash;branch&ndash;tablet_1|375x500, 75%

lily&ndash;branch&ndash;tablet.PNG|375x500, 75%

Collecting Standard Information for Your Branch

When you create a branch, you create a page for that branch, a card listing on your locations page, and a tag for blogs, sessions, events, membership types and news posts.

Most of your general information will display in your header.

Your branch amenities will only display if you add a “Branch Amenities with Icons” paragraph in your bottom or content Area


Branch Information Fields

General Information

-> Title

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., Downtown Nashville YMCA Burkholder Center) versus the common name (Downtown YMCA). The best practice would be to use the shorter, more common name for readability.

-> Neighborhood

An optional reference to specify which neighborhood your Y is located in (e.g., “East Nashville” for the Margaret Maddox YMCA). Start typing and select from the list of neighborhoods that appear.

To add a new neighborhood, add it to the “Area” vocabulary under Structure > Taxonomy.


Contact Info

-> Address:

The physical address of your location. Be sure to include all address fields.

-> Branch coordinates

This field pins your branch on the locations map.

How to Get Your Branch Coordinates from Google Maps

  • Right click on your Y and select “What’s here?” Click on the latitude/longitude number at the bottom of the card. > > admin__google-maps&ndash;whats-here|573x500, 75%

  • Below the headline, copy the first number (the non-negative number) into the latitude field. Copy the second number (the negative number) into the longitude field. > > admin__google-maps&ndash;geo|573x500, 75%

-> Phone/Fax/Email

The fax is optional, but add the main line for your branch in the phone field.

Add a main contact email, such as contactmyy@anytownymca.org, rather than the email for an individual staff member.

-> Directions

Link to your Google Places. Add “Get Directions” in the Link Text section.

-> Branch Hours

Add the main hours for your facility. Use the 7am-5pm format to save space. Displays in the header and on the card.

Note - Some Ys have set up the branch hours field to include holiday hours, as well as hours for multiple parts of your facility. This is an advanced feature; talk to your agency partner if you would like this.


Header Area

There is no image field for the Branch content type, so you will need to add one of the following paragraphs to add an image and title at the top of your page:

Content Area

The Branch Content Type only has one layout option—one column—and no description field. Add in almost any paragraph you want into the body of you page.

The following paragraph types integrate directly with Branch:

Bottom Area

Use the bottom area for anchoring elements on your page. The following paragraphs are great for this area:


Branch Amenities

Type in and select which amenities are available at your branch using the autocomplete field.

admin&ndash;branch__amenities|690x213, 75%

If you embed a Branch Amenities with Icons paragraph on your page, the amenities will display 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.

#### Closed Amenities Ys with Open Y 2.5 or later can tag amenities at a branch that have closed. Content editors will see a “Closed Amenities” field.

carnation&ndash;branch&ndash;closed-amenities|442x499, 50% admin&ndash;branch__amenities&ndash;closed-amenities|690x341, 50%

2.2.5 - Camp

Camps in Open Y are physical locations where outdoor camp programming takes place.

Note: Camp is similar to the Branch content type.

While YMCA Branches may offer some form of summer day camp, they differ from facilities that primarily host programs related to outdoor camps.

carnation&ndash;camp&ndash;tablet.PNG|375x500, 100%


When Should I Use Camp?

If you are an independent YMCA camp or you’re an Association with one or more locations dedicated to outdoor camp, the Camp Content Type serves well as a landing page for those locations.

// What about Branch Day Camps?

There are several considerations for Branches that host Day Camps in the center:

  • The Branch content type is intended to be the home page for branches.

  • Adding a Branch listing and a Camp listing for the same physical location creates duplicate listings for your center and could have search implications.

  • Camp pages don’t have fields for operating hours or amenities.

  • Branch Day Camps, unlike outdoor camps, tend to be listed in the same CRM as other branch-based programs, and therefore could integrate into Activity Finder, provided the CRM’s compatibility.


Recommended Content Types for Branch Day Camps -> Learn how to use the Program Subcategory content type ⇒ -> Read about Landing Pages ⇒


How Do I Use Camp?

General Info

-> Title

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.

Add in the URL or name of the content you want to link your Camp Menu to (must use Camp Menu for this to work).

camp__camp-menu&ndash;menu-links|450x500, 75%

Read more about Camp Menu ⇒


Contact Info

-> Address:

The physical address of your location. Be sure to include all address fields.

-> Camp coordinates

This field pins your camp on the locations map.

How to Get Your Camp Coordinates from Google Maps

  • Right click on your camp and select “What’s here?” Click on the latitude/longitude number at the bottom of the card. > > admin__google-maps&ndash;whats-here|573x500, 50%

  • Below the headline, copy the first number (the non-negative number) into the latitude field. Copy the second number (the negative number) into the longitude field. > > admin__google-maps&ndash;geo|573x500, 75%

-> Phone/Fax/Email

The fax is optional, but add the main line for your branch in the phone field.

Add a main contact email, such as contactmyy@anytownymca.org, rather than the email for an individual staff member.

-> Directions

Link to your Google Places. Add “Get Directions” in the Link Text section.

Header Area

There is no image field for the Camp content type, so you will need to add one of the following paragraphs to add an image and title at the top of your page:

Below your header image, add in a Camp Menu paragraph for a secondary, full-width navigation.

Content Area

The Camp Content Type only has one layout option—one column—and no description field. Add in almost any paragraph you want into the body of you page.

The following paragraph types integrate directly with Camp:

Bottom Area

Use the bottom area for anchoring elements on your page. The following paragraphs are great for this area:

2.2.6 - Facility

2.2.7 - Landing Page

Landing pages are the most flexible content type in Open Y, with no unique fields other than a layout selector.

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

landing-page-layouts__one-column|690x431, 50%

=> One Column (Full Width)

landing-page-layout__one-column-full|690x431, 50%

=> Two Columns

landing-page-layout__two-columns|690x431, 50%

=> Two Columns (Fixed Sidebar)

landing-page-layout__two-columns-fixed|690x431, 50%

–> Paragraph Areas

  • 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 [i](Two Column Layouts Only)[/i]: 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.

2.2.8 - Membership

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 didsplayed on the first step of the Membership Calculator.

-> Description

A short description to be displayed on the first step of the Membership Calculator.

-> Image

An reusable image field to be displayed on the first step of the Membership Calculator.

Join___Drush_Site-Install|295x479, 50%

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.

  • 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.

Join___Drush_Site-Install|690x234

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.

image (4)|690x475

2.2.9 - News Post

Designed for timely content, articles and news pieces tagged with one or more physical locations.

Note: This Content Type is similar to the Blog Post content type.

carnation&ndash;news&ndash;desktop|690x479, 75%

News posts in Open Y 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?

admin&ndash;news-posts__category|662x204, 75%

There are three fields that appear above the accordion tabs below:

  • Title: The name of the news post. Displays in the header area on your news post and in a list view of news posts.

  • Locations: An option select for you to tag a post with one or more locations (Camp or Branch). Use Ctrl+Click (Windows) or Cmd⌘+Click (Mac) to select multiple locations.

    Each time you create a new Branch Page or Camp Page, that location’s name populates into the locations field automatically

  • Category: An entity reference to the News Category vocabulary. Type in the name of the category and select from the options that appear, or create a new category/term by typing in a new one.

Content Area

The content area is the main body of your page. You can use the default fields entered below for a simple block post or build a more robust layout using paragraphs.

The sidebar area also allows you embed paragraphs below a section that links to the centers tagged in the post, the categories and a Related Content field that allows you to promote other News Posts by tagging them with the autocomplete widget.

Layouts

While you have the option to build layouts in news posts using paragraphs, all bnews 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.

2.2.10 - Program

In Open Y, a Program doesn’t refer to specific offering or format, but to a content type that serves as a large, generic category page for program offerings.

lily&ndash;program&ndash;desktop|690x454, 75%

The Program content type is a high-level page that directs people to more specific program offerings.

An example of a Program in Open Y 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 Open Y sites, they are the main program pages in an Open Y mega menu setup.

carnation__mega-menu&ndash;desktop|684x500, 75%


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

carnation&ndash;program&ndash;light-blue-color|690x135, 75%

/// Standard Title with Purple

carnation&ndash;program&ndash;purple-color|690x135, 75%

/// Small Banner

carnation&ndash;program__small-banner|690x135, 75%

Content Area

  • Description: Displays above the main body of your content and serves as a tease for your Program page when it’s displayed as part of a list on another page. Minimal styling and short lengths are recommended.

  • Content: The main body of your content. Use paragraphs to build your page layout. Designed to integrate with the Categories Listing paragraph, but that is not required.

For aside pieces of content, such as side navigations, promotional cards and content related to the main part of your page.

Layouts

Similar to landing pages, Program pages are designed for flexible layouts, with a couple key differences:

  • Program pages are designed for integration with the Categories Listing paragraph type. Program subcategory pages are tagged with a Program, and those subcategories are displayed as long cards on that Program page.

  • There is no layout dropdown. How your content displays depends on your theme.

    • Lily/Rose will always display Programs in a two-column layout in desktop.
    • Carnation will display desktop in One Column without content in the Sidebar Area and in Two Columns with content in the Sidebar Area.

    /// Carnation: Without Content in the Sidebar

    carnation&ndash;program__one-column&ndash;desktop|690x406, 75%


    /// Carnation: Desktop With Content in the Sidebar

    carnation&ndash;program&ndash;desktop|690x399, 75%

  • The Description field always displays above the paragraphs you enter.

  • There is no bottom area for you to add an anchoring element.

2.2.11 - Program Subcategory

A subset of a Program, Program Subcategory pages list different types of program offerings, grouped into Activities.

Subcategory pages refine broad Programs into more concrete options.

Screen Shot 2020-04-07 at 10.31.43 AM|690x338, 75%

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.

rose__menu&ndash;subcategories|690x363, 75%

Subcategories, likewise, appear as horizontal cards on Program pages.

lily&ndash;program__categories-listing|690x482, 75%

Learn about the Categories Listing Paragraph ⇒

How Do I Use the Program Subcategory Content Type?

Start by adding a Title for your Program Subcategory and tag it with a Program.

admin&ndash;program-subcategory__program-select|662x204, 75%

The Program tag will pull your Program Subcategory in as a horizontal card on a Program page. You can only tag a Subcategory with one Program.

Header Area

  • Image: Using an image field, select an image from the media browser. Displays in the header and as a thumbnail in Categories Listing.

  • Color: A dropdown to select a background color for your header.

    -> Note: The background color does not display on desktop in Carnation unless you do not have an image selected.

You have the option to add paragraphs in the Header Area. However, these paragraphs display below the below the image and title you enter above.

For example, if you add a banner in the Header Area, it will display below the title and image entered in those Header Area fields.

Subcategory was originally designed to work with the Classes Listing Filters paragraph in the Header Area and the Classes Listing paragraph in the Content Area.

View Subcategory Demo on Open Y Sandbox ⇒


With the integration of Activity Finder into Open Y, Classes Listing and Classes Listing Filters are becoming less popular among Open Y 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

Screen Shot 2020-04-07 at 10.34.22 AM|690x324, 75%

The Sidebar Area will change the layout of the page into two columns once you enter content.

Bottom Area

Use the Bottom Area for anchoring elements, such as small banners and webforms.

2.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.

landing-page__2-column-block|690x290, 75%

You can now embed that block on another page simply by typing its name and click on it from a list of results.

Paragraphs that support blocks will have two buttons - “Add New Custom Block” and “Add Existing Custom Block.”.

Adding a new custom block will allow you to retrieve it later on another page. When you go to retrieve a block, you will choose the “Existing Custom Block” option, type the Block Description in the search field, and choose from one of the options that appear.

admin__date-block&ndash;exsiting-block|690x143, 75%

Block Descriptions

Standard across all block types is the block description field, which serves as the name for your block. Use this description field to help identify your block when you are embedding it onto a page.

admin&ndash;code__block__cropped|690x155, 50%

Block Types

Open Y not only allows you to use blocks, but it supports different types of blocks for different types of content.

Basic Block

A basic block gives you a basic text editor and that’s it. This is great for embedding descriptions on cards across multiple pages.

Simple Block

The block type you will likely use most often is the simple block. A simple block gives you a basic text editor and that’s it. This is great for embedding descriptions on cards across multiple pages.

landing-page__1-column-demo-block|690x474, 75%

Paragraphs that Support Simple Blocks


Date Block

Use this block to schedule and unschedule sections/paragraphs on your page(s).

Using the Date Block Paragraph ⇒

Code Block

This unformatted block allows you to use any type of HTML tag, great for for embedding scripts and iframes onto multiple pages. This block also allows more flexibility for technically-inclined content editors.

Using the Code Block Paragraph ⇒

2.4 - Paragraphs

Embed simple text, images, blocks and interactive components with blocks, Open Y’s layout-building component.

Open Y content editors use paragraphs to create unique layouts for their pages. Each paragraph is a section of content that comes with its own styling, functionality, and fields.

You can add a paragraph onto a page when you see the paragraphs dropdown field. These paragraphs will typically be inside one of the four main “Areas” inside a content type:

  • Header Area - Used for adding images and page titles
  • Content Area - Where your main content goes
  • Sidebar Area - Where you put related information, such as promotions and links to other content.
  • Bottom Area - The “anchoring” elements of your page, such as a call to action.

Choose a paragraph by selecting an area and picking an option from the dropdown., 75%

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 Open Y layouts.

Inline Editor

If you’ve upgraded to Open Y 2.4 or later, you can add a paragraph from the front-end by clicking on the Plus icon in a given region and selecting a paragraph from the pop-up window.

Note: Not all paragraphs are available for inline editing yet. More paragraphs will be added to the inline content editor in later releases

Rearranging Paragraphs

Sometimes you have one layout in your head and it doesn’t look as good when you add it to your page. You can easily move around your sections by clicking on the cross icon to the left of your paragraphs. Drag around your paragraphs to rearrange.

Just drag your paragraphs to rearrange them

Editing Paragraphs

Need to fix a typo? Click the edit button next to each paragraph to open it back up and make edits.

Deleting Paragraphs

Maybe you didn’t need that section. Don’t worry: you can easily delete a paragraph by clicking on the remove option from the dropdown next to where it says “Edit.”

Choosing the Right Paragraph Type

Open Y 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 Open Y and how to use them.

2.4.1 - 1 Column

1 Column embeds a single column of content into an area/container on a page, with an option to embed reusable content. Similar to the code paragraph, this paragraph comes out of the box with styles and a text editor.

Examples

Rose - Without Block

rose&ndash;landing-page_1-column-no-block

Rose - With Block

rose&ndash;landing-page__1-column-with-block

Carnation - With Custom Block

carnation&ndash;landing-page_1-column-with-block|690x186


Areas 1 Column Should Be Used

  • Content Area
  • Sidebar Area
  • Bottom Area

How to Use 1 Column

After selecting “1 Column” from the paragraphs dropdown, you will notice paragraph title field, a checkbox, and a required description.

  • Paragraph title adds an all-caps heading at the top of your paragraph. This is optional.
  • The checkbox adds dual horizontal rules. Check this only if you’re planning on using the paragraph title
  • Description (required) - Adds simple text through a text editor. Font color defaults to purple in Lily and Rose.

Custom Block Feature

While the paragraph be used only with the fields above, 1 column also supports custom blocks of content. For this paragraph type, it’s recommended that users stick with “Simple block” types.

When adding your custom block, use the font-awesome icon class instead of the custom icon image field. In Carnation, the image option tends to get too large.

Learn more about custom blocks ⇒

Read about the Font Awesome icon library ⇒

Advanced

The purple font color for paragraph descriptions can be overridden in Lily and Rose by targeting .paragraph-1c-wrapper .field-prgf-1c-description.

Example:

.paragraph-1c-wrapper .field-prgf-1c-description {
color: inherit;
}

Content editors who want to edit this CSS can ask their developers to install the CSS Editor module and edit their styles directly from the User Interface.

https://www.drupal.org/project/css_editor

Content Types that Support This Paragraph

2.4.2 - 2 Columns

2 Columns adds two equal-width, reusable blocks of content, side-by-side. The left side stacks on top of the right side for mobile.

Examples

Carnation

carnation&ndash;landing-page__2-columns

Lily

lily&ndash;landing-page__2-columns

Rose

rose&ndash;landing-page__2-columns


Areas it Can Be Used:

  • Content Area
  • Bottom Area

How it Works

  • Select “Two Columns” from the paragraphs dropdown.
  • Insert a custom block into the Left and Right Column

Learn more about custom blocks ⇒

Unlike similar paragraphs (such as 1 column paragraph and Grid Content), there is no title field. To add a Title, insert a Simple Content paragraph above your 2 columns paragraph.


There is an optional checkbox to display a horizontal rule above the two columns.

landing-page__2-columns-line-above


If you want to add multiple rows of content with 2 columns, add a new 2 columns paragraph for each set of two you want (e.g., if you have five blocks of content, add three 2 columns paragraphs).

landing-page__2-columns-multi-row


Content Types That Support this Paragraph

2.4.3 - 3 Columns

3 Columns adds three equal-width, reusable blocks of content, side-by-side. The leftmost columns stack on top of columns to their right.

Examples

Carnation

carnation&ndash;landing-page__3-columns|690x402, 75%

Lily

lily&ndash;landing-page__3-columns|690x402, 75%

Rose

rose&ndash;landing-page__3-columns|690x402, 75%

Areas it Can Be Used:

  • Content Area
  • Bottom Area

How it Works

landing-page__3-columns-dropdown|644x500, 50%

  • Select 3 Columns from the Paragraphs dropdown.
  • Title: Optional large, all caps title at the top.
  • Add custom blocks to the Left Column, Center Column, and Right Column fields.

Learn more about custom blocks ⇒

landing-page__3-columns-options|544x500, 75%

If you want to add multiple rows of content with 3 columns, add a new 3 columns paragraph for each set of two you want (e.g., if you have seven blocks of content, add three 3 columns paragraphs).


Content Types That Support this Paragraph

2.4.4 - 4 Columns

Adds four equal-width, reusable blocks of content, side-by-side. The leftmost columns stacks on top of columns to their right.

Examples

This paragraph does not work out of the box in Carnation (see Advanced).

Content editors can use Grid Content or Featured Content paragraphs to achieve a similar layout.

Lily

lily&ndash;landing-page__4-columns|690x346, 75%

Rose

rose&ndash;landing-page__4-columns|690x216, 75%


Areas it Can Be Used:

  • Content Area
  • Bottom Area

How it Works

  • Select 4 Columns from the Paragraphs dropdown
  • Title: Optional large, all-caps title at the top
  • Line Above: Adds a horizontal rule above each column.

landing-page__line-above|615x120, 50%

  • Description: A subheader/section description embedded below the title and above your titles. Uses the text editor for styling.
  • Add custom blocks to the First Column, Second Column, Third Column, Fourth Column.

Screen Shot 2020-03-26 at 2.43.58 PM|580x500, 75%

Learn more about custom blocks ⇒

Adding Headers to Individual Blocks Out of the box, the Title field in each custom block renders as plain text. To work around this, add your headers in the text editor.

See Advanced below for details about how to fix this with CSS.

If you want to add multiple rows of content with 4 columns, add a new 4 columns paragraph for each set of two you want (e.g., if you have seven blocks of content, add two 4 columns paragraphs).

Learn more about the link field ⇒

Advanced

Title Field Styling

In all three themes currently in Open Y, the Title field displays in a font-size and color nearly identical to the body copy. To override, target .field-sb-title.

Carnation -> Columns stack in desktop

In order for this to work in Carnation, the .wrapper containing the column elements needs to be changed to .row; otherwise, each of the four columns expands to the full width of the Area it’s embedded in.

carnation&ndash;landing-page__4-columns|690x346, 75%

Content Types That Support this Paragraph

2.4.5 - Activity Finder

Documentation in Progress

Activity Finder

What It Does: Embeds the Activity Finder program search experience on your website, which helps users pre-filter the activities they want to search for.

Areas It Should Be Used

  • Content Area
  • Bottom Area

How it Works

This paragraph type requires an integration into a CRM. Out-of-the-box, Open Y’s Activity Finder integrates with Daxko, ActiveNet, and Personify. Any other CRM will require custom developer work.

Read more about the Activity Finder feature >

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.

There are three primary approaches to setting this up: a standard approach, a results-only approach, and a targeted approach.

Standard Approach

Create two Landing Pages. Title one “Find a Program” and the other “Program Search.”

On the “Find a Program” page, add the “Activity Finder” paragraph. Type in “Program Search” and select your Program Search in the “Activity Finder Search Results Page Reference” field.

At the bottom, you will see a field called “Title.” Change the title to “Find a Program.” Save the page.

Next, on the “Program Search” page, add the “Activity Finder Search Results” paragraph into the Content Area. Type in “Find a Program” on the “Activity Finder Page Reference” page.

Results-Only Approach

If you plan on using deep-linking or want to forgo the guided search experience, you can use the “Activity Finder Search Results.” Create a Landing Page called “Program Search” using the One Column (Full Width) layout.

Add the “Activity Finder Search Results” paragraph into your content area and leave the “Activity Finder Page Reference” field blank. Save your page.

Read: Deep-linking to an Activity Finder Program Search results page >

Targeted Approach

Activity Finder can also be used on multiple pages on your site, specifically on your Program Subcategory pages. On a Subcategory page, add the “Activity Finder” paragraph

2.4.6 - All Amenities

(deprecated)

Documentation in Progress

All Amenities (deprecated)

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

NOTE: This paragraph provides similar functionality to the Location filter by amenities, and is no longer recommended for use by the Open Y Core Team.

After selecting “All Amenities” from the paragraphs list, you can change the title that displays above the search checkboxes by entering text in the Title field.

Styling will differ greatly based on the theme. Use of this paragraph in Rose is not recommended.

Supported Content Types

Related Paragraphs

  • Location filter by amenities
  • Locations

2.4.7 - Banner

Banners add large, full width images to the top of your page, along with a title, optional description and optional link.

Landing page in Carnation on desktop

How to Use a Banner:

In the Header Area of your content, select “Add Banner” from the dropdown. Then, fill out the following fields:

landing-page__banner-fields|690x431

  • 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.

    [b]Recommendation ->[/b] Just enter basic text and don’t do anything beyond basic styling, such as bold or underline.

  • Image:

    landing-page__banner-image-select|480x94

    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 Open Y 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 Editor module, and you can target .btn.banner-btn to change the default button.

Content Types that Support Banner

2.4.8 - Blog Posts Listing

This paragraph adds a section teaser cards that link to blog posts and dropdown search fields for users to search for blogs they want to read.

Examples

Carnation

carnation&ndash;landing-page__blog-listing|690x403, 75%

Lily

lily-landing-page__blog-listing|690x456, 75%

Rose

rose&ndash;landing-page__blog-listing|690x403, 75%

Areas it Should Be Used

  • Content Area
  • Bottom Area

How to Use Blog Posts

From the paragraphs dropdown, add Blog Posts Listing. Enter a header title for the section in the text field and hit Save.

landing-page__blog-posts-listing-admin|690x193, 75%

Advanced

Advanced users can make changes to the exposed fields using the Views module and the paragraphs settings.

https://www.youtube.com/watch?v=h39RyuMzfBU

The view for the Blog Listings paragraph is not available for editing in the Open Y sandbox, but you can edit the View using your own dedicated instance. Doing so through the UI, however, could have implications for future upgrades.

Content Types that Support Blog Posts

Related/Alternative Paragraphs

2.4.9 - Camp Menu

Camp menu adds a horizontal menu beneath the Header Area on a camp page.

Examples

Carnation

carnation&ndash;camp__camp&ndash;menu|690x180, 75%

Lily

lily&ndash;camp__camp-menu|690x242, 75%

Rose

rose&ndash;camp__camp-menu|690x242, 75%


Areas It Can Be Used:

  • Header Area

How It Should Be Used

Before adding the paragraph, add the links you want on your menu by adding them on your Camp Page at General Info > Menu Links.

camp__camp-menu&ndash;menu-links|450x500, 75%

Learn More About Link Fields ⇒

To add additional links to your menu, click on the Add Another Item button.

camp__camp-menu&ndash;add-links|690x194

Once you’re done adding your menu links, scroll down to the Header Area and add “Camp Menu.” Click save.

Note - While it is technically possible to position the camp menu above your banner image, it is not recommended. The camp menu busts in desktop on Carnation, and in all themes it can be hard to distinguish the camp menu from your main navigation.


Mobile Considerations for Camp Menu

When a user views your camp menu in mobile, the menu doesn’t collapse; it merely shrinks. Menu items either disappear or wrap onto a new line if they do not fit the space.

It’s recommended you limit your menu items to no more than 3 or 4 unless you opt to customize.

carnation&ndash;camp__camp-menu&ndash;mobile|322x500, 75%


Content Types That Support this Paragraph

2.4.10 - Categories Listing

Embeds horizontal cards for program subcategories on a programs page.

Examples

Carnation

Desktop

carnation&ndash;program__categories-listing|690x482, 75%

Mobile

carnation&ndash;program__categories-listing&ndash;mobile|430x500, 75%

Lily

lily&ndash;program__categories-listing|690x482, 75%

Rose

rose&ndash;program__categories-listing|690x475, 75%


Areas It Should Be Used

  • Content Area

How To Use It:

  • On a Programs page, go to the content area and click to open it.
  • Select Categories listing.

admin-program__programs-listing|690x170, 75%

This paragraph can only used on programs pages that have subcategories tied to them. If a program has no subcategories tied to it or if it’s used on another content type, it will not work.

Learn more about programs content type ⇒

Learn more about programs subcategories content type ⇒


Content Types that Support Categories Listing

2.4.11 - Code

Examples

YMCA of Central Kentucky / Daxko Schedules iframe

y-example&ndash;code__daxko-iframe|690x362, 75%

YMCA of Middle Tennessee / GroupEx Pro Script

y-example&ndash;code__gxp-iframe|690x327, 75%

Areas it Should Be Used

  • Content Area
  • Sidebar Area
  • Bottom Area

How To Use Code

  • Select “Add Code” from the paragraphs dropdown.

    admin&ndash;code__paragraph-dropdown|690x309, 50%

  • You will see two buttons - one to add a custom block, the other to search for a custom block.

  • To search for an existing custom block, type the name of the block in the autocomplete field and click on an option that appears to embed that block.

  • To add a new block, click the “Add New Custom Block” button.

Learn more about blocks ⇒

  • When you add your block, you will see a blank, unformatted text field. Type your HTML text into this field.

admin&ndash;code__block|690x422, 75%

To use code, you must add HTML tags.

Hard returns will be ignored, and text will be printed out in one long string.

Code will not highlight or color-code your HTML.


There is an option to change to a “Full HTML” text editor, which will allow you to make use of the default text editor; however, using this will strip “faulty” HTML out of your block and may prevent you from using certain tags.

Once you’re done, click the button that either says Add custom block or Update custom block, depending on the option you had selected at first.


Content Types that Support Code

2.4.12 - Date Block

A date block allow you to 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.

admin__date-block&ndash;new-block|690x440, 75%

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.

admin__date-block&ndash;start-end-dates|690x354, 50%

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.

admin__date-block&ndash;paragraph-fields|690x354, 50%

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.

admin__date-block&ndash;exsiting-block|690x143, 75%


Editing a Date Block

To edit your block, click “edit” next to the paragraph. You will need to click another “edit” button when the name of your date block appears. Make your changes inside the block and, when you’re done, click “Update Custom Block.”

Making any changes to a date block will change it on every page where it has been added.

Learn more about custom blocks ⇒


Content Types That Support Date Block

2.4.13 - Embedded GroupEx Pro Schedule

What Is Embedded GroupEx Pro Schedule?:

Embeds the out-of-box GroupEx Pro schedule script on a page with a single click.

Example

y-example__gxp-schedule&ndash;houston|690x460, 75%


Areas it Should Be Used

  • Content Area

How it Works

Prerequisite: Requires integration with third-party tool GroupEx Pro.

  • To integrate you GroupEx Pro account, go to the admin toolbar. > > admin__menu&ndash;gxp-account-settings|611x500, 75%
  • Go to Open Y > Integrations > GroupEx Pro > Group Ex Pro Account Settings. Add your account number to the field. That’s it! > admin__gxp-account-settings|690x259, 75%

For information on where to find your GroupEx Pro account number, visit groupexpro.com.


Adding the Paragraph to Your Page

Select Embedded GroupEx Pro Schedule from the paragraphs dropdown. Hit save.

admin__gxp-schedule|690x66


Content Types That Support Embedded GroupEx Pro Schedule


  • Repeat Schedules
  • Repeat Schedules (Branch)

2.4.14 - FAQ

Create an easy-to-read FAQ or policy section with the FAQ paragraph. FAQ adds an accordion tab that expands when users click on it.

Example

carnation&ndash;landing-page__faq|669x500, 50%


Where it Can Be Used

  • Content Area
  • Sidebar Area

How it Works:

  • Select FAQ from the paragraph dropdown

    admin__faq&ndash;dropdown|690x259

  • Add a title or a Question into the Question field. This will show as the title of your section.

  • Use the text editor to provide an answer/expanded section of content once the user clicks on your section.

    admin__faq&ndash;fields|669x500, 75%

    Learn how to use the text editor ⇒


Add Another Section

To add another Question and Answer, click the Add another item button at the bottom of your paragraph.

admin__faq&ndash;fields&ndash;another-item-button|519x103, 50%


Content Types that Support this Paragraph

2.4.15 - Featured Blog Posts

Create a standalone page with a listing of blog posts curated one-by-one. Great for linking in emails and social media posts.

Examples

Carnation

Desktop

carnation&ndash;landing-page__featured-blog-posts&ndash;desktop|690x351, 50%

Mobile

carnation&ndash;landing-page__featured-blog-posts&ndash;mobile|432x500, 50%

Lily

Desktop

lily&ndash;landing-page__featured-blog-posts&ndash;desktop|690x351, 50%

Mobile

lily&ndash;landing-page__featured-blog-posts&ndash;mobile|432x500, 50%

Rose

Desktop

rose&ndash;landing-page__featured-blog-posts&ndash;desktop|690x351, 50%

Mobile

rose&ndash;landing-page__featured-blog-posts&ndash;mobile|432x500, 50%


Areas It Can Be Used

  • Content Area
  • Bottom Area

How to Use It

Add a headline for this section of content in the Headline field.

Next, type in the name of the blog you would like to feature in the autocomplete field. Click on the post when it shows up below.

admin__featured-blog-posts|690x362, 75%

To add another blog post, click the Add another item button. Click the blue save button at the bottom when you’re finished.

admin__faq&ndash;fields&ndash;another-item-button|519x103, 50%


2.4.16 - Featured Content

Featured content adds a section of simple simple columns onto a page with an optional call-to-action button on the bottom, an optional title, and optional description.

Examples

Carnation

carnation&ndash;landing-page__featured-content&ndash;desktop|690x409, 50%

Lily

lily&ndash;landing-page__featured-content&ndash;desktop|690x409, 50%

Rose

rose&ndash;landing-page__featured-content&ndash;desktop|690x409, 50%


Areas It Can Be Used

  • Content Area
  • Bottom Area

Note: The styling for Featured Content differs greatly by theme. This documentation notes the differences in styling between each theme.

Select Add featured content from the paragraphs dropdown. Add an optional headline in the headline field above.

  • Lily/Rose: The headline left-aligns by default.
  • Carnation: The headline center-aligns in Carnation.

Next, add an optional Description using the text editor. Avoid changing your text alignment for your description.

Add an optional link in the link field.

Learn how to use a Link field ⇒


Select the number of columns you would like to have in each row using the style dropdown.

  • Carnation: Due to the card styling in Carnation, this field does not limit the number of cards that will display in a single row. A recommended workaround is to add multiple rows of featured content or use the Grid Content paragraph type.

Advanced users: You can clear the confusion for content editors in Carnation by making the style field an optional field and hiding it in the form display in the UI.

Additionally, you can limit the number of columns to four in the Featured Content’s paragraph settings.

Finally, add content for each column of content using the text editor. To add additional columns click the “Add Another Item” button.

admin__featured-content|690x449, 75%

  • 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.

2.4.17 - Featured News Posts

Featured News Posts creates a standalone page with a listing of news posts curated one-by-one. Great for linking in emails and social media posts.

Examples

Carnation

Desktop

carnation&ndash;landing-page__featured-news-posts&ndash;dekstop|690x288, 50%

Mobile

carnation&ndash;landing-page__featured-news-posts&ndash;mobile|413x500, 50%

Rose

rose&ndash;landing-page__featured-news-posts&ndash;dekstop|690x376, 50%


Areas It Can Be Used

  • Content Area
  • Bottom Area

Add a Headline for this section of content in the Title field.

Next, type in the name of the news post you would like to feature in the autocomplete field. Click on the post when it shows up below.

admin__featured-news-posts|690x409, 50%

To add another news post, click the Add another item button. Click the blue save button at the bottom when you’re finished.

admin__faq&ndash;fields&ndash;another-item-button|519x103, 50%

2.4.18 - Gallery

The Open Y gallery embeds a carousel or slider of images onto a page. The gallery can play on a loop, and users can click back and forth using the arrows.

You can have a gallery with a simple title, and you can also add a description below the headline and/or a call to action button.

Examples

Carnation

Desktop

carnation&ndash;branch__gallery-desktop|690x271, 50%

Mobile

carnation&ndash;branch__gallery-mobile|636x500, 50%

Lily

Desktop

lily&ndash;branch__gallery-desktop|690x307, 50%

Mobile

lily&ndash;branch__gallery-mobile|558x500, 50%

Rose

rose&ndash;branch__gallery-desktop|690x307, 50%


Areas It Can Be Used

  • Header Area
  • Content Area
  • Bottom Area

Once you’ve selected a gallery from the paragraphs dropdown, enter a Headline for the gallery.

Next, if you would like to add a subhead or description below your title, add it below the headline in the Description field.

Only use basic text formatting on your description, such headlines. Avoid using bullets or numbered lists in this field.

Learn more about the text editor ⇒

Optionally, you can add a Link in the link field.

admin__gallery&ndash;link|690x217, 50%

How link fields work in Open Y ⇒

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.

Learn how to upload images in the media 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.

admin__gallery&ndash;rearrange|690x415, 75%

To delete a photo from the gallery, click the delete button below the image.

Hit Save at the bottom of the image to save it.


Content Types that Support Galley

2.4.19 - Grid Content

Grid content allows you to embed one or more rows of up to four sections of content side-by-side. Allows you to have a title with an icon, a description and a link.

Examples

Carnation

carnation&ndash;branch__grid-content|690x326, 50%

Lily

lily&ndash;branch__grid-content|690x326, 50%

Rose

rose&ndash;branch__grid-content|690x217, 50%


Areas It Should Be Used:

  • Content Area
  • Bottom Area

How to Use Grid Content:

Note on Grid Content: This paragraph’s style will vary greatly depending on your theme. The docs outline how to use the fields.

admin__grid-content&ndash;add|669x500, 50%

First, choose Grid Content from the Paragraphs dropdown. You will then see a dropdown with four options under Style:

  • 2 items per row
  • 3 items per row
  • 4 items per row

Select a style to choose how wide you want each section to be; the more items per row, the narrower they will be.

// Examples

// 2 items per row w/ 2 Grid Columns

admin__grid-content&ndash;2-items|669x500, 50%

carnation&ndash;landing-page__grid-content&ndash;2-item-style|690x245, 50%


/// 3 items per row w/ 2 grid columns

admin__grid-content&ndash;3-items|451x500, 50% carnation&ndash;landing-page__grid-content-3-item-style|690x299, 50%

Next, you will see a button that says Add Grid Columns. This is where you will start adding your individual sections/cards.

For each item you add, you will have the following fields:

Note: If you add more items than your selected style, you will create a new row. For example:

  • 2 items per row style, 3 items added -> two rows of content
  • 3 items per row style, 5 items added -> two rows of content
  • 4 items per row style, 9 items added -> three rows of content

Content Types that Support Grid Content

2.4.20 - Latest Blog Posts

(including Camp/Branch)

These three paragraphs embed a listing of blog posts, sorted by the most recent, in a card design.

  • Latest Blog Posts shows all the most recent blog posts across your entire site.

  • Latest Blog Posts (Branch) filters your most recent blog posts by the branch the paragraph is embedded on (for example, if on a Downtown YMCA page, only Downtown YMCA blog posts will show up). Placed on a non-branch page, only the headline will show up.

  • Latest Blog Posts (Camp) filters blog posts by the branch the paragraph is embedded on (for example, if on a Camp Widjiwagan page, only Camp Widjiwagan YMCA blog posts will show up). Placed on a non-camp page, only the headline will show up.

Areas it Should Be Used

  • Content Area
  • Bottom Area

How to Use Latest Blog Posts

From the paragraphs dropdown, add Latest Blog Posts, Latest Blog Posts (Branch) or Latest Blog Posts (Camp). Enter a header title for the section in the text field and hit save.

Unlike the related Blog Posts Listing, this paragraph does not include filters for searching blog posts.

Content Types that Support Latest Blog Posts

Content Types that Support Latest Blog Posts (Branch)

Content Types that Support Latest Blog Posts (Camp)

Related/Alternative Paragraphs

2.4.21 - Latest News Posts

(including 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

carnation&ndash;camp__latest-news-posts&ndash;desktop|690x264, 75%

Rose

rose&ndash;camp__latest-news-posts&ndash;desktop|690x368, 75%

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.

admin__latest-news-posts|690x99


Content Types that Support Latest News Posts

Content Types that Support Latest News Posts (Branch)

Content Types that Support Latest News Posts (Camp)

Related/Alternative Paragraphs

2.4.22 - Limited Time Offer

Documentation in Progress

Limited Time Offer

What it Does: Adds an anchoring element to the bottom of a page, similar to a small banner. Best for promotional offers.

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 an additional subheader below the title field, use the field below.

To add a button, use the link field. Learn how to use the Link field >

Content Types that Support Limited Time Offer

  • Landing Page
  • Camp
  • Branch
  • Facility
  • Program
  • Program Subcategory
  • Class

Related Paragraphs Types

  • Small Banner
  • Promo Card

Additional Screen Shots

2.4.23 - Membership Calculator

Membership Calculator adds an interactive “membership wizard” to an Open Y site.


Areas it Should Be Used

  • Content Area
  • Bottom Area

How to Use Membership Calculator

From the paragraphs drop-down, add the Membership Calculator. No additional configuration is necessary on the page.

The Membership Calculator uses Membership content items. Those will need to be created in order for the Membership Calculator to function.

First, create a Membership node for each membership type your Branch or Association offers. Then, inside each Membership node, add a Membership Info Paragraph with the details of that membership at each of your Locations.

The Membership Calculator is a three-step process:

  1. Membership Type
  2. Primary Location
  3. Summary

Membership Type

This step lists the Title, Image, and Description of each published Member node.

Join___Drush_Site-Install|690x373

Primary Location

This step provides a map with radio buttons for the member to select their primary location. Every location listed in the Open Y Location Filter Settings (see Troubleshooting section below) is listed.

Join___Drush_Site-Install|690x442

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.

Join___Drush_Site-Install|690x227 Join___Drush_Site-Install|690x220

Troubleshooting

On some sites, the second step of the Membership Calculator may not show any locations. In order to resolve this, visit Administration > Open Y > Settings > Open Y Location Filter Settings and ensure that any Branches you want to use in the location search are checked.

Locations_filter_settings___Drush_Site-Install|689x287

Content Types that Support Membership Calculator

2.4.24 - News Posts Listing

News Posts Listing adds a section of listings that link to news posts and dropdown search fields for users to search for news they want to read.


Areas it Should Be Used

  • Content Area
  • Bottom Area

How to Use News Posts

admin__news-posts-listing|690x99, 75%

From the paragraphs dropdown, add the News Posts Listing. Enter a header title for the section in the text field and hit Save.

Note: Advanced users can make changes to the exposed fields using the Views module and the paragraphs settings.

Content Types that Support News Posts

Related/Alternative Paragraphs

2.4.25 - Promo Card

Adds a small individual card to the sidebar of a page. Great for posting evergreen promotional content, such as links to join pages.

Examples

Carnation

carnation__promo-card|652x500, 50%

Lily

lily__promo-card|690x434, 50%

Rose

rose__promo-card|541x500, 50%

Areas It Should be Used

  • Sidebar Area

How to Use the Promo Card

In your sidebar area, select Add Promo Card from the paragraphs list.

You can add an optional large Title in the top text field, while the required Headline field puts a smaller headline below the title.

The description field is a text editor that allows you to enter any content you want with the standard text editor options.

Learn how to use the Text Editor ⇒

You can add link and call to action text in the Link field.

Learn how to use link fields ⇒


Content Types that Support Promo Card

2.4.26 - Secondary Description and Sidebar

Documentation in Progress

Secondary Description and Sidebar

What It Does: Adds a bottom area element for anchoring a page, with a gray background and two columns of reusable content. The right column flushes to the right.

Areas it Should Be Used:

  • Bottom Area

How to Use Secondary Description and Sidebar

Note: This element does not work properly in Carnation.

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.

Learn how to use custom blocks >

Note: When reusing blocks, the icon field does not work in this paragraph. Font awesome icons will render as text.

2.4.27 - Simple Content

What is Simple Content?

Simple content adds a section of non-reusable text onto a page. Good for places where basic text is needed and nothing else.

Areas It Should Be Used

  • Content Area
  • Sidebar Area

How to Use Simple Content

From the paragraphs dropdown, select Add Simple Content. standard text editor will appear, and you can style your text however you want.

Learn How to Use the Text Editor ⇒

Note: In Carnation, stacking multiple sections of simple content on top of one another will not create enough space for users to distinguish between sections.

To create this space, add a pair of hard returns or a horizontal rule at the bottom of your text.

All Content Types Support Simple Content ⇒

2.4.28 - Small Banner

The small banner is a wide, short image that serves as a page header or as a page element, such as an anchor in the bottom area. Comes with fields for a title, background color, description and image.

Examples

Carnation

Desktop

carnation&ndash;landing-page__small-banner|690x182, 75%

Mobile

carnation&ndash;landing-page__small-banner&ndash;mobile|652x500, 50%

Lily

Desktop

lily&ndash;landing-banner__small-banner&ndash;desktop|690x307, 50%

Mobile

lily&ndash;landing-page__small-banner&ndash;mobile|514x500, 50%

Rose

Desktop

rose&ndash;ladning-page__small&ndash;banner&ndash;desktop|690x319, 75%

Mobile

rose&ndash;landing-page__small-banner&ndash;mobile|486x500, 50%

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 Open Y site, talk to your agency partner.

    How to add/edit images ⇒

    *Note: Unlike the Banner, Small Banners don’t come with a specific Link field for buttons without customization.

    To add a button to a small banner, you can use the Text Editor button tool to create a button in your description field.

    How to add buttons in a text editor field ⇒


Content Types that Support Small Banner

2.4.29 - Social Share Icons

Documentation in Progress

Social Share Icons

Want your site visitors to easily share your content on social media? Make it easy for your users with the social share icons paragraphs.

To add the paragraph, simply select it from the paragraphs list, and you’re done!

Advanced

Customizing Your Icons

By default, the social share icons paragraph shows Twitter, Facebook, Pinterest, and a generic “More” icon. To configure these buttons, sign up for an AddThis account.

Once you sign up, choose “Select a Tool.” Then, on the following screen, select “Inline.” Hit Continue.

On the next page, select “Selected by you” and choose the social buttons you would like to appear. Then, click configure tool.

On the next screen, scroll down to the “Just Copy” section and grab your public id (the part after the /s7.addthis.com/js/300/addthis_widget.js#pubid=

Your id should look something like this: ra-5e0fb44ead5eb04f

** If you are having trouble with this, contact your Open Y agency partner, and they can help get this set up for you. You will still need to set up your account.

Go back to your Open Y site and then go to your admin toolbar: Open Y > Setting > AddThis Settings

Paste your public id into the field on the next page. Then click save.

Next, go to Configuration > Development > Performance. Click “Clear All Caches.”

Your new buttons should appear!

Where it Can Be Used

  • Content Area
  • Sidebar Area

2.4.30 - Story Card

Documentation in Progress

Story Card

What It Does: Adds a simple card to the sidebar with a title, headline and call to action.

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.

Carnation Only

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

How to use a Link Field >

This Paragraph works best in Lily and Rose. In Carnation, the Story Card works best inside the News Post, Event, and Blog Post paragraphs.

Advanced

*Note: In the headline area on Lily and Rose, a large quotation mark will display to the left of your headline. This can be easily disabled using the following CSS:

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

Content Types That Support Story Card

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

Additional Screenshots

2.4.31 - Teaser

Documentation in Progress

Secondary Description and Sidebar

What It Does: Adds a bottom area element for anchoring a page, with a gray background and two columns of reusable content. The right column flushes to the right.

Areas it Should Be Used:

  • Bottom Area

How to Use Secondary Description and Sidebar

Note: This element does not work properly in Carnation.

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.

Learn how to use custom blocks >

Note: When reusing blocks, the icon field does not work in this paragraph. Font awesome icons will render as text.

2.4.32 - Webform

This paragraph embeds a Webform onto a page.

Areas it Should be used:

  • Content Area
  • Sidebar Area
  • Bottom Region

How to Use Webform

Prerequisite: You must have your web form created before embedding onto a page. While you can continue to revise and edit your form, using this paragraph will NOT create a webform for you.

Drupal Webform Tutorials (by Jacob Rockowitz) ⇒

Once you’ve selected Webform from the paragraphs dropdown, select the name of the webform you want to embed onto your page.

admin__webform&ndash;select-form|514x499, 75%

Next, you will have the option to open, close or schedule your open/close dates for your webform.

Ignore the “Default submission pairs” field, unless you’re a YAML wizard and want to have some default values for certain fields in case your users forget to fill them out.


Content types that Support Webform

2.5 - Taxonomy, Vocabularies, and Terms

Group pieces of related content together for tagging, filtering, sorting and grouping with Open Y’s tagging system.

The Taxonomy feature in Open Y creates organized lists of categories, which allow you to group content, create folders for Images ( in Open Y 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 Open Y for details).

How to Edit Vocabulary Lists

Go to Structure > Taxonomy. When you find the Vocabulary you want to edit, click List Terms.

admin__admin-menu&ndash;taxonomy|196x500, 100%

admin__taxonomy&ndash;vocabulary-options|450x240, 50%

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.

admin__taxonomy&ndash;rearrange|662x204, 75%

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.

admin__taxonomy&ndash;color-vocabulary&ndash;grey-edit|358x500, 75% admin__taxonomy&ndash;color-vocabulary&ndash;grey-edit-1|690x365, 75%

Vocabularies in Open Y

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.

carnation&ndash;landing-page__locations|690x396, 75%

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 (Open Y 2.4 and later)

Creates folders for your images in the media browser.

View Media Folders tutorial ⇒

Media Tags

Creates tags for filtering images (Open Y 2.3.3 and earlier), Documents and Videos in the media browser.

https://community.openymca.org/t/video-tutorials-for-images-and-documents/738

2.6 - Images and Documents

Open Y’s media library and browser stores images and files, allowing you to have custom cropping, focal pointing, folders and image styles.

Here is a full list of tutorials on the topic.

Open Y 2.4 and later

Using the new Media Directories Feature

Open Y 2.3.5 and earlier

Images Tutorials

https://community.openymca.org/t/adding-images-open-y-2-3-5-and-earlier-text-editor-open-y-user-docs/662?u=dwells

Embedding Videos in the WYSIWYG

Embedding Documents on a Web Page

2.7 - Webforms

Beyond just a basic contact form, Drupal’s robust webforms features allow you to build interactive webforms with logic-based questions, built-in animation fields and a submissions manager.

Because this is one of the most well-documented applications in the Drupal community, we recommend using the documentation provided by the maintainer of the Webforms module, Jacob Rockowitz.

3 - Content Structure

Welcome to the Content Structure documentation.

Here you can find all needed technical descriptions about content types can be used by Open Y site builders. The Open Y 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 Open Y development timeline.

3.1 - Blocks

3.1.1 - Basic

A simple block with a description.

Fields

NameMachine nameRequiredDescription
Contentfield_block_contentYesWYSIWYG field without summary.

3.1.2 - Block Menu

Implements custom block type with a links.

Fields

NameMachine nameRequiredDescription
Menu Linksfield_menu_block_linksYesThe Menu Links.
Colorfield_menu_block_colorYesSelect colors for menu block background gradient.
Text colorfield_menu_block_text_colorYesSelect text color of the menu block.

3.1.3 - Branch Amenities

A block with amenities list of the current branch.

Fields

NameMachine nameRequiredDescription
Branch amenitiesfield_branch_amYesUses only Custom Formatter to display a list of amenities within Paragraph block.
Linkfield_sb_linkNoLink to display at the bottom of the block.
Titlefield_sb_titleNoTitle to display at top of block.
Icon classfield_icon_classNoProvide a “Font Awesome” icon name, e.g. flag, car, info. Overrides image icon.

3.1.4 - Custom Simple

A simple block with a body.

Fields

NameMachine nameRequiredDescription
Iconfield_iconNoIcon for block.
Icon classfield_icon_classNoProvide a “Font Awesome” icon name, e.g. flag, car, info. Overrides image icon.
Bodyfield_sb_bodyNoEnter body text.
Linkfield_sb_linkNoAdd link to the block.
Titlefield_sb_titleNoTitle to display at top of block.

3.1.5 - Flexible

A block with amenities list of the current branch.

Fields

NameMachine nameRequiredDescription
Node referencefield_node_refYesProvide reference to Node.

3.2 - Content Types

Welcome to the Open Y Content Types documentation

In terms of Open Y - content types are bundles of node entity of the Drupal Framework. You can find a much more low level documentation at drupal.org.

Open Y 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 Open Y upgrade path.

3.2.1 - Activity

Activity content type is used for adding Activities on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the activity item.
Program Subcategoryfield_activity_categoryYesA reference field for selecting the program subcategory.
Content AreaField group
Descriptionfield_activity_descriptionNoTextarea for the description/body with WYSIWYG, without summary.

URL pattern

Content type is using following pattern: /programs/[node:field_activity_category:entity:field_category_program:entity:title]/[node:field_activity_category:entity:title]/[node:title]

3.2.2 - Alert

Alert content type is used for adding alerts on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the activity item.
Background colorfield_alert_colorYesReference field for choosing the term from “Color” vocabulary.
Text colorfield_alert_text_colorYesReference field for choosing the term from “Color” vocabulary.
Icon colorfield_alert_icon_colorNoReference field for choosing the term from “Color” vocabulary. Description for field: “Leave empty to hide icon.”
Placementfield_alert_placeYesSelect list field (singular) for choosing place:
  • Header
  • Footer
Descriptionfield_alert_descriptionYesTextarea for the description/body with WYSIWYG, without summary.
Linkfield_alert_linkNoInternal or external link.
Referencefield_alert_belongsNoEntityreference 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 - Blog

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

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the blog item.
Locationsfield_blog_locationYesReference field to branch and camp nodes. Multiple Values.
Categoryfield_blog_categoryNoReference field for choosing the term from “Blog Category” vocabulary. Multiple Values.
Meta Tagsfield_meta_tagsNoA meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
StylesField group
Stylefield_blog_styleYesSelect list field with multiple options for choosing style:
  • Story Card
  • Photo Card
  • News Card (default)
  • Color Card
Background colorfield_blog_colorNoteaser background color (used when Color Card style is selected.)
Text colorfield_blog_text_colorNoteaser text color (used when Color Card style is selected.)
Content AreaField group
Imagefield_blog_imageNoImage field for the Blog item. Entity reference to Media bundle.
Descriptionfield_blog_descriptionNoTextarea for the description/body with WYSIWYG, without summary.
Contentfield_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Sidebar AreaField group
Related contentfield_blog_relatedNoReference field for choosing related Blog nodes. Multiple Values.
Contentfield_sidebar_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.

URL pattern

Content type is using following pattern: /blog/[node:title]

3.2.4 - Branch

Branch content type is used for adding Branches on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the branch item.
Neighborhoodfield_location_areaNoA taxonomy reference field using the “Area” vocabulary.
Coming Soonfield_location_stateNoA checkbox field to determine branches in development.
Temporary URLfield_location_temp_urlNoA link field to provide a temporary page URL (a blog post, or something else) if the branch is coming soon.
Meta Tagsfield_meta_tagsNoA meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
ContactField group
Addressfield_location_addressYesAn address field that will provide the ability to add details about the locations. Details to be completed:
  • Address
  • City
  • State
  • Zip Code
Branch Coordinatesfield_location_coordinatesNoInput for providing the latitude and longitude information.
Phonefield_location_phoneYesInput for providing the phone information.
Faxfield_location_faxNoInput for providing the fax information.
Emailfield_location_emailNoInput for providing the email information.
Directionsfield_location_directionsNoA link field for adding the directions link.
Branch HoursField group
Branch Hoursfield_branch_hoursParagraphParagraph to indicate the branch hours.
Day of the weekfield_branch_hours_dayNoSelect list with following values:
  • sunday|Sunday
  • monday|Monday
  • tuesday|Tuesday
  • wednesday|Wednesday
  • thursday|Thursday
  • friday|Friday
  • saturday|Saturday
Start/End Timefield_branch_hours_timeNoTextfield with description “e.g. 9am - 5pm, closed.”
Header AreaField group
Contentfield_header_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Content AreaField group
Contentfield_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Bottom AreaField group
Contentfield_bottom_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.

URL pattern

Content type is using following pattern: /locations/[node:title]

3.2.5 - Camp

Camp content type is used for adding Camps on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the camp item.
Menu linksfield_camp_menu_linksYesLink field with multiple values, that should have the Title and Link field. Based on it, we will complete the Camp Menu.
Meta Tagsfield_meta_tagsNoA meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
ContactField group
Addressfield_location_addressYesAn address field that will provide the ability to add details about the locations. Details to be completed:
  • Address
  • City
  • State
  • Zip Code
Camp Coordinatesfield_location_coordinatesNoInput for providing the latitude and longitude information.
Phonefield_location_phoneYesInput for providing the phone information.
Faxfield_location_faxNoInput for providing the fax information.
Emailfield_location_emailNoInput for providing the email information.
Directionsfield_location_directionsNoA link field for adding the directions link.
Header AreaField group
Contentfield_header_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Content AreaField group
Contentfield_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Bottom AreaField group
Contentfield_bottom_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.

URL pattern

Content type is using following pattern: /camps/[node:title]

3.2.6 - Class

Class content type is used for adding Classes on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the class item.
Activityfield_class_activityNoA reference field for selecting the class.
Meta Tagsfield_meta_tagsNoA meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Header AreaField group
Contentfield_header_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Content AreaField group
Descriptionfield_class_descriptionNoTextarea for the description/body with WYSIWYG, without summary.
Contentfield_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Sidebar AreaField group
Contentfield_sidebar_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Bottom AreaField group
Contentfield_bottom_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.

URL pattern

Content type is using following pattern: /programs/[node:field_class_activity:entity:field_activity_category:entity:field_category_program:entity:title]/[node:field_class_activity:entity:field_activity_category:entity:title]/[node:title]/class-times

3.2.7 - Facility

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

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the facility item.
Neighborhoodfield_location_areaNoA taxonomy reference field using the Area Vocabulary(area).
Typefield_facility_typeNoA taxonomy reference field using the “Facility Type” vocabulary.
Facility Branchfield_facility_locNoA entity reference field to reference the related Branch node.
Meta Tagsfield_meta_tagsNoA meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
ContactField group
Addressfield_location_addressYesAn address field that will provide the ability to add details about the locations. Details to be completed:
  • Address
  • City
  • State
  • Zip Code
Facility Coordinatesfield_location_coordinatesNoInput for providing the latitude and longitude information.
Phonefield_location_phoneYesInput for providing the phone information.
Faxfield_location_faxNoInput for providing the fax information.
Emailfield_location_emailNoInput for providing the email information.
Directionsfield_location_directionsNoA link field for adding the directions link.
Content AreaField group
Contentfield_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Sidebar AreaField group
Contentfield_sidebar_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.

URL pattern

Content type is using following pattern: /facility/[node:title]

3.2.8 - Landing Page

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

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the landing page item.
Layoutfield_lp_layoutYesSelect list with the options:
  • one_column_clean|One Column - Full width
  • one_column|One Column
  • two_column|Two Columns
  • two_column_fixed|Two Columns with fixed sidebar (sticky at the top)
Meta Tagsfield_meta_tagsNoA meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Header AreaField group
Contentfield_header_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Content AreaField group
Contentfield_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Sidebar AreaField group
Contentfield_sidebar_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Bottom AreaField group
Contentfield_bottom_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.

URL pattern

Content type is using following pattern: [node:title]

3.2.9 - Membership

Membership content type is used for adding membership on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the membership item.
Descriptionfield_mbrshp_descriptionYesTextarea for the description/body with WYSIWYG, without summary.
Imagefield_mbrshp_imageYesMedia field to upload the image.
Membership infofield_mbrshp_infoParagraphParagraph to indicate the location where the membership is available and the URL.
Locationfield_mbrshp_locationNoSelect list with locations (branches). Single value.
Linkfield_mbrshp_linkNoLink field to provide the membership redirect URL.
Join Feefield_mbrshp_join_feeNoDollar value for how much someone has to pay to join.
Monthly Ratefield_mbrshp_monthly_rateNoDollar value for the monthly fee of the membership.

URL pattern

Content type is using following pattern: /membership/[node:title]

3.2.10 - News

News Post content type is used for adding news posts on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the news item.
Locationsfield_news_locationYesReference field to branch and camp nodes. Multiple Values.
Categoryfield_news_categoryNoReference field for choosing the term from “News Category” vocabulary. Multiple Values.
Meta Tagsfield_meta_tagsNoA meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Content AreaField group
Imagefield_news_imageNoImage field for the News item. Entity reference to Media bundle.
Descriptionfield_news_descriptionNoTextarea for the description/body with WYSIWYG, without summary.
Contentfield_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Sidebar AreaField group
Related contentfield_news_relatedNoReference field for choosing related News nodes. Multiple Values.
Contentfield_sidebar_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.

URL pattern

Content type is using following pattern: /news/[node:title]

3.2.11 - Program

Program content type is used for adding Programs on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the program item.
Meta Tagsfield_meta_tagsNoA meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Header AreaField group
Iconfield_program_iconNoA image field, supporting .svg for uploading the program icon.
Imagefield_program_imageNoA image field, for uploading the program image.
Colorfield_program_colorNoReference field for choosing the term from “Color” vocabulary.
Contentfield_header_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types. If this field is not empty, then the image and icon are not displayed on the page.
Content AreaField group
Descriptionfield_program_descriptionNoTextarea for the description/body with WYSIWYG, without summary.
Contentfield_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Sidebar AreaField group
Contentfield_sidebar_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.

URL pattern

Content type is using following pattern: /programs/[node:title]

3.2.12 - Program Subcategory

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

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the program subcategory item.
Programfield_category_programYesA reference field for selecting the program.
Meta Tagsfield_meta_tagsNoA meta tags field allows us to provide structured metadata and Graph meta tags for Facebook, Pinterest, LinkedIn and other social networking sites.
Header AreaField group
Imagefield_category_imageNoA image field, for uploading the category image.
Colorfield_category_colorNoReference field for choosing the term from “Color” vocabulary.
Contentfield_header_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Content AreaField group
Descriptionfield_category_descriptionNoTextarea for the description/body with WYSIWYG, without summary.
Contentfield_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Sidebar AreaField group
Contentfield_sidebar_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.
Bottom AreaField group
Contentfield_bottom_contentNoA paragraph embed field that will allow us to add various flexible content modules, from the predefined list of paragraph types.

URL pattern

Content type is using following pattern: /programs/[node:field_category_program:entity:title]/[node:title]

3.2.13 - Session

Session content type is used for adding Sessions on the site.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the session item.
Classfield_session_classYesA reference field for selecting the program subcategory.
Session InfoField group--
Descriptionfield_session_descriptionNoTextarea for the description/body with WYSIWYG, without summary.
Genderfield_session_genderNoSelect List with Gender options: Coed, Male, Female.
Online registrationfield_session_onlineNoBoolean field that determines if the Register Now button/link gets displayed.
Ticket requiredfield_session_ticketNoCheckbox field to indicate that there is a ticket required.
Min Agefield_session_min_ageNoInput field for adding the min age.
Max Agefield_session_max_ageNoInput field for adding the max age.
Registration linkfield_session_reg_linkNoA link field with the Registration link Value.
MembershipField group--
In membershipfield_session_in_mbrshNoBoolean field that helps determine if the session is included into membership package.
Member pricefield_session_mbr_priceNoInput with with the price information for members.
Non Member Pricefield_session_nmbr_priceNoInput with with the price information for members.
LocationField group--
Locationfield_session_locationYesA reference field for selecting the branch or camp.
Physical Locationfield_session_plocationNoA reference field for selecting the facility.
TimeField group--
Exclusionsfield_session_exclusionsNoA date field that identifies dates that would normally have an instance of the session but won’t. Needs to be able to have multiple exclusions. Supports multiple values. Should be handled by a single date field with ’end date’ option enabled. Its widget should be adjust to not to show period end date, but show period end time (to keep period start/end date equal).
Timefield_session_timeParagraphSession schedule.
Date & Timefield_session_time_dateNoThis will use Drupal date/time fields & should be a single date field with ’end date’ and ’end time’ option enabled.
Daysfield_session_time_daysNoCheckboxes with following values:
  • sunday|Sunday
  • monday|Monday
  • tuesday|Tuesday
  • wednesday|Wednesday
  • thursday|Thursday
  • friday|Friday
  • saturday|Saturday
Should support multiple values.

URL pattern

No URL pattern. Eventually this content type shouldn’t be available for end users.

3.2.14 - Social Post

Social Post content type is used for adding Social Posts on the site. Social Posts are grabbed from social networks.

Fields

NameMachine nameRequiredDescription
Titledrupal’s defaultYesTitle of the program item.
IDfield_idYesPost Id in social network. This is system field. Is used by post fetcher.
Imagefield_imageNoImage field for saving post image. Can save jpg and png formats.
Linkfield_linknoContains link to original post in social network.
Platformfield_platformnoThe name of platform where post was imported from.
Postfield_postyesText of post.
Postedfield_postednoDate when post was posted in social network

URL pattern

Content type is using following pattern: /social_post/[node:title]

3.3 - Media

3.3.1 - WYSIWYG View Modes

Listed view modes are available for embedding in WYSIWYG editor.

View Modes

NameMachine nameDescription
Fullembedded_fullThis view mode displays media asset with full width.
Halfembedded_halfThis view mode displays media asset with half width and uses alignment.
Linkembedded_linkThis view mode displays link to media asset.

Bundles details

Image

In “Full” and “Half” view modes image should be display in <img> tag with appropriate classes. Link - should lead to the original image with target=blank.

Video

In “Full” and “Half” view modes should be displayed embedded video with appropriate classes. Link - should lead to the original video with target=blank.

Document

In “Full” and “Half” view modes document should be displayed as iframe, where URL is URL to the document. Also it should have appropriate classes.

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

Link - should lead to the original document with target=blank.

3.4 - Paragraphs

Welcome to Open Y Paragraphs.

Paragraphs are bits of content, components, from component based design ideology. In a scope of Open Y architecture paragraphs are based on Paragraphs Drupal module.

The core idea of paragraphs is to have a nice looking and behaving widget for adding predefined content blocks right in place, without referencing external entities. Keep in mind, that paragraphs are not reusable types. For having reusable type look for blocks or entities in terms of Drupal 8.

Paragraphs were created for making UX better and super convenient.

3.4.1 - 1 Column

This is a paragraph type that will be used for implements a paragraph with 1 column.

Fields

NameMachine nameRequiredDescriptionNotes
Line Abovefield_prfg_display_line_aboveNoDisplay a line above the column.
Columnfield_prgf_1c_columnNoEnter column body.
Paragraph Titlefield_prgf_1c_titleNoEnter title to display at the top of 1 column paragraph.
Paragraph Descriptionfield_prgf_1c_descriptionNoEnter description to display under the 1 column paragraph title.

3.4.2 - 2 Columns

This is a paragraph type that will be used for implements a paragraph with 2 column.

Fields

NameMachine nameRequiredDescriptionNotes
Line Abovefield_prfg_display_line_aboveNoDisplay a line above the column.
Left Columnfield_prgf_2c_leftNoEnter left column body.
Right Columnfield_prgf_2c_rightNoEnter right column body.

3.4.3 - 3 Columns

This is a paragraph type that will be used for implements a paragraph with 3 column.

Fields

NameMachine nameRequiredDescriptionNotes
Line Abovefield_prfg_display_line_aboveNoDisplay a line above the column.
Left Columnfield_prgf_3c_leftNoEnter left column body.
Center Columnfield_prgf_3c_centerNoEnter center column body.
Right Columnfield_prgf_3c_rightNoEnter right column body.
Paragraph Titlefield_prgf_titleNoEnter title to display at the top of 3 columns paragraph.

3.4.4 - 4 Columns

This is a paragraph type that will be used for implements a paragraph with 4 column.

Fields

NameMachine nameRequiredDescriptionNotes
Line Abovefield_prfg_display_line_aboveNoDisplay a line above the column.
First Columnfield_prgf_4c_1stNoEnter first column body.
Second Columnfield_prgf_4c_2ndNoEnter second column body.
Third Columnfield_prgf_4c_3rdNoEnter third column body.
Fourth Columnfield_prgf_4c_4thNoEnter forth column body.
Buttonfield_prgf_4c_buttonNoButton with link to display under 4 column paragraph
Paragraph Titlefield_prgf_titleNoEnter title to display at the top of 4 columns paragraph.
Paragraph Descriptionfield_prgf_descriptionNoEnter description to display under the 4 columns paragraph title.

3.4.5 - All Amenities

Provide a paragraph with a table view shows list of Branches.

Fields

NameMachine nameRequiredDescription
All amenitiesfield_field_prgf_amnts_viewNoPredefined reference to a view to display all amenities.
Titlefield_prgf_titleNoEnter title which is going to be displayed on top of the paragraph.

3.4.6 - Banner

This is a paragraph type that will be used for the banner content.

Fields

NameMachine nameRequiredDescriptionNotes
Headlinefield_prgf_headlineYesHeadline of the banner.Plain text, 255 characters
Colorfield_prgf_colorYesReference field for choosing the term from “Color” vocabulary.
Imagefield_prgf_imageNoEntityreference to media image. Single value.
Descriptionfield_prgf_descriptionNoWYSIWYG field without summary.
Linkfield_prgf_linkNoLink field that should store internal and external links.

3.4.7 - Blog Posts Listing

This is dynamic paragraph that renders the latest blog posts and utilizes exposed filters.

  • Location
  • Category
  • Text

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

3.4.8 - Branches Popup (All)

This is dynamic paragraph that renders the locations selection popup, based on current node.

Relates to:

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

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

3.4.9 - Branches Popup (Class)

This is dynamic paragraph that renders the locations selection popup, based on current node.

Relates to:

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

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

3.4.10 - Categories Listing

This is dynamic paragraph that renders all published categories according to current program page.

It uses sticky at the top option and order items based on published date(newest at the top).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

3.4.11 - Class Location

This is dynamic paragraph that renders the locations class location view mode, based on url query parameter location with a valid id.

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

  • When the page has a location parameter the Branches Popup paragraph will make an “Edit” link on this paragraph visible. That link triggers the Branches Popup to open.

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

3.4.12 - Class Sessions

This is dynamic paragraph that renders the class session instances, based on url query parameter location with a valid id.

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

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

Displayed table

  • Location(should be displayed in case if &location=% not in the URL. Otherwise should be hiddedn.
  • Time + date
  • Registration(link)
  • Details
    • Online registration
    • Ticket required
    • In membership
  • Age Min - Max

Use cases

Use case 3: Class page WITHOUT location popup 3.1 Location in specified URL

  • When I open Class page WITHOUT location popup on page
  • And I have location=% in the URL
  • We skip cookie whether is empty or exist
  • Results should be filtered based on location from URL
  • In sidebar we should see location teaser

3.2 Preferred branch is empty and no location in URL or Preferred branch is selected and no location in URL

  • When I open Class page WITHOUT location popup on page
  • And I don’t have a preferred branch
  • Or I have a preferred branch
  • And I don’t have location=% in the URL
  • Results should contain all branches
  • In sidebar we should see “All locations….”

Use case 4: Class page WITH location popup 4.1 Location in specified URL

  • When I open Class page WITH location popup on page
  • And I have location=% in the URL
  • We skip cookie whether is empty or exist
  • Results should be filtered based on location from URL
  • In sidebar we should see location teaser
  • Location is sidebar should have “Edit” link that will open location popup

4.2 Preferred branch is empty and no location in URL or Preferred branch is selected and no location in URL

  • When I open Class page WITH location popup on page
  • And I don’t have a preferred branch
  • Or I have a preferred branch
  • And I don’t have location=% in the URL
  • Results should contain all branches
  • In sidebar we should see “All locations….”
  • Location popup should be shown (Unless only one location is associated with the class)

3.4.13 - Classes Listing

and classes listing filters

Classes Listing - should display all published classes grouped by activity.

Classes Listing Filters - this paragraph should disply filter form for “Classes Listing” with following fields:

  • Location
  • Program
  • Sub-program
  • Activity

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

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

Use cases

Use case 1: Classes Listing paragraph on a Program subcategory page WITHOUT location popup paragraph 1.1 Preferred branch is selected and no location in URL

  • When I open Program subcategory page with Classes Listing WITHOUT location popup on page
  • And I have a preferred branch
  • And I don’t have location=% in the URL
  • Filter by location should be predefined based on cookie
  • Results should be filtered

1.2 Preferred branch is empty and no location in URL

  • When I open Program subcategory page with Classes Listing WITHOUT location popup on page
  • And I don’t have a preferred branch
  • And I don’t have location=% in the URL
  • Filter by location should show “All”
  • Results should be shown for all branches

1.3 Location in specified URL

  • When I open Program subcategory page with Classes Listing WITHOUT location popup on page
  • And I have location=% in the URL
  • We skip cookie whether is empty or exist
  • Filter by location should show branch from URL
  • Results should be filtered

Use case 2: Classes Listing paragraph on a Program subcategory page WITH location popup 2.1 Preferred branch is selected and no location in URL

  • When I open Program subcategory page with Classes Listing WITH location popup on page
  • And I have a preferred branch
  • And I don’t have location=% in the URL
  • Location popup shouldn’t be shown
  • Filter by location should be predefined based on cookie
  • Results should be filtered

2.2 Preferred branch is empty and no location in URL

  • When I open Program subcategory page with Classes Listing WITH location popup on page
  • And I don’t have a preferred branch
  • And I don’t have location=% in the URL
  • Filter by location should show “All”
  • Results should be shown for all branches
  • Location popup should be shown

2.3 Location in specified URL

  • When I open Program subcategory page with Classes Listing WITH location popup on page
  • And I have location=% in the URL
  • We skip cookie whether is empty or exist
  • Location popup shouldn’t be shown
  • Filter by location should show branch from URL
  • Results should be filtered

3.4.14 - Code

Provide paragraph containing a Code block. Can be used to embed Youtube video for instance.

Fields

NameMachine nameRequiredDescription
Codefield_prgf_code_blockYesBlock reference to Code block. Create a new one or pick up an existed Code block.

3.4.15 - Featured Blog Posts

This is a paragraph type that will be used for the featured stories.

Fields

NameMachine nameRequiredDescription
Headlinefield_prgf_headlineNoHeadline of the banner.
Blog Postsfield_fblog_postsYesMultiple values. Reference field to Blog posts.

3.4.16 - Featured Content

This is a paragraph type that will be used for the featured content.

Fields

NameMachine nameRequiredDescription
Headlinefield_prgf_headlineNoHeadline of the featured content.
Descriptionfield_prgf_descriptionNoTextarea for the description/body with WYSIWYG, without summary.
Linkfield_prgf_linkNoLink field that supports internal and external URLs.
Stylefield_prgf_grid_styleYesSelect list with following values: 2:2 items per row, 3:3 items per row, 4:4 items per row
Column descriptionfield_prgf_fc_clm_descriptionNoMultiple values. Textarea for the column with WYSIWYG, without summary.

3.4.17 - Featured Highlights

Provides a paragraph containing blocks of specific types positioned as 2, 3 or 4 blocks per row.

Fields

NameMachine nameRequiredDescription
Titlefield_prgf_titleNoParagraph title.
Stylefield_prgf_grid_styleYesSelect list with following values: 2:2 items per row, 3:3 items per row, 4:4 items per row.
Featured Highlights blockfield_prgf_block_ref_unlimYesCreate a new one or pick up an existing block of given types: Featured Highlight Block, Basic Block, Simple Block, Date block.

3.4.18 - Featured News Posts

This is a paragraph type that will be used for the featured news.

Fields

NameMachine nameRequiredDescription
Headlinefield_prgf_headlineNoHeadline of the banner.
News Postsfield_fnews_postsYesMultiple values. Reference field to News posts.

3.4.19 - Gallery

This is a paragraph type that will be used for the gallery content.

Fields

NameMachine nameRequiredDescription
Headlinefield_prgf_headlineYesHeadline of the gallery.
Descriptionfield_prgf_descriptionNoWYSIWYG field without summary.
Linkfield_prgf_linkNoLink field that should store internal and external links.
Imagesfield_prgf_imagesNoEntityreference to media image. Multiple values.

3.4.20 - Grid columns

This is a paragraph type that will be used for field_grid_columns the in Grid Content paragraph.

Fields

NameMachine nameRequiredDescription
Descriptionfield_prgf_grid_clm_descriptionNoTextarea for the description/body with WYSIWYG, without summary.
Headlinefield_prgf_clm_headlineNoHeadline of the grid content.
Iconfield_prgf_clm_iconNoEntityreference to media asset. Should allow to upload svgs.
Icon classfield_prgf_clm_classNoInput field that allows to add the font-awesome icons needed. Description - “Provide a “Font Awesome” icon mane, e.g. flag, car, info. Overrides image Icon.”
Linkfield_prgf_clm_linkNoLink field that supports internal and external URLs.

3.4.21 - Grid Content

This is a paragraph type that will be used for the grid content stories.

Fields

NameMachine nameRequiredDescription
Stylefield_prgf_grid_styleYesSelect list with following values: 2:2 items per row, 3:3 items per row, 4:4 items per row
Contentfield_grid_columnsParagraphGrid columns
Descriptionfield_prgf_grid_clm_descriptionNoTextarea for the description/body with WYSIWYG, without summary.
Headlinefield_prgf_clm_headlineNoHeadline of the grid content.
Iconfield_prgf_clm_iconNoEntityreference to media asset. Should allow to upload svgs.
Icon classfield_prgf_clm_classNoInput field that allows to add the font-awesome icons needed. Description - “Provide a “Font Awesome” icon mane, e.g. flag, car, info. Overrides image Icon.”
Linkfield_prgf_clm_linkNoLink field that supports internal and external URLs.

3.4.22 - Group Schedules

This is dynamic paragraph that renders the group schedules from GroupEx Pro.

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and is configurable in form display.

3.4.23 - Latest Blog Posts

This is dynamic paragraph that renders the latest blog posts that are promoted to the front page.

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

3.4.24 - Latest Blog Posts (Branch)

This is dynamic paragraph that renders the latest blog posts associated with a branch.

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

3.4.25 - Latest Blog Posts (Camp)

This is dynamic paragraph that renders the latest blog posts associated with a camp.

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

3.4.26 - Latest News Posts

This is dynamic paragraph that renders the latest news posts that are promoted to the front page.

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

3.4.27 - Latest News Posts (Branch)

This is dynamic paragraph that renders the latest news posts associated with a branch.

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

3.4.28 - Latest News Posts (Camp)

This is dynamic paragraph that renders the latest news posts associated with a camp.

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

3.4.29 - Limited Time Offer

This Paragraph add limited time offer for Home Page based on Landing Page CT.

Fields

NameMachine nameRequiredDescription
Subtitlefield_lto_subtitleNoEnter subtitle for Limited time offer.
Linkfield_lto_linkNoAdd link for Latest time offer.
Titlefield_lto_titleNoEnter title for the Limited Time Offer.

3.4.30 - Location finder

This is paragraph that renders the Location finder block.

Location finder block contains locations views displays with branches, camps and facilities.

Fields

NameMachine nameRequiredDescription
Location finderfield_prgf_location_finderNoBlock reference to the location_finder block. Should have default value and should be hidden in form display.

3.4.31 - Location finder filters

This is paragraph that renders the Location finder map with pins and filters.

Fields

NameMachine nameRequiredDescription
Location finderfield_prgf_location_finderNoBlock reference to the location_finder block. Should have default value and should be hidden in form display.
Tags stylefield_prgf_lf_tags_styleYesTags style that will be used for map tags filter. Default - checkboxes. Second option is multiselect widget with checkboxes.

3.4.32 - Membership info

This is a paragraph type that will be used for field_mbrshp_info the in Membership CT.

Fields

NameMachine nameRequiredDescription
Locationfield_mbrshp_locationNoSelect list with locations (branches). Single value.
Linkfield_mbrshp_linkNoLink field to provide the membership redirect URL.
Join Feefield_mbrshp_join_feeNoDollar value for how much someone has to pay to join.
Monthly Ratefield_mbrshp_monthly_rateNoDollar value for the monthly fee of the membership.

3.4.33 - Microsites menu

Provide paragraph containing a microsites menu block.

Fields

NameMachine nameRequiredDescription
Menu Blockfield_prgf_block_refYesBlock reference to the view/block. Create a new one or pick up an existed menu block.
Hide Main Menufield_prgf_ms_menu_hide_menuNoWhether to hide or not the main website menu.

3.4.34 - News Posts Listing

This is dynamic paragraph that renders the latest news posts and utilizes exposed filters.

  • Location
  • Category
  • Text

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

3.4.35 - Program Registration (Daxko)

This is paragraph that renders the Programs Search Block.

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

Relates to: Daxko

Daxko & Program Registration (Daxko) configuration must be setup before the Program Registration paragraph will work.

Configuration setting at /admin/config/development/daxko/programs-search

Fields

NameMachine nameRequiredDescription
Program registration blockfield_prgf_reg_blockNoBlock reference to the programs_search_block block. Should have default value and should be hidden in form display.

3.4.36 - Promo Card

This is a Paragraph type that will be used for the Promo Cards.

Fields

NameMachine nameRequiredDescription
Titlefield_prgf_titleNoTitle of the Promo Card.
Headlinefield_prgf_headlineYesHeadline of the Promo Card.
Descriptionfield_prgf_descriptionNoWYSIWYG field without summary.
Linkfield_prgf_linkNoLink field that should store internal and external links.

3.4.37 - Schedule search form

This is dynamic paragraph that renders the session instances filters for [Schedule search list](Schedule search list.md).

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

3.4.38 - Schedule search list

This is dynamic paragraph that renders the session instances, based on url parameters, and or filters from [Schedule search form](Schedule search form.md).

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

Fields

NameMachine nameRequiredDescription
Blockfield_prgf_blockYesBlock reference to the view/block. Should have default value and should be hidden in form display.

Use cases

Use case 1: Schedule search list paragraph on a page WITHOUT location popup paragraph 1.1 Preferred branch is selected and no location in URL

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

1.2 Preferred branch is empty and no location in URL

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

1.3 Location in specified URL

  • When I open Schedule search list page WITHOUT location popup on page
  • And I have location=% in the URL
  • We skip cookie whether is empty or exist
  • Filter by location should show branch from URL
  • Results should be filtered

Use case 2: Schedule search list paragraph on a page WITH location popup 2.1 Preferred branch is selected and no location in URL

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

2.2 Preferred branch is empty and no location in URL

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

2.3 Location in specified URL

  • When I open Schedule search list page WITH location popup on page
  • And I have location=% in the URL
  • We skip cookie whether is empty or exist
  • Location popup shouldn’t be shown
  • Filter by location should show branch from URL
  • Results should be filtered

3.4.39 - Secondary Description and Sidebar

This is a Paragraph type that will be used for the paragraphs with left (secondary description) and right (sidebar) blocks.

Fields

NameMachine nameRequiredDescription
Left Columnfield_prgf_left_column_blockNoBlock reference to: Basic Block, Code Block, Date block or Simple Block. Create a new one or pick up an existed block.
Right Columnfield_prgf_right_column_blockNoBlock reference to: Basic Block, Code Block, Date block or Simple Block. Create a new one or pick up an existed block.

3.4.40 - Session Time

This is a paragraph type that will be used for field_session_time the in Session CT.

Fields

NameMachine nameRequiredDescription
Date & Timefield_session_time_dateNoThis will use Drupal date/time fields & should be a single date field with ’end date’ and ’end time’ option enabled.
Daysfield_session_time_daysNoCheckboxes with following values: Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday

3.4.41 - Simple Content

Simple Content is used for adding text to the pages.

Fields

NameMachine nameRequiredDescription
Contentfield_prgf_descriptionYesWYSIWYG field without summary.

3.4.42 - Small Banner

This is a paragraph type that will be used for the banner content.

Fields

NameMachine nameRequiredDescriptionNotes
Colorfield_prgf_colorYesReference field for choosing the term from “Color” vocabulary.
Headlinefield_prgf_headlineYesHeadline of the Small banner.Plain text, 255 characters
Imagefield_prgf_imageNoEntityreference to media image. Single value.
Descriptionfield_prgf_descriptionNoWYSIWYG field without summary.

3.4.43 - Social Post Listing

This is dynamic paragraph that renders the latest social posts that were imported from social networks.

Fields

NameMachine nameRequiredDescription
Titlefield_prgrf_sl_titleNoTitle for block with social posts.
Descriptionfield_prgrf_sl_descriptionNoDescription for block with social posts.
Social Listfield_prgrf_sl_blockNoReference to views block which select posts and show them as masorny grid.

3.4.44 - Social Share Icons

This is a paragraph type that will be used for the add social media share. See more How to configure AddThis

Fields

NameMachine nameRequiredDescriptionNotes

3.4.45 - Story Card

This is a Paragraph type that will be used for the Story Cards.

Fields

NameMachine nameRequiredDescription
Titlefield_prgf_titleNoTitle of the Story Card.
Headlinefield_prgf_headlineYesHeadline of the Story Card.
Linkfield_prgf_linkNoLink field that should store internal and external links.

3.4.46 - Teaser

This is a paragraph type that will be used for the teaser content.

Fields

NameMachine nameRequiredDescription
Titlefield_prgf_titleNoTitle of the Teaser.
Imagefield_prgf_imageNoEntityreference to media image. Single value.
Descriptionfield_prgf_descriptionNoWYSIWYG field without summary.
Linkfield_prgf_linkNoLink field that should store internal and external links.

3.4.47 - Webform

This is a paragraph type that will be used for the embedding webforms.

Fields

NameMachine nameRequiredDescription
Embedded Webformfield_prgf_webformNoEmbedded webform entityreference (select). Single value.
Default webform submission data (YAML)field_prgf_webform_default_dataNoYAML code for passing in default values to webform.
Webform statusfield_prgf_webform_statusNoStatus of webform on render. Radio with 2 options, open or closed (Closed prevents further submissions).

3.5 - Taxonomy

3.5.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.5.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.5.3 - Blog Category

This is a vocabulary that will be used for adding blog categories on the site.

Machine_name: blog_category

3.5.4 - Color

This is a vocabulary that will be used for adding colors on the site.

Machine_name: color

Fields

NameMachine nameRequiredDescription
Namedrupal’s defaultYesColor name.
Colorfield_colorYesColor selector.

3.5.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.5.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.5.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 Open Y distribution.

Here you can find all needed documentation and how-to work with Open Y codebase from developer’s point of view.)

4.1 - Acceptance Testing

Open Y 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 Open Y 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 Open Y community.

Every pull request should include a testing plan prior to release into Open Y. 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 Open Y, 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 Open Y 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 Open Y 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 Open Y 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 Open Y 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 Open Y 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 Open Y 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 Open Y 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.2 - AddThis

How to configure AddThis

Open Y AddThis module allow you easy add Social icons to any node.

  1. Go to http://www.addthis.com and create your account and get public id.

  2. Go to admin/openy/settings/openy-addthis add public id Enter Public id

  3. Select the content type for which to show the social icons and save.

How to use AddThis paragraph

You can add AddThis to specific node use ‘Social share icons’ paragraph

  1. Click on ‘Edit’ any node

  2. After content add ‘Social share icons’ paragraph Enter Public id

4.3 - Composer

Please always make sure composer.lock file is updated after any changes in composer.json file. You can use composer update command to update any package, in this case composer will take care about updating of composer.lock file.

composer update drupal/metatag

Also you can use composer update --lock command to force updating of composer.lock file according to dependencies in composer.json.

Please check official composer documentation for details: https://getcomposer.org/doc/01-basic-usage.md

4.4 - Configuration for social posts import

Add import social posts to site (Facebook, Instagram, Twitter)

How configure import of posts from the social networks

Given: As an Open Y site developer, I want to be able import posts from company’s accounts form social networks (Twitter, Facebook, Instagram) and save them as content on the site.

How to:

  • Open configuration page /admin/config/social_feed_fetcher_settings - Configuration -> Social Feed Settings
  • Select checkbox for needed social network and add additional settings. Every social network has their own API, please read documentation for this settings on the official pages of each social networks.
  • When all settings will be filled - click on the button - Run Cron. Import is started.

4.5 - Contributing

Issues

If you have a support request, you’ve found a bug or you have a feature request:

Pull Requests

If you have some time to make a contribution to the project, here are the steps that will help you:

  • Create fork of main project. How to create fork.
  • Commit & push changes into your fork
  • Create new Pull Request. How to create Pull Request.
  • Write steps for review. In this way maintainers can go through steps on build to verify your fix/feature.
  • Ensure steps for review added to README.md file in a module’s/project’s directory if it makes sense to check them on regular basis. Often this is needed for crucial parts of the system which is main business functionality of the component. Example of super simple steps for review see in Quickstart section of location_finder module, please.
  • 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:

  • Create issue on drupal.org
  • Link drupal.org issue to GitHub Pull Request
  • Specify in GitHub Pull Request link to drupal.org issue
  • Once PR has been merged, reviewer will close drupal.org issue with appropriate credits.

4.6 - Create & Use New View Modes

As with any other entity in Drupal, when it comes to render the rendering it in different contexts, you might want to have specific view modes.

Here you can find instructions how you can add new view modes into embedded entity form on Open Y distribution.

Create a new View Mode

  1. Go to ‘View modes’ page: Structure -> Display modes -> View modes (or visit the URL: /admin/structure/display-modes/view Configuration project add/update form

Configuration project add/update form

  1. Create new view mode: click ‘Add view mode’ button and select entity type (or visit the URL: /admin/structure/display-modes/view/add

Configuration project add/update form

or after each entity type you can see ‘Add new {Name} view mode’ and click on it Configuration project add/update form

  1. Select “Media” and then give a name to your new view mode (or visit the URL: /admin/structure/display-modes/view/add/media Configuration project add/update form

Use the View Mode

  1. Go to Configuration -> Text editor embed buttons (or visit the URL: /admin/config/content/embed Configuration project add/update form

Configuration project add/update form

  1. Then make sure you enable the new view mode in “Allowed Entity Embed Display plugins”, and at the bottom of the page click “Save”. Configuration project add/update form

4.7 - Data Layer

See also the Data Layer module README.

The Data Layers module output data on the page in a json format. By default it will output properties (langcode, vid, name, uid, created, status, roles) and related taxonomy for any node, user, or any route based entity.

A limited set of properties are available via the Data Layers configuration form at /admin/config/search/datalayer (langcode, vid, name, uid, created, status, roles).

Adding additional properties can be done through use of hook_datalayer_meta().

function my_module_datalayer_meta() {
  return array(
    'property',
  );
}

It will be added to the page as:

{
  "entityProperty": "whatever the value is"
}

Altering which properties will be output can be done via hook_datalayer_meta_alter().

function my_module_datalayer_meta_alter(&$properties) {
  // Override module norm in all cases.
  unset($properties['entityUid']);

  // Specific situation alteration...
  $type = false;
  if ($obj = _datalayer_menu_get_any_object($type)) {
    if ($type === 'node' && in_array(array('my_bundle', 'my_nodetype'), $obj->type)) {
      // Remove author names on some content type.
      if ($key = array_search('name', $properties)) {
        unset($properties[$key]);
      }
    }
    elseif ($type === 'my_entity_type') {
      // Remove some property on some entity type.
      if ($key = array_search('my_property', $properties)) {
        unset($properties[$key]);
      }
    }
  }
}

Adding additional data can be done using datalayer_add().

function _my_module_myevent_func($argument = FALSE) {
  if ($argument) {
    datalayer_add(array(
      'drupalMyProperty' => $argument,
      'userAnotherProperty' => _my_module_other_funct($argument),
    ));
  }
}

To alter the data to be output use hook_datalayer_alter().

function my_module_datalayer_alter(&$data_layer) {
  // Make the title lowercase on some node type.
  if (isset($data_layer['entityBundle']) && $data_layer['entityBundle'] == 'mytype') {
    $data_layer['entityLabel'] = strtolower($data_layer['entityLabel']);
  }
}

4.8 - Daxko

Relates to: Program Registration (Daxko)

Configuration setting at /admin/config/development/daxko

Account configuration must be setup before the Program Registration paragraph will work.

4.9 - Fonts

From YMCA Link:

Typography is an important element of our brand identity. Cachet and Verdana, the only two fonts used on YMCA collateral, help provide our words with a distinctive look and welcoming feel. And Cachet, as our primary font, should be used for all internal and external materials whenever possible.

To help Ys incorporate the Cachet font into their online applications, Y-USA is now licensing the web font version of Cachet for all YMCAs. Previously, Ys could only access the desktop version of the font from the Brand Resource Center (BRC).

Visit the BRC to:

Once you’ve downloaded the WOFF files, you’ll need to add them to your site. These instructions mirror the walkthrough in this video.

  • Visit Admin > Extend and ensure the “@fontyourface” and “@fontyourface - Local Fonts” modules are enabled.
  • Visit Admin > Appearance > @font-your-face > Custom Fonts
  • Click + Add Custom Font and add each of the Cachet font files you downloaded above with the following settings:
LabelFont FamilyFont StyleFont WeightFont ClassificationFont File
Cachet Extra LightCachetNormal300Sans SerifCachetW05-ExtraLight.woff
Cachet BookCachetNormal400Sans SerifCachetW05-Book.woff
Cachet MediumCachetNormal500Sans SerifCachetW05-Medium.woff
Cachet BoldCachetNormal700Sans SerifCachetW05-Bold.woff

Add_custom_font|591x500

  • After you’ve added each font, Enable them.

Custom_Font|690x156, 100%

  • Your site should now use the Cachet font in headers and other areas. Usage is dependent on the Open Y theme you choose.

This content was originally published on the Open Y Message Board.

4.10 - Google Analytics

Introduction

Open Y uses the Drupal contrib Google Analytics module to enable Google Analytics tracking on your Open Y site.

To get started, you should first create a GA property. Use the Analytics Help for assistance.

Configuration

Configuration is done at the standard module configuration page: /admin/config/services/google-analytics.

Google Analytics Version Compatibility

In the 9.2.11 release in November 2021, Open Y added support for Google Analytics 4. If your site has been updated to Open Y 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.

See this community post for more information.

4.11 - Google Custom Search Configuration

The Open Y release 8.2.4 introduces Google Custom Search 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 Open Y website and going through the installation process via the Web interface, on the 3rd party integration step you can specify Google Search ID. If you specify the Google Search ID in this form your site’s search feature is up.

Existing websites

The search feature is not automatically enabled after upgrading an Open Y website. You have to manually enable it.

In order to do that:

  1. Log in as an admin (or a user with the administrator role).
  2. Go to the Open Y package install page (Admin menu > Open Y > Extend > Install, or /admin/openy/extend/list)
  3. Find the SEARCH package there, tick the checkbox and submit the form.

Now the search modules are enabled and the header of the website should have a search field. Upon installation, the modules create a Landing page for search results and point the header search form to the page.

Configuring the Google Search modules

  1. Go to the Google Search settings form (Admin menu > Open Y > Settings > Google Search settings, or /admin/openy/settings/google-search).
  2. Set the value of the Google Search ID field (see the following section for details) and submit the form.

Obtaining Search Engine ID

  1. Go to https://cse.google.com/, register if you haven’t yet, log in if you aren’t logged in.
  2. Create the Search Engine (this process is explained in Google documentation https://support.google.com/customsearch/answer/4513882?hl=en&ref_topic=4513742):
    1. Click “New Search Engine”.
    2. Specify the domain of your website (e.g. www.openymca.org).
    3. Specify the name of the Search Engine (e.g. openymca.org).
    4. Click “Create”.
  3. On the newly created Search Engine page there is the Search engine ID field. Use this value in the Open Y Google Search configuration form.

Configuring the Search Engine look and feel

  1. Go to Look and feel section of the Search Engine
  2. In the Layout tab, select Full width option and click Save

If this change hasn’t made, the search results on the website are shown in a popup window.

Dealing with ads

By default, newly created Search engines use 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.

Take a look here https://support.google.com/customsearch/answer/4542102?hl=en&ctx=topic

If you are already registered as a Non-profit in Google:

  1. From the CSE Control Panel, select the search engine you want to change.
  2. Click Setup then Make Money
  3. Toggle the Show Ads option to off.

Advanced setup

Official Google documentation https://support.google.com/customsearch/topic/4542213?hl=en&ref_topic=4513868

You can add not only your website’s domain but other domains as well if you have other websites dedicated to your Association but split from the main website.

You can also add not only the whole websites but their parts by specifying patterns like example.com/blog/*.

Refinements and facets

https://support.google.com/customsearch/answer/4542637?hl=en&ctx=topic&topic=2642564&visit_id=637166170019174137-3540762397&rd=1

Refinements let users filter results according to categories you provide.

Refinements appear in the search results page as tabs. The content of each tab is configured in Search features > Refinement section of the Custom Search Control panel.

To set up a dedicated tab in search results for Blog posts do the following:

  1. In Control panel, go to Search features > Refinements
  2. Click Add
    1. Set the name of the refinement to Blog
    2. Select Search only the sites with this label for How to search sites with this label?
    3. Click Ok
  3. Go to Setup
  4. Find Sites to search, click Add
    1. Add the yourymcadomain.org/blog/* in the text field
    2. Select Blog in the Label dropdown
    3. Select Include just this specific page or URL pattern I have entered
    4. Click Save

The search results page now shows the Blog tab that only shows blog entries relevant to the search term.

Promotions

Official Google documentation https://support.google.com/customsearch/answer/4542640?hl=en&ref_topic=4542213

Information for developers

Google Custom Search Developers documentation

Enabling via Drush

Use the following snippet to enable the package on existing websites:

drush en openy_google_search

Configuring the module via Drush

Use the following snippet when you install Open Y via Drush to set the Search Engine ID:

drush site-install openy \
   --account-pass=password \
   --db-url="mysql://user:pass@host:3306/db" \
   --root=/var/www/docroot \
   openy_configure_profile.preset=extended \
   openy_theme_select.theme=openy_rose \
   openy_third_party_services.google_search_engine_id="01234567890123456789:abcedefgh"

The openy_third_party_services.google_search_engine_id parameter sets the Search Engine ID (01234567890123456789:abcedefgh in the example).

Use the following snippet to set the Search Engine ID on already installed websites:

drush config-set openy_google_search.settings google_engine_id "01234567890123456789:abcedefgh"

4.12 - Installation With Drush

Use drush site-install command.

Basically you use something like this:

drush site-install openy --account-pass=password --db-url="mysql://user:pass@host:3306/db" --root=/var/www/docroot

Complete Open Y profile preset and Open Y 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.:

drush site-install openy --account-pass=password --db-url="mysql://user:pass@host:3306/db" --root=/var/www/docroot openy_configure_profile.preset=extended openy_theme_select.theme=openy_rose

4.13 - Module Development

Module content removal

When deleting an entity, where plugins or services of removing module are used, then content removal should be done in the hook_uninstall() of that module. See openy_prgf_camp_menu.install as example.

4.14 - Patch Open Y

Here you can find instructions how you can patch Open Y distribution used on your project.

When you need to patch Open Y

  • In case you found a bug and prepared a patch for Open Y on github.
  • In case you developed a new feature that will be good to have in Open Y and created Pull Request to Open Y repository
  • In case you want to add a feature that added to Open Y but not included yet to Open Y release.

How to patch Open Y via composer?

If you followed instructions docs/Development/Start new Open Y project and you have configured composer.json you need just to do a few simple steps:

  1. Build a link to a patch using pull request ID

    https://patch-diff.githubusercontent.com/raw/ymcatwincities/openy/pull/XXX.patch
    

Where XXX is a number of pull request you want to use.

  1. Add a new section patches to the section extra and add a patch to Open Y repository, as on this example:

    "extra": {
        "installer-paths": {
          ...
        },
        "enable-patching": true,
        "patches": {
            "ymcatwincities/openy": {
                "Patch description": "https://patch-diff.githubusercontent.com/raw/ymcatwincities/openy/pull/XXX.patch"
            }
        }
    }
    
  2. After adding a patch execute command composer update

  3. Verify you can see added changes in Open Y

  4. Enjoy!

4.15 - Search Tracking with Google Analytics

Prerequisites

  • Google Analytics account to track you site should be created.
  • Google Analytics contrib module should be enabled and configured to use existing GA account.

Steps

  1. Log in to Google Analytics account that configured to track your Open Y site.

  2. Click Admin button in bottom right corner of main screen Google Analytics Main Screen

  3. Click View Settings Google Analytics View Settings

  4. Scroll to “Site Search Settings” section and enable “Site Search Tracking” switch Google Analytics Site Search Settings

  5. Fill query parameter field with q, query values and click Save

  6. Reports about the search tracking you can find at main screen in Behavior → Site Search Section

Attention: Data processing latency for search tracking reports is 24-48 hours (see Google’s support doc).

4.16 - Server Requirements

If you need to prepare server for the Open Y instance, here below you should find all needed software to meet its requirements.

List of requirements

  1. Ubuntu LTS (14 or 16) is preferred. CentOS is ok as well. Or even any other Linux distribution, but was not tested by Open Y team so far.

  2. (Drupal 8 server requirements should be met)[https://www.drupal.org/docs/system-requirements/php-requirements].

  3. PHP 5.6+ (PHP 7 is better in terms of performance)

List of PHP modules server should have:

  • php{{ php_version }}
  • php{{ php_version }}-mcrypt
  • php{{ php_version }}-cli
  • php{{ php_version }}-common
  • php{{ php_version }}-curl
  • php{{ php_version }}-dev
  • php{{ php_version }}-fpm
  • php{{ php_version }}-gd
  • php{{ php_version }}-mysql
  • php{{ php_version }}-memcached
  • php{{ php_version }}-imagick
  • php{{ php_version }}-xml
  • php{{ php_version }}-xdebug
  • php{{ php_version }}-mbstring
  • php{{ php_version }}-soap
  • php{{ php_version }}-zip
  1. MySQL 5.5+ . Here are the best settings https://github.com/cibox/cibox/blob/master/core/facade-mysql/defaults/main.yml to get it fast and furious
  2. Apache 2 with mod-php (preffered for stability) or nginx with php-fpm (better for speed and scalability)
  • libapache2-mod-php{{ php_version }}
  1. Memcache server (optional)

  2. Server tools

  • Ansible (optional)
  • Docker (optional)
  • SOLR 4.x (if there will be requirement for SOLR search support)
  • Varnish (optional)

4.17 - Start new Open Y project

Here you can find instructions how you can start project based on Open Y distribution.

New project from scratch based on Open Y

In order to start new project from scratch, you can use installation instructions that will build your project and even add development environment.

Add Open Y to existing Drupal 8 project

Please take a look at the full composer.json file below that you should eventually get.

 Example composer.json (Drupal 8.3.2 + Open Y 1.2)
{
    "name": "drupal/drupal",
    "description": "Drupal is an open source content management platform powering millions of websites and applications.",
    "type": "project",
    "license": "GPL-2.0+",
    "require": {
        "composer/installers": "^1.0.24",
        "wikimedia/composer-merge-plugin": "~1.4",
        "ymcatwincities/openy": "8.*.*",
        "cweagans/composer-patches": "~1.0"
    },
    "minimum-stability": "dev",
    "prefer-stable": true,
    "config": {
        "preferred-install": "dist",
        "autoloader-suffix": "Drupal8",
        "secure-http": false
    },
    "extra": {
        "_readme": [
            "By default Drupal loads the autoloader from ./vendor/autoload.php.",
            "To change the autoloader you can edit ./autoload.php.",
            "This file specifies the packages.drupal.org repository.",
            "You can read more about this composer repository at:",
            "https://www.drupal.org/node/2718229"
        ],
        "merge-plugin": {
            "include": [
                "core/composer.json"
            ],
            "recurse": false,
            "replace": false,
            "merge-extra": false
        },
        "installer-paths": {
          "core": ["type:drupal-core"],
          "libraries/{$name}": ["type:drupal-library"],
          "modules/contrib/{$name}": ["type:drupal-module"],
          "profiles/contrib/{$name}": ["type:drupal-profile"],
          "themes/contrib/{$name}": ["type:drupal-theme"],
          "drush/contrib/{$name}": ["type:drupal-drush"],
          "modules/custom/{$name}": ["type:drupal-custom-module"],
          "themes/custom/{$name}": ["type:drupal-custom-theme"]
        },
        "enable-patching": true
    },
    "autoload": {
        "psr-4": {
            "Drupal\Core\Composer\": "core/lib/Drupal/Core/Composer"
        }
    },
    "scripts": {
        "pre-autoload-dump": "Drupal\Core\Composer\Composer::preAutoloadDump",
        "post-autoload-dump": [
          "Drupal\Core\Composer\Composer::ensureHtaccess"
        ],
        "post-package-install": "Drupal\Core\Composer\Composer::vendorTestCodeCleanup",
        "post-package-update": "Drupal\Core\Composer\Composer::vendorTestCodeCleanup",
        "post-install-cmd": [
            "bash scripts/remove_vendor_git_folders.sh || :"
        ],
        "post-update-cmd": [
            "bash scripts/remove_vendor_git_folders.sh || :"
        ]
    },
    "repositories": [
        {
            "type": "composer",
            "url": "https://packages.drupal.org/8"
        },
        {
            "type": "package",
            "package": {
                "name": "library-kenwheeler/slick",
                "version": "1.6.0",
                "type": "drupal-library",
                "source": {
                    "url": "https://github.com/kenwheeler/slick",
                    "type": "git",
                    "reference": "1.6.0"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "library-dinbror/blazy",
                "version": "1.8.2",
                "type": "drupal-library",
                "source": {
                    "url": "https://github.com/dinbror/blazy",
                    "type": "git",
                    "reference": "1.8.2"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "library-gdsmith/jquery.easing",
                "version": "1.4.1",
                "type": "drupal-library",
                "source": {
                    "url": "https://github.com/gdsmith/jquery.easing",
                    "type": "git",
                    "reference": "1.4.1"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "library-enyo/dropzone",
                "version": "4.3.0",
                "type": "drupal-library",
                "source": {
                    "url": "https://github.com/enyo/dropzone",
                    "type": "git",
                    "reference": "v4.3.0"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "library-jaypan/jquery_colorpicker",
                "version": "1.0.1",
                "type": "drupal-library",
                "source": {
                    "url": "https://github.com/jaypan/jquery_colorpicker",
                    "type": "git",
                    "reference": "da978ae124c57817021b3166a31881876882f5f9"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "library-ckeditor/panelbutton",
                "version": "4.7.0",
                "type": "drupal-library",
                "dist": {
                    "url": "http://download.ckeditor.com/panelbutton/releases/panelbutton_4.7.0.zip",
                    "type": "zip"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "library-ckeditor/colorbutton",
                "version": "4.7.0",
                "type": "drupal-library",
                "dist": {
                    "url": "http://download.ckeditor.com/colorbutton/releases/colorbutton_4.7.0.zip",
                    "type": "zip"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "library-ckeditor/colordialog",
                "version": "4.7.0",
                "type": "drupal-library",
                "dist": {
                    "url": "http://download.ckeditor.com/colordialog/releases/colordialog_4.7.0.zip",
                    "type": "zip"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "library-ckeditor/glyphicons",
                "version": "2.2",
                "type": "drupal-library",
                "dist": {
                    "url": "http://download.ckeditor.com/glyphicons/releases/glyphicons_2.2.zip",
                    "type": "zip"
                }
            }
        }
    ]
}
  1. Add "ymcatwincities/openy": "8.*.*" to the require section in your composer.json, like here

  2. Add all required repositories that are listed here to your composer.json

  3. Add installer path as here to your composer json. See example.

  • composer.json inside of docroot Installer path will look like this:

    "installer-paths": {
        "core": ["type:drupal-core"],
        "libraries/{$name}": ["type:drupal-library"],
        "modules/contrib/{$name}": ["type:drupal-module"],
        "profiles/contrib/{$name}": ["type:drupal-profile"],
        "themes/contrib/{$name}": ["type:drupal-theme"],
        "drush/contrib/{$name}": ["type:drupal-drush"],
        "modules/custom/{$name}": ["type:drupal-custom-module"],
        "themes/custom/{$name}": ["type:drupal-custom-theme"]
    }
    
  • composer.json outside of docroot Installer path will look like this:

    "installer-paths": {
        "docroot/core": ["type:drupal-core"],
        "docroot/libraries/{$name}": ["type:drupal-library"],
        "docroot/modules/contrib/{$name}": ["type:drupal-module"],
        "docroot/profiles/contrib/{$name}": ["type:drupal-profile"],
        "docroot/themes/contrib/{$name}": ["type:drupal-theme"],
        "drush/contrib/{$name}": ["type:drupal-drush"],
        "docroot/modules/custom/{$name}": ["type:drupal-custom-module"],
        "docroot/themes/custom/{$name}": ["type:drupal-custom-theme"]
    }
    
  1. Add "cweagans/composer-patches": "~1.0" to the require section in you composer.json. See example.

  2. Add "enable-patching": true to the extra section in your composer.json See example.

  3. Add "secure-http": false to the config section in your composer.json See example.

  4. Remove composer.lock and vendor folder from the project if they are exist in your folder.

  5. Remove "replace" section from your composer.json

  6. (Optional) If you keep vendor folder in your git repository, we recommend to clean up project from .git folder inside modules and libraries. To do so

  • Add cleaner script to your project from Open Y composer package. You can just copy it and paste onto your project.

  • Adjust folders that you would like to cleanup

  • Execute it in post-install-cmd and post-update-cmd:

    "post-install-cmd": [
        "bash scripts/remove_vendor_git_folders.sh || :"
    ],
    "post-update-cmd": [
        "bash scripts/remove_vendor_git_folders.sh || :"
    ]
    
  1. Run composer install

CIBox

In this section you can learn how to configure development environment and CI server using Open Source product CIBox.

Create project

  1. Generate project based on this quickstart

  2. Add Open Y to the project using (Add Open Y to already existing Drupal 8 project)

  3. Init git and add initial commit

cd OPENY_PROJECT
git init
git commit -m "Init Open Y project"
git remote add origin git@github.com:NAMESPACE/PROJECT.git
git push -u origin master
  1. Spin up your local vagrant machine
vagrant up --provision
  1. Setup CI server for new project based on CIBox documentation.
  • Follow quick start starting from Jenkins Provisioning Step http://docs.cibox.tools/en/latest/Quickstart/#jenkins-provisioning (Here we will get PR builds and DEMO site (DEV environment) with credentials to it )
  • Setup hosting STAGE environment (it should be a 1:1 copy of existing or expected hosting account for ability to provide performance testing there)
  • Setup deployment plans for CI by reusing DEMO builder job

Install Open Y on DigitalOcean

  1. Create new Droplet using “One-click apps” image Drupal 8.*.* on 14.04
  2. Login to server via SSH or web console
  3. Run command
bash <(curl -s https://raw.githubusercontent.com/ymcatwincities/openy/8.x-1.x/build/openy-digital-ocean.sh)
  1. Open link(e.g. http://IP/core/install.php) from console output and finish Open Y installation

Video tutorial

Open Y v1.0b - Install Tutorial

End to end installation

Open Y install - in 16 minutes end to end, no tutorial

4.18 - Tests

These instructions explain how you can run tests.

Behat

Requirements

Run full test suite

  1. Execute command

    $ cd profiles/contrib/openy
    $ sh runtests.sh
    
  2. Open http://site.com/profiles/contrib/openy/build/reports/behat in browser.

Run selenium container + Behat tests in usual way

In order to run only selenium container + behat in usual way:

$ cd profiles/contrib/openy
$ sh runtests.sh --tags run_selenium
$ bin/behat

Stop selenium container

In order to stop selenium container:

$ cd profiles/contrib/openy
$ sh runtests.sh --tags stop_selenium

If necessary, edit behat.local.yml to match your environment.

Visual debugging - Video

When you develop JS tests, it’s important to see what’s going on the Selenium screen. You can easily see this during development.

  1. Install https://www.realvnc.com/download/viewer
  2. Run selenium using command
$ cd profiles/contrib/openy
$ sh runtests.sh --tags run_selenium
  1. Open installed VNC Viewer and connect to the server with IP 192.168.56.132:5901
  • Password = secret
  1. Run tests and you should see everything that is performed by behat tests in VNC client
$ bin/behat

Debugging JavaScript Behat tests

Custom Behat functionality

  • Create entities in table forms, with key to use in reference and reference entities by key.
    • KEY is optional, and must be all CAPS.
    • Taxonomy
      Given I create "taxonomy_term" of type "color" with key for reference:
        | KEY  | name  | field_color |
        | Blue | Blue  | 0000FF      |
        | Red  | Red   | FF0000      |
      
    • Paragraphs
      Given I create "paragraph" of type "small_banner" with key for reference:
        | KEY     | field_prgf_headline | field_prgf_color |
        | banner1 | Headline 1          | Blue             |
        | banner2 | Headline 2          | Red              |
      
    • Media entities
      Given I create "media" of type "image" with key for reference:
        | KEY       | name            | file         |
        | gallery_1 | Gallery image 1 | gallery.png  |
        | gallery_2 | Gallery image 2 | gallery2.png |
        | gallery_3 | Gallery image 3 | gallery3.png |
      
  • Create nodes in table forms, with key to use in reference and reference entities by key.
    • KEY is optional, and must be all CAPS.
    • Basic create
      Given I create "landing_page" content:
        | KEY       | title           | field_lp_layout | field_content |
        | landing_1 | Test Landing 01 | one_column      | banner1       |
        | landing_2 | Test Landing 02 | one_column      | banner2       |
      
    • Vertical field table
      Given I create large "landing_page" content:
        | KEY             | landing_3       | landing_4       |
        | title           | Test Landing 03 | Test Landing 04 |
        | field_lp_layout | one_column      | one_column      |
        | field_content   | banner1         | banner2         |
      
    • Create & view immediately
      Given I view a "landing_page" content:
        | KEY             | landing_5       |
        | title           | Test Landing 05 |
        | field_lp_layout | one_column      |
        | field_content   | banner1         |
      
    • Multiple referenced entities by key on a field.
      Given I create "landing_page" content:
        | KEY       | title           | field_lp_layout | field_content    |
        | landing_6 | Test Landing 06 | one_column      | banner1, banner2 |
      

Example Address and Latitude + Longitude

Fields with sub field/columns: The machine name and columns can be found in the form markup in the field name property. Inspect form field name depicted The first portion, field_location_address represents the Drupal field machine name, while the second array key address_line1 represents the column.

  • Add Address
    Given I view a "branch" content:
        | title                                | Branch Example  |
        | field_location_address:country_code  | US             |
        | :address_line1                       | Main road 10   |
        | :locality                            | Seattle        |
        | :administrative_area                 | WA             |
        | :postal_code                         | 98101          |
    
  • Add Latitude and Longitude
    Given I view a "branch" content:
      | title                          | Branch Example 2 |
      | field_location_coordinates:lat | 47.293433        |
      | :lng                           | -122.238717      |
      | field_location_phone           | +1234567890      |
    

4.19 - Theming and Design

Welcome to Open Y Theming and Design documentation.

How to change styles on content type level

Given: As an Open Y site developer, I want to be able to easily change the CSS for a Camp page independently from a Location page, so I can better customize the site to meet the needs of my customers.

How to:

  • If you need to change CSS on some pages independently, you should enable Custom CSS functionality on the theme configuration page - Custom CSS - check “Enable or disable custom CSS”.
  • Input CSS code into the textarea.

In order to change CSS on each particular page you should use the following selectors:

  • .page-node-type-{node type};
  • .node-id-{node ID};
  • .path-frontpage.

The existing node types are: activity, alert, blog, branch, camp, class, facility, landing-page, membership, news, program, program-subcategory, session.

4.20 - Tour

How to use Open Y Tour Token with Tour

In someone modules have tour tips and for more interactivity, you can add a token with a click to any selector.

  1. In the module open tour yml file. Configuration project add/update form

  2. Select the tip for edit and in body add token like this [openy_tour:click:button_name:selector] Configuration project add/update form

  3. Create hook update for you changes and in command line run drush updb -y

Token components:

[openy_tour:click:button_name:selector]*

openy_tour - token name;

click - command in the token;

button_name - name of button when show in a tip;

selector - selector to be clicked.

Please see and use jQuery selectors.

4.21 - Upgrade path

All changes in configurations should be added to appropriate hook_update_N in order to update already existing environments. We suggest to use https://www.drupal.org/project/confi for working with hook_update_N.

openy.install in profile

In this file we should put updates that are related to the distribution in general and don’t fit into any feature.

  • Enable/Disable module
  • General configs

openy_*.install in modules

In case if you update some configuration for specific feature, make sure that you put updates into appropriate module.

Revert only specific property from config

With config_import module help we can update only part from full config.

For updating specific property in config (use service ‘openy_upgrade_tool.param_updater’):

  1. go to related to this config module

  2. create new hook_update_N in openy_*.install file

  3. in update add next code (this is example):

$config = drupal_get_path('module', 'openy_media_image') . '/config/install/views.view.images_library.yml';
$config_importer = \Drupal::service('openy_upgrade_tool.param_updater');
$config_importer->update($config, 'views.view.images_library', 'display.default.display_options.pager');

Where:

  • $config variable contains path to config with config name
  • “views.view.images_library” - config name
  • “display.default.display_options.pager” - config specific property (you can set value from a nested array with variable depth)

Revert full configs

For updating full config or several configs from directory use service ‘openy_upgrade_tool.importer’.

$config_dir = drupal_get_path('module', 'openy_media_image') . '/config/install';
$config_importer = \Drupal::service('openy_upgrade_tool.importer');
$config_importer->setDirectory($config_dir);
$config_importer->importConfigs(['views.view.images_library']);

Where:

  • $config_dir - path to directory with config
  • “views.view.images_library” - config name

Also you can update several configs from directory:

$config_importer->importConfigs([
  'views.view.images_library',
  'views.view.example_view',
]);

5 - Wiki

This wiki is the primary location for developer documentation for Open Y - a digital transformation platform for YMCAs.

Where to Start

For YMCA Associations

For Developers

For QA Engineers


Table of Contents

Community Guidelines

Best Practices

Getting Started with Open Y Development

Whether you are just getting started with Open Y or need to test a feature in a stable environment, the Open Y Core Team maintains a number of Sandboxes that you can use.

Processes & Components

Environment Setup

Contributing to Open Y

Working with Existing Functionality

Adding and Removing Functionality

Dependency Management

Decoupling Open Y

Ongoing Maintenance

Releases

Update Processes & Notices

These documents are for old versions of Open Y, but may contain useful information for troubleshooting future update issues.

5.1 - Code Review Quality Best Practices

This document serves as an addition to our Code of Conduct and Best Practices. It is more technical and in-depth for specific cases that were discussed during code quality review processes the Open Y team has in place. During this process, all code should be reviewed by 1-2 developers before being merged into the Open Y codebase.

General Rules

Components in Open Y (whether modules, themes, or other code structures) should be, as much as possible, reusable and atomic. All features, content types, settings, styles, etc. should be bundled together to create a cohesive component.

  1. General naming conventions
    1. Features module naming
      1. openy_${entity_type|abbr}_${entity_bundle|abbr}_${feature|optional}
        1. Example: openy_node_blog_feature
        2. openy_prgf_sc_feature -> OpenY Paragraph Simple Content (name within yml)
    2. Fields naming (<=20 chars)
      1. field_${entity_type|abbr}_${entity_bundle|abbr}_{name|abbr}
        1. Example: field_prgf_sc_body
    3. All descriptions are mandatory!
  2. Module naming conventions - Depending on the context we should choose the name from this list:
    1. ${project_name|abbr}_${business_name|abbr} - when the code looks like legacy and has specifics that are not ready to be open-sourced
    2. openy_${business_name|abbr} - when the code is ready to be ejected to OpenY package
    3. ${business_name} - when the code is so abstract that it has no connection to OpenY and is ready to be hosted on Drupal.org as an independent project.

Code Sharing

To support reuse by the community, the MODULE-NAME should relate to the business logic of the module. It is not good to create modules by abstracting them out of the business. All modules that have been shared to drupal.org from past projects were possible to share only because they represent some feature, tied to a business need. For example:

  • personify - module for SOAP related methods for working with Personify API
  • acrypt - Asymmetric crypt algorithm

and so on.

PHP

Return early pattern

To keep readability in functions and methods, it is wise to return early if simple conditions apply that can be checked at the beginning of a method:

<?php

function foo($bar, $baz)
{
    if ($foo) {
        // logic goes here
        return $calculated_value;
    } else {
        return null;
    }
}
?>

It’s better to return early, keeping indentation and brainpower needed to follow the code low.

<?php

function foo($bar, $baz)
{
    if (!$foo) {
        return null;
    }

    // logic goes here
    return $calculated_value;
}
?>

Define early pattern

When you have a condition that aims to change the value of a variable without additional logic, get rid of if else elseif code and instead define your variable early and change it via conditions.

Before:

if ($a = 'hello') {
 $text = 'Welcome to site';
}
else {
 $text = 'Register please';
}

After:

$text = 'Register please';
if ($a = 'hello') {
 $text = 'Welcome to site';
}

Null Checks with isset

isset() verifies if set and not null. There is no need to do additional verification against NULL.

Before:

...
'video' => (isset($feed['profile_media_videos']) || $feed['profile_media_videos'] != NULL) ? $feed['profile_media_videos'] : '',
...

After:

...
'video' => (isset($feed['profile_media_videos'])) ? $feed['profile_media_videos'] : '',
...

Dependency Injection

For the decoupled and easier to upgrade code in Drupal 8+ Dependency injection should be used instead of calling methods from services statically.

See the Drupal API Overview of the Dependency Injection Container and Services.

Before:

...
$node = Drupal::entityTypeManager()->getStorage('node')->load($result->getField('nid')->getValues()[0]);
...

After:

...

$node = $this->entityTypeManager->getStorage('node')->load($result->getField('nid')->getValues()[0]);
...

Creating meaningful log messages

To provide useful logging for site managers, we need to write meaningful log messages with a proper context.

Before:

...
        if($type == 'program') {

          if ($feed['profile_media_videos'] != NULL || $feed['profile_media_images'] != NULL) {
          \Drupal::logger('272')->notice($type);
...

After:

...
        if($type == 'program') {

          if ($feed['profile_media_videos'] != NULL || $feed['profile_media_images'] != NULL) {
          \Drupal::logger('form_import')->notice("FORM IMPORT: type is $type");
...

Maintaining an Upgrade Path

All changes in configurations should be added to appropriate hook_update_N to update already existing environments. We suggest using the Config Importer and Tools package for working with hook_update_N.

Install files

openy.install in profile

In this file, we should put updates that are related to the distribution in general and don’t fit into any feature.

  • Enable/Disable module
  • General configs

openy_*.install in modules

If you update some configuration for a specific feature, make sure that you put updates into this file in the appropriate module.

Config Management

Revert only specific property from config

This is the preferred method of updating configs as it will result in fewer conflicts for upgrading customized Open Y instances.

With config_import module we can update only part of the full config.

For updating specific property in config use the openy_upgrade_tool.param_updater service:

  1. Find the module where your config lives.
  2. Create a new hook_update_N in the openy_*.install file.
  3. In that hook add the update code (for example):
$config = drupal_get_path('module', 'openy_media_image') . '/config/install/views.view.images_library.yml';
$config_importer = \Drupal::service('openy_upgrade_tool.param_updater');
$config_importer->update($config, 'views.view.images_library', 'display.default.display_options.pager');

Where:

  • $config variable contains path to config with config name, like:
  • views.view.images_library - config name
  • display.default.display_options.pager - config specific property (you can set value from a nested array with variable depth)

Revert full configs

This variant uses extensive config file manipulation and increases the time for an upgrade.

For updating full config or several configs from directory use the openy_upgrade_tool.importer service:

$config_dir = drupal_get_path('module', 'openy_media_image') . '/config/install';
$config_importer = \Drupal::service('openy_upgrade_tool.importer');
$config_importer->setDirectory($config_dir);
$config_importer->importConfigs(['views.view.images_library']);

Where:

  • $config_dir - path to directory with config
  • views.view.images_library - config name

Also you can update several configs from a directory:

$config_importer->importConfigs([
  'views.view.images_library',
  'views.view.example_view',
]);

JavaScript includes

image

5.2 - Composer version constraints for Open Y

In 2020, due to changes in Drupal core release management and demand from Open Y customers to improve upgrade path flexibility and stability, the Open Y team added extended composer version constraints to our composer.json.

Examples from composer.json:

  • "drupal/ckeditor_bootstrap_buttons": "^1.2 || ^2.0.0", - this line means previous version was 1.2 or any 1.x starting from 1.2, and latest tested - 2.0.0 with allowed any stable 2.x starting from 2.0.0
  • "drupal/custom_formatters": "^3.0 || ^3.0@beta", - tested with 3.0 beta of custom_formatters and allowed any 3.x starting from 3.0 (when it will be released)

By having multiple OR (||) conditions we are providing information for developers on which versions could be used for upgrades. There are cases when the latest, even stable version of dependency could be incompatible with some other functionality and it makes sense to keep the version older while functionality is in the process of upgrading.

For example, if, for some reason, custom_formatters 3.0 won’t be compatible with any of Open Y 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 Open Y, add a dependency and its version alongside Open Y at the composer require... step.

For example:

from upgrade doc

composer require ymcatwincities/openy:NEW_VERSION_HERE --no-update
composer update --prefer-dist --with-dependencies --prefer-stable --no-suggest

then change the dependency version

composer require ymcatwincities/openy:NEW_VERSION_HERE --no-update
composer require drupal/custom_formatters:3.0@beta1

You can change any of the dependency versions without upgrading Open Y by running only the composer require... command for specific dependencies and Drupal Update DB routines afterward.

Check official Composer documentation about version constraints and updating Drupal modules with Composer.

5.3 - Decouple component from Open Y as independent module project

History

In 2019 the Open Y team started decoupling major components to streamline the distribution and simplify support.

Communication started in the Community Board - Ejecting modules from OpenY distro as independent projects.

The decoupling process is ongoing. See the index of decoupled projects.

In 2021 the Open Y core team faced coupling blockers in the distribution during the upgrade from Drupal 8 to Drupal 9

To formalize the ongoing development and maintenance strategy, the Open Y core team shared its decoupling plan with the wider community in mid-2021.

This document elaborates on those processes.

Policy

  • Every new component or sub-project of Open Y should be developed in its own repository - either on GitHub or Drupal.org.
  • The decoupled project could be
  • 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 Open Y.

Process

for creating a new decoupled component

  1. Create a new GitHub/Drupal.org repository.
  2. Work on getting an initial release with at least beta version stability.
  3. Create a composer.json file for the component in order to be able to start using it via composer. See Virtual Y for an example.
  4. Make it available for the public via packagist.org or drupal.org as a release. Ensure podarok is added as a co-maintainer to the respective system.
  5. Suggest adding to Open Y by opening an issue.
  6. If approved, create a Pull Request adding it as a dependency in composer.json.
  7. Ensure this component is enabled in any of the packages maintained in the Open Y profile installation
  8. Ask for review and release, according to the release plan.

for decoupling an existing component of Open Y

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 Open Y 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 Open Y profile. Remove duplicated code in the same Pull Request in which you add the new dependency.

Examples

How to update module on Drupal.org

  • Git filter-branch to get a history of changes.
  • Change git origin to Drupal.org project.
  • Create a new branch and push the code to Drupal.org.
  • Create and push tag to Drupal.org. Create a release on drupal.org.
  • Update composer.json in this distribution with a new tag.

How to decouple module from YN to Drupal.org

Example: paragraph_skins

git clone git@github.com:ymcatwincities/openy.git decouple
rm -rf decouple_copy && cp -a decouple decouple_copy
cd decouple_copy
git filter-branch --subdirectory-filter docroot/modules/contrib/paragraph_skins
git clean -dfx
git remote remove origin && git remote add origin git@git.drupal.org:project/paragraph_skins.git
git pull origin 8.x-1.x --allow-unrelated-histories
# Resolve conflicts if applicable.
git push origin production:8.x-1.x
# Create tags and release on Drupal.org

How to decouple module from Open Y to Open Y Subprojects

Request a repository for the module. Example: shared_content_server

git clone git@github.com:ymcatwincities/openy.git decouple
rm -rf decouple_copy && cp -a decouple decouple_copy
cd decouple_copy
git filter-branch --subdirectory-filter docroot/profiles/contrib/openy/modules/custom/SOME_MODULE_HERE
git clean -dfx
git remote remove origin && git remote add origin git@github.com:Open-Y-subprojects/SOME_MODULE_HERE.git
git push origin production
# Create composer.json on the decoupled repository. Example: https://github.com/ymcatwincities/openy_activity_finder/blob/4.x/composer.json
git clone git@github.com:ynorth-projects/distribution.git yn-distribution
# Update composer json for distrubution. See below

Example for Activity Finder

References

5.4 - Decoupled (external) projects of OpenY

Inventory of external modules available via Composer

Check all GitHub for the tag openy-decoupled

GitHub hosted

  1. ymcatwincities/openy_block_modal - Implements a simple block with a body and title that will be used to display modal windows.
  2. ymcatwincities/openy_memberships - Membership Framework for OpenY and Drupal.
  3. ymcatwincities/openy_prgf_sidebar_menu - SideBar menu for referencing menu blocks and using in SideBars across different pages.
  4. ymcatwincities/openy_loc_finder - Extended Location Finder
  5. Open-Y-subprojects/reqclique_gxp_sync - Reqclique Group Exercise Sync
  6. open-y-subprojects/virtual_y_signaling_server - Signalling server for Virtual Y
  7. open-y-subprojects/openy_daxko_gxp_syncer - Daxko GroupEx PRO v1 API Syncer into Program Event Framework
  8. open-y-subprojects/ynorth_gxp_spots_proxy - Availability Spots Cache Proxy for Groupex PRO embed API Syncer into PEF
  9. open-y-subprojects/openy_node_alert - Alerts APP for Open Y
  10. open-y-subprojects/openy_focal_point - Open Y Focal Point routines
  11. open-y-subprojects/shared_content_server - Shared Content Server
  12. ynorth-projects/openy_node_session - Open Y Node Session
  13. ynorth-projects/openy_repeat - Repeat API for PEF. Schedules APP built in Vue.js
  14. ynorth-projects/openy_pef_gxp_sync - Groupex Pro Embed/OpenY Syncer into PEF
  15. ymcatwincities/ymca_sync - Syncer backend core
  16. ymcatwincities/openy_activity_finder - Activity Finder app
  17. ymcatwincities/media_entity_document - Media Entity Document
  18. ynorth-projects/openy_prgf_session_table - if you need to present couple of Sessions in a table view without using any complex app like Schedules or Activity Finder

Drupal.org hosted

  1. drupal/upgrade_tool - Open Y Upgrade Tool
  2. ymcatwincities/paragraph_skins - Skins component from OpenY. Decoupled to drupal/paragraph_skins
  3. drupal/openy_autocomplete_path - Open Y Autocomplete Path. Works in Drupal 8 only. Removed from 9.* Open Y releases.

Decoupling mind-map

<code>Open Y decoupling</code>

5.5 - Dependencies in drupal info.yml

In order to generate composer.json, Drupal.org defines specific rules in the modules info.yml file

If you need to add a dependency to the Drupal.org module you should provide a format:

dependencies:
  - drupal:webform

In this case, your module will have composer dependency to drupal/webform

If you make it:

dependencies:
  - whatevernameyouwish:webform

the Drupal.org packaging routine will replace it with drupal:webform on the fly.

In order to break the dependency on composer level but still tell Drupal core to have module dependency while resolving dependencies during the process of enabling the module, you should use the simplified format:

dependencies:
  - webform

In the above case, composer won’t have any dependencies, but your module will require that the webform module be available in the codebase in order to be enabled by Drupal core.

5.6 - Deprecate and remove components from Open Y

Occasionally old code is deprecated from the Open Y codebase. In order to minimize disruption to existing sites, we use the following process:

  1. Decide - Before removing components from the distribution we gather feedback from the community to protect active projects from having components accidentally removed. This is accomplished via messaging in the Open Y Slack and discussion on Monthly calls.
  2. Deprecate - Once a decision is made, we notify users that the feature will be removed soon. The deprecated component is moved from the Open Y package group to the Open Y ( Deprecated ) package group. For example: Deprecate Daxko Program Registration Paragraph. Deprecation notices are posted in point and quarterly releases of Open Y.
  3. Uninstall - Before removing code, components should be uninstalled via an update hook in the distribution and any hard dependencies should be removed. Uninstalls must occur at least one point (fix) release after the deprecation notice.
  4. Remove - Complete removal of the component from the codebase or composer.json should happen at least one quarterly (feature) release after the deprecation notice.

Additionally, the following housekeeping steps should be taken when deprecating a component:

  1. The release where the deprecated component has been uninstalled should be added to the important versions document in the Wiki.
  2. Code should be decoupled to external GitHub repositories with all history of commits, marked as openy-decoupled, and archived.

5.7 - Development FAQ

Open Y Developer FAQ

Local Development

Getting started with a local environment

To start developing you need to obtain the latest Open Y 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 Open Y 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 Open Y team to have as much information about your environment as possible. Before you ask for help, watch this tutorial on how to gather that information.

Debugging with Xdebug in your local

The Docksal project maintains detailed information for using Xdebug with VSCode, PHPStorm, and more.

Contributing

Who should I specify for review?

We have a best practice to get at least 2 independent reviews before merging code. Please request a review from the Open Y Lead Technical Architect (Andrii Podanenko, @podarok) and somebody else (from your team or another Open Y partner).

Who is responsible for merging?

The Open Y Lead Technical Architect (Andrii Podanenko, @podarok) is responsible for final approval, merging, and release management on the Open Y 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 Open Y GitHub repository. Contact the Open Y Lead Technical Architect (Andrii Podanenko, @podarok) to get access. Labels are usually set by the Open Y 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 Open Y have in place?

To get a fully working Open Y site for the code change you are about to push for review there is a build generating system installed for the Open Y 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 Open Y 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 Open Y 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 Open Y ask Open Y 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 Open Y on Pantheon hosting

See request from a community. The solution is described in Pantheon’s documentation on nested docroots. We suggest that you maintain your own composer.json with the specified web-root directory, as described in the Pantheon examples.

5.8 - Drupal 9 core dependencies version flexibility

This document is no longer updated.

To update the version of Drupal being used on your site independent of Open Y see Updating Drupal Core via Composer. Be aware that openy/composer.json may set Drupal core version constraints.


February 2021 release tagged Drupal core both 9.0.x and 9.1.x as allowed to be used.

Composer by default is installing the latest stable version, so a command

composer create-project ymcatwincities/openy-project:dev-9.2.x-development OPENY --no-interaction

will install Open Y on latest 9.1.x Drupal core.

If there is a need to stay on Drupal 9.0.x stable core please use

composer create-project ymcatwincities/openy-project:dev-9.2.x-development OPENY --no-interaction
cd OPENY
composer require drupal/core:~9.0.7

where 9.0.7 - is a needed version for your Open Y instance

For modules see Composer-version-constraints-for-Open-Y

5.9 - GroupEx PRO quick start

This document has been moved to ynorth-projects/openy_pef_gxp_sync.

5.10 - How to contribute large features into Open Y (backporting, etc)

Our best practices for backporting large features into Open Y, contributing code for others to use, can be found on this Open Y message board post.

5.11 - How to develop themes in Open Y

Working with Themes

Each Open Y theme was developed independently, either by the Open Y 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 Open Y profile to independent projects on Drupal.org.

Carnation

Lily

Rose

5.12 - How we release OpenY distribution from code perspective

Repos involved in releases

  1. Open Y Drupal Profile Distribution ymcatwincities/openy
  2. Open Y Project for initiating an Open Y instance - ymcatwincities/openy-project
  3. Continuous Integration/DevOps for rebuilding/installing Open Y - ymcatwincities/openy-cibox-build
  4. CIBox development environment (Virtualbox, Docker, Vagrant) ymcatwincities/openy-cibox-vm
  5. Docksal development environment (Docker, VirtualBox) - ymcatwincities/openy-docksal

Release Management

When tagging a new release of Open Y, the Lead Architect takes the following steps:

  1. Review/Merge/Update ymcatwincities/openy-project (usually composer.json or/and oneline script install) and tag a new release there.
  2. Review/Merge all Pull Requests in ymcatwincities/openy that were planned for release.
  3. Change the Open Y version in openy.info.yml.
  4. Change the Open Y version in major modules if there were changes to them (Activity Finder, PEF, etc).
  5. Create Changelog release notes as a draft and include Contributors as well as major issues fixed/introduced.
  6. Spin up a copy of an Open Y site and check top priority functionality for regressions.
  7. Send for review to Core Team (Craig Paulnock, Paige Kiecker), get approval.
  8. Change the Open Y version to next with -dev suffix for developers in openy.info.yml.
  9. Refresh the Open Y private mirror on the openy.cibox.tools CI server.
  10. Check that the one-click install is working on a fresh DigitalOcean instance ($10: 1CPU 2Gb RAM). Ensure the version of Open Y is the proper one in site info (admin/reports/status).
  11. Publish announcement in #developers Open Y Slack channel.
  12. Publish announcement in #general Open Y Slack channel.

5.13 - Important versions for upgrade path

Open Y 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 Open Y 8.1.2 and want to upgrade to Open Y 8.2.8.5 you should make it in a couple of steps

  1. Upgrade 8.1.2 to 8.1.13.1
  2. Upgrade 8.1.13.1 to 8.2.2.1
  3. Upgrade 8.2.2.1 to 8.2.7.3
  4. Upgrade 8.2.7.3 …

These supplemental documents elaborate on a few specific cases:

Important versions

  • 8.1.13.1 - Optional, when you have a lot of customized code and 8.2.2.1 is failing in most places.
  • 8.2.2.1 - This is a very important step everyone should have. After this version, drush entup stops working. In this version, we finally migrated to the core media subsystem, and before going further it is important to upgrade media by upgrading your site to this version first.
  • 8.2.7.3 - This is a very stable Drupal 8 based Open Y with a bunch of contrib module updates. This is one of the last Drupal 8 based Open Y 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.

See Version Constraints practices for Open Y

Known issues

If you are faced with an issue when composer installs an improper version of drupal/core for the chosen version of Open Y from the list above, please use this trick in order to downgrade:

composer require drupal/core-recommended:9.2.8

Run the above command where your docroot is. Use the current core version instead of 9.2.8.

5.14 - Install Solr site search for Open Y

Open Y leverages Apache Solr for a few features:

Quick Start / Upgrade path

  • Log in as admin.
  • Go to admin/modules and enable the Open Y Search API module.

image

  • Approve the next step for enabling Database Search.

image

  • Go to the Search API configuration page admin/config/search/search-api.
  • Verify that the “OpenY Database Search” server is enabled.
  • Visit “Search content” index.

image

tip: Admins can enable and the Solr search and switch the index between servers.

  • Index content by clicking “Index now”.

image

  • Go to the homepage and search for any keyword.

image

  • Verify search results are displayed correctly.

Starting from the Open Y installer

  • Find the Select search service step displayed during the Open Y installation.
  • Choose from one of these options during installation:
    • None
      • Nothing happens if the user chooses this option, search modules are displayed after installation.
    • Open Y Google Custom Search
      • Google Custom Search configuration form is displayed if the user chooses this option.
      • The Open Y Google Search module is enabled after installation and ready to use.
    • Open Y Search API
      • Search API backend options are displayed in this case with the following options:
        • Database
          • The Open Y 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 Open Y 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.

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 Open Y 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]( https://git.drupalcode.org/project/search_api_solr/-/blob/4.x/modules/search_api_solr_legacy/README.md]. As of January 2022, Search API Solr Legacy supports Solr 3.6 through 6.4.

The error message may look something like this:

Notice: Undefined index: 4.x in Drupal\search_api_solr\Controller\SolrConfigSetController->getConfigFiles()

5.15 - Install SSL certificate for the OpenY site

Web Security and Open Y

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 Open Y on a managed platform you most likely have SSL already configured. If you choose to manage Open Y 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.

5.16 - Open Y 2.0 root YAML files

There are plenty of YAML configuration files at the root of the profile. Some of them are standard Drupal configuration and others are Open Y specific.

Basic .yml files

The following ones are very common and can be found in many Drupal modules:

  • openy.info.yml ( documentation) - defines Open Y as a profile and defines its name and dependencies
  • openy.libraries.yml ( documentation) - defines global Open Y drupal asset libraries
  • openy.permissions.yml - defines global Open Y permissions
  • openy.services.yml ( documentation) - if you are introducing a service that is needed by all (or the majority of) Open Y modules add it here and store the service class file in the openy/src directory

Open Y specific .yml files

There are also a few configurations related to the Open Y installation process and the Open Y package system:

  • openy.installation_types.yml
  • openy.themes.yml
  • openy.packages.yml

Open Y packages

The Open Y package system introduces a new level of abstraction, shifting from the Drupal standard module level to packages. Packages represent complete Open Y 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 Open Y features.

The Open Y system module provides a page where the enabled and available packages are listed and can be installed/uninstalled. See the Open Y Extend page (at /admin/openy/extend).

Open Y Installation types

When an Open Y site is installed there is also another abstraction level - the installation type - which groups packages.

The hierarchy is as follows:

  • installation type
    • package
      • module
      • module
    • package
      • module
      • module
      • module
    • package
      • module
  • installation type
    • package
      • module

openy.installation_types.yml

openy.installation_types.yml defines the high-level presets available during website installation.

File structure:

standard:
  name: Standard
  packages:
    - alerts
    - editorial
    - news
    - seo
    - webform

extended:
  name: Extended
  packages:
    - alerts
    - analytics
    - ...

complete:
  name: Complete/Developer
  hidden: true
  packages:
    - activenet
    - ...

Each installation type has a machine name which is a key of the top-level items.

Properties of installation types:

  • name (required) - a human-friendly name of the installation type
  • packages (required) - a list of Open Y 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 Open Y site is installed using the web interface there is a step where the installation type can be selected.

If an Open Y site is installed using Drush then the installation type can be specified by an optional argument for the drush site-install command ( Installation with Drush):

  drush site-install openy \
     --db-url="mysql://user:pass@host:3306/db" \
     --root=/docroot \
     openy_configure_profile.preset=extended

openy.packages.yml

Packages are defined in openy.packages.yml. This file is placed in the root of the profile, it’s automatically detected and used by the Open Y installation process.

File structure

blog:
  name: 'Blog'
  description: "Blog package provides a set of modules to maintain and create different blog post listings."
  help: '<p>Using Blog package you can create and maintain blog posts and create flexible listings of blog posts. Watch a video below to learn more about blog anatomy.</p>
  <iframe width="560" height="315"
               src="https://www.youtube.com/embed/PTZkgOb8CFE"
               frameborder="0" allow="autoplay; encrypted-media"
               allowfullscreen></iframe>'
  modules:
    - openy_node_blog
    - openy_prgf_blog_listing
    - openy_prgf_featured_blogs
    - openy_prgf_blog_branch
    - openy_prgf_blog_camp
    - openy_prgf_blog_latest
    - openy_txnm_blog_category

camps:
  name: 'Camps'
  description: "Camps package provides a set of modules to maintain camps and add them to the location finder page."
  help: '<p>Using Camps package you can create and maintain Camps and extend location finder page to include them.</p>'
  modules:
    - openy_prgf_camp_menu
    - openy_loc_camp

Each package has a machine name which is a key of the top-level items.

Properties of packages:

  • name (required) - a human-friendly name of the package.
  • description (required) - a short description of the package features to show up on the Open Y 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 Open Y themes are available for installation when a website is being installed.

If an Open Y site is installed using Drush then the theme can be specified by an optional argument for the drush site-install command ( Installation with Drush):

  drush site-install openy \
    --db-url="mysql://user:pass@host:3306/db" \
    --root=/docroot \
    openy_configure_profile.preset=extended \
    openy_theme_select.theme=openy_rose

5.17 - Open Y 3rd-party dependencies

Open Y’s system requirements generally track those of Drupal with some occasional more opinionated recommendations.

General Requirements

Supported versions may differ based on your Drupal version.

Recommended for advanced functionality, but not required:

  • Apache SOLR search server
    • Version 4.9.1 and version 8 have been tested for Activity Finder. Other versions are works in progress.

For high load/performance sites

See also Drupal’s recommendations for managing site performance and scalability.

For development

See our installation instructions for a full walkthrough of these tools.

Software libraries and frameworks

Open Y leverages many other open source frameworks including, but not limited to:

5.18 - Open Y anti spam protection

In order to protect Open Y customers, we have added anti-spam protection based on CAPTCHA and Google reCAPTCHA out of the box in Open Y core

You can check the tutorial for how to install and configure reCaptcha on your site.

In the majority of cases having the above configuration in place will protect you from 99% of spam, unless there is human-entered spam that has no protection. To overcome some human-based spam you should use blacklist logic for blocking email domains, used in spam messages.

For that, you can use the Protected Submissions module module, which allows you to harden all submissions on a site with a list of stop words as well as per-language settings.

Virtual Y use case

In order to overcome caching issues, Virtual Y uses the simple_recaptcha module which could be used in similar cases.

The CAPTCHA + reCAPTCHA module solution has presented some reliability issues. The most recent discussion and fix from drupal.org has also not reliably resolved issues for some clients.

At some point, the “Simple reCaptcha” module was used on a project and had no issues, so we’ve started to replace the “CAPTCHA” + “reCAPTCHA” modules with “Simple reCAPTCHA”.

5.19 - Open Y Code of Conduct and Best Practices

The Open Y community aims to build from the methods and best practices of other open-source projects, such as the Drupal community and the Drupal Ukrainian community.

Bylaws

For the OpenY distribution we have Terms of Use and Participant Agreement.

Development

To understand how we use and develop technologies, refer to the documents below:

JavaScript Code Standards

5.20 - Open Y one-click install how-to

This walk-through is outdated and is in the process of being updated. Instead, try:

Installing Open Y on DigitalOcean droplet

  1. Create Ubuntu 16.04 LTS x64 droplet in area close to your location image

Use 2Gb droplet or more powerful if you need. Do not use 1Gb option - Open Y will fail on it.

  1. Login to the SSH console of the droplet
  2. Follow the comment from https://github.com/ymcatwincities/openy-project/blob/8.1.x/scripts/openyonclickinstall.sh Basically - run a command under root
curl -Ls http://bit.ly/initopeny | bash -s

The command above will run approximately 10 minutes. 4. In the end you should see a message similar to

Open http://127.0.0.1/core/install.php to proceed with OpenY installation.
  1. Open the link from the above message(from your console, not from this document) with your browser and proceed with Open Y installation.

Enjoy.


In order to install the latest beta release of Open Y 2.0 change the command on step 3:

curl -Ls http://bit.ly/initopeny | bash -s beta

If you find any issues please post a message to the issue queue https://github.com/ymcatwincities/openy/issues

5.21 - Open Y Participant Agreement

OPEN Y PARTICIPATION AGREEMENT

This Open Y Participation Agreement (this “Agreement”) is between Open Y, LLC, and participating YMCA member associations in the United States (“Member Associations”). Open Y, LLC 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. Open Y is not a part of YUSA; Open Y is a part of the YMCA of the Greater Twin Cities.

The purpose of the Open Y 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 Open Y’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 Open Y community and are meant to help our YMCA community grow and thrive. Your participation in Open Y means that you agree to the following guidelines and to the Open Y 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. Open Y, LLC provides the Platform to you under license from YUSA. Accordingly, neither Open Y, LLC 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 Open Y. 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 Open Y and you. Open Y 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: Open Y 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. Open Y, LLC may publicly disclose your participation in the project.

Contribution: Open Y encourages Members to contribute to the enhancement, editing, and building of Open Y. To ensure valuable contributions to the community, Open Y encourages Members to stay familiar and up-to-date with the Open Y roadmap, as well as new features in active development. When you make changes that improve Open Y features, please contribute those back to the community by ensuring they are re-useable and decoupled.

Collaboration: Open Y encourages Members to collaborate across the YMCA community to share costs and efforts on building new capabilities.

Transparency: Customizations of code provided by Open Y 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 Open Y for the portion of the Open Y code you use.

Promotion: Open Y encourages Members to share their expertise and Open Y experience to expand its reach and accessibility to experienced and new members alike. There will be many opportunities for members to support Open Y and its marketing and messaging initiatives.

Reporting Problems

If you believe someone has violated the Open Y Community Guidelines, or have any questions or concerns, please contact Open Y, LLC at http://openy.org.

5.22 - Open Y Pull Requests review standard

Check more technical guidelines about our best practices for code quality.

Adherence to Standards

The Open Y Core Team will adhere to the same standards we set for the community for all areas of development and technologies as per the Open Y documentation.

The Open Y 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 Open Y 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 Open Y message board, Slack, and the documentation on GitHub will be updated to reflect the new standards.

Requirements for Pull Requests

  • Code in Pull Requests should follow our established best practices
  • Submitters’ profiles on GitHub or Drupal.org should be up to date and contain at least a name and organization.

Template for the PR

In order to create a good quality Pull Request, we prepared a PR template which is automatically added to new Pull Requests on GitHub.

List of requirements from the template:

  • Provide a link to the original issue, which is going to be fixed by the PR you are creating.
  • All coding styles are fulfilled and there are no issues reported by CodeSniffer. See Code of Conduct.
  • Documentation have been updated according to PR changes.
  • Steps for review have been provided according to PR changes.
    Steps for review
  • Make sure you’ve provided all necessary hook_update_N to support upgrade path.
  • Make sure your git email is associated with an account on drupal.org, otherwise you won’t get commits there.
    drupal.org email
  • If you would like to get credits on drupal.org, check documentation.

5.23 - Open Y Release Schedule and Guidelines

Open Y Release Guidelines

Open Y releases major releases of the base project Open Y 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:

  • New Features
  • New Enhancements
  • New Bugfixes

Minor Releases

Minor releases are numbered 2.x.x and consist of

  • Only bugfixes
  • Never have new features or major enhancements

Release schedule

2021

OpenY/VirtualY Releases for 2021

Prior years

5.25 - Open Y technology pipeline

To deliver the best technologies for the YMCA movement, the Open Y development community maintains the following documents and best practices:

  1. Development FAQ
  2. Open Y Coding Standards
  3. How new technologies and features are added to Open Y
  4. Sandboxes
  5. Smoke Tests
  6. A Slack Team by invite with an #architects_support channel where we discuss technical issues with our partners and YUSA.
  7. A YouTube playlist for Developers
  8. A list of 3rd party dependencies which are reviewed periodically for new features and deprecations.

5.26 - Open Y Terms of Use

Version 2.0, May 2018

This is a free service provided by Open Y, LLC (“we,” “us,” and “our”) for users in the YMCA community (“users,” “you,” and “your”). By using the Open Y 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. Open Y, LLC 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

Open Y, LLC 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 Open Y, LLC, 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 Open Y is based on the Drupal® code base, which is subject to the terms of the Drupal license ( www.drupal.org). Open Y 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 Open Y 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 Open Y. We welcome proposed contributions, however, all contributions are subject to review and approval, and potential modification, before inclusion in a release as part of Open Y.

It is your responsibility to obtain appropriate licensing and attribution for content that you submit to Open Y. 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 Open Y, 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+.

Open Y, LLC 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) Open Y, LLC 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 Open Y, LLC, 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 Open Y, LLC 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 http://openy.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.

5.27 - Open Y update sunset - opt out tutorial

Preamble

Back on 28 Jan 2020 Open Y decided to add an anonymous analytics module openy_analytics which was a free opt-in/opt-out solution for the Core team to gather stats from Open Y sites about the frequency of components used.

The idea behind this was to gather data in order to understand the demand for the components in Open Y and use the data to make better decisions.

Recently, the Open Y Core Team decided to sunset this functionality and remove openy_analytics as well as openy_update modules from the Open Y Distribution, as this feature was rarely used. By sunsetting this functionality, we reduced server load from Open Y instances and archive the analytics server.

How to opt-out from analytics subsystem

Visit Open Y -> Terms and Conditions in your Open Y site instance and uncheck the Optional Permissions checkbox

image

After submitting this form your site will stop sending anonymous data.

If the checkbox was not enabled just disregard it, you didn’t opt-in earlier.

Deprecation action

Uninstall and deprecation was done in #2537

5.28 - OpenY security Drupal-SA-CORE-2018-004

This document is archived but may contain useful information for troubleshooting future updates. For updated update steps, visit How to upgrade Open Y.


To update your OpenY site with security fix from Drupal core https://www.drupal.org/SA-CORE-2018-004 OpenY team is suggesting 2 options- via patch and via Drupal core upgrade(or OpenY upgrade). Drupal core upgrade or OpenY upgrade is not always possible, but security issue should be fixed asap. So consider to apply patch and plan OpenY upgrade later.

How to apply the patch

Patching OpenY releases 8.0.1 - 8.1.10 (Drupal cores 8.2.x, 8.3.x, 8.4.x)

For patching your OpenY release, follow steps below:

  • Login to your production server environment via SSH and find docroot folder of your site codebase. If you installed OpenY by following a tutorial 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/ymcatwincities/openy-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/ymcatwincities/openy-project/8.1.x/scripts/patches/SA-CORE-2018-004.patch

Now you are ready to patch your site. But before patching - make a backup of the file which is about to be patched

sudo cp docroot/core/lib/Drupal/Core/Security/RequestSanitizer.php /var/backups/RequestSanitizer.php
sudo cp docroot/core/modules/file/src/Element/ManagedFile.php /var/backups/ManagedFile.php

To patch your site run the command to test if the patch can be applied:

patch -p1 --dry-run < SA-CORE-2018-004.patch

You should see a result

# patch -p1 --dry-run < SA-CORE-2018-004.patch
checking file core/lib/Drupal/Core/Security/RequestSanitizer.php
checking file core/modules/file/src/Element/ManagedFile.php

In case if result different - stop on this step and let us know you have issue. In case if all good proceed with a command below, which will patch your site:

patch -p1 < SA-CORE-2018-004.patch

You should see the same output as previously, but now your site is patched.

TIP: In case if you are using git repository for your site run

git add docroot/core/modules/file/src/Element/ManagedFile.php docroot/core/lib/Drupal/Core/Security && git commit -m "Patching OpenY core" && git push

to store your patched core into your own repository.

==========================

How to patch your Digitalocean OpenY install

In case if you have followed tutorial 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

  1. Log in as an admin user to your site admin UI by visiting /user/login URI page.
  2. Login to your DigitalOcean cloud console at digitalocean.com and find Access Console in the dropdown for the droplet you are using for the OpenY image
  3. You should see a popup window with a black screen where console asks you for the login. Use root user and a password generated for you upon droplet creation.
  4. After login to a console run the command below, respectively to the version of your Drupal core.

One line script to patch Drupal core for OpenY

Type manually exact line

bash < <(curl -s https://raw.githubusercontent.com/ymcatwincities/openy-project/8.1.x/scripts/patches/runSA-CORE-2018-004.sh)

and hit Enter. You should see OpenY was patched message.

5.29 - OpenY security update how to - Update Drupal core only

This document is archived but may contain useful information for troubleshooting future updates. For updated update steps, visit How to upgrade Open Y.


To update your OpenY site with security fix from Drupal core https://www.drupal.org/sa-core-2018-002 OpenY team is suggesting 2 options- via patch and via Drupal core upgrade(or OpenY upgrade). Drupal core upgrade or OpenY upgrade is not always possible, but security issue should be fixed asap. So consider to apply patch and plan OpenY upgrade later.

How to apply patch

Patching OpenY releases 8.0.1 - 8.1.0 (Drupal core 8.2.x)

For patching your very old OpenY release it is highly recommended to upgrade OpenY to latest version or at least to one of the 8.1.1-8.1.6 (Drupal core 8.3.x) with Drupal core upgrade to 8.3.9 https://www.drupal.org/project/drupal/releases/8.3.9 . In case if it is not possible right now, follow steps below:

ssh -l root YOUR_SERVER_DOMAIN_NAME
cd /var/www/html
wget https://raw.githubusercontent.com/ymcatwincities/openy-project/8.1.x/scripts/patches/8.2.x.patch

Now you are ready to patch your site. But before patching - make a backup of the file which is about to be patched

cp docroot/core/lib/Drupal/Core/DrupalKernel.php /var/backups/DrupalKernel.php

To patch your site run the command to test if the patch can be applied:

patch -p1 --dry-run < 8.2.x.patch

You should see a result

# patch -p1 --dry-run < 8.2.x.patch
checking file docroot/core/lib/Drupal/Core/DrupalKernel.php
checking file docroot/core/lib/Drupal/Core/Security/RequestSanitizer.php

In case if result different - stop on this step and let us know you have issue. In case if all good proceed with a command below, which will patch your site:

patch -p1 < 8.2.x.patch

You should see the same output as previously, but now your site is patched.

TIP: In case if you are using git repository for your site run

git add docroot/core/lib/Drupal/Core/DrupalKernel.php docroot/core/lib/Drupal/Core/Security && git commit -m "Patching OpenY core" && git push

to store your patched core into your own repository.

Patching OpenY releases 8.1.1 - 8.1.6 (Drupal core 8.3.x)

For patching your relatively old OpenY release it is highly recommended to upgrade OpenY to latest version or at least to one of the 8.1.7-8.1.10 (Drupal core 8.4.x) with Drupal core upgrade to 8.4.6 https://www.drupal.org/project/drupal/releases/8.4.6 . In case if it is not possible right now, follow steps below:

ssh -l root YOUR_SERVER_DOMAIN_NAME
cd /var/www/html
wget https://raw.githubusercontent.com/ymcatwincities/openy-project/8.1.x/scripts/patches/8.3.x.patch

Now you are ready to patch your site. But before patching - make a backup of the file which is about to be patched

cp docroot/core/lib/Drupal/Core/DrupalKernel.php /var/backups/DrupalKernel.php

To patch your site run the command to test if the patch can be applied:

patch -p1 --dry-run < 8.3.x.patch

You should see a result

# patch -p1 --dry-run < 8.3.x.patch
checking file docroot/core/lib/Drupal/Core/DrupalKernel.php
checking file docroot/core/lib/Drupal/Core/Security/RequestSanitizer.php

In case if result different - stop on this step and let us know you have issue. In case if all good proceed with a command below, which will patch your site:

patch -p1 < 8.3.x.patch

You should see the same output as previously, but now your site is patched.

TIP: In case if you are using git repository for your site run

git add docroot/core/lib/Drupal/Core/DrupalKernel.php docroot/core/lib/Drupal/Core/Security && git commit -m "Patching OpenY core" && git push

to store your patched core into your own repository.

Patching OpenY releases 8.1.7 - 8.1.9 (Drupal core 8.4.x)

For patching your OpenY release it is highly recommended to upgrade OpenY to latest version (8.1.10 or never) or at least to one of the 8.1.10 (Drupal core 8.4.x) with Drupal core upgrade to 8.4.6 https://www.drupal.org/project/drupal/releases/8.4.6 . In case if it is not possible right now, follow steps below:

ssh -l root YOUR_SERVER_DOMAIN_NAME
cd /var/www/html
wget https://raw.githubusercontent.com/ymcatwincities/openy-project/8.1.x/scripts/patches/8.4.x.patch

Now you are ready to patch your site. But before patching - make a backup of the file which is about to be patched

cp docroot/core/lib/Drupal/Core/DrupalKernel.php /var/backups/DrupalKernel.php

To patch your site run the command to test if the patch can be applied:

patch -p1 --dry-run < 8.4.x.patch

You should see a result

# patch -p1 --dry-run < 8.4.x.patch
checking file docroot/core/lib/Drupal/Core/DrupalKernel.php
checking file docroot/core/lib/Drupal/Core/Security/RequestSanitizer.php

In case if result different - stop on this step and let us know you have issue. In case if all good proceed with a command below, which will patch your site:

patch -p1 < 8.4.x.patch

You should see the same output as previously, but now your site is patched.

TIP: In case if you are using git repository for your site run

git add docroot/core/lib/Drupal/Core/DrupalKernel.php docroot/core/lib/Drupal/Core/Security && git commit -m "Patching OpenY core" && git push

to store your patched core into your own repository.

==========================

How to patch your Digitalocean OpenY install

In case if you have followed tutorial 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

  1. Log in as an admin user to your site admin UI by visiting /user/login URI page.
  2. Go to /admin/reports/status after login and search for Drupal Version string. It should be something like 8.2.x, 8.3.x or 8.4.x (x - some number too, like 8.4.2, for example). Based on your finding follow the steps below to your version
  3. Login to your ВigitalOcean cloud console at digitalocean.com and find Access Console in the dropdown for the droplet you are using for the OpenY image
  4. You should see a popup window with a black screen where console asks you for the login. Use root user and a password generated for you upon droplet creation.
  5. After login to a console run the command below, respectively to the version of your Drupal core.

One line script to patch 8.2.x Drupal core for OpenY

Type manually exact line

bash < <(curl -s https://raw.githubusercontent.com/ymcatwincities/openy-project/8.1.x/scripts/patches/run8.2.x.sh)

and hit Enter. You should see OpenY was patched message.

One line script to patch 8.3.x Drupal core for OpenY

Type manually exact line

bash < <(curl -s https://raw.githubusercontent.com/ymcatwincities/openy-project/8.1.x/scripts/patches/run8.3.x.sh)

and hit Enter. You should see OpenY was patched message.

One line script to patch 8.4.x Drupal core for OpenY

Type manually exact line

bash < <(curl -s https://raw.githubusercontent.com/ymcatwincities/openy-project/8.1.x/scripts/patches/run8.2.x.sh)

and hit Enter. You should see OpenY was patched message.

5.30 - OpenY upgrade for developers - Upgrade to old OpenY 1.x version

This document is archived but may contain useful information for troubleshooting future updates. For updated update steps, visit How to upgrade Open Y.


Upgrade to old, Open Y 1.x version ( tested on upgrading 8.0.2 to 8.1.1.14 )

See upgrade from 8.1.3 to 8.2.2.1

We found the oldest OpenY instance working on 8.0.2 version of OpenY so this document should cover all the way of updating it to the latest version.

Prepare dedicated environment for upgrade testing

Ensure you have working computer or virtual machine with

  • Ubuntu 14.04(16.04 or any decent Ubuntu LTS versions) 64 bit
  • MySQL 5.5+
  • Apache 2.4
  • PHP 5.6-7.1 (7.2 is not supported yet)

OpenY team maintains Vagrant preconfigured Virtualbox based virtual machine with OpenY. Feel free to use it to get working virtual environment. Your own OpenY instance should have Virtual machine injected into your site codebase. Just find Vagrantfile and proceed with vagrant up accordingly to the documentation.

Obtain local copy of your production site

You have to create local copy of your site locally to be able to proceed with the upgrade. For that

  • Make a backup of your production database and copy it to your local machine
  • Make a copy of your production site codebase and copy it to your local machine

  1. Detect version of your OpenY

Starting from OpenY 1.10 release you should see a version of OpenY in your site reports dashboard. For previous versions the best way to check your version is to analyze creation date of index.php pr README.txt file in the docroot folder of your site and compare it to the release date from https://github.com/ymcatwincities/openy/releases . Your OpenY version should be the one which is older than creation date of the files.

  1. Run command with next never version

In a same folder where is your docroot folder run

mv composer.json composer.json.bak || true
wget https://raw.githubusercontent.com/ymcatwincities/openy-project/8.1.x/composer.json
cd docroot/profiles/contrib/openy/
rm -f yparse*
wget https://raw.githubusercontent.com/ymcatwincities/openy-project/8.1.x/scripts/yparse.sh
drush cr
sh yparse.sh | xargs drush en -y
cd ../../../../
composer require ymcatwincities/openy:NEW_VERSION_HERE --no-update
composer update --prefer-dist --with-dependencies --prefer-stable --update-with-all-dependencies --no-suggest
  1. Update the site

Go to docroot folder of your codebase and run

drush updatedb
drush entup

Sometimes, when updatedb fails, it is important to get stable version of some modules we found causing problems

drush dl -y plugin-8.x-2.5 contribute-8.x-1.0-beta7 scheduler-8.x-1.0 views_block_filter_block datalayer simple_menu_icons rabbit_hole metatag simple_sitemap-8.x-2.9 easy_breadcrumb-8.x-1.6
drush en -y plugin contribute scheduler views_block_filter_block datalayer simple_menu_icons rabbit_hole metatag simple_sitemap || true
drush ev "Drupal::service('module_installer')->install(['content_moderation','openy']);"

Ensure commands above finished with no error messages. Best way to check it - run them one more time. If next run shows

$ drush updatedb
No database updates required                                                                                    [success]
$ drush entup
No entity schema updates required                                                                               [success]

You almost 100% proved updated were executed correctly.

  1. Check for regressions

  1. Backup current state of the updated site

  1. Proceed with an update to next version until succeeded (Start from item 1)

5.31 - OpenY upgrade how to for Developers

Review a video about this document.

Before upgrading, please review these required version steps for your upgrade path.

Overview

Upgrade to Open Y 2.x

Prepare dedicated environment for upgrade testing

Ensure you have a working computer or virtual machine with:

  • Ubuntu 20.04 (16.04, 18.04, or any decent Ubuntu LTS version) 64 bit
  • MySQL 5.7+ (8+ is preferred because of the performance improvements)
  • Apache 2.4 (or Nginx + php-fpm in case if you are fine with htaccess issues down the road)
  • PHP 7.4 (8.0+ could be an issue with some contrib modules)
  • Drush 8.4.10 system version (for Open Y pre 8.2 ). No support for Drush 9.x in Drupal 8 branches. Only in Drupal 9. Use Drush 8.4+ for OpenY 9.2+

The Open Y team maintains Vagrant preconfigured Virtualbox based virtual machine with OpenY. Feel free to use it to get a working virtual environment.

Your own Open Y instance should have a virtual machine injected into your site codebase. Just find Vagrantfile and proceed with vagrant up accordingly 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 Open Y.

Run command with next never version ( replace NEW_VERSION_HERE with the version you are upgrading to, e.g 8.2.0.7 )

In the same folder where your docroot is, run:

mv composer.json composer.json.bak || true
wget https://raw.githubusercontent.com/ymcatwincities/openy-project/8.2.x/composer.json
cd docroot/profiles/contrib/openy/
rm -f yparse*
wget https://raw.githubusercontent.com/ymcatwincities/openy-project/8.2.x/scripts/yparse.sh
drush cr
sh yparse.sh | xargs drush en -y
cd ../../../../
composer require ymcatwincities/openy:NEW_VERSION_HERE --no-update
composer update --prefer-dist --with-dependencies --prefer-stable --no-suggest

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.

Enable OpenY introduced modules in case if you are updating from very old version or if they are disabled intentionally.

cd docroot
drush en openy_upgrade_tool openy_er openy_prgf_loc_finder openy_map openy_data_wrapper openy_loc_branch openy_focal_point media_directories_ui

Sometimes it is important to get the latest openy_upgrade_tool from the repository even if you are not updating to the latest version of Open Y. You’ll be able to disable them in the end once all updates are executed successfully.

Verify if the Media Entity to Media in Core migration is possible ( only for upgrades from OpenY 1.x to 2.x )

Go to the docroot directory of your codebase and execute:

drush mecu

If the output looks like the following lines, you are good to proceed with database updates.

✓ SUCCESS: All upgrade requirements are met and                      [ok]
you can proceed with the DB updates.
Drupal core is the correct version (>= 8.6.0). [8.6.10 detected]     [ok]
The contributed "Media" module is not installed.                     [ok]
All provider plugins and modules depending on media_entity are       [ok]
up-to-date.
Site uses EXIF handling and the "Media Entity Image EXIF" module is  [ok]
available.

Follow the instructions of the output messages if they contain warnings or errors. Take a look at the detailed guide if you have any troubles.

Update the site

Go to the docroot folder of your codebase and run:

drush updatedb
drush entup

We found, in some instances, because of the complexity of the database you’d need to run this command above up to 6 times to get all entities and updates run to the end. You may ignore errors of the commands until there are no errors after the final run. So:

drush updatedb
drush entup
drush updatedb
drush entup
drush updatedb
drush entup
drush updatedb
drush entup
drush updatedb
drush entup

Please any log errors as issues for the QA team investigate.

If you have issues, the only way to avoid errors is to 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]
$ drush entup
No entity schema updates required                                                                               [success]

You have almost 100% proven updates were executed correctly.

Sometimes, you could face an error like:

openy.terms_and_conditions.schema depends on the Open Y module that will not be installed after import.

In this case, please, ensure that the module connected with this config is enabled.

To make it happen, please execute this command:

drush ev "Drupal::service('module_installer')->install(['module_with_problem']);"

Visit OpenY upgrade tool dashboard

Review and revert or apply an updated version of the configs after the upgrade.

image

Check for regressions

In order to check for regressions during the upgrade, it is best to work with smoke tests. Open Y 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)

DISCLAIMER: If you have an old 1.x version it makes sense to update to the latest 1.x before going OpenY 2.0 upgrade See OpenY-upgrade-for-developers.-Upgrade-to-old-OpenY-1.x-version

5.32 - Sandboxes

Open Y Sandboxes for Evaluation and QA

The Open Y core team manages sandboxes for stable and development versions of Open Y to facilitate the evaluation of the product, to help with QA, and enable investigation of issues.

To learn more:

Stable Sandboxes

https://sandboxes.openy.org/

These sandboxes are set to rebuild completely overnight and clear their database and files every 2 hours. To get access visit How can I try or get a demo of Open Y?

These sandboxes contain 3 profile variations:

  • Standard
  • Extended
  • Custom

based on the latest stable release of Open Y.

These sandboxes are built on CI by running:

composer create-project ymcatwincities/openy-project buildnew --no-interaction --prefer-dist

ansible-playbook docroot/reinstall.yml -i /tmp/inventory5068801741271597001.ini -f 5 -e php_env_vars=APP_ENV=dev -e mysql_user=*** -e mysql_password=*** -e mysql_db=sandbox_carnation_custom -e drupal_folder=/var/www/sandbox_carnation_custom -e site_url=https://sandbox-carnation-cus.openy.org -e pp_environment=demo -e run_reinstall=true -e "openy_profile_install_settings='openy_configure_profile.preset=complete openy_theme_select.theme=openy_carnation'" -e use_solr=false -i localhost, --connection=local -vvvv

Development Sandboxes

https://sandboxes-dev.openy.org/

These usually contain the latest development version of Open Y (the master branch of openy.

These sandboxes are built on CI by running:

composer create-project ymcatwincities/openy-project:dev-9.2.x-development buildnew --no-interaction --prefer-dist

ansible-playbook docroot/reinstall.yml -i /tmp/inventory5068801741271597001.ini -f 5 -e php_env_vars=APP_ENV=dev -e mysql_user=*** -e mysql_password=*** -e mysql_db=sandbox_carnation_custom -e drupal_folder=/var/www/sandbox_carnation_custom -e site_url=https://sandbox-carnation-cus.openy.org -e pp_environment=demo -e run_reinstall=true -e "openy_profile_install_settings='openy_configure_profile.preset=complete openy_theme_select.theme=openy_carnation'" -e use_solr=false -i localhost, --connection=local -vvvv

Membership Framework Sandboxes

https://membership-framework-sandboxes-d9.openy.org/

These are based on the Open Y stable Standard profile and the development version of the Membership Framework.

To rebuild the sandbox, CI is running:

composer create-project ymcatwincities/openy-project buildnew --no-interaction --prefer-dist
cd buildnew
composer config minimum-stability dev
composer require "openy/openy_memberships":"dev-master as 1.0.0"
ansible-playbook docroot/reinstall.yml -i /tmp/inventory13097841656330601319.ini -f 5 -e php_env_vars=APP_ENV=dev -e mysql_user=*** -e mysql_password=*** -e mysql_db=d9_sandbox_carnation_std_membership_framework -e drupal_folder=/var/www/d9_sandbox_carnation_std_membership_framework -e site_url=https://sandbox-carnation-std-membership-framework-d9.openy.org -e pp_environment=membership_framework -e run_reinstall=true -e "openy_profile_install_settings='openy_configure_profile.preset=standard openy_theme_select.theme=openy_carnation openy_select_content.content=0'" -e use_solr=false -i localhost, --connection=local -vvvv

Activity Finder Sandboxes - development version

ThemeLinkOpen YProfileActivity FinderThemeBootstrap
Carnationhttps://sandbox-carnation-cus-d9.openy.org/activity-finder-v4stableCustomv4 devv4
Rosehttps://sandbox-rose-cus-d9.openy.org/activity-finder-v4stableCustomv4 devv3
Lilyhttps://sandbox-lily-cus-d9.openy.org/activity-finder-v4stableCustomv4 devv3

To rebuild the sandbox, CI is running:

composer create-project ymcatwincities/openy-project:dev-9.2.x-development-af4 build --no-interaction --prefer-dist
cd ${WORKSPACE}/build
composer require ymcatwincities/openy_activity_finder:"4.x-dev as 4.0"

ansible-playbook docroot/reinstall.yml -i /tmp/inventory4660848605526222353.ini -f 5 -e php_env_vars=APP_ENV=dev -e mysql_user=*** -e mysql_password=*** -e mysql_db=d9_sandbox_carnation_custom -e drupal_folder=/var/www/d9_sandbox_carnation_custom -e site_url=https://sandbox-carnation-cus-d9.openy.org -e pp_environment=demo -e run_reinstall=true -e "openy_profile_install_settings='openy_configure_profile.preset=complete openy_theme_select.theme=openy_carnation'" -i localhost, --connection=local -vvvv

# Solr 4.5-4.9, Activity Finder v4
drush en -y search_api_solr_legacy openy_prgf_activity_finder_4 || true
drush cset -y search_api.server.solr backend_config.connector_config.host 127.0.0.1 -y || true
drush cset -y search_api.server.solr backend_config.connector_config.core ${VHOST_FOLDER} -y
drush cset -y search_api.server.solr backend_config.connector_config.solr_version 4.5 -y
drush search-api-mark-all || true
drush sapi-i || true
drush en -dvy openy_prgf_af4_demo || true

# Solr 4.5-4.9, Activity Finder v4, Carnation theme, bootstrap v4
drush cset -y openy_activity_finder.settings bs_version 4 || true

5.33 - Secure devops for composer 2 release

This article only applies to long-term users of Open Y. Open Y 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 Open Y/Drupal.

The Open Y team prepared an avoidance plan for the community to take action steps before the release while Open Y 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 Open Y 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 Open Y team on GitHub ( create issue) and the #developers channel on Slack.

5.34 - Testing Open Y for PHP 7.4 version support

Requirements

  • php-cli 7.4 ( memory_limit value should be large ( 2000M ) or unlimiter ( -1 ) in order to not fail
  • composer 2

Steps

  1. Obtain latest development code of Open Y
composer create-project ymcatwincities/openy-project:9.2.x-development-dev openy7.4
  1. Add phpcompatibility to require-dev section
cd open7.4
composer require --dev phpcompatibility/php-compatibility
./vendor/bin/phpcs -p . --standard=PHPCompatibility --runtime-set testVersion 7.4 --config-set installed_paths vendor/phpcompatibility/php-compatibility
  1. Generate report
./vendor/bin/phpcs -p . --standard=PHPCompatibility --runtime-set testVersion 7.4 --report-file=report.txt

or if you need to skip warnings

./vendor/bin/phpcs -p . --standard=PHPCompatibility --runtime-set testVersion 7.4 --report-file=report.txt -n

In report.txt you’d find a full list of findings to be resolved in order to pass compatibility

5.35 - Upgrade OpenY 8.1.3 to 8.2.2.1

This document is archived but may contain useful information for troubleshooting future updates. For updated update steps, visit How to upgrade Open Y.


Video tutorials

Upgrade OpenY from 8.0.7 to 8.2.2.1 - https://www.youtube.com/watch?v=U_mg0-yKGOI

Document is work in progress

These are instructions for upgrading a very old version of Open Y 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 Open Y version as usual.

Environment

vagrant@vagrant:/var/www/docroot$ uname -a
Linux vagrant 4.15.0-29-generic #31-Ubuntu SMP Tue Jul 17 15:39:52 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux
vagrant@vagrant:/var/www/docroot$ lsb_release -a
No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 18.04.1 LTS
Release:	18.04
Codename:	bionic
vagrant@vagrant:/var/www/docroot$ php -v
**PHP 7.1.31-1**+ubuntu18.04.1+deb.sury.org+1 (cli) (built: Aug  7 2019 10:23:12) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.1.31-1+ubuntu18.04.1+deb.sury.org+1, Copyright (c) 1999-2018, by Zend Technologies
    with Xdebug v2.7.2, Copyright (c) 2002-2019, by Derick Rethans
vagrant@vagrant:/var/www/docroot$ drush --version
 **Drush Version   :  8.2.3**
vagrant@vagrant:/var/www/docroot$ composer --version
**Composer version 1.7.2** 2018-08-16 16:57:12

Step by step guide for update

  • Use PHP7.1 for upgrade and install php7.1-mysql php7.1-mcrypt php7.1-cli php7.1-common php7.1-curl php7.1-dev php7.1-fpm php7.1-gd php7.1-mysql php7.1-memcached php7.1-imagic php7.1-xml php7.1-xdebug php7.1-mbstring php7.1-soap php7.1-zip php7.1-xml
  • Go to the folder of OpenY code tree where docroot folder is contained
  • mv composer.json composer.json.orig
  • wget https://raw.githubusercontent.com/ymcatwincities/openy-project/8.2.x/composer.json
  • mkdir -p scripts ; cd scripts && wget https://raw.githubusercontent.com/ymcatwincities/openy-project/8.2.x/scripts/remove_libraries_gitignore_files.sh && cd ..
  • composer require ymcatwincities/openy:8.2.2.1 --no-suggest --no-update
  • composer install --ignore-platform-reqs --no-suggest
  • composer update --prefer-stable --no-suggest
  • cd docroot
  • drush dl -y plugin-8.x-2.5 contribute-8.x-1.0-beta7 scheduler-8.x-1.0 views_block_filter_block datalayer simple_menu_icons rabbit_hole metatag simple_sitemap-8.x-3.0 easy_breadcrumb-8.x-1.6
  • drush en openy_upgrade_tool openy_er openy_prgf_loc_finder openy_map openy_data_wrapper openy_loc_branch content_moderation focal_point
  • drush ev "Drupal::service('module_installer')->install(['openy']);" <- This steps fixes some hidden bug when openy profile removed from core.extension configuration for unknown reason.
  • Manual step (optional, if you have issues with drush updatedb): Edit all yml files in profiles folder to comment media.type.image , field.field.node.program.field_header_content, field.field.node.branch.field_location_amenities in dependencies sections.

image

image

image

  • run drush updatedb -y <- this will fail for the first time ( Media not installed yet ), disregard
  • run drush updatedb -y <- this should run properly.
  • run drush entup

5.36 - 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 Open Y.


1 uninstall lndr and optimizely modules before running composer update commands

2 config to remove


drush cdel image.style.browser_thumbnail

3 enable openy_focal_point and media_directories_ui should be enabled when upgrade from 8.2.2.3 to 8.2.7.3

4 - run drush updatedb and next steps from tutorial