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.