UH Hilo Content Management System

CMS Shortcode Usage Guide

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

On this page:

Adding a Video to a Page

Video embed dialogVideo 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 title of video should be descriptive, like alternative text for an image.

Video embed buttonLocation of Video embed button

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

Adding an Instagram Post to a Page

To embed an instagram post in the CMS, paste the Instagram.com post URL into the dialog that comes up when you press the '' button. The post and caption for the post will be embedded in the page when it is published. If including multiple posts on the same page, or if you want text to appear next to the post, consider using a grid for layout.
Location of Instagram embed button

Instagram post modal window

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 shortcodeExample 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 descriptionThe 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 a Month Calendar with Custom Events

To add a month calendar, with specific items, you can use the :​::CALENDAR shortcode, with a 4 digit year and 2 digit month, followed by bulleted list of events, and a closing :​::CALENDAR shortcode. Each event should be on its own line, and include a day of the month, and a title. Optionally, a start time can be provided between the date and the title, in 24hr time, preceded by an @. A class may be added for styling purposes, before the title. If desired, the event can be linked by putting a full URL (including http:// or https:// protocol at the end of the line. Any number of events may be added to a month calendar; however each calendar only shows one month (specified in the opening line).

View of CALENDAR shortcode syntaxThe :​::CALENDAR tag at the top and bottom will be colored green in the CMS editor, while the list-items are dark blue

When rendered, the public will see the calendar either in a monthly calendar view, or an agenda list view, if they are using a device with a smaller screen.

Calendar agenda viewVisitors using phones or tablets will see a list of events

Calendar table viewVisitors with larger screens will see a full monthly calendar

Adding Table of Contents to a Page

![Table of Contents button](/images/help/cms/TOC-button.png "Press the 'Table of Contents' button to add the shortcode to your page){.pull-right} If you have a longer page, with multiple headings, it can be helpful to provide a table of contents at the top of the page. This is done using the [​[TABLE-OF-CONTENTS]] shortcode, which can be added using the button at right. The Table of Contents shortcode requires at least two linkable headings, with unique IDs. The table of contents will list each linkable header, in sequential order.

Example of a Table of Contents, with associated headingsEach linkable level 2 heading will be listed in the Table of Contents at the top of a page. Following each will take the visitor to that portion of the page. This example has the 'columns' class applied, using the 'classes=columns' attribute.

The [​[TABLE-OF-CONTENTS]] shortcode can optionally take a few configuration options, such as container class/style, by including classes="columns" before the closing double square brackets ]]. The example above shows a table of contents with the columns class applied. By default, only heading level 2s are linked, although that can be overridden with the max-depth attribute. For example, by including max-depth=3, both heading level 2s and heading level 3s are linked, using a nested list.

A nested table of contents, with sub-bulletsThis table of contents shows both level 2 and level 3 headings in a nested list. A 'max-depth=3' attribute was added to the shortcode to create the nesting.

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 listFind 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 screenshotThe fragment is formatted using Markdown syntax, just like CMS pages

Content Reuse

The 'Show only those I can edit' button highlighted Fragments are an ideal ways to save time with frequently updated or shared content. If you have a message that needs to be on all of your pages, consider making it a fragment. This way it can be updated in just one place, and the pages that contain it will be refreshed automatically when it is saved. To narrow down the list of fragments in the CMS Fragment admin, use the text filter or press the Show only those I can edit button.

A fragment need not be long. Consider the following example - a snippet containing a heading, and two links with icons in a side-by-side grid. It looks great on a sidebar, but would be tedious to enter repeatedly.

Markdown Code (in fragment)
Code snippet to render social media links in a CMS markdown fragment

Rendered Content (on live page)
Screen shot of resulting social media link fragment, rendered

Using a fragment allows this block to be included with one line:
[​[INCLUDE studentaffairs/nse/social]].

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 and Adopt a Beehive. Each time their page is loaded, a random 'fact' is displayed. This is done with using the shortcode - [​[DID-YOU-KNOW]]

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

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. You can specify which fields (name,email,subject,message)to include in the form by naming them. By default, all fields are shown. So, a simple form with fields="name,message would only show two fields to a visitor, along with the 'Send' button.

An example Email Form generated using the shortcode

You can also pre-populate values into certain fields, including those that are hidden. In the example above, the text "Aloha. I need help." is pre-filled in the 'Subject' field, even if the field is not shown to visitors. This can be useful if you are using email filters to categorize incoming emails.

Using Icons and Flags

UH Hilo has an Icon library, as well as a collection of national flags and some logos in SVG format.

To use an icon in the CMS, use the [​[ICON .... ]] shortcode, with the name of the icon in place of the ‘...’. Icons are the same size as text, so they are often featured in links. Remember to include a space between the end of the [​[ICON .... ]] shortcode and the beginning of any adjacent words. Flags work the same way. Flags work the same way - only with a [​[FLAG .... ]] shortcode.


Icon / Flag name CMS shortcode Result
uh-hawaii [​[ICON uh-hawaii]]
uh-star-color [[​[ICON uh-star-color]] STAR](https://www.star.hawaii.edu/) STAR
usa-state-hawaii [​[FLAG usa-state-hawaii]] Flag of the State of Hawaii
usa [[​[FLAG usa]] The United States of America](https://www.usa.gov/) Flag of the United States of America The United States of America


UH Hilo also has some a library of logos, brand marks, and seals. Logos are larger than flags or icons, and some may be © copyrighted and/or ™ trademarked and under restricted usage. Some logos are unofficial and should not be used in a public production environment. Also see the UH Graphics Standards and the UH Hilo Style Guide for logo usages.

To use a logo in the CMS, use the [​[LOGO .... ]] shortcode, with the name of the logo in place of the ‘...’. Logos can be placed inside of links. It is suggested that you use two trailing spaces and a line break
between the logo and the text description that follows. The html <br> code can used instead, to insert a line break.


Logo name CMS shortcode Result
uh-uhhsa-simplified [​[LOGO uh-uhhsa-simplified]]
uh-seal [[​[logo uh-seal]] ​
UH Hilo](/)

UH Hilo
gov-nsf-color [​[logo gov-nsf-color]]
uh-sac-simplified-color [[​[Logo uh-sac-simplified-color]]<br>Student Activities Council](/campuscenter/sac/)
Student Activities Council