Creating Focal Points in Craft CMS

We set out to build a beautiful site worthy of our client Holst. The award-winning architecture firm invests years into a project and is super specific about photography because it is how they show and win work. Therefore, they require a high level of control over assets.

Problem

We usually create visual impact with full-bleed photography. However, if the image’s focal point isn’t dead-center, imagery can look awkward when cropped by the viewport. Our client requires proper image cropping regardless of the browser size.

The default crop (left) shows more ground than building. A more intentional crop (right) will hilight the building.

Requirements

Proper image crops, regardless of device or resolution, need to address two user groups:

  1. Art Directors who require a high degree of control and precision over image crops
  2. Content Administrators who require ease of use

Past solutions usually revolve around creating a field to identify the focal point location of an image with values, such as top-left, bottom-right, etc. While fairly easy to use, it’s not very specific, and litters the field with extraneous values like ‘top-two-thirds__left-one-quarter’. This is not an acceptable solution. I utterly despise myself for having done that in the past. Shame.

Solution

A better solution for Craft CMS Developers is the Focal Point Field, which creates a GUI for defining an image’s focal point:

After defining the focal point, we use the value in a twig template:

{% set focalPoint = image.focalPoint | default(“50% 50%”) %}
<div class=”background” style=”background-image: url({{ image.getUrl() }}); background-position: {{ focalPoint }};”></div>

Administrators can easily define a focal point, art directors are pleased by the image crops, and our client’s photography is presented in the best possible way.

Take a look at the solution in action at their website.

Lucas is the Technical Director at Parliament where he helps brands like Holst Architecture crush it.

Like what you read? Give lucastswick a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.