Images
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.
- After selecting Image, you will be redirected to the Add Image page:
- Enter the name of your image in the corresponding text field.
- Select Choose File under the Image title. A popup will appear and you can select the image you would like to upload.
- 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="". - Select the focal point of the image by moving the plus symbol around on the image:
- Next, you can enter the Caption or Credits of the image.
- 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:
When the focal point is set to the top and the image is used within a Card:
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
Image naming
Naming convention
Maintaining a library of images of various sizes can be tricky. Using a naming convention for your images will help. Consider using a convention that combines the image name and the size, such as:
<name>-<widthxheight>.<filetype>
For example:
DogAtBeach-1760x520.png
Filename characters to avoid
Best practices for image names is to avoid characters that might interfere with functionality of the site. This includes characters such as asterisk *, ampersand &, forward slash /, backward slash \, space " ", and more. Here's a full list of characters to avoid.
Creating a new line after adding an image
- After an image has been uploaded, hover over the bottom edge of the image.
- Click on the small red box with a white arrow to move to a new line below the image.
Bulk upload images
You can upload several images at a time with bulk upload.
- Go to All Content > All Media > Add Media
- Click on Upload File(s). This will bring up the Upload File(s) page.
- Here you can either:
- Click on Select files and select the files to upload from your computer, or
- On your computer, select the files to upload and drag them to the Upload File(s) page.
- Click Upload. This will bring up a page for adding metadata.
- Update the names of the files to make it easier to find on the site.
- If alternative text is needed, say there's text on the image, deselect Decorative Image and add the alternative text.
- Click Save
Troubleshooting Images
- When adding media, the "Select Files" function will sometimes time out. When this occurs, try again by closing the modal, clicking "Add or select media" and then "Select files".