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.