Creating Focal Points in Craft CMS

lucastswick
Feb 10, 2017 · 3 min read

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.

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.

Parliament Perspective

Parliament is the official creative outfitter of the world’s bravest brands. This is what we think.

Thanks to John Pomietlasz

lucastswick

Written by

More stories than time.

Parliament Perspective

Parliament is the official creative outfitter of the world’s bravest brands. This is what we think.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade