Using the Content Management System
- About the CMS Technology
- Using the CMS Admin
- Creating a Page
- Creating Links
- Using Page Headings
- Editing an existing page
- Hawaiian Characters
- Adding Files or Images to a Page
- Using the Assets manager
About the CMS Technology
The UH Hilo CMS (Content Management System) is the tool used to create pages on https://hilo.hawaii.edu/. The CMS uses 'Markdown', a simplified subset of HTML, to format pages. Because of the stripped down, content-first structure of the CMS, it help ensure our content-creators ensure that web content is accessible to all.
All public-facing content, and most non-public facing content, made available on our websites and social media channels must meet1 standards and guidelines outlined in Section 508 of the Rehabilitation Act. These standards were refreshed in January, 2017 to adopt the Web Content Accessibility Guidelines (WCAG) 2.0 levels A and AA.
Using the CMS Admin
First, login to the CMS Admin at cms.uhh.hawaii.edu/admin/ or the admin URL provided by the . Note that the url is different - it has
cms.uhh. instead of
hilo. at the beginning. Once you have logged in with your
@hawaii.edu email, you will be taken to the CMS dashboard, which has a number of buttons at the left of the screen.
Creating a Page
The Create Page dialog is visible on the CMS Admin home and the Pages screen. If you try to visit a page that does not exist (by typing in the URL bar), the CMS will prompt you to create a new page, if appropriate. A page title and a URL stub is required to create the page.
What is a URL Stub?
The URL Stub is the part of the URL after
hilo.hawaii.edu/, and before the trailing
.php extension for the generated pages. For example, 'admissions/transfer' will be visible at hilo.hawaii.edu/admissions/transfer.php. The URL stub can contain the slash '
/' character, which is used to indicate a folder.
- becomes https://hilo.hawaii.edu/help/cms/structure.php#anchor
To create a directory, or a subdirectory, use a trailing '
/' after the URL stub.
Only pages that end in a slash '
/' can be linked without the trailing '
.php' page extension.
For example - the URL stub 'admissions/inspired/' will be visible at hilo.hawaii.edu/admissions/inspired/
Parent pages / hierarchy
Every page has a 'parent' page that above it in the navigation. The home page for your department or unit is a good choice for 'Parent Page'. For example, Student Affairs would be an appropriate parent page for hilo.hawaii.edu/studentaffairs/maap/. To filter the list, just start typing the page name or URL stub of the office or department that houses your organizational unit.
Duplicating a page
The Duplicate page... button allows you to create a copy of an existing page, with a new URL stub and page title. To use the duplicate function, first save any changes to the page, then click the Duplicate page button. A dialog will come up, asking you to confirm the new page name and URL stub. Any styles or fragments included in the 'Additional Content' area will be copied to the new page, as well as the page template and any pre-page content. Duplicating a page is a convenient way to make sure your new page matches the others in your site.
Unpublishing a page (or, why not to delete a page)
When you want a page to be removed from public view, you can 'unpublish' the page by going to the 'Meta' tab and unchecking 'Publish this page' checkbox. The advantage of doing this is that the page will still be available on https://cms.uhh.hawaii.edu/ (to logged-in users), but will not be available to the public on the live https://hilo.hawaii.edu/.
It is possible to delete a page in the CMS, however there are a few reasons why it is preferred to 'Unpublish' the page instead. Deleting a page removes the edit history, and may lead to broken links. Unpublishing the page allows for it to be recovered later.
If you want traffic from your deleted page to be directed elsewhere, consider using a Redirect instead.
Sometimes, it is useful to have a page that forwards to another page. To establish a forwarding page, enter a URL in the 'redirect' field of the 'Meta' tab on the Create Page form. Creating forwarding pages allows legacy or shortend page URLs to still point to the current page. Redirects can be useful to correct broken links, by forwarding traffic to the correct page instead.
Links are essential to web pages; they are the glue that holds a site together. Links consist of two parts - the link text, and the link destination. In Markdown format, the link text is between a set of square brackets - '
[' and '
]', followed by the link destination URL in between opening and closing parentheses - '
(' and '
)'. In the CMS page editor, the link text is colored dark blue, and the link URL is indicated in red.
This code will be color coded as at right in the CMS edit page screen.
Link URLs should start with an
https://, unless they are a link to another page on this website.
Using Page Headings
Headings are used to seperate content. There are several sizes of headings available, ranging from heading level 1 (the page title) to heading level 6 (the smallest sub-heading). In the CMS, use hashtags to indicate the level of the heading, with one hashtag for each level. For example, a heading level 2 would look like
## Major Heading and a heading level 3 would appear as
For more about headings, visit the Accessible Page Structure page.
Editing an existing page
We recommend installing a spell-checking browser plugin, to alert you to any spelling or grammatical mistakes before pressing 'publish'. The Language Tool Grammar and Spell Checker tool does this via a FireFox Addon or Chrome Extension. Please contact the Help Desk if you need assistance installing a browser plugin.
To edit a page, first login to the CMS Admin, and then find the page you wish to edit. You can do so by browsing cms.uhh.hawaii.edu, and looking for the 'Edit this page' link in the lower left corner.
You can also use the site search from the admin panel to search for the title or URL stub of the page you want to edit.
The UH Hilo CMS is designed to make it easy to spell Hawaiian words properly, using Hawaiian Characters such as the ʻokina and kahakō. Do not use the single quote ('), apostrophe (’), or backtick (`) in place of the ʻokina.
The 'Insert special character' button includes all of the hawaiian characters, plus hard-to-type characters such as apostrophes and quotes.
Backticks (`) are used to denote a code block, and will not be interpreted correctly if used instead of the in place of the ʻokina (ʻ).
Adding Files or Images to a Page
To add images or documents to a page, you can use the ' Insert Asset' button from the edit page screen.
Upon pressing this button, a dialog will come up, with a few tabs. The 'Select Asset' tab will show all of the image and documents in the current folder. You can also browse to other folders on the website. Once you choose a photo, the code to show it on the webpage will be inserted into the page.
Uploading New Files From Your Computer
If the file you want to insert into your page is on your computer, you will need to upload it before placing the image or a link to the file on your webpage. To do this, select the 'Upload' tab in the 'Insert Asset' dialog, and drag one or more files onto the target. The file will be uploaded, and a link to the file or files will be placed into the page you are editing.
If you drag more than one file into the uploader, each file will be uploaded, and a markdown formatted document link or image code will be inserted into the page as part of a bulleted list.
Alternative Text on Images
If you have text selected when you press the ' Insert Asset' button, that text will become the Alternative text that screen readers will use to describe the image. Otherwise, you will have to add a text description of the image afterwards.
Not all visitors to our website are the same. Some see differently, or not at all. If you rely on things like the contrast between different colors to convey different information on a chart, how will a coloblind person be able to interpret it? Similarly, if you publish an image of a flyer for an upcoming event, with the alternative text 'poster' or 'flyer', that is doing a disservice to those using a screen-reader to access the content.
Good alternative text should be descriptive and describe the image within the context of the content—all within one sentence. Ask yourself: How would I describe this image to someone over the telephone?
Using the Assets manager
Files and images stored on your website can be found in the 'Assets' section of the CMS. To view / add documents to your site, go to the Assets section of the CMS, then choose the appropriate folder. Files are kept in a folder that has the same name as the URL stub. For example: Documents uploaded from the
/uhh/vcaa/ folder will be in the uhh > vcaa folder.
Clicking on a file from the assets page will display a code to link to the file, or to diplay the image, in markdown syntax. You can also rename a file or move it to a new location by clicking the 'Rename' button.
Please note that all web content must be accessible. This includes images and documents that you link from a web page. See Accessibility of Web Content and contact the web office for more information.
Folders and Permissions
The Assets manager is folder based. When the Assets page loads, it defaults to the root folder of the website, which may not be a place where you are permitted to upload files.
Consider an individual with access to
studentaffairs/womenscenter/. When they first visit the assets page, the upload area will have a grey background, and a warning message will appear above the folder list.
To find any existing files, or to upload new ones, this individual would first need to go to the
studentaffairs folder, then to the
womenscenter subfolder. Upon navigating to a folder where a user can upload, they can upload, rename, delete and move files.
Files outside of a user's permitted folders can be linked or used in a page, but cannot be modified by that user.
Advanced file management
There are some powerful tools built into the asset manager. It is possible to find unused files and download an archive of selected files using the 'Actions on Selected button.