Content tip header image

Before you get started, know the origins of your photos and remember to support photographers whenever possible.

  • Need a great photo? Check with the Office of Communication and Creative Services. They have thousands of archived photos available for use on the site and they’ll be happy to assist you. C+CS will always provide photo credits when available.
  • If you are showing student or alumni imagery, it’s a good idea to include a link to their portfolio or work site, where applicable.
  • If you must start from scratch, and search the web for imagery, start with Flickr, which allows you to search for images that are licensed for reuse by Creative Commons. In Google search, select the “images” tab, select the “tools” tab, then in the “Usage Rights” select “labeled for reuse.” Read more about how to filter google image searches by usage rights.

This image is set to "half-column" size, aligned to the right, and uses a text wrap. We're displaying the caption underneath, and have enabled the "Click to preview" feature.

This image is set to "half-column" size, aligned to the right, and uses a text wrap. We're displaying the caption underneath, and have enabled the "Click to preview" feature.

CMS Image Overview

Images are stored in the Image Library, which you access by selecting Images in gold in the upper right corner of the dashboard. It’s located in the black bar following the word Libraries.

Image Library

Images are organized into Collections. The default collection in every group is All Images. To help stay organized, additional collections can be created as you upload images.

Images can also be pulled into Galleries—under the Gallery tab in the dashboard. Use Galleries to place collections of photos onto a web page by inserting a slideshow or the My Photo Gallery widget.

Working with Images

Always upload a large image, even if you only plan to use a small version on your page.

  • The image manager will easily let you resize and move your images to fit in the various areas of your page. As more computers and devices come standard with high-resolution displays, it’s a good habit to keep those original image sizes large. That also makes it easier to reuse your images in a slideshow format later.
  • Aim for at least 2000px on the longest side.

Images can be made into links. 

Images can be made into links by clicking to highlight the image, and then pushing the link button in the toolbar.

Always add captions to your images and image credits when available.

  • You can choose whether or not to display the caption below your photo, but regardless of what you choose, always enter a caption.
  • The best captions are usually one or or two short sentences. Be descriptive, but succinct.
    ADA tip with checkmark
    The CMS uses the same text for the caption as it does for the “Alternative Text” field (Alt-text or Alt=) that screen-readers use to  make content accessible to visually impaired users. We recommend using the field for Alt-text only. Using the same text for the caption introduces redundant content for a screen reader. 
  • Alt-text also helps users who may be accessing the site from low-bandwidth locations like smartphones in a congested area.
    ADA Tip with checkmark
    The Alt-text should provide a brief description of the image, for example, “runner just reaching the finish line.” The Alt-text should be different from the image caption. When the alt text is the same as the caption, it introduces duplicate content. The CMS currently does not allow for both alt-text and a caption, however the option will be offered in an upcoming software version.

Use the built-in buttons in the image manager for “half-column” and “full-column,” and avoid specifying an exact image size in inches or pixels unless the image is smaller than half the column.

  • As more and more people view the site on a multitude of devices, we can more easily control their experience by using these handy functions. Plus you’ll always be certain that your images aren’t stretched or distorted.

Sort your images into collections and galleries for easy organization and maximum impact.

  • An image collection is a tool that you manage within the CMS—they are not visible to your users. A good example of an image collection might be “New Staff Head Shots, October 2016” that holds a fews shots of each staff member, or “Zombie Prom 2017.” 
  • Image Galleries are a set of curated images, with captions, that are displayed to your users. For example, your image gallery might be called “Meet Our Staff” and would use only one image of each staff member, complete with a caption, or a selection of images from a series of Zombie Prom events.

The image border can be removed or added.

The image border can be removed or added by selecting the image, going to the “Formats” dropdown, and choosing “Border” or “No border.” All images on the page automatically get a thin border, except for images placed in the introduction, which do not get a border automatically (but you could add one).