UH Hilo Content Management System

Frequently Asked Questions about the CMS

How Do I...:

Create a Page

On the main CMS Administration page, look for the Create Page form.
This form contains three fields: Title, URL Stub, and Parent page. The parent page should be unit, office, department or division that 'houses' your page - often your site's home page.
The URL Stub is the part of the URL after the https://hilo.hawaii.edu/ site address. To create a directory, use a trailing '/' after the URL stub. Any pages that are not directories will have a trailing '.php' at the end of the page.

Create Page Form

URL Examples

Please Note Page names are Case Sensitive. Lowercase url stubs are highly recommended.

Duplicate an Existing Page

If another page in the CMS exists that is similar in structure or content to the page you are creating, consider duplicating the page first. To duplicate a page, first find and edit the source page in the CMS. Look for the orange Duplicate Page link button at lower left, next to the Delete page button. Do not edit the page before duplicating it, as your changes will be lost.

Duplicate and Delete page button

The dialog box will ask a few questions about the duplicate page. You will need to provide a new URL stub, page title, and choose a new parent page. After that, your new page will be created with an exact copy of the main content area, the additional content (sidebar / navigation) area, as well as any custom scripts or styles on that page.

Duplicate page dialog

Users are only allowed to duplicate pages to which they have edit access. Should you desire a copy of another UH Hilo page that is not within your department, please contact Brennan Low at Web and Graphics Services .

Publishing a draft page

Publish page checkbox If a page was created as a draft, it will not be visible outside of the content management system. To publish a page, navigate to the Meta tab on the edit page screen. Look for a checkbox between the 'Parent page' and 'Redirect URL' fields. Check this box and save to publish your page to https://hilo.hawaii.edu/.

URL stub field The 'URL Stub' field will determine the web address for your newly published page. The final address will be https://hilo.hawaii.edu/ + URL Stub + .php in most cases. If the URL Stub ends in a / character, then the address is instead will be https://hilo.hawaii.edu/ + URL Stub. Very likely, the URL Stub for your homepage ends in a / character.

Upload a File; Get a Link to Email

It is possible to use the Content Management System only as a file repository. To do so, you will rely on the Assets manager to update the files available for download. Follow the steps below to upload a file, and get a shareable link.

  1. Log in to the CMS Admin dashboard.
  2. Visit the Assets area in the admin dashboard. Assets manager
  3. Select a subfolder where you have permission to upload. Choosing a folder
  4. Drag and drop a file onto the upload drop target.

Content Management System drop targetDrag files to be uploaded onto the drop target

  1. Click/tap desired file from the file listing. File highlighted
  2. On the popup dialog, the full URL for the file you selected will be listed.
  3. Highlight the full URL, and copy it to your computer clipbloard (Ctrl/Cmd + C).
  4. Paste (Ctrl/Cmd + V) the URL into an email. Consider making a QR code or using a URL Shortening Service

Full URL highlighted for selected file

The URL will consist of the website address, the word documents, and then the full path to the file you uploaded.
For example: selecting the studentaffairs folder and files subfolder will place your file at
https://hilo.hawaii.edu/ + documents/ + studentaffairs/ + files/ + filename.ext

View All of my Pages

Follow the My Profile link at upper left-corner. At the bottom of this page, find a filterable list of the pages that you have permission to edit. The page title, with the next to it, will open the page for editing. The link with the URL stub and the next to it will view the page.

When you edit a page, the Additional Content portion will very likely have a reference to a sidebar or navigation fragment. That sidebar / navigation fragment can be found under the Fragments menu item in the CMS admin.

Example Sidebar
Most pages use a shared sidebar, common to all of the pages in a folder. Find the name of your sidebar by editing a page, and select the 'Additional Information' tab. The name will be appear after [[INCLUDE and before the closing ]​].

Fragment Selector
Once you have the name of your fragment, go to the Fragments area of the CMS Admin. There is a button - Show only those I can edit, as well as a filter that will help you find the fragment to edit.

Screenshot of fragment edit screen, showing a sidebarEdit content in the sidebar fragment as you would any other CMS page

Update A Faculty/Staff Page

