Skip to main content

Building Templates Using Shared Partials

It is possible to use components that are stored in a central theme. This way you don’t have to store a copy of the component, or reference this copy in your own theme. All you have to do is make sure you have the correct custom data attributes in your template, and then reference the component in your theme using a partial.

Custom Data Attributes

Our shared partials use several custom data attributes to pull data from pages. In order to use our shared partials, you must include the following data attributes in your templates (these are included by default).

Site data (stored in your site’s config.yml file):

  - apply_link_1
  - apply_link_1_url
  - apply_link_2
  - apply_link_2_url
  - apply_link_3
  - apply_link_3_url
  - classes_wvu_backpage_header__h1
  - classes_wvu-footer-links
  - co_brand_subtitle
  - default_content_01
  - default_content_02
  - default_content_03
  - disable_component_styler
  - facebook_url
  - flickr_url
  - github_url
  - google_site_verification
  - has_alternate_logo
  - has_co_brand
  - has_standard_footer
  - hide_instructions
  - instagram_url
  - is_demo_site
  - jquery_defer
  - linkedin_url
  - masthead_college_link_address
  - masthead_college_link_title
  - masthead_color
  - masthead_link_2_address
  - masthead_link_2_title
  - masthead_logo_url
  - masthead_title
  - nav_dropdowns
  - syndication_url
  - show_apply_links
  - show_instructions
  - sidebar_sticky_site
  - slot_00_masthead
  - slot_00_nav
  - twitter_handle
  - twitter_url
  - twitter_widget_id
  - youtube_url
  - alternate_url: 
    title: Alternate URL
  - backpage_header:
    type: checkbox
    title: Remove header
  - blog_article_has_hero:
    type: checkbox title: If blog article, show hero
  - blog_index_hide_author:
    type: checkbox
    title: Hide blog index author?
  - breadcrumbs:
    type: checkbox
    title: Remove breadcrumbs
  - description:
    type: text
    rows: 6
    title: Description
    required: false
    maxlength: 255
  - header_label:
    type: checkbox
    title: Show header label
  - header_subhead:
    type: checkbox
    title: Show header subhead
  - link_text:
    title: Link text
  - search_action:
    title: Search action
  - content_keys:
    title: Content Keys for Big Search
  - enable_keywords:
    type: checkbox
    title: Enable keywords?
  - thumbnail_alt:
    title: Thumbnail Alt Text
  - thumbnail_url: 
    title: Thumnbail URL
  - thumbnail_url_sq:
    title: Thumnbail URL Square

Including a Shared Partial Manually

We have created a number of CleanSlate partials that correspond to each component in the Design System. These partials are stored in a central theme called WVU Design System Components. When browsing our components, you can see the name of the component in its implementation notes.

We encourage you to build your own custom themes and partials, but you can also reference our shared partials. Partials are chunks of code that do stuff. Use shared partials as long as it meets your needs. If it doesn’t, create your own.

When you insert a partial, it looks like this:

<r:partial name="components/wvu-featurettes" theme="University Relations: WVU Design System Components" />

Note that it references the University Relations: WVU Design System Components theme. If you reference a shared partial, be aware that we could make slight changes to the partial in the future, potentially altering the design of the partial. This is good, because it allows us to update the partial once, but change the code wherever the partial is used.

Passing Variables to Shared Partials Manually

When you use our shared partials, you can make it do different things by passing in variables. For example, let’s say you want to use the featurettes component to display a series of content chunks. But you want to order the chunks alphabetically, rather than in the order they appear in CleanSlate. No problem. Just pass in a value for the order_by variable, like this:

<!-- Insert featurettes component -->
<r:set_var name="componentLoopBy" value="name" />
<r:partial name="components/wvu-featurettes" theme="University Relations: WVU Design System Components" /> 

Note: Any time you pass a variable to a shared partial, that variable will apply to any subsequent partial that uses it unless it is overwritten. So if I define the componentScope of a partial as “site,” and then include a featurettes partial below, the featurettes partial will have a scope of “site” as well. If you do not want this to happen, you should reset the scope when calling the featurettes partial.

Here is a list of variables that apply to shared partials, and what they do:

