Drupal: Aalto.fi website

Image aspect ratio at aalto.fi

Images are an essential element of the aalto.fi platform, used to provide a pleasing and an interesting experience for the users. To support the work of the editors, we created a set of tools to understand and control the way images are used across the platform: depending on the component and on the device size, images can be cropped to fit the different aspect ratios.

What is aspect ratio?

The aspect ratio of an image describes the proportional relationship between its width and its height, no matter how big the image actually is. It is commonly expressed with two numbers, separated by a colon, as in 16:9.

Current aspect ratios used on the aalto.fi platform:

 
Original ratio 1:1 1.6:1 1.8:1 2.3:1
Original aspect ratio
Original ratio

Original ratio

The aalto.fi site allows you to display images that are rendered with their original ratio (without any cropping). This is recommended if you need to display an image in its entirety, such as an infographic or a logo. These are the components that feature images with Original Ratio:
 

  • Single image: when adding a single image to your page, set the Medium display mode. Read more under Single image

  • Image with text: when adding a single image to your page, set the Default image display mode. Read more under Image with text

  • NB for Content pages, only on Main Image: when defining an image as the Main Image, set the Medium No-Crop setting.

1:1 Aspect ratio
Square ratio

1:1 – Square ratio

The square aspect ratio will crop the image to fit within a square (or a circle).This aspect ratio is used in a variety of spaces across the platform, including:

  • Manual Liftups

  • Search results listings (on mobile view)

  • News and Events listings (on desktop view)

For hub editors only: you can set your own hub page main image to fit into a 1:1 circle with the Hub Description component, by setting the Medium display mode. Read more under Hub description

Aspect ratio 1:6
Landscape ratio

1.6:1 and 1.8:1 – Landscape ratio

These aspect ratios feature a slight landscape format. They are used in a variety of spaces across the platform, including:
 

  • Single Image Large & Extra large, on mobile devices

  • Search results listings (on desktop view)

  • Events Liftups

Aspect ratio 2.3:1
Very Landscape ratio

2.3:1 – Very Landscape ratio

This ratio features a very landscape format. It is used to display big and full-bleed images, that allow you to create visually impactful pages. The components that feature images with 2.3:1 Ratio:
 

  • Single image: when adding a single image to your page, set the Large or Extra Large display mode. Read more under Single image

  • Hub Description: you can set your own Hub page main image to be full bleed by setting the Large display mode for the Hub Description component. Read more under HUB description

FAQs

Here you'll find answers to some commonly asked questions on the matter. Should you have a question which the answer to would benefit all editors, then kindly send your questions to the aalto.fi project team at [email protected] . Thank you.

  • Published:
  • Updated:
Share
URL copied!