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 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.
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
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.
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:
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 -
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
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|
||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 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|
Student Activities Council