Sizing photos for your chosen Drupal template

Whenever you have an opportunity to upload images in Drupal, you will see a blue TIP alerting you to the image size appropriate for the space. The best way to plan for this is:

1. Plan for your homepage content which will help you decide which template to choose.
2. Once you have chosen the page templates, you will see the image sizes in the Drupal interface. Size/crop accordingly.
3. Plan for the content within your website and let that content guide you toward the best interior template choices (ie: "I only have some basic content with an image and a number of important links I need to link to" or "I have a number of images and content featuring our unit's research").
4. Once you have chosen the page templates, you will see the image sizes in the Drupal interface. Size/crop accordingly.

Tips and guidelines for successful photos

DO:

• Select photos with context, “in the moment.”
• Take time to edit and size your photos. (Free or low cost online photo editors Pixlr, iPiccy, PicMonkey or Sumopaint.)
• Select, compose and edit photos optimally for your banner image(s).
• Compose and insert concise and clear alternative (ALT) text for your images when appropriate. (Tips for creating good ALT text.)
• Properly sized photo to use on your social media channel (Download University branded social media icons)

DON'T:

• Use group shots of people unless you can tighten in on the photo.
• Use your website as a way to highlight your tastes in photos. Go for what's most professional for the department.
• Be afraid to crop. Most people never crop tight enough or are afraid to crop tops of heads — a trick that works well when cropping headshots.

Responsive Images

When adding images to a text block — to ensure they stay responsive and mobile friendly:

In order to get an image that scales in any field:

• Make sure to use a properly sized image.
• Set the width to 100%.
• Don't use height — even if the text editor adds it, it's best to remove it.

In order to constraing the size in the main body:

Constraining size in the large body of text can require more work. The best practice is the following:

• In a style parameter set the width to 100%
• Remove any trace of height.
• Set the max-width equal to the largest with display you want the image to show at
  For example, if you want an image that is 512px wide at full size, add 
  style="width:100%; max-with:512px" this will allow your image to scale on small screens
  without having to be tiny on large screens. 
  Full code example:
  <img src="path/myimage.png" style="width:100%; max-with:512px" />

View some examples and read the latest photography style guidelines (PDF).