Home
Tutorials
Building Templates Using Shared Partials

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):

custom_site_attributes:
  - 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
custom_data_attributes
  - 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. 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:

{% render "components/wvu-featurettes" number: 1, main: true %}

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.

Configuring Shared Partials Manually

When you use our shared partials, you can make it do different things by setting its parameters. For example, let’s say you want to use the featurettes component to display a series of content chunks. But you want to limit the number of chunks to 4. No problem. Just set the limit parameter, like this:

<!-- Insert featurettes component -->
{% render "components/wvu-featurettes" limit: 4 %}

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

Variable Name	Value	Component(s)	Description
`align`	`left` `middle` `right`	`wvu-hero`	Align the component’s content to the left, middle, or right.
`editModeOnly`	`true` `false`	All	If set to `true`, the component will only display in Edit Mode. This will let the user test the component without it being published.
`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` `blog` `cards` `cards-w-editable-regions` `cards-w-overlay` `custom` `editable-regions` `majors` `profiles` `testimonials`	`wvu-featurettes`	Defines the style of featurette to be used.
`galleryLoopBy`	`filename` `title`	`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.
`limit`	Any number	`wvu-featurettes`	Set the maximium number of items to display in a `featurette`.
`loopBy`	`name` `slug` `created_at` `updated_at` `sort_order` `template_name` `published_at` `title` `alternate_name` `meta_description` `content_updated_at`	`wvu-featurettes`	Define how `featurette` items should be ordered.
`loopOrder`	`asc` `desc`	`wvu-featurettes`	Define whether `featurette` items should be listed in ascending or descending order.
`loopLabelsMatch`	`any` `all` `none`	`wvu-featurettes`	Define the criteria by which a `featurette` must be labeled in order to display.
`main`	`true` `false`	All	If set to `true`, the component’s outer container will become `<main>` rather than `<section>`.
`random`	`true` `false`	`wvu-featurettes`	If set to `true`, items set to display in a `featurette` component will display randomly.
`scope`	`page` `site`	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`	`true` `false`	`wvu-featurettes`	Set to `true` if you want to display items in a featurettes component even if they are set to “hidden” in CleanSlate.

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 number. Let’s say we already have a featurettes partial in our template. It looks like this:

<!-- First instance of featurettes component -->
{% render "components/wvu-featurettes" %}

Now let’s say we want to include a second featurettes component elsewhere on the page. This is where parameters come in. Just set the number parameter:

<!-- Second instance of featurettes component -->
{% render "components/wvu-featurettes" number: 2 %}

The editable regions in each partial use number 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/custom folder. You reference a custom partial in the same manner shown above. For example, if I’ve created my own partial called my-partial, I would reference it like this:

{% render "components/custom/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
    options:
      - [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
    options:
      - [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
    options:
      - [Left, left]
      - [Middle, middle]
      - [Right, right]
    include_blank: false
    default: left
  - slot_1_featurettes_style:
    type: select
    title: Slot 1 Featurettes Style
    options:
      - [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
    options:
      - [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
    options:
      - [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
    options:
      - [All, all]
      - [Any, any]
      - [None, none]
    include_blank: false
    default: all
  - slot_1_loop_order:
    type: select
    title: Slot 1 Loop Order
    options:
      - [ASC, asc]
      - [DESC, desc]
    include_blank: false
    default: asc
  - slot_1_gallery_loop_by:
    type: select
    title: Gallery Loop By
    options:
      - [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.