Skip to main content Skip to secondary navigation

Images

Main content start

Images are an important way to add visual interest or information to your website.

Before uploading images like photographs or graphics, please review the university's usage and accessibility tips, to ensure that your images comply. 

  1. After selecting Image, you will be redirected to the Add Image page:
    add image
  2. Enter the name of your image in the corresponding text field.
  3. Select Choose File under the Image title. A popup will appear and you can select the image you would like to upload.
  4. After you upload the image, you have the option to add alternative text.
    If this is an image of text or conveys important information, add that as Alternative text. However, if this is simply a decorative image, leave the Alternative text blank. That's the equivalent of alt="".
  5. Select the focal point of the image by moving the plus symbol around on the image: 
    Edit Focal Point Example
    Additional information and examples of the focal point can be found here
  6. Next, you can enter the Caption or Credits of the image.
  7. When you’re ready, hit Save at the bottom left of the page.

Example of setting the focal point

When the focal point is set to the bottom and the image is used within a Card:

Focal Point Bottom
Card Focal Point Bottom

When the focal point is set to the top and the image is used within a Card:

Focal Point Top
Card Focal Point Top

Crop Image to Exact Dimension

Content elements that include an image, like the Banner and the Card come pre-populated with image sizes. You want to crop to the exact dimensions of images, here are some common sizes you will need to crop. 

When you upload an image without cropping beforehand, Drupal will fit it into the space defined for the image. To get an optimal effect (and avoid unintended cropping) you’ll want to upload an image with dimensions that are close to the space defined for it. The resolution will be better if your image meets the recommended resolutions and sizes. 

In order to optimize site storage:

  • The resolution of the images should be set at 72 DPI 
  • The maximum size should be no larger than ~1920px wide
  • The color mode should be RGB 

Note: All image dimensions are width by height.

Top Banner and Banner

Aspect ratio: 30:11

3000px x 1100px recommended source size (72 DPI)  

Card Images (including Media with Caption)

Aspect Ratio — 2:1

2000px x1000px recommended source size (72 DPI)  

Image Resizing Resources

  • Photo Editor
    • Photoshop
    • Illustrator
    • Preview (available on Mac)
  • Photo Compression