In my last article, we took a look at setting focus points in Statamic. This is a feature that WordPress doesn’t have, at least not without a fancy plugin. Here, we take a closer look at using image focus points, this time in actual image tags, rather than background images.

Follow along as I explore using focus points in image tags in Statamic, if you’d rather just site back and relax. Watch it here:

Focus Points in Image Tags with Glide

Assuming we already have a point selected (see previous article), let’s look at how we might use that within the image tag, using Glide.

For now, we’re working with a list of images in a gallery, so we’re using a tag pair to get all the images:

{{ gallery }}
    <figure class="relative overflow-hidden">
        <img src="{{ glide:url }}" alt="{{ alt }}">
    </figure>
{{ /gallery }}

Moving forward, let’s omit the gallery tags and focus on the image itself. First, let’s modify this by setting the size of the image:

<img src="{{ glide:url w="500" h="500" }}" alt="{{ alt }}">

This gives is a square image, at 500x500. There’s a shorthand for this also, using the square parameter:

<img src="{{ glide:url square="500" }}" alt="{{ alt }}">

The initial drawback to this is that it doesn’t take into account the focal point, even if we’ve set one already. Next, we need to add the fit parameter to select it:

<img src="{{ glide:url square="500" fit="crop_focal" }}" alt="{{ alt }}">

This is a great thing when you can’t lean on a designer or photoshop whiz to crop new versions of images you already have. Do you have a landscape version of your headshots for your list page, but want to zoom in for the single page with a square or a portrait orientation? Look no further. And if it doesn’t quite fit, don’t forget to use the zoom slider on the focus selection screen to get it just right.

Further Reading on Glide

Other alternatives to the crop_focal value can be referenced in the Glide docs, which look quite similar to the kinds of settings you might use for background image positioning, or how object-fit works, but this way affects the image itself, rather than a CSS application to it.

All this makes using the focus point on your images a real breeze, eh?