CMS Shortcode Usage Guide

This page builds upon the foundational Using the Content Management System page.

Adding a Video to a Page

Video embed dialog. Paste video URL here.

To embed a video on a page, paste the YouTube video URL into the dialog that comes up when you press the ' Embed a Video' button. Any text selected when you press the button will become the title of the video. The resulting tag will look like [​[EMBED allowfullscreen title="title of video" rel=0]]. The title of video should be descriptive, like alternative text for an image.

Location of Video embed button

If you want to include multiple videos on a page, consider using a Grid layout pattern.

Including Events from the UH Hilo Calendar

The UH Hilo News and Events Calendar allows events and announcements to be 'tagged' with keywords. These keywords can be used to bring a feed of matching events directly into the CMS with one short code [​[EVENTS tag="keyword"]].

screenshot of EVENTS shortcode
Example of the EVENTS shortcode, which imports upcoming events from the UH Hilo news and events calendar, based on one or more entered keywords.
screenshot showing keywords on event description
The EVENTS shortcode looks for keywords in the event listing to determine which listings to include.

For the events to populate on your page, you need to Submit your Event or Announcement and use the keyword you specify.

Including Fragments

Fragments are small snippets of a page that are included when publishing a page. The most common application for fragments are sidebars and navigation menus. Anytime content is to be used multiple times, it makes sense to create and include a fragment instead of duplicating the content. Fragments are parsed in Markdown format, which means that you can use the same syntax as other pages in these areas.

From the Fragments area, you can see all of the fragments, as well as the pages that include a specific fragment. The 'Edit Fragment' page will also show the shortcode [​[INCLUDE FragmentName]] and a list of all the pages that include the fragment.

Fragment usage list
Find a copy-pasteable shortcode to include the fragment on the 'Edit Fragment' page
screenshot of 'Additional Content' area where fragment is included'
The fragment is called using the INCLUDE shortcode, on the 'Additional Content' tab
Editing a fragment screenshot
The fragment is formatted using Markdown syntax, just like CMS pages

Displaying Elements Side-by-Side in a Grid Layout

The ' Insert table or grid' button allows editors to insert a two-column or three-column layout.

The grid consists of nested class blocks, enclosed within double square brackets: [​[.class-name]] and [​[/.class-name]]. The content between these two blocks has the named style applied to it. For [​[.two-by]] grids and [​[.three-by]] grids, this means that the content will be put into columns of 50% and 33% width, respectively. The following are available: .two-by, .three-by, .four-by, .five-by, and .six-by. Unless your content is very “small”, do not use larger numbers of columns.

Options available upon pressing 'Insert Grid' button

The [​[.block]] and [​[/.block]] tags are an empty vessel. They serve to combine multiple other elements into a single element. For example, a [​[.block]] might contain a ## Heading and several paragraphs or a bulleted list. While [​[.block]] does not have any styles by itself, additional styles can be attached.

Spanning Multiple Grid Columns

Within a grid, it is possible to have a block that spans multiple columns. That can be done by attaching an .x2, .x3, or .x4 class to a [​[.block]] container.

The following code creates a three column grid with a block spanning the first two columns.

. . .

Example of two-thirds / one-third grid
To make the first grid item span more than one 'column', the `.x2` class is applied to the first `.block` element, as seen in the example code at left.

When there is not enough space on a visitors device to show the content in a grid side-by-side, the blocks will show sequentially. You can see how this will look by using the Preview... button.

This is only a sampling of the ways that grids can be used in the CMS. Learn more about Page Layout using Grids.

Including Random Elements using [​[DID-YOU-KNOW]]

There are some sites which include a 'Fun Fact' or 'Did You Know' feature. Examples include the Department of English, Adopt a Beehive, and the Minority Access and Achievement Program. Each time their page is loaded, a random 'fact' is displayed. This is done with using a single shortcode - [​[DID-YOU-KNOW]]

screenshot of Did You Know management area
Use the 'Manage Did You Know' area of the CMS Admin to add snippets of text to a given category

Directory Related Shortcodes

There are several ways that CMS pages can reference information in the UH Hilo Phone Directory. These include Directory Tooltips, Directory Cards, and Contact Blocks.


When referring to a faculty or staff member, or an office, it can be helpful to provide contact details. This can be done by using a tooltip. In the CMS, this appears as the [​[DIRECTORY id=OCT link-text="Office of Campus Technology"]] shortcode. The required id should be set to a number for individual, or to an abbreviation (in capital letters) for CMS offices/programs/departments.

Example of a tooltip, showing contact details on hover / tap

Location of Directory Lookup button To find an individual's directory ID, use the directory tooltip lookup button, with the . This will insert the [​[DIRECTORY id=123]] shortcode for the matched individuals. To link to an office, please View the available office abbreviations.

The link-text attribute is optional. If none is provided, the full name from the directory will be displayed. Sometimes, it may be preferred to refer to an individual by position, or to use a shortened version of their name.

screenshot showing rendered directory tooltip shortcodes
Without link-text, a persons name is displayed exactly as in the directory. Provided link text will show instead of the directory name

Contact Blocks

Almost every page on the UH Hilo website includes a contact block, providing contact details for a person or office associated with the page.

To create a contact block, the use the shortcode [​[CONTACT-BLOCK id=123]] or [​[CONTACT-BLOCK affil=XYZ]]. A numeric id=123 corresponds to an individual's directory entry - the same number that would be used for a directory tooltip. Alternatively, provide an affiliation code in the format affil=XYZ to create a contact block for a department / office / program (View directory abbreviations).

Generated Contact block for the Student Support Services Program

Directory Cards

Many faculty or staff office pages are setup to display contact information that is found in the UH Hilo Phone Directory. This is easily done in the CMS page using the DIRECTORY-CARDS shortcode. The shortcode pulls staff information for a department or a specific group of individuals from the directory.

Pulling Department Staff Listings

If your goal is to simply list all of the staff in a department or office, the directory affiliation code is all you need.

The shortcode [​[DIRECTORY-CARDS id="POLSDEPT" template="directory-cards"]] will retrieve everyone with the POLSDEPT affiliation, and list them in alphabetical order. Substitute another directory affiliation code in the id="______" field to see the members of that department.

Screenshot of generated Directory Cards for the Political Science Department faculty page

Pulling Specific Individuals

Sometimes, it is preferable to list individuals in a specific order (i.e. seniority), or to include people from different departments (i.e. an interdisciplinary committee).
This can also be done with directory cards, by using a list of numeric ids in the shortcode, in the format ids="123,456,789".

[​[DIRECTORY-CARDS ids="1668,1212,404,1347,2143" template="directory-cards"]]

Screenshot of generated Directory Cards for Political Science Department faculty, in a specified order

Including an Email Form

Many contact pages have email addresses listed. However, it is not necessary for the visitor to leave the page in order to send a simple email. The [​[EMAIL-FORM]] shortcode embeds an inline form into a page.