Using components
Using components empowers the web team with greater flexibility to achieve diverse web objectives. You can display multiple data sets—like promo groups, events and news—on a single page by adding custom page fields for each component. The available components are listed in this menu.
For adding multiple components of the same type (e.g., two accordions on a page), simply increase the number in the page field. For instance, use modular-accordion-1
and modular-accordion-2
to include two accordions.
As for changing the order of components, the current method involves manually copying and pasting data in the desired sequence. We're actively working on a more efficient way to rearrange page fields, streamlining the process for easier reordering.
Configuring components
You will use a JSON array paired with your page field to configure each component. The specifics of each component can be found on the individual component page from the menu.
Example component configuration
Adding this data set into your CMS page fields area will display your promo data as a catalog component.
Page field | Data |
---|---|
modular-catalog-1 |
{ "id":000000, "heading":"Example component appearance", "columns":3, "showExcerpt":true, "showDescription":false, "singlePromoView":true, "config":"randomize|page_id|limit:5" } |
JSON data explained
Legend: * Designates a required configuration.
Key | Value |
---|---|
id | Promo group ID*, News application ID, Events site ID |
heading | Add a component heading Default is h2 |
headingClass | Add any number of classes to a component heading. "text-green divider-gold" |
headingLevel | Change default component heading level from h2 to h3 or h4. "h3" |
config |
Configuration options for the specific promo group. Use "page_id" to enable per-page items. Use "limit:1" to display one item. Use "randomize" to shuffle the order of promotion items. Use "youtube" when you are putting a video url in the promo link field to populate the play button overlay. Detailed promotion config information |
columns |
Define how many columns the component will display. 1 to 4 columns is recommended. Use with the catalog, button row, icon row, events row, and news row components. |
singlePromoView |
Creates a link to a detailed page of a single promo item, like a Spotlight. True or false; false is default and will use the promotion's link field if it is set. Use with the catalog, spoltight, promo row, promo column, and icon components. |
showExcerpt |
Show or hide the promo's excerpt. True or false; true is default. Use with the catalog, spoltight, promo row, promo column, and icon components. |
showDescription |
Show or hide the promo's description. True or false; true is default. Commonly used in conjunction with "singlePromoView" where the description is hidden from the catalog but displayed on the detailed promo page. Use with the catalog, spoltight, promo row, promo column, and icon components. |
gradientOverlay |
Moves the title, excerpt and/description on top of the image with a gradient for contrast. True or false; false is default. Promo row, promo column, and catalog components only. |
groupByOptions |
Group promotion items by the options in the options dropdown. True or false; false is default. Catalog component only. |
imagePosition |
Moves the image from the left to the right, or alternates their position if the item limit is greater than one. Left, right, alternate; left is default. Promo row component only. |
imageSize |
Uses a small (25%) width or large (40%) width. Small or large; large is default. Promo row component only. |
limit |
Limit the number of items displayed. Integer; default is 4. News and events only. For promotion based components, see "config." |
link_text |
To change "More news" or "More events" to your specific text, i.e. "Student news", "Career events". News and Events only. |
news_route |
Change the url path for news items. Example: "/facultynews" Null default; Example: "/facultynews" News components only. |
featured |
Display only the articles that have a specific featured image uploaded in the news manager. True or false; all articles shown by default. News row only. |
topics |
Pass in an array of topics to display i.e. [76, 4] All topics shown by default. News components only. |
cal_name |
The relative url to your calendar that the "more events" link goes to, i.e. "main/". Defaults to the site's selected calendar. Events components only. |
All available components
Page field name |
---|
|