Finding photography that is free and clear to use, meets brand guidelines and is visually interesting can be quite a challenge. A good place to start is University Marketing's brand photos repository. These are original sized photos, so they need to be resized and compressed for the web.

There are also stock photography websites that provide free photographs:

When possible, align with the university's photography brand style when selecting images from 3rd party repositories.

Looking for something else? Let us know.

Sizing Images in Drupal

Images need to be certain aspect ratios and sizes in order to look good in Drupal. Below we have provided some examples of images in the different paragraph bundles. These are guidelines as a way to get started, but sometimes, images need to be resized multiple times to get it just right. If you're having trouble, come to Open Lab for some help. 

1 column Background Images

Images should be at least 1900 x 500 pixels. The container that the image lives in has a height set at 450 pixels. So, you want to make sure that there is plenty of empty space above your subject so that it doesn't cut off critical parts of your photo, like a subject's face. 

Download Pre-Sized Campus Backgrounds

For example, the above photo has a lot of greenery above the subjects walking on the sidewalk. The greenery serves a buffer area so the subjects aren't cut out. 

Another consideration is subject location. If the subject is in the very center, then it can be difficult to place overlay text. Leaving room in the photo for text overlay at the left, right, or center is a great way to mix photos and text.

Don't size 1 column background images larger than 2500 pixels wide. Large images can slow down your website and make it near unusable for people with slower internet connections or mobile users who have a poor connection.

Cheat Sheet

  • At least 500 pixels high
  • Good starting point: 1900 x 500 pixels
  • Max dimensions: 2500 pixels wide

2 Column Background Images

The height of this paragraph is controlled by how much text you have. So you'll need to size or crop your picture accordingly. A good starting place is 800 x 600 pixels, but depending on what else you have, it may need to be smaller or larger. Be sure to check to see how it looks at different screen sizes. The outer edges of the photo may be hidden. A common mistake is to have people's heads to be cut off at larger screen sizes. Photos of people need to have enough empty space above the main subject, much like the 1 column background image paragraph. 

Add the photo in the other column as a background, rather than in the text edit box (CKeditor) so that it will fill the whole space. 

Cheat Sheet

  • At least 450 pixels high
  • Good starting point: 800 x 600 pixels
  • Height varies widely since it depends on how much text 

Another Option

This image is 900 x 200 pixels. These dimensions work well with photographs of small details or landscapes. To make this:

  1. Create a 2 column paragraph
  2. Set the background color for both sides to black (or orange)
  3. Add the photo in the CKeditor, not as a background image. Change the images settings:
    • Set Display As to Original
    • Alignment set to center
  4. Add your text below the photo

Get creative! There are a lot of possibilities and these examples are just the start. 

Title Here

Nulla lacinia sodales magna, at viverra sem pellentesque in. Fusce hendrerit diam sed tellus commodo venenatis. Quisque cursus quis orci blandit rhoncus. Nullam ultrices augue sed quam sollicitudin molestie. Vestibulum ullamcorper turpis nisi, nec rhoncus diam placerat ac. Suspendisse quis velit aliquam, ultricies dolor eget, consequat neque. Nulla faucibus enim risus. Maecenas quis mauris a lorem semper tempus. Praesent pharetra fermentum augue, sit amet dapibus quam mollis vel. Cras auctor mauris a nunc dictum porta. Donec vel felis efficitur, aliquet arcu eget, pretium turpis. Etiam non luctus purus. Integer efficitur volutpat nisl in eleifend.

3 Column Images

This is a great place to use square photos, which is a quick and easy way to create a consistent layout. You can use any ratio you'd like, but we recommend you use the same size for each photo. 

These photos are 400 x 400 pixels. 

Change the images settings:

  • Set Display As to Original
  • Alignment set to center

Title Here

Donec volutpat, massa a tempus consectetur, nisl augue auctor urna, quis lacinia diam enim vitae leo. Praesent a commodo lacus, et finibus quam. In vitae massa dignissim, ullamcorper lacus sit amet, rutrum elit. Vestibulum viverra pulvinar felis vitae faucibus. Suspendisse congue elit sit amet tellus scelerisque, ut ultrices mi suscipit. Nulla facilisi. Ut pharetra eget mi sed fermentum.

Title Here

Donec magna quam, lobortis vitae eleifend a, rhoncus et urna. Nam convallis est quam, sit amet vestibulum risus lacinia sit amet. In lorem libero, fermentum pharetra orci eget, convallis venenatis mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque tristique viverra metus, eu mattis mauris rhoncus eu. 

If you want to fill the space a little more, you can use photos that are 800 x 600 pixels. 

Change the images settings:

  • Set Display As to Original
  • Alignment set to center

Ut quis lacus venenatis, gravida mauris quis, dignissim ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam hendrerit suscipit elit faucibus mollis. Suspendisse potenti. 

Maecenas nec vehicula dolor. Sed vel purus ac ex tincidunt sodales. Vivamus in rhoncus dui, sed sagittis ipsum. Nunc convallis eleifend lectus, a sollicitudin purus mollis a. Nam leo quam, pulvinar vitae laoreet quis, sollicitudin ut nibh.