What is it?

Images are based on a 4:3 aspect ratio. Banners are the exception as they fit a more specific purpose.

How does it work?

Image styles use a Focus scale and crop algorithm to look for faces in the image and crop around those so faces are not cut out of images. Sometimes this is too hard for the algorithm to do if the image is overly complex or poorly lit. You can still manually crop images in Photoshop and upload those.

Using Image Styles

There is an activity in the Site Editor training which covers how to use image styles.

Updating image styles after replacing images

If you replace an existing image via the Image Browser, any image style versions of the original image will not automatically be updated, for instance banners. To trigger these image styles to be regenerated with the newly replaced image go to Configuration > Media > Image Styles. Edit the style that you have a stale image for (e.g. Banner) and click 'Update Style' without making any changes. This will trigger the process to generate new images for this image style.

NOTE: This is a short term work around until the replace function in the Image Browser is updated to trigger image styles to regenerate.

Style Demo

Below this page is a listing of the variations you can use. We recommend you use small to medium image styles for your content.

Read more information about filesize and dimensions.



Tall Banner


Small Banner

Large Square

Large Portrait

Large Landscape

Medium Square

Medium Landscape

Medium Portrait

Small Square

Small Portrait

Small Landscape