1 minute read
May 18, 2018

Getting focal point to work on background images when using Statamic's glide functionality

One of my favourite functions in Statamic is the incredibly powerful and useful glide tag. It allows you to manipulate images from within Statamic; from setting a size through to creating a focal point that the image resizes around.

However, with such a powerful feature, it's sometimes easy to forget the basics... as I did this afternoon when I was trying to get glide to work on a background image. This was the HTML markup in my Antler template:


<div class="overlay h-full" style="background-image:url('{{ glide:banner_background width="1920" height="500" fit="crop_focal" }}')"></div>

However, it wasn't cropping the image to the correct place despite setting it to do so in the control panel. Well, turns out I'd forgotten to add a tag, which thankfully Jason over at Statamic quickly reminded me of –

After adding it, my markup became:


<div class="overlay h-full" style="background-image:url('{{ glide:banner_background width="1920" height="500" fit="crop_focal" }}') {{ focus_css }}"></div>

It's added after the closing ) of the background-image:url() in case you can't see it!

Kudos to Jason for helping me out on this one.


Further Reading

Statamic Docs
Glide Focus CSS