You are here

Images

Images may be used on CLA websites in several ways to enhance interest in a page's content. Photos and illustrations may appear inline with body content or may be used for navigation (section landing pages) or "hero" images. Each has its own style, dimension, and placement restrictions, outlined here. No image file should exceed 2 Mb.

Hero Images

Each unit has a hero image at the top of the unit home page, directly below the navigation. This should be a non-timely, representative image of the unit as a whole. This image is not linked and its content should not refer to another page on the site, as feature images do. The hero image must have dimensions of 1300 x 510 pixels and will not be cropped or resized by Drupal.

Hero image pattern sample

Feature Images

Feature images appear at the top of article pages, as well as on the CLA homepage and news feeds. These images pertain to a certain article or story and are used to illustrate the content of that page. The content and tone of these images may vary greatly depending upon the article they apply to. The feature image must have dimensions of at least 870 x 580 pixels, and Drupal will crop and resize the image according to the context in which it is displayed. When it appears at the top of an article page, for example, Drupal crops the top and bottom to create a vertically shorter image with a height of 424px (see "cropping zones" below). You can adjust the zone of this crop after the image is uploaded, by clicking the "Crop" button below the image in your Edit Article mode. Simply click-and-drag, then save your work.

Feature Image Sample Pattern

Teaser Images

Teaser images must have dimensions of at least 870 x 580 pixels, and Drupal will crop and resize the image according to the context in which it is displayed. When no teaser image is set, the feature image (if set) will be used as the teaser.

Inline Body Images

Photos or illustrations may be added within the body content of a page. This requires a good sense of visual best practices so as to not overload the page with too many images and to maintain readability of body copy. The following options are available from the WYSIWIG editor in Drupal.

Float Left

An image can be floated left, causing type to wrap around it, by choosing Float Left from the Styles dropdown.

image float left sample

Float Right

An image can be floated right, causing type to wrap around it, by choosing Float Right from the Styles dropdown.image float right sample

Preset Sizes

When inserting a new image into the body of a page, you are presented with the option of choosing a preset size. The following sizes are available and controled by the stylesheet:

Small 

Maximum width of 290px. Image height is set to maintain original aspect ratio.

Medium

Maximum width of 435px. Image height is set to maintain original aspect ratio.

Large

Maximum width of 580px. Image height is set to maintain original aspect ratio.

Full

Maximum width of 870px (full content width). Image height is set to maintain original aspect ratio.

Feature Story

870px width, 424px height. Matches Feature image dimensions but is placed within the body, not at the top of the page. See Feature Images above to see applied styles.

Original Image

With the Original Image preset, an image will appear at its original aspect ratio with a maximum width relative to that of its container's width. On article pages, this would scale any images larger than 870px down to the content area's width of 870px, maintaining aspect ratio for height.

Captions

Current Students
This is a caption describing the above image of Goldy and a student.

When inserting an image, a caption may be inserted in the image settings after uploading or selecting the image from the library. This caption will appear below the image in a smaller type size than the body copy and will share the image's padding and margins. It will also float with the image if a Float Left or Float Right style is selected.