• Blog >
  • Supercharging your images with focal point in drupal 8

Introduction to Image Styles

Unlike many content management systems Drupal is great for dealing with imagery because it has an included feature known as ‘Image Styles’. Using image styles Drupal allows you to upload an image once and use it in multiple different scenarios without the need to reupload it each time.

Out of the box when creating an image style within Drupal we have access to a number of commonly used effects such as ‘Scale’, ‘Scale and Crop’ and ‘Resize’ and ‘Rotate’. This means that out of the box (provided an appropriate image style exists) a site editor could upload an image into the Drupal CMS and before serving the image up a copy would be created using any image styles effects defined for the given scenario and that image would be served up instead. This is great because rather than serving up a potentially large unnecessary image you’d be providing an image in exactly the size that it’s needed.

Real world example

Let’s consider the following image of John Mayer:

john-mayer.jpg

The aspect ratio of this image is fairly typical of something that would come straight from a digital camera.

Widescreen image style attributes and illustrative output

In the Drupal CMS let’s create the following image style:

Name

Widescreen

Effect

Scale and Crop

Dimensions

1920px by 1080px

 

Output

Uploading the image above through a file upload field in Drupal that utilises the ‘Widescreen’ image style would have the following effect (scaled for demonstrative purposes):

john-mayer-wide.jpg

Tall image style attributes and illustrative output

In the Drupal CMS we create the following image style:

 

Name

Tall

Effect

Scale and Crop

Dimensions

1920px by 1080px

Output

Uploading the image above through a file upload field in Drupal that utilises the ‘Tall’ image style would have the following effect (again scaled for demonstrative purposes):

john-mayer-tall.jpg

Notice anything wrong with either of these images?

We can see that in both instances the image style has done it’s job correctly. What we mean by that is that it’s scaled and cropped the image to the dimensions we’ve defined, but it’s done so using the centre point of the image as a starting point, which has left us with a wide image that has a head chopped off mid-way and a tall image that has a right arm partially missing.

Introducing Focal Point

What if there was a way for us to tell Drupal that there is a specific point in the image that absolutely must be included when performing any crop on a given image? That’s where the ‘Focal Point’ module comes in.

With the focal point module installed a few a new image style effects become available to us one of which has the snappy title ‘Focal Point Scale and Crop’. If we amend the image styles we listed above to use this new effect in place of a simple ‘Scale and Crop’ we can effectively define a hotspot in an image that the rest of the image is cropped around.

Defining the focal point

Uploading the image to a new piece of content we see that the preview of the image now contains a white cross. This is the focal point. To ensure the head of John Mayer isn’t cropped off in this image I've specified that as the focal point. Considering that his right arm in the taller crop was also chopped off I’ve moved the focal point slightly left (closer to his ear).

Screenshot 2017-08-02 15.43.42.png

Clicking the ‘Preview’ link at any time will show a generated preview of the image using the image styles we’ve defined.

Let’s click it and see what our crops look like:

Screenshot 2017-08-02 15.43.30.png

Perfect! We now have two images that both contain heads and none of John Mayer’s body has been clipped horizontally. Here we also have two images that can be used in different scenarios when in fact we’ve only uploaded an image once. 

● ● ●