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

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

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

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

The :​::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.

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.

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

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

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.

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

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