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 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 ' ' 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.
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"]]
.
Example of the EVENTS shortcode, which imports upcoming events from the UH Hilo news and events calendar, based on one or more entered keywords.
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.
Find a copy-pasteable shortcode to include the fragment on the 'Edit Fragment' page
The fragment is called using the INCLUDE shortcode, on the 'Additional Content' tab
The fragment is formatted using Markdown syntax, just like CMS pages
Content Reuse
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]]
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.
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.
Examples
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 |