What's inside this article:
- Basic information
- What is aspect ratio?
- Match the required aspect ratio
- Manually crop an image
- Options for embedded images
- Images that are never cropped
- Feature story main images
Basic information
Pangea CMS might automatically crop your images. This is necessary, because most images will need to fit within a specific "window" or "frame" when they are displayed on the site. There is no specific size requirement. However, images are cropped automatically to fit the required aspect ratio.
This article explains how you can avoid unwanted cropping when you work with images in CMS.
What is aspect ratio?
Aspect ratio describes the proportional relationship between the width and height of an image. It's expressed as two numbers separated by a colon (such as 1:1 or 4:3). The first number represents width, while the second represents height.
Aspect ratio determines the shape of an image, but not its size. For example, if the aspect ratio of an image is 1:1, its width is the same as its height (the image is a square). The image size might be 50 x 50, 500 x 500, or any other size with matching width and height.
Match the required aspect ratio
CMS does not crop images that already match the required aspect ratio. The required aspect ratio varies, according to the image orientation (horizontal or vertical). If your site creates custom images, use the guidelines below to match the required aspect ratio:
Horizontal images
Horizontal images are framed using the 16:9 aspect ratio. This applies for the following horizontal images:
- Main images on all content pages (special rules apply for Feature stories)
- Embedded images on content pages (if Keep aspect ratio is not enabled)
- Horizontal images added in the Website teaser settings for a content page
- Horizontal images added in the Teaser settings for a widget
- Main images for a Video shows / Broadcast programs
- Program images for TV / Radio Categories
- Images on Slider gallery pages
The following common image resolutions exactly fit the 16:9 frame:
- 1024 × 576 pixels
- 1280 × 720 pixels
- 1366 × 768 pixels
- 1600 × 900 pixels
- 1920 × 1080 pixels
To avoid unwanted cropping, create images using these resolutions (or any other resolutions that fit the 16:9 frame).
Vertical images
Vertical images are framed using a non-standard aspect ratio that is very close to 3:4. This applies for the following vertical images:
- Vertical images added in the Website teaser settings for a content page
- Vertical images added in the Teaser settings for a widget
Use of a non-standard aspect ratio is necessary to ensure that vertical and horizontal widget layouts fit neatly together in the grid system (for example, on Section pages).
The following image resolutions fit the 3:4 frame:
- 1080 x 1440 pixels
- 1200 x 1600 pixels
- 1392 x 1856 pixels
- 1440 x 1920 pixels
You can use these resolutions for custom vertical images. However, be aware that a very small section will be cut at the bottom of the image when it is displayed on the site.
Manually crop an image
If an image doesn't match the required aspect ratio, CMS automatically crops it. If you aren't satisfied with the automatic cropping, you can manually crop the image. To crop an image, select the Crop the image icon in CMS.
During cropping, the required aspect ratio is automatically maintained. You can change which section of the image is visible, but you cannot change the aspect ratio.
Options for embedded images
For embedded images on content pages, you can choose your preferred option:
- Keep the original aspect ratio (the full image will be visible with no cropping). This option is useful for embedding vertical images and infographics.
- Apply the 16:9 aspect ratio. This is standard for horizontal images across the site and provides a unified look for embedded images.
In the embed settings, tick Keep aspect ratio to keep the original aspect ratio. If you don't tick this option, the 16:9 aspect ratio will be applied.
Images that are never cropped
Some images are always displayed using the original aspect ratio (the images are never cropped). This applies for the following images:
- Images on Photo gallery pages
- Images on Static infographics pages
Feature story main images
Main images on Feature story pages are displayed within an adaptive frame. This means the framing of the image will vary slightly, depending on the size of the screen / window where the page is viewed.
On devices with small screens (like mobiles), the main image is framed using the 16:9 aspect ratio, and the visible section of the image will exactly match the cropping in CMS. However, on larger screens, the lower section of the image might not be visible.
