We know images can be tough to work with sometimes given all the options available in terms of sizes, dimensions and layouts. That's why we've configured Drupal to be as flexible as possible to the point that in most cases you'll be able to upload any image size and it will be cropped and resized to the dimensions the website requires. Of course, some basic guidelines will help your images look their best.
In a Nutshell
The dimensions and ratios you see below are what we've identified work best in most situations however the platform is flexible enough to allow for other sizes not mentioned here. Please see the full detailed explanation if you need to display other sizes
| Field/Layout Components | Usage | Dimension (px) | Ratio |
|---|---|---|---|
| Page Header and Various Components | Short/Tall Background images | 4000 × 1360 | (~) 3 : 1 |
| 50-50 Full Width | Image Background | 1440 × 1200 | 6 : 5 |
| 50-50 Contained | 1120 × 630 | 16 : 9 | |
| Featured Image | Articles and Events | 2400 × 1445 | (~) 16 : 9 |
| Social Image | Multiple Content Types | 2400 × 1260 | 16 : 9 |
| Thumbnail Image | Articles | 800 × 640 | 5 : 4 |
| Tile Grid | 830 × 590 | (~) 4 : 3 | |
| Profile List | 600 × 600 | 1 : 1 |
| Text Component | Usage | Dimension (px) | Ratio |
|---|---|---|---|
| Text | Landscape | 900 × 560 | (~) 8 : 5 |
| Text | Portrait | 920 × 1150 | 4 : 5 |
| Text | Square | 230 × 230 | 1 : 1 |
| Text | Extra Wide Banner | 2520 × 1260 2520 × 504 | 2 : 1 5 : 1 |
| Text | Icon or Badge | 48 × 48 | 1 : 1 |
| Text | Logo or Small Image | 180 × 90 | 2 : 1 |
Images in Components
These images will be cropped to landscape and extra wide formats, therefore we strongly advise against the usage of square and portrait images. If you must, be sure to adjust the focal point.
50-50 Contained: Image Component
We recommend using an image with a 16:9 format of at least 1120 × 630px.
50-50 Full Width: Image Background
This image adapts to its container and how it is displayed will largely depend on the amount of content as well as the device (size of the screen) in which it's being viewed. We recommend using an image with a 6:5 format of at least 1440 × 1200px.
Various: Background Image
Nearly all components allow you to use a background image, how it is displayed will largely depend on the amount of content as well as the device (size of the screen) in which it's being viewed. We recommend using an image with an extra wide format of ~3:1 format of at least 4000 × 1360px.
Inline with Text - Left or Right Aligned
The school website allows you to insert images with a decorating border behind the image, this comes particularly useful when adding a few images throughout your content to create harmony. Bordered images will only appear when adding Captions to your image and ONLY when aligned to the left or right.
Landscape
We recommend using an image with a ~8:5 format of 900 × 560px. These images will be cropped to a maximum size of 900 × 560px regardless of the format, therefore we strongly advise against the usage of portrait images. If you must, be sure to adjust the focal point.
To configure it, add your image in the desired text box and edit it to have a left or right alignment as needed and a display of Full Size.
Portrait and Square
We recommend using an image 230px wide. These images will NOT be cropped so be careful not to use images that are too tall or too small as these will likely be visually unappealing. Configure the image to:
- Display: Original Size and
- Alignment: Left or Right, as needed
The school website allows you to insert images with a decorating border behind the image, this comes particularly useful when adding a few images throughout your content to create harmony. Bordered images will only appear when adding Captions to your image and ONLY when aligned left or right.
Inline with Text - Center Aligned
Centered Images can take up a lot of space and therefore we only recommend using landscape and extra wide images.
Landscape
We recommend using an image with a 8:5 format of at least 900 × 560px. These images will be cropped to a maximum size of 900 × 560px regardless of the format, therefore we strongly advise against the usage of portrait images. If you must, be sure to adjust the focal point.
To configure it, add your image in the desired text box and edit it to have a center alignment as needed and a display of Full Size.
Extra Wide
We recommend using an image with a 5:1 format of at least 2520 × 504px.
To configure it, add your image in the desired text box and edit it to have a center alignment and display Original.
Special Cases
Icons and Logos
For Icons, we recommend using an image with a 1:1 format with a maximum size of 48 × 48px.
For logos, we recommend using an image with a 2:1 format with a max height of 120px, e.g., size of 180 × 90px.
To configure it, add your image in the desired text box and edit it to have a none alignment and display Original.
