Section Monklets

Overview

Monklets are predefined code snippets that allow you to bring in other module content (sermons, events, etc.) into your pages.  There are a few monklets that have been created that are placed in the content area of your full width sections.

You can use a monklet inside a section by placing your cursor in the content area, selecting Insert > Insert Monklet > "Desired Monklet".

Some monklets allow/require inline parameters to be passed to define items from a specific group, category, etc.  http://help.monkcms.com/article/using-monklets/ and https://help.ekklesia360.com/article/using-inline-parameters/ provides details on using these parameters.

*NOTE - Monklets defined with "Section Monklet" in the title can be inserted in the page content area or the content area of a full width section and the Monklets defined with "Sidebar Monklet" in the title can be inserted in the content area of a sidebar section.

This uses a link list to display links with optional icons.  First you will create a link list and assign a name, link, and optional icon class. Once the link list is created you will go to the section, insert the monklet and use the find inline parameter to define which link list the monklet uses.  The "find" parameter syntax for this monklet is {{icon-links-monklet|find="link-list-name"}}

Additional inline parameter help can be found at https://help.ekklesia360.com/article/using-inline-parameters/

A full list of available icons can be found at http://yourchurch.monkpreview3.com/_assets/fonts/icons/(use http://yourchurch.com/_assets/fonts/icons/ when your site goes live).

You will want to use the icon name rather than the number:

Section Monklet - Recent Sermon

Displays the most recent sermon with the series image in the left column and sermon information in the right column.  You can use the find_group and find_category inline parameters as needed. An example of the inline parameter for this would be {{section-monklet-recent-sermon|find_category="category-name"}}

Section Monklet - Sermon Archive

Displays the latest 3 sermons with a "load more" option to load additional rows of 3. The "find_category" and "find_group" parameters can be used to display a specific category or groups of sermons.

Section Monklet - Upcoming Events

Displays the three most recent events in a three column row.  You can use the find_group and find_category inline parameters as needed. An example of the inline parameter for this would be {{section-monklet-upcoming-events|find_category="category-name"}}

Section Monklet - Upcoming Events - Image

Displays the three most recent events with images in a three column row.  You can use the find_group and find_category inline parameters as needed. An example of the inline parameter for this would be 

{{section-monklet-upcoming-events-image|find_category="membership"}}  

Displays the most recent sermon series image and information in a sidebar section.  You can use the find_group and find_category inline parameters as needed. An example of the inline parameter would be {{sidebar-monklet-recent-sermon|find_category="category-name"}}

Displays the six most recent events.  You can use the find_group and find_category inline parameters as needed. An example of the inline parameter for this would be {{sidebar-monklet-upcoming-events|find_category="category-name"}}

The "Gallery Monklet" can be inserted into the content area of a page to display a specific photo gallery.  After you insert the monklet you will use the find_gallery tag to define which gallery to use. The "find" parameter syntax for this monklet is {{gallery-monklet|find_gallery="gallery-name"}}

Evite Monklet

The "Evite Monklet" can be inserted into a section on any template except for the Tabbed Subpage template and uses a link list.  The inline parameter is required to define which link list to use after inserting the monklet into a page or section.   Image size is 1000px by 513px.

Evite Monklet - Selection

The monklet works the same as the Evite Monklet but provides an option for each link entry.  So you can have up to 3 items within a link list, which will show as the 3 images down the left side. Selecting an image thumbnail will charge the larger image spot and content.

Images should be 1000x513px

If you are using this monklet with the Special Event template and the "highlight color" field is populated for the page, this monklet will show the specified accent color. Otherwise, the default orange color will be used. 

Note: because social tags only support a single image, only one evite monklet should be used per page.

Section Monklet - Missions Map

The monklet "Section Monklet - Missions Map" is the map that was designed specifically for your Global Vision campaign. This monklet is intended to be used on a Subpage Fullwidth template and will insert a full width map within a section.

The Missionaries and Missions trips will all pull from the events module and need to be categorized using the parent category "For Missions Map Monklet" in order to display on the map, and then each event needs to be categorized as a Missionary, Trip, or both. These categories control the checkbox filter on the right side.

To generate the Missionary Contact form on the missionary detail page, you will need to add an Event Coordinator, who is linked to a user in the CMS who has the alternate email field completed. The form will then email whatever email address is added to the user's "alternate email" field. 

Section Monklet - Chart

This monklet uses a link list to display a chart. This is the format you will use to insert the monklet and tell it which link list to display: {{section-monklet-chart|find="offering-2019"}}

