Why is my image cropping?

Problem

I have an image that I want on my homepage / Landing Page / somewhere else, but it’s not displaying correctly. It’s cropping in from the sides or the top.

On a Landing Page, for example, you might have a Hero or a Promo, and it’s not showing the correct part of the image. This unintentional cropping is especially noticeable for images that need a specific crop, like images with a logo or text. For the sake of the example, we’ll use two images:

An especially wide image, with a logo in the bottom-right corner:

A square image with a logo in the top-left corner:

If these images are in Heroes, they look like this this in a wide, desktop-sized window:

And this in a narrower, tablet-sized window:

If these images are in Promos, they look like this on desktop (with no adjustment to focal point):

In all of these examples, you can see part or all of the logo is getting cropped off the edge.

Solution

In many places you can put an image on your GovHub website, it will crop to specific dimensions. In certain cases, the crop won’t even be consistent across different screen sizes.

To make sure your image will display correctly, check our https://georgiagov.atlassian.net/wiki/spaces/KB/pages/769654795 documentation.

This question comes up most often when referring to the image in a Hero micro-content block. Hero blocks in particular should not use images that need a specific crop. The visible portion of the image changes with amount of text, display style, and window width. The Hero block works best with high quality, mood-setting images that do not need to be cropped in a very particular way.

If you need to have an image with a specific crop, try using a different block type like a Promo or Call to Action. These block types might still crop the image you upload, but the crop will not change depending on difficult-to-control factors, like screen width. When uploading the image to your site, you can click on an important part of the image to adjust the focal point (in the center by default) and make sure it never gets cropped off.

Images embedded directly into a WYSIWYG text editor box will never be cropped by the system. However, images that are in a block embedded into a WYSIWYG (like the image in an embedded Link Collection) will follow standard cropping for that content type.

If you’ve tried different block types and image crops and are still having this issue, please open a support request.