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
Adding an Instagram Post to a Page
Including Events from the UH Hilo Calendar
Including Fragments
- Content Reuse
Including Random Elements using [[DID-YOU-KNOW]]
Including an Email Form
Using Icons and Flags

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 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.

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.

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

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)

Rendered Content (on live page)

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 area Use 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.

Examples

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]]`
usa	`[[[FLAG usa]] The United States of America](https://www.usa.gov/)`	The United States of America

Logos

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.