Why does the same image look different across different parts of the site?
If you have noticed that an image appears cropped differently- or at different proportions- in different places on your site, this is by design. Different areas of the site use different image transforms.
What is an image transform?
When the CMS displays an image on the front end, it does not simply output the original file at its original dimensions. It generates a cropped and resized version of the image at the dimensions required by that specific template or component. A hero image, a thumbnail in a listing grid, and a small card image might all use the same source file but produce very different outputs.
How cropping is determined
Cropping is based on the image's focal point- a setting you can control in the CMS. When you upload or edit an image in the media library, you can set a focal point by clicking on the part of the image that should always remain visible. The focal point tells the CMS where the important subject of the image is, and transforms use that position to crop as closely to it as possible at whatever dimensions are required.
If an image is cropping badly
If an image is being cropped in a way that cuts off the subject, check the focal point on the asset in the media library. Open the asset, locate the focal point control, and drag it to the correct position. Save the change and the updated crop will be applied across the site. Cached versions of the image may take a short time to clear before the new crop becomes visible.
What is an image transform?
When the CMS displays an image on the front end, it does not simply output the original file at its original dimensions. It generates a cropped and resized version of the image at the dimensions required by that specific template or component. A hero image, a thumbnail in a listing grid, and a small card image might all use the same source file but produce very different outputs.
How cropping is determined
Cropping is based on the image's focal point- a setting you can control in the CMS. When you upload or edit an image in the media library, you can set a focal point by clicking on the part of the image that should always remain visible. The focal point tells the CMS where the important subject of the image is, and transforms use that position to crop as closely to it as possible at whatever dimensions are required.
If an image is cropping badly
If an image is being cropped in a way that cuts off the subject, check the focal point on the asset in the media library. Open the asset, locate the focal point control, and drag it to the correct position. Save the change and the updated crop will be applied across the site. Cached versions of the image may take a short time to clear before the new crop becomes visible.