Set Focal Point (Crop Images)

Several features of Web Express require that the images be cropped and scaled to specific sizes, such as the images used in sliders, thumbnails, and content grids. For these features to work properly the images must be a certain size.

Web Express analyzes each photo and, in most cases, makes a crop that keeps the subject of your photo in the frame. However, in some cases the resulting crop may not be ideal and a part of the photo may be missing from the final crop.

In this tutorial you will learn how to choose a focal point of the photo which will be preserved after the photo is cropped. This functionality only works for photos that are cropped after they are added to your site. It does not include photos such as the large, medium, small sizes (which are only scaled and not cropped) or the images used in hero units since the photo size is based on the amount of content within the hero unit.

1

Upload an Image

Add your image to the block type or content type you are working on. See the Add Images tutorial for instructions on how to do so.

2

Select a Focal Point

Once you have uploaded the image you will see a small version of the photo with a small cross on it. The position of the cross represents where Web Express has suggested the focal point of the image should be.

By clicking and dragging the cross, you can manually set the focal point for the image.

Cross/focal point on image

3

Preview Images

By clicking the Quick Preview link below the uploaded image, you will be able to see how the photo will be cropped for various uses.