How to set Image Focal Points in Wagtail

Hello everyone, Megan here. I got another Wagtail trick for you today. I'm gonna show you how to set focal points on your image. And why do focal points matter? Well, let's have a look at this website here, which is the Wagtail Bakery Demo. As we scroll through the page, you can see that there are lots of different shapes of images. We have some that stretch all the way across the screen, there are some that are squares, there are some that are rectangles. And I'm sure if we let our CSS folks go a little nuts, they probably would create things like stars or circles or amorphous blobs. The point being that when you reuse images in different places, you need to make sure that they all look good despite their different shapes

And so if we scroll, keep scrolling down here to our blog area, you'll notice that in the blog posts we've had listed here. That these images look pretty okay, but there seems to be something going on here, and this also seems to be slightly out of alignment, but we're not gonna worry about that right now. We're gonna worry more about what is going on here. It looks like this is not in the right location. Let's go ahead and click in and see if we can get an idea what the image is supposed to be And as you can see, it looks like we this picture is supposed to be of a bowl of baking soda with a scoop in it. Which looks pretty much fine on the blog post page itself here

with it stretched all the way across the page but if you know we go back to this square cropping here it looks a little funny uh and this is where focal points come in Because it's important to make sure that no matter where the image appears on your site, that it focuses on the right part of the photo. Alright, so I'm gonna go ahead and go into our dashboard here for the site. I'm gonna go to images and I'm gonna find our baking soda image in our image. library here. Alright, so here is our baking soda image. And you can see, yeah you probably saw it briefly, there was a square over there and that's because I cheated a little bit. I went ahead and set a bad focal point so that I could show you guys how this works.

But let's assume I didn't do that and that it was just kind of some bad luck with the cropping. So we can set a new focal point mostly by just going to the image here and just highlighting the place where we want people to focus on the image. And I think uh that the area that would be best to focus on is generally the scoop area. Uh so I'm gonna go ahead and just just kind of highlight this area here. You might want to make the it a little bit smaller just in case things need to be like a smaller size image. So I think I'm gonna go ahead and make this a bit smaller and focus on kind of the scoop area so that we get some of the baking soda in with a scoop it makes for a nice little bit of contrast.

Alright, so I'm gonna go ahead and that's set. Uh it and I'm gonna go ahead and save this here. And that has been updated. So let's go back to the page and let's go ahead and refresh everything and see if it looks Looks a bit better. Aha! There we go! As you can see, it now looks much better than it did before. And that's how you can use focal points to make your images look great across different places on the site Alright, I hope that was useful for you. If you would like to learn more Wagtail tips and tricks from me, please subscribe to our YouTube channel or go ahead and sign up for our newsletter. I also send out regular tips through there as well.

You can find it at Wagtail. org slash newsletter.