Skip to main content

Image Styles

Featured/Hero Images for Landing Pages

The recommended cropping size for featured banner images is 1350 pixels wide by 900 pixels high, or a 3:2 aspect ratio. The method for sizing an image to work in the banner is available in video form, and continues to about 3:15 timestamp. Always test the photo on tablets/mobile, as the photo will be auto-cropped and resized to fit various screen sizes, removing as many as 215 pixels from the top, bottom and edges. Think of the 1350 by 900 image as having a 215 pixel wide border all around it. That border area will be covered at different screen sizes.

As a rule of thumb, try to avoid closely cropped group shots of people where the people are the subject of the image, and it is important that everyone maintains a visible head.

Embed Images

The recommended styles for embedding images are Wallet Size (upscale 325 width) and Page Block Image (scale 635 width).

Pink blossoms on a tree in front of a campus building.
Wallet Size (upscale 325 width) left align.

Wallet Size (upscale 325 width)

Wallet should be used for left or right align embed images. When aligning, the image will always be wrapped with text. In order to ensure a clean paragraph break after the image, add a

<div class="page-section">image code here</div>

around the image and associated text. This will clear the embed image's wrapping. It will not show the break in the editor as of July, 2018.

Page Block Image (scale 635 width)

Page Block should be used for center / non-aligned images. Center non-aligned images fill the entire width of their column. The column width can be made narrower using a Column paragraph to produce two columns, or by adding

<div class="container">image code here</div>

around the centered embed image. This will add padding to each side of the image, without wrapping text around the image.

Examples of these are present below in the two accordions labeled No container centered and Container centered.

No container centered.
Pink blossoms on a tree in front of a campus building.
Page Block Image (scale 635 width) centered. No container.
Container centered.
Pink blossoms on a tree in front of a campus building.
Page Block Image (scale 635 width) centered. Has container. Note extra white space on edges.

Centering tall images

As an example of how image height is important on centered images, below in the accordion (click to expand) is an embedded photo centered on the page which has a 1:2 aspect ratio, making it twice as tall as wide. This height of image is very large on a desktop, so always be sure to use a properly cropped image, where the height is less than or equal to the width to have a good centered image.

1:2 aspect ratio centered no container image.
Students doing measurements in a classroom with professor.
Page Block Image (scale 635 width) centered. No container. Poor aspect ratio.