Variable Name Value Component(s) Description
align left
wvu-hero Align the component’s content to the left, middle, or right.
featurettesID Any number wvu-featurettes with style of blog The ID of the parent page of the children you want to loop through.
featurettesStyle default
wvu-featurettes Defines the style of featurette to be used.
galleryLoopBy filename
wvu-gallery Define how gallery items should be ordered.
instanceNumber Any number All Define a unique instance of a component so it can be used multiple times on the same page.
isEditModeOnly 0
All If set to 1, the component will only display in Edit Mode. This will let the user test the component without it being published.
isMain 0
All If set to 1, the component’s outer container will become <main> rather than <section>.
isRandom 0
wvu-featurettes If set to 1, items set to display in a featurette component will display randomly.
limit Any number wvu-featurettes Set the maximium number of items to display in a featurette.
loopBy name
wvu-featurettes Define how featurette items should be ordered.
loopOrder asc
wvu-featurettes Define whether featurette items should be listed in ascending or descending order.
loopLabelsMatch any
wvu-featurettes Define the criteria by which a featurette must be labeled in order to display.
componentName N/A All The base component name, plus an instance number.
scope page
All Defines whether the content in the partial should apply only to the current page, or in every instance the component is used, no matter what page.
showHidden 0
wvu-featurettes Set to 1 if you want to display items in a featurettes component even if they are set to “hidden” in CleanSlate.

Note: There are a few shared partials that do not work like this. For example, you cannot use the “Where to display” variable. These only work with the Super Theme. To achieve similar results, just make your own custom partials.

Including Multiple Instances of the Same Partial in Your Template

Sometimes you want to have two hero components, or two featurettes components, etc. on a page. To do this, we can’t just use the same partial, since by default they have contain elements with the same editable region names, and we cannot have multiple instances of the same editable region on a page. We need something to differentiate each partial. No problem. Our partials let you dynamically define editable region names based on a component’s instanceNumber. Let’s say we already have a featurettes partial in our template. It looks like this:

<!-- First instance of featurettes component -->
<r:partial name="components/wvu-featurettes" theme="University Relations: WVU Design System Components" />

Now let’s say we want to include a second featurettes component elsewhere on the page. This is another example of where variables come in. Just set the instanceNumber variable after the first time you call the partial, but before the second:

<!-- Second instance of featurettes component -->
<r:set_var name="instanceNumber" value="2" />
<r:partial name="components/wvu-featurettes" theme="University Relations: WVU Design System Components" /> 

The editable regions in each partial use instanceNumber to dynamically generate editable region names. Repeat the same process for as many instances of the partial you want to include in a template.

Note: Once you’ve established multiple instances of the same partial in the same template, do not remove or switch instance numbers. Instance numbers should stay grouped with the instance of the partial it is initially paired with, so that whatever content is included in each editable region for that partial remains intact.

Creating Custom Partials

If our partials don’t do what you need, no problem. You can build one from scratch. We don’t try to force you into using ours. If you build your own, we recommend putting them in your theme’s components folder. You reference a custom partial in the same manner shown above. Just omit the theme= code. For example, if I’ve created my own partial called my-partial, I would reference it like this:

<r:partial name="components/my-partial" />

Using a Super Template

If you want one of your templates to be a “ Super Template” (which behaves like what was formerly known as the “Super Theme), then you need to include some additional custom data in that template. This will add “slots” to a page’s custom data if the page uses your Super Template.

Optional template data (if you want your template to be a Super Template):

