UH Hilo Content Management System

Working with Files and Images

On this page:

Adding Files or Images to a Page

The insert asset button is located in the toolbar above the main content edit box

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 the images 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.

screenshot of asset selection dialogView images from the current folder in the 'Assets' tab.

asset upload tabSelect the 'Upload' tab to reveal the uploader. Drag and drop files from your computer to upload them and place them on the current page. The files will be uploaded to the folder of the page you are editing.

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.

When you are editing a page, look for an assets buttons, with a paperclip icon. That's where you can select an existing image, or upload one inline. If your buttons are set to small in your profile (the default), only the icon will show.

Location of 'Insert Asset' buttonFind the asset button in between the link button and the special characters button

When you press that button, a modal window shows up, which displays all the images that exist in the current folder. Note that you are on the 'Assets' tab; so only one source of images is displayed. Choosing the 'Upload' tab will bring up the same drag and drop uploader previously described.

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.

Pay attention to file size. Larger images take longer to load, especially on slow cellular connections. Use a service like ImageOptim or an image resizing tool to shrink your images to an appropriate size before uploading. Rarely, if ever, should an image on a website be larger than 300kb. Images should be at maximum 1200-1500 pixels in width - generally much smaller. If your photo is busy, consider cropping the image to highlight only the most important portions.


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.

Alternative text markdown rendering demoThe text within the square brackets becomes the alternative description of the associated image

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?

For charts and graphs, the web office may be able to assist in making patterned charts accessible to the colorblind.

Feature Cards

A feature card is an element that consists of an image, a link and a title. If you have those three elements, however, there is an alternative way to present them: use a Feature Card, a CMS Short Code that makes one tile out of all those elements:

Feature card button FEATURE-CARDS can optionally have a hover effect to show when the button receives focus. To add a feature card, use the button. The following modal dialog, with fields for each option, is then displayed.

Feature Card dialogFeature card dialog

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.

screenshot of assets upload pageTo upload files, drag and drop them onto the light blue upload area at the top of the Assets page.

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.

asset display modalClicking on a file will display the code that can be used to include the file in a page.

image controlsImages will be previewed when they are selected from the Assets page.

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.

screenshot of assets upload screen, without upload permissionA user without permission to upload to the current folder will see an upload target that is solid grey with no texture.

screenshot of assets upload screen, with permission to uploadA user with permission to upload has an upload target with light blue textured background.

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

select all files dialogThe 'Select...' button allows you to check all files in a folder with one click.

find file usages dialogOnce you have files selected, the 'Find File Usages' option will deselect any files or images that are linked from pages, meaning the remaining files are safe to delete or archive.

Actions on selected buttonOne of the available actions is to download an archive of the selected files