Notes about how it works:

  1. The graph needs around 300px in width, so we recommend you don't put it in a container any smaller than the half grid generator columns.
  2. The Link List should have 1 top level link.
    1. The Name is the heading
    2. The Button Text is the sub heading
    3. The description should be a number and that number is the current giving mark (the number on the left of the chart)
  3. The link list child links will represent each number on the right
    1.  The name of the link is the number and 0 should never be used.  It is dynamically added if the current mark is less than the total.
    2. The second level links should start at the top with the lowest number you want to display (other than 0) and the last link entry will be the max results (the highest number).
  4. If the current number is equal to or greater than the highest number, the 0 from the bottom will be removed and the current number will cap out at the top.
  5. The numbers on the left are at their percent of the top number so they correctly display proportionately on the chart instead of hard coding specific set positions. This allows you to use as many or few numbers as you like, and the monklet can be re-used for other purposes.
  6. The monklet works on any template on the site.

Section Monklet - Tracker

For the heading and button, please use the "Section Heading" option in the snippets tool, which will have the heading to the left and button to the right. Once this is added to your section, you can change out the placeholder info. Also, when used with the special events template, the button color will use the  "highlight color" field.

This monklet uses a link list to display the goal tracker. The monklet should be used within a section, and the "find" parameter is needed in order to specify which link list to display. 

ex: {{section-monklet-tracker|find="tracker"}}

Within the link list, there should be a single level 1 entry, and the" description" field is used to display the text underneath the tracker. Wrapping text in a <span> tag will enlarge the text/number and add animation.

ex: We Are Thankful. <span>$197,195</span> so Far!

In the link list, there should be two level 2 entries underneath. The first entry is for the left column/number, and the second entry is for the right.  The "name" is the label, and the "description" is the number.  The number in the description field should not contain any characters except numbers (no number sign, comma, etc), and the first number should be less than or equal to the second number. 

Section Monklet - Read More

This monklet uses a section to show a preview area followed by a "read more" option to open the rest of the section content.  The section description field is the preview and the section content is used in the read more area.

Custom 50/50 Section

This option allows you to display a fullwidth section in two columns with an image on one side and text on the other. The following monklets are available:

  • Section Monklet - Callout Column - Image Left (image left/text right)
  • Section Monklet - Callout Column - Image Right (text left/image right)

The setup uses a link list to manage the content. If the "Image Left" monklet is used, then the section will show the image in the left column (pulling from the first item in the list list) and then alternates for each additional link entry. Vice versa for the right monklet. 

Within the link list, the following fields are used: 

  • Title - controls the heading
  • Sub Title - controls the sub heading 
  • Description - displays below the sub heading
  • Image - controls the image column
  • Link - controls the button link
  • Button text - if the url is assigned, the button text must be used

Within the section, the section "Full Container" option must be selected to show the full width columns, otherwise it will show in its normal container. 

Section Monklet - Fullwidth Rotator

Media > Rotators

Displays an image rotator as fullwidth in a section. No text overlay is used for the slides, so the section will display an image rotator only. 

Within your section, the following monklet is needed with the "find" parameter. No other content should be added to the section.

ex: {{section-monklet-fullwidth-rotator|find="fullwidth-rotator"}}

Section Monklet - Content Rotator

Media > Rotators

Displays an image rotator in the content area of a page or section. Within each slide, the title, caption, link and button text fields can be used. Note: if the link field is populated, then the button text field is required.

When using this monklet, the "find" parameter is required in order to specify which rotator to use.

ex: {{section-monklet-content-rotator|find="content-rotator"}}

Section Monklet - Event Countdown

Events > Events

This monklet uses the events module to schedule the event date/times. You will need to create a specific "live" category to be used for this event/timer. The "find_category" inline parameter needs to be added to the monklet, and then the timer will display the most recent event from that category.  

ex: {{section-monklet-event-countdown|find_category="live-event-test"}} 

Within the event setup, the following fields are used:

  • Event text is the section headings/text
  • Event summary is the live text. If the website field is used, the summary text becomes the button text.

Note: This monklet should only be used once on a page. 

Section Monklet - Linked Images

Content > Link Lists

This monklet pulls from a link list to display row(s) of linked images (4 per row). With 5+ images, it will bump to a second row. The images will fill the width of the section, so rows with less than 4 will display larger images.

When creating your link list, the following fields are used: 

  • Name - controls the title
  • Description - controls the text
  • Link / Button text- controls the button link. If a URL is used, then the button text field is required.

Note: images should be the same size for each link.