Most academic departments at UH Hilo have a faculty / staff listing page. The Directory Cards shortcode brings this information in from the UH Hilo Directory. While individuals can update their own directory information, these changes will not cascade to the individual faculty / staff listing page until the page is re-published in the CMS. To refresh this information, simply edit and save the faculty staff page in the CMS. To verify your changes, Visit the live page (beginning with https://hilo.hawaii.edu/ and ending with .php or a /) and press shift + the (refresh) button in your browser.

Create an Image from my PDF Flyer

Screen shot showing path to export image from Acrobat Pro

If you only have a PDF of a flyer or poster, then the PDF must be saved as an image file before it can be shared on some social media channels or included on the UH Hilo Calendar. To do this, open the file in Acrobat Pro (available to UH staff), and choose the Export ToimageJPEG option from the File menu.

Resize image screen

The resulting file may be quite large (over 1MB). If so, then run it through the Image Resizing Tool, with a reasonable max width (1200 pixels), and it will yield a much smaller file size. This example achieved a 90% reduction in file size by setting appropriate values for maximum width and quality.

Add captions to an image

To add captions to an image, two things are required. The caption itself, and a style called .captioned.

Demonstration of caption syntax on an image tag

Place The caption (in double quotes) after the filename, seperated by a space. After that, the entire image code needs the .captioned style applied to it, using the same curly brace syntax as .pull-right, .pull-left, or .center. Multiple styles can be chained together, like so:

Image tag showing multiple style tags

Resize or Crop an Image

The content management system does not crop or resize your images. Images should be 'right-sized' before they are uploaded. Uploading an image that is too large takes more time to display the page. Even a 'compressed' image, if it is too large, will take too long to load. Use an image editing tool to shrink overlarge images. No image on the web needs to larger than 1500 - 1600 px wide. For .jpg and .jpeg images, a quality setting of .6 is recommended.

Software Tools

Cropping and resizing photos can be done using your computer or device. Android and iOS have built-in image editors that will allow you to crop or rotate an image.

Here are some resources to help you edit images on your computer or handheld device:

Online Tools

Some online tools allow you to crop or rotate, resize, or apply watermarks to an image.

  • Photo Editor Cropping and rotating tool. Allows cropping, flipping, and rotating of an uploaded image.
  • PicResize.com Supports uploading and resizing of multiple images. All images are made available in a .zip file after processing.

UH Hilo Image Editing Tools

Generate Traffic for Page

A webpage can have great content - consisting of well written copy text and captivating images - but still be of little effect. For the communication to be effective, the world needs to know about your content. There are several ways to generate inbound links - both digitally and from the real world. Once you know the URL for your page, you can and should promote that link, via email, social media, or word-of-mouth.

Short URLs

When a link is lenthgy, it is hard to type. This is especially challenging when dealing with an automatically generated URL, such as one for a google form or a youtube video. This can frustrate your audience, and risk alienating them. To avoid this hassle, using a URL shortening service is recommended. These services provide a short, easy to remember link that will redirect the visitor to another URL.

TinyURL provides an anonymous URL shortening service, and allows some flexibility in choosing the shortened URL. The web address for the UH Hilo youtube channel was shortened to https://tinyurl.com/UHHilo-YT using this service - easier to type than the full channel URL.

TinyURL input screen

Generated TinyURL success screen

The University of Hawaiʻi URL shortening service is available to faculty, staff, and students at UH. This service creates short URLs of the format http://go.hawaii.edu/XyZ, where XyZ is randomly generated. The service maintains a list of generated short URLs for each username. It allows users to include link descriptions and remove outdated links.

administration screen for go.hawaii.edu URL shortening service

Making QR Codes for URLs

QR code for the UH Hilo facebook profile

A QR code is a 2 dimensional barcode that allows information such as a web address to be 'read' without requiring the user to type anything. Modern smartphone cameras are equipped with QR code readers.

Consider creating a QR code for your most prominent link, before creating your flyer, and including it somehwhere in the design. Taking this step will make it easier for people to go directly to your website, survey page, or social media profile.

QR Code Monkey, a free service, offers the ability. Users can change the color of the to match your design, and include a logo within the generated QR code. This can help people recognize the social media site to which you are linking, without scanning the code. The QR code at right links to the UH Hilo facebook profile.

QR Code Monkey offers several logo options when creating a QR code

screenshot of the-qrcode-generator.com, creating a QR code from an input URL

https://www.qr-code-generator.com/ provides an easy way to create and download a QR code.

Defining Abbreviations and Acronyms

At the top of a page, you will sometimes encounter a block of code like this:

*[WUE]: Western Undergraduate Exchange
*[NSE]: National Student Exchange

These are definitions for abbrevations that are used in the page. These unpacked acronyms can be helpful when readers may not yet know the jargon or organization name to which you are referring. Abbreviation definitions disappear from the published page. Wherever the abbreviation is defined on the page, you will see a dotted underline; such as in the following sentence. Many UH Hilo students travel here through NSE or WUE. Some even learn to use the CMS! (tap or hover for definitions).

Linking to active UH Hilo Courses

To include a tooltip to a UH Hilo course, use the [​[COURSE ]​] shortcode. This will make the course information, from the latest UH Hilo Catalog available to viewers without leaving the page. To implement, type two square brackets [[ followed by the word COURSE in all capitals. Then, include a space, followed by the capitalized course alpha (i.e. BIOL or ASTR) along with the course number, without a seperating space. Close the [​[COURSE ]​] shortcode with two trailing square brackets: ]​]. Include any letter suffixes with the course number. For a course sequence, within the same alpha, two course numbers can be connected with a dash: -.
The course links, by default, include the course title and credits along with the Alpha/Number. If you would prefer that the titles or credits do not show, include either the credits=0 or titles=0 attribute with the course tooltip.

Example Course Tooltips

[​[COURSE + UNIV + 101 + ]​]
UNIV 101 Paths to Acad/Lifelong Success (1)
[​[COURSE + ASTR + 110-110L + credits=0 + ]​]
ASTR 110-110L General Astronomy, Gen Astronomy Lab
[​[COURSE + MATH + 241-242 + titles=0 + ]​]
MATH 241-242
[​[COURSE + BIOL + 172-172L + ]​]
BIOL 172-172L Introductory Biology II (3), Introductory Biology II Lab (1)
[​[COURSE + ENG + 100T + ]​]
ENG 100T Composition with Tutorial (3)