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 photo styles 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.

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.

Select a Focal Point

When you uploaded an image you will see a small version of the photo with a small cross on the right side of the additional information form where you will also enter the alternative text for the image.

Note: If you are adding multiple images at a time, be sure to scroll down and complete the information required and set the focal point for each image.

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.

set focal point
Click to see a larger version

Preview Images

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

preview image
Click to see a larger version

Related: Image File Guide