Make an Impact with Images
Drupal makes it easy to add and reuse images throughout the site and it can crop and resize your image on the fly to suit each place it's used. Add large hero images at the top of your pages, include galleries of photos, choose images that highlight and reinforce your messages, or add headshots to profiles. Images are integral to our site.
You must follow site and legal standards!
When adding images to the site, make sure you follow all legal and site standards. Three areas are covered below, but see College Policies Related to Communications on GrinnellShare to learn more.
- Copyright Requirements
- Accessible Alt Text
- No Text in Images
Always include alt text — i.e. a description of your image. Critical for the visually impaired, alt text also helps in other ways as well.
See WebAIM's Alternative Text article for tips on how to write alt text.
To avoid a current issue with Drupal, do not use double quotes in alt text. You can use single quotes.
Do not use images that contain text (for example, an image with text overlaid using Photoshop or another tool).
Exceptions may be made in limited situations, such as:
- a picture of a book cover used to illustrate news about an upcoming reading or publication
- a logo for campus partners
- a graph or figure explaining a particular idea
- a picture of an object that has text (the entrance signs on the south side of campus, for example)
All information that is visible in such exceptions must be provided as alt text or explained in text on the page.
Exceptions will not be made for event posters.
Image Basics
Different browsers present different challenges to the viewer, so images on our site react on the fly, just like the rest of the site.
Compare these different layouts from the same page as displayed in smaller and larger browser windows:
Types of Changes
- Any image may get smaller when displayed on a smaller screen (such as on a phone).
- Page and Group Info hero images are sized and cropped differently depending on the browser window.
- Images from News are cropped more narrowly when displayed in feeds.
- Profile images are cropped to squares and can get smaller when displayed in faculty or staff listings.
- Images added to most components may be rescaled and cropped.
In general, load a larger image (e.g. 2000 pixels wide or so) and let Drupal resize the image as needed. Exception: When adding a “natural” image through a WYSIWYG editor,
Use preview and focus tools to adjust how Drupal crops the image.
Sources for images can include:
- People who took part in specific activities
- Communications office:
- We have a store of College-related images. Contact us if you have specific needs.
- Our photographer can take professional headshots to use in profiles. Watch the Campus Memo for upcoming sessions.
- Creative Commons images: Kayla Reed, library, is a good contact if you have questions about creative commons.
- Paid sources: If you have the budget, sources such as iStock and Getty Images.
Choose:
- high quality images
- images that illustrate the point you are trying to make or set the tone for the section or page
- are the correct size for your intended use
Avoid images that:
- are grainy
- are over- or underexposed
- otherwise don't reflect the quality of the College
See instructions for the different content types and components as well as profiles for details on how to optimize your images for each.
Use the preview and focus tools to see how Drupal will crop an image for different uses and to ensure any version stays focused on the most important part of the image.
These tools appear when you edit your image, which you can do:
- Through media tools
- Go to Editor Tools > Media in the black Admin toolbar, find your image, and click Edit.
- While editing your webpage
- For profiles and most components and content types, click Edit in the image field.
- In WYSIWYG editors, double-click or right-click the image and click Image with focus pointer and preview option. Then click Edit.
Click and drag the Focus control (a small white plus sign that is displayed over the image) to the part of the image you want to have always appear. Drupal will attempt to center the image on that point before cropping and resizing. You can also double-click the plus sign to open a field that will give you more precise control on the location of the focus.
Click Preview to see the original image and how it will be cropped. You will see the preset Drupal options named according to their use.
Use preview and focus to adjust the crop of your image until you are satisfied, and then save your changes.
Communications offers the following:
- Professional headshots. Watch the memo for the next session and encourage faculty and staff to stop by.
- High-quality campus images. The College may already have something you can use. Email us the details about what you're looking for and how you plan on using it. We'll let you know if we have anything that might work.
- Help finding a student or professional photographer. If you need to hire a photographer, Communications can provide of list of people who might be able to work with you.
The Technology Services Desk can help with Adobe tools like Photoshop. These make working with images fairly easy.
You can find training on Lynda.com and numerous online videos and articles explain how to deal with many image-related issues.
Because Drupal automatically crops and resizes images, you don't need to worry about exact sizing.
The following width-to-height ratios approximate how Drupal will crop each image type. The ratios in parentheses show how an image may be cropped when displayed in interactive components such as Carousel: News. Ensure the image looks good in both ratios.
To make sure all users see the highest quality images, make sure your image meets the minimum width; we recommend they be larger than the minimum in most cases.
| Image Type | Best Ratio (other ratios it may be cropped to) |
Minimum Width | Recommended Width |
|---|---|---|---|
| Background Feature | 4:1 | 1440 px | 2000 px |
| Books & Publications Carousel | 3:4 | 150 px | 200 to 2000 px |
| Carousel: Content | 1:1 | 454 px | 500 to 2000 px |
| Carousel: Image Feature | 3:1 | 1180 px | 2000 px |
| Event | 4:3 | 480 px | 500 to 2000 px |
| Featured News and Events | 2:1 | 585 px | 600 to 2000 px |
| Generic Block: 2 or 3 Column | 7:4 | 572 px | 600 to 2000 px |
| Generic Block: Image List | 1:1 (shape may be responsive) | 620 px | 700 to 2000 px |
| Hero | 3:1 (shape is responsive) | 1600 px | 2000 px |
| News | 4:3 (may be cropped to 1:1 and 2:1) |
1180 px | 2000 px |
| Profile Headshot | 1:1 | 280 px | 500 to 2000 px |
| Quote Wide | 1:1 | 400 px | 500 to 2000 px |
| Story | 4:3 (may be cropped to 1:1) | 480 px | 500 to 2000 px |
| Video WYSIWYG full or horizontal | 16:9 | 1440 px | 2000 px |
| Video Click to Play | 4:1 (shape is responsive) | 1440 px | 2000 px |
| Ambient Video Fallback | 3:1 | 1440 px | 2000 px |
| WYSIWYG - Full | 7:4 | 880 px | 1000 to 2000 px |
| WYSIWYG - Horizontal | 3:1 | 381 px | 500 to 2000 px |
| WYSIWYG - Natural | any | not applicable | Image will display at actual size to a maximum of 880 px wide |
| WYSIWYG - Round | 1:1 | 280 px | 300 to 2000 px |
| WYSIWYG - Square | 1:1 | 454 px | 500 to 2000 px |
| WYSIWYG - Vertical | 2:3 | 400 px | 500 to 2000 px |
Adding Images
You cannot add or update images within some components because the images are drawn from other sources. For these, you need to go to the original content sources, such as <em>News, Stories</em>, or <em>Profiles</em>.
You'll often encounter the Add Media dialog box when you click an Add Image button or Embed Media icon. Button and tab names in the dialog box may differ depending on how you got to it, but they work similarly.
Any image you add using the Add Media dialog box will be saved to the library and you can reuse it.
The Add Media dialog box has two tabs — Add (or Add New) Image and Use Existing Image.
- To add a new image:
- Select the Add Image tab.
- Use the fields to browse for and load your image.
- Add alt text.
- Add photographer, source, and date information if you have any.
- Click Add Image or Embed to complete the process.
- To reuse an image that is already on the site:
- Select the Use Existing Image tab.
- Search for your image. You can use keywords to narrow down your selection.
- Select your image by clicking the checkbox in the lower right corner of the image.
- Scroll down to and click Embed or Embed Image to complete the process.
Note: There are additional steps when adding an image through a WYSIWYG component. See instructions below.
- Background Feature
- In Background Feature, the image is responsive and can crop quite differently depending on the size of the browser window.
- You cannot edit an image that has already been added. You must load a new image and you can't reuse an image from the library.
- News: 3 Columns | Callout: News | Carousel: News | Featured News and Events
- The images are drawn from the News, not added through these components.
- To change an image, go to the News and edit the Carousel: Image Feature.
- Carousel: Story | Story: Feature
- The images are drawn from the Story, not added through these components.
- To change an image, go to the Story and edit the Main Image.
- Profile (User)
- On the Profile, click Browse to load a new image and then enter alt text.
- You must load a new image; you can't reuse an image from the library.
- Images in Views
