DotCMS Reference Guide

DotCMS is the content management system used by SUNY Cortland to manage the cortland.edu website. This guide is supplied as a reference for common functions and workflows in dotCMS.

Important Links and Resources

Creating New Pages and Content

Creating a New Page

  1. Browse to the folder in dotCMS that will contain the new page.
  2. Use the Add New button at the top right of the screen, then select Page.
  3. A pop-up window will ask if you want to create a page asset. Use the Select button to continue.
  4. Give the page a meaningful title. This will be used as the main heading for the page.
  5. Confirm that Host or Folder matches the folder used in step 1. If not, select the correct folder.
  6. If desired, enable Show on Menu. This will add the page to the menu for all related content. Use the Sort Order number to set where the link will be placed in the menu.
  7. For a normal page with content in one column and the right-side subnavigation column, set the Template to cortland.edu RWD – 1 Main (12), subnav.
  8. Save the page when finished, but do not publish the page until content has been added.

Creating New Content

  1. Using the site browser in dotCMS, find the page that will contain the new content and lock the page for editing.
  2. Use the Add Content button above the section where you want to add the new content, and select New Content.
  3. Enter a title that identifies the content. This title will not be visible on the page.
  4. Set the Host field to the department/office or the folder where the page is located.
  5. Add your information to the Body. View the dotCMS editor reference below for a description of commonly used options.
  6. Save / Publish when the content is finished.

The dotCMS Editor

The content editor in dotCMS contains many of the same editing functions of a word processor. This section highlights the most common functions of the editor toolbar, pictured below.

Preview of the dotCMS editor controls

Bold

Use Bold sparingly to indicate important text.
The bold button in dotCMS: the first option in the first row of buttons.

Italic

Use Italic sparingly to indicate important text that should be read with emphasis.
The italic button in dotCMS: the second option in the first row of buttons.

Little Header Format

Use Header > Little Header to reduce the font size of a heading to the normal paragraph font size.
The Little header option is found in the Formats drop-down in the Header section, the seventh option in the first row of the editor.

Screen Reader Only Format

Use Links > Screen Reader Only to include text that is accessible to screen readers but not shown on screen. This can be used to enhance link text like “Read More” that does not describe where the link goes.The Read More option is found in the Formats drop-down in the Links section, the seventh option in the first row of the editor.

Headings

Use h2 through h6 to indicate headings.

Headings are found under the format dropdown, which is set to Paragraph by default.

The h1 heading is used for the title of the page, which is included automatically on a SUNY Cortland webpage. Subsequent headings define the structure of the page. Examples of proper heading structure are provided on Mozilla Developer's Network website.

Images

Use the Insert/edit image option to manage the source and image description for an image.The insert/edit button is located in the second row of the dotCMS editor, the fourteenth button in the row.
The image description should include concise, meaningful information that is provided to screen readers in place of the image. For more information, view the visit the Images in dotCMS section below, and view Webaim's Alternative Text article.

Clear Formatting

Select the text/content in the editor that you'd like to reformat, then use the clear formatting button. This step should always be taken after pasting content from an outside source such as a Microsoft Word document.
The clear formatting button is in the third row of buttons in the dotCMS editor; it is the third button in the row.

Images in dotCMS

Image Formats and File Sizes

When saving images for the web, the image format and compression will vary depending on the image.

Graphics

Graphics and simple images with few colors should be saved as a PNG.

Photographs

Photographs and full-color images should be saved using the JPEG format (sometimes labeled as JPG). When exporting an image from Adobe Photoshop, the Quality setting for a JPEG should be set between 40 and 55 percent, depending on the clarity needed. A banner image (848 by 403 pixels) should not exceed 75 kilobytes (kB) in size.

The following video describes the process of resizing an image and saving/compressing it for the web.

Image Descriptions

When inserting an image in dotCMS, include a description. The image description should include concise, meaningful information that is provided to screen readers in place of the image.

The image description is entered in the general tab of the Insertedit image prompt.

The description should include all important or meaningful information in the image. Consider the purpose of the image on the page; how is it relevant and what is it conveying? If the image was not shown, what would you need to know about it?

Image Dimensions

When creating images to use on your website, choosing the correct format and size is important.

Banner Images and Images In Body Content

Images in single-column body content should be no larger than 850 pixels wide, and only as tall as needed. Banner images should be sized to 850 pixels wide and 400 pixels high.
A banner image is placed in the first content section in dotCMS.

Images In the Right Navigation Column

Images in the right column should be 232 pixels wide or less, and only as tall as needed.
The right column is ordered after body content in dotCMS.

Two-Column Body Content

When body content is split into two equal-width columns, images should be 408 pixels wide or less, and only as tall as needed.
In the body content is split into two columns, an image 408 pixels wide will fill the entire width of a single column..

Two-Column Body Content With a Narrow Right Column

When body content is split into a wide left column and a narrow right column, images in the right column should be no wider than 262 pixels, and only as tall as needed.

2nd-column-image-size