CMS Shortcode Usage Guide
This page builds upon the foundational Using the Content Management System page.
Adding a Video to a Page
To embed a video on a page, paste the YouTube video URL into the dialog that comes up when you press the ' ' button. Any text selected when you press the button will become the title of the video. The resulting tag will look like
[[EMBED https://www.youtube.com/watch?v=... allowfullscreen title="title of video" rel=0]]. The title of video should be descriptive, like alternative text for an image.
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
For the events to populate on your page, you need to Submit your Event or Announcement and use the keyword you specify.
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.
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]]. 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.
[[/.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
.x4 class to a
The following code creates a three column grid with a block spanning the first two columns.
. . .
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 -
Directory Related Shortcodes
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.
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.
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.
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).
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.
[[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.
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"]]
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.