Skip to content

Commit

Permalink
DS-28 docs: Rebuild Content Types section to remove old references
Browse files Browse the repository at this point in the history
  • Loading branch information
froboy committed Sep 1, 2023
1 parent 401a084 commit 883f65f
Show file tree
Hide file tree
Showing 52 changed files with 344 additions and 306 deletions.
File renamed without changes
File renamed without changes
Expand Up @@ -12,6 +12,8 @@ From [YMCA Link](https://link.ymca.net/mlink/post/ODI2MA):
>
> * [Download Cachet as a Web Font ](https://theybrand.org/wordpress/cachet) (requires YMCA Link login)
**Developers:** YMCA development partners can take advantage of a custom module which allows for automation of this process. [Get in touch](mailto:ycloud@ymca.net) or reach out in `#developers` on the YUSA Slack for more details.

Once you've downloaded the WOFF files, you'll need to add them to your site. These instructions mirror the [walkthrough in this video](https://www.youtube.com/watch?v=Kl1lwYSg3ww&feature=youtu.be).

- Visit **Admin** > **Extend** and ensure the "@fontyourface" and "@fontyourface - Local Fonts" modules are enabled.
Expand All @@ -25,13 +27,10 @@ Once you've downloaded the WOFF files, you'll need to add them to your site. The
| Cachet Medium | Cachet | Normal | 500 | Sans Serif | CachetW05-Medium.woff |
| Cachet Bold | Cachet | Normal | 700 | Sans Serif | CachetW05-Bold.woff |

![Add_custom_font|591x500](../../assets/Add_custom_font.png)

![Add_custom_font|591x500](Add_custom_font.png)

- After you've added each font, **Enable** them.

![Custom_Font|690x156, 100%](../../assets/Custom_Font.png)
![Custom_Font|690x156, 100%](Custom_Font.png)

- Your site should now use the Cachet font in headers and other areas. Usage is dependent on the YMCA Website Services theme you choose.

This content was originally [published on the YMCA Website Services Message Board](https://community.openymca.org/t/using-the-latest-2020-cachet-web-fonts-on-your-open-y-or-virtual-y-site/894).
Expand Up @@ -15,5 +15,3 @@ Configuration is done at the standard module configuration page: `/admin/config/
### Google Analytics Version Compatibility

In the [9.2.11](https://github.com/YCloudYUSA/yusaopeny/releases/tag/9.2.11) release in November 2021, YMCA Website Services [added support for Google Analytics 4](https://github.com/YCloudYUSA/yusaopeny/pull/2400). If your site has been updated to YMCA Website Services 9.2.11 or greater AND the `google_analytics` module has been updated to 4.x you should be able to use GA4. Otherwise you'll need to stick with GA3.

See this [community post](https://community.openymca.org/t/about-google-analytics-compatibility/917) for more information.
4 changes: 2 additions & 2 deletions content/en/docs/user-documentation/_index.md
Expand Up @@ -6,6 +6,6 @@ description: >
Everything you've wanted to know about using YMCA Website Services.
---

These documents are a combination of the YMCA Website Services Community [User Documentation](https://community.openymca.org/c/resources-and-training-for-content-editors/14) and the [User Manual](https://drive.google.com/file/d/15aF_g7Q1ItOUNZUGR-6Tmlfz72m5ms2M/view?usp=sharing).
These documents are a combination of the former YMCA Website Services Community User Documentation and the [User Manual](https://drive.google.com/file/d/15aF_g7Q1ItOUNZUGR-6Tmlfz72m5ms2M/view?usp=sharing).

If you see something missing or would like to request a new topic, please [open an issue](https://github.com/open-y-subprojects/openy_docs/issues/new?title=Open%20Y%20Distribution%20Documentation).
If you see something missing or would like to request a new topic, please [open an issue](https://github.com/YCloudYUSA/yusaopeny_docs/issues/new?title=Open%20Y%20Distribution%20Documentation).
@@ -1,12 +1,12 @@
---
title: Activity, Class, and Session
description: Format data/content pulled from third parties, such as Daxko, Personify and ActiveNet, for display in YMCA Website Services.
---

> These content types format data/content pulled from third parties, such as Daxko, Personify and ActiveNet, for display in YMCA Website Services.
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)
Expand All @@ -15,19 +15,22 @@ Content editors rarely, if ever, enter information directly into these content t
>
>*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](https://community.openymca.org/t/program-subcategory-content-types-open-y-user-docs/692). Maps the Activity to higher-levels of user-entered content.
* **Program subcategory**: An *entity reference* to or tag for a [Program Subcategory](../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](https://community.openymca.org/t/activity-finder-activity-finder-search-paragraphs-open-y-user-docs/702).

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](../../paragraphs/activity-finder).
@@ -1,47 +1,48 @@
---
title: Alert
description: Displays timely information in a thin banner across your site, just below the header or above the footer.
---

> 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](upload://4xCXyDaACMFdZrLgm2X88iV7AEY.png)
![An alert](alert--example.png)

Unlike most content types in YMCA Website Services, you don't use Alert to create pages. Instead, Alerts display as a *rendered entity* or a section of content on other pages.

Alerts also don't use paragraphs. 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 YMCA Website Services Text Editor](https://community.openymca.org/c/Resources-and-training-for-content-editors/Learn-how-to-use-the-basic-text-editing-functions-available-to-content-editors).
* **Description**: The main body of your alert. Sentences should be short and minimally styled in this section. Uses [the Text Editor](../../text-editor).

* **Color Fields**: These three dropdown fields control different aspects of color in your alert. All three dropdowns reference the [the YMCA Website Services color vocabulary](http://#).
* **Color Fields**: These three dropdown fields control different aspects of color in your alert. All three dropdowns reference the [color vocabulary](../../taxonomy/#color).

* ***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.
* ***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 ⇒](http://#)
* **Link**: Adds a button with a call to action to the alert on the right. Button color defaults to black.

* **Placement**: Choose "Header" to show your alert above your main content or "Footer" to show below your main content.

![admin__alert--dropdowns|662x396, 75%](upload://akUU32T0jawWJ1Q3y5ez8zDaQfT.gif)
![The alert admin fields](alert--fields.gif)

* **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.
You also have the option to use an asterisk character `*` as a wildcard so you don't have to enter a large number of relative paths. For example, if you wanted to add an alert to a `/health-and-fitness` section, you would enter `/health-and-fitness*` in the text area.

![admin__alert--visibility-pages|320x191](upload://epmNM8LN0t7cT4thANWpfOP0mge.gif)
![The alert visibility dialog](alert--visibility.gif)

> **What is a relative path?**
> A *relative path* is the part of your url after your *domain name.*
>
> At https://ycloud.y.org/open-y-association-websites/community, for example, the *domain name* is **`openy.org`**, while the *relative path* is **`/community`**.
> At `https://example.com/community`, for example, the *domain name* is **`example.com`**, while the *relative path* is **`/community`**.
Using the **Alert visibility state** radio buttons at the bottom, you can either show or hide your alert from the page paths listed in the text area above.
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.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -1,16 +1,16 @@
---
title: Blog Post
description: Timely content, articles and news pieces tagged with one or more physical locations.
---

> 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](https://community.openymca.org/t/news-post-content-types-open-y-user-docs/694).*
> *Note: This Content Type is [similar to the News Post content type](../news-post).*
![carnation--blog--desktop|690x479, 75%](upload://Rkgdb0hjyEt9lLUjFxWtTDGmZE.jpeg)
![An example of a blog post page](blog-post--example.jpeg)

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

## When Should I Use a Blog Post?

When you decide to use a blog post [depends greatly on your Association's content strategy](https://www.youtube.com/watch?v=myGNK_qUGDM). However, blog posts are designed so you can post timely pages and list them throughout your site. Examples of blogs may include:

* Member Stories
Expand All @@ -23,48 +23,61 @@ When you decide to use a blog post [depends greatly on your Association's conten

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](https://community.openymca.org/t/blog-posts-paragraphs-open-y-user-docs/705).
* **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](../../paragraphs/blog-posts-listing).

* **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](https://community.openymca.org/t/taxonomy-vocabularies-and-terms-website-structure-open-y-user-docs/734). 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.
* **Category**: An *entity reference* to [the Blog Category vocabulary](../../taxonomy/#blognews-category). 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--blog-posts__category|662x204, 75%](upload://jwO81z5xCJqqZQwPTRIoyRgNmwW.gif)
![Selecting a category in the blog post admin](blog-post--category.gif)

### 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--blog-post__style|564x434, 50%](upload://cPN5q42rJ6WDOnkaQJ9eLyTdlZO.png)
**####** Story Card
![carnation--landing-page__blog-posts--story-card|610x500, 50%](upload://oJLrZIvtwSuBB7Jpu5nB8zki5X9.png) ![lily--landing-page__blog-posts--story-card|394x500, 50%](upload://i3yBTJgILl00OKqXi5fWd6VAmT8.png)
![The blog post style dropdown](blog-post--style.png)

#### Story Card

| Carnation | Lily |
|-------------------------------------------------------------------|---------------------------------------------------------|
| ![A blog story card in Carnation](blog-post--carnation-story.png) | ![A blog story card in Lily](blog-post--lily-story.png) |

#### Photo Card

**####** Photo Card
![carnation--landing-page__blog-listing--photo-card|590x500, 50%](upload://tCqVbj1a1LnF1vt47REP84d7LYA.png) ![lily--landing-page__blog-posts--photo-card|434x500, 50%](upload://5FmyMqI53U1GhHWF7ehlqyQq8hg.png)
| Carnation | Lily |
|-------------------------------------------------------------------|---------------------------------------------------------|
| ![A blog photo card in Carnation](blog-post--carnation-photo.png) | ![A blog photo card in Lily](blog-post--lily-photo.png) |

**####** News Card
![carnation--landing-page__blog-listing--news-card|590x500, 50%](upload://z5Ez1sNgStJPfGzD6lKSzwLFeii.png)
#### News Card

**####** Color Card
When choosing color card, you are presented with two styling options in dropdowns. Both are *entity references* to [the Color vocabulary](https://community.openymca.org/t/taxonomy-vocabularies-and-terms-website-structure-open-y-user-docs/734):
![A blog news card in Carnation](blog-post--carnation-news.png)

#### Color Card

When choosing color card, you are presented with two styling options in dropdowns. Both are *entity references* to [the Color vocabulary](../../taxonomy/#color):

* **Background color**: Changes the color of the card.
* **Text color**: Changes the color of the text. It's recommended you only use white or black.

| Carnation | Lily |
|-------------------------------------------------------------------|---------------------------------------------------------|
| ![A blog color card in Carnation](blog-post--carnation-color.png) | ![A blog color card in Lily](blog-post--lily-color.png) |

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

* **Image**: Displays above your description and inside a Photo Card. Not required. Uses the [media browser and image field.](https://community.openymca.org/t/video-tutorials-for-images-and-documents/738)
The content area is the main body of your page. You can use the default fields entered below for a simple block post or build a more robust layout using paragraphs.

* **Description**: [Using the YMCA Website Services text editor](https://community.openymca.org/t/introduction-text-editor-open-y-user-docs/643), you can enter anything from a brief summary to the entire body of your text.
![carnation--landing-page__blog-posts--color-card--green|590x500, 50%](upload://zhby7Do2LGR6ZscauU8bVJdUB8h.png) ![lily--landing-page__blog-posts--color-card--green|434x500, 50%](upload://48cFIYzzKbvW4UQushKjT8etmSS.png)
* **Image**: Displays above your description and inside a Photo Card. Not required. Uses the [media browser and image field.](../../media)

* **Description**: [Using the text editor](../../text-editor), you can enter anything from a brief summary to the entire body of your text.

### Sidebar Area

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

### Layouts

While you have the option to build layouts in blog posts using paragraphs, all blog posts are strictly two-column layouts. The Content Area displays on the left while the Sidebar Area displays on the right.
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.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 883f65f

Please sign in to comment.