- slot_1:
    type: select
    title: Slot 1
      - [Action Hero, action-hero]
      - [Action Hero Card, action-hero-card]
      - [Action Hero Two Column, action-hero-two-column]
      - [Agenda Item, agenda-item]
      - [Back Page, backpage]
      - [Big Search, big-search]
      - [Big Search Results, big-search-results]
      - [Blog Archive, blog-archive]
      - [Blog Article, blog-article]
      - [Blog Index, blog-index]
      - [Contact Info, contact-info]
      - [Directory, directory]
      - [Editable Region, editable-region]
      - [Event Agenda, event-agenda]
      - [Faculty Profile, faculty-profile]
      - [Featurettes, featurettes]
      - [Featurettes Card Columns, featurettes-card-columns]
      - [Full Bleed Photo, full-bleed-photo]
      - [Hero, hero]
      - [Lede Text, lede-text]
      - [Log-In, log-in]
      - [Photo Gallery, photo-gallery]
      - [Profile, profile]
      - [Profile Teaser, profile-teaser]
      - [Profiles, profiles]
      - [Quicklinks, quicklinks]
      - [Social Media, social-media]
      - [Stat Sheet, stat-sheet]
      - [Subnav, subnav]
      - [Twitter Widget, twitter-widget]
    include_blank: false
    default: backpage
  - slot_1_custom:
    title: If custom, name of partial
  - slot_1_is_edit_mode_only:
    type: checkbox
    title: Is Edit Mode only
  - slot_1_where_to_display:
    title: Where to display
    type: select
      - [As Full-Width Block, as_full_width_block]
      - [Backpage Main 1, wvu-backpage-1__main]
      - [Featurettes 1 Panel 1, featurettes_1_panel_1]
      - [Featurettes 1 Panel 2, featurettes_1_panel_2]
      - [Featurettes 1 Panel 3, featurettes_1_panel_3]
      - [Sidebar 1, sidebar_1]
      - [Backpage Main 2, wvu-backpage-2__main]
      - [Featurettes 2 Panel 1, featurettes_2_panel_1]
      - [Featurettes 2 Panel 2, featurettes_2_panel_2]
      - [Featurettes 2 Panel 3, featurettes_2_panel_3]
      - [Sidebar 2, sidebar_2]
      - [Backpage Main 3, wvu-backpage-3__main]
      - [Featurettes 3 Panel 1, featurettes_3_panel_1]
      - [Featurettes 3 Panel 2, featurettes_3_panel_2]
      - [Featurettes 3 Panel 3, featurettes_3_panel_3]
      - [Sidebar 3, sidebar_3]
      - [Backpage Main 4, wvu-backpage-4__main]
      - [Featurettes 4 Panel 1, featurettes_4_panel_1]
      - [Featurettes 4 Panel 2, featurettes_4_panel_2]
      - [Featurettes 4 Panel 3, featurettes_4_panel_3]
      - [Sidebar 4, sidebar_4]
      - [Backpage Main 5, wvu-backpage-5__main]
      - [Featurettes 5 Panel 1, featurettes_5_panel_1]
      - [Featurettes 5 Panel 2, featurettes_5_panel_2]
      - [Featurettes 5 Panel 3, featurettes_5_panel_3]
      - [Sidebar 5, sidebar_5]
      - [Backpage Main 6, wvu-backpage-6__main]
      - [Featurettes 6 Panel 1, featurettes_6_panel_1]
      - [Featurettes 6 Panel 2, featurettes_6_panel_2]
      - [Featurettes 6 Panel 3, featurettes_6_panel_3]
      - [Sidebar 6, sidebar_6]
    include_blank: false
    default: as_full_width_block
  - slot_1_is_main:
    type: checkbox
    title: Is Main
    default: 1
  - slot_1_align:
    type: select
    title: Slot 1 Alignment
      - [Left, left]
      - [Middle, middle]
      - [Right, right]
    include_blank: false
    default: left
  - slot_1_featurettes_style:
    type: select
    title: Slot 1 Featurettes Style
      - [Default, default]
      - [Blog Articles, blog]
      - [Cards, cards]
      - [Cards w/Editable Regions, cards-w-editable-regions]
      - [Cards w/Overlay, cards-w-overlay]
      - [Custom, custom]
      - [Editable Regions, editable-regions]
      - [Majors, majors]
      - [Profiles, profiles]
      - [Profiles w/o Contact Info, profiles-sans-contact-info]
      - [Testimonials / Quote, testimonials]
    include_blank: false
    default: default
  - slot_1_featurettes_id:
    title: Featurettes ID
  - slot_1_limit:
    title: Slot 1 Limit
  - slot_1_is_random:
    type: checkbox
    title: Randomize?
  - slot_1_number:
    type: select
    title: Slot 1 Instance
      - [1, 1]
      - [2, 2]
      - [3, 3]
      - [4, 4]
      - [5, 5]
      - [6, 6]
      - [7, 7]
      - [8, 8]
      - [9, 9]
      - [10, 10]
    include_blank: false
    default: 1
  - slot_1_loop_by:
    type: select
    title: Slot 1 Loop By
      - [Sort Order, sort_order]
      - [Alternate Name, alternate_name]
      - [Content Updated At, content_updated_at]
      - [Created At, none]
      - [Slug, slug]
      - [Meta Description, meta_description]
      - [Name, name]
      - [Published At, published_at]
      - [Template Name, template_name]
      - [Updated At, updated_at]
    include_blank: false
    default: sort_order
  - slot_1_loop_labels_match:
    type: select
    title: Slot 1 Loop Labels Match
      - [All, all]
      - [Any, any]
      - [None, none]
    include_blank: false
    default: all
  - slot_1_loop_order:
    type: select
    title: Slot 1 Loop Order
      - [ASC, asc]
      - [DESC, desc]
    include_blank: false
    default: asc
  - slot_1_gallery_loop_by:
    type: select
    title: Gallery Loop By
      - [Title, title]
      - [Filename, filename]
    default: title
  - slot_1_scope:
    type: checkbox
    title: Sitewide
  - slot_1_show_hidden:
    type: checkbox
    title: Show if hidden

The above code is repeated 10 times in each template, one for each slot. It is in all of our templates by default. If you do not want your theme to be a Super Theme, just delete these custom data attributes.