Focal Point

Speaker 0: And welcome back to another episode of Short Hops. I'm your host, Brian Gillespie. And in this episode, I wanna talk about the focal point feature inside Directus. What is a focal point? It's basically just a way for you to keep your image, your the focus of your image in frame when you do asset transformation like cropping at different image sizes, different image aspect ratios.

Basically, you wanna keep folks in frame. So what does that actually look like? Right? When you are using Directus in a CMS use case, like this is powering content for our website or our application and we're serving images from that. Directus has a robust asset transformation.

So I can do all types of cropping and formatting for our images, compositing, you know, color manipulation if I need to. But you want your website to look amazing. And part of that is images. Right? So you could see here in this case, I've got a article card here, a blog post card and our rabbit is actually getting cut off.

We don't want that. Right? The focal point feature inside Directus comes to the rescue here. So let's open up our Directus instance and I just want to showcase this, right? So we've got an image over here of a coach tying a soccer player's shoes or a football for anybody outside the states.

And, you could see that this should be the obvious focal point of the image, but it's kind of not in the center. Right? So by default, we're gonna crop from the center. But, here down below, I can see focal point, I have an x coordinate and a y coordinate. When we leave those things blank, if I just open up this image in a new tab, and we do something like this where we adjust the width and height of this image.

Width equals, let's say, 400 and we wanna look at taller, skinnier image. So I'm gonna do the height at 800. And immediately what you could see is we we lose context. Right? Our football player is halfway cut off.

We don't even see the coach. How can we fix that? That is where the focal point comes into play. So you can manually adjust this or there's even a nice extension that, uses AI to automatically generate this. But the easiest way to edit the focal point is just go to the edit button on the top right hand side.

We'll see the image editor over here. There is the focal point tool. I'll click that, that'll give me a little focal point highlight here. And I'll just place that over the elements that I want to focus on and just expand that, right? So I wanna make sure I get the player and the coach, and we'll just save that.

We can see those x and y coordinates have been updated. And then I'm just gonna simply refresh this image and now that focal point, the coach and his player, are in frame, are in focus. So that is the focal point tool inside Directus. Stay tuned for the next episode of Short Hops.