Image Manipulation

Speaker 0: Hello, everybody. My name is Carmen, and welcome to Sharp Focus, the show where we create an aperture into how Directus helps you transform your images and truly make them shine. Now

Speaker 1: in

Speaker 0: the previous episode, we looked into how Directus lets you manage your images and grant access permissions publicly, which is going to come in super handy for this next episode, because we'll be working with the Directus SDK to apply some of our first image manipulations. So without further ado, let's grab our cameras and our code editor and find out how we can manage our images and manipulate them using Directus. So here we are in my Directus project dedicated

Speaker 1: to my photography, and we're gonna be looking at another one of my photos from my trip to Chile. This time, we'll

Speaker 0: be looking at the Osorno volcano, which is located in the northern border of the Patagonia region of Chile. Now I've developed a little Nuxt application that I will use to show those photos, which I've got running on another tab here. Now let's take a look. And gosh, as you can see, it's quite blown out. I can, oh, there it is.

There's a volcano.

Speaker 1: Now, what I would like

Speaker 0: to do for my application is manipulate the image using Directus in order to show it

Speaker 1: as a thumbnail. So let's take a moment to look at the code. So in

Speaker 0: this example, we'll be using the Directus SDK to retrieve images. You can see on line 4, I've got the file ID. On line 5, I'm instantiating that Directus instance with my PhotographyDirectus local instance. And the important part, on line 9,

Speaker 1: I'm retrieving that asset as a readable stream, which I then convert into a little URL that I

Speaker 0: can display here on line

Speaker 1: 21. So what we're doing on line 10 is reading that asset raw, just getting all of the image data. But

Speaker 0: as we saw in the previous video, we can pass in some parameters. Now the way this works in the direct to SDK is this is passed as an object. So what I can do here, for example, is pass in a width. Go with 300. I'm gonna go ahead and save that.

Now let's go back to application and see how that looks. Marvelous. Much better. Now we can see the volcano there in its full glory. But say I wanted to have a little bit more of a fancy grid and manipulate the size

Speaker 1: a little bit more. For this, we can also use a height attribute. Now, what I'm gonna do next is have my editor and my browser side by side. Now, when I add a high attribute, what directives will do is automatically crop the image so that we can have

Speaker 0: the volcano in its full glory. But what if I wanted to have a different part of the image displayed when it's cropped?

Speaker 1: This is where focal points come in. So let's go back to Directus real quick. Now here, we can go ahead and click on the edit button to change different aspects about our image, crop it

Speaker 0: and other stuff, flip it if we want to. What I wanna focus on here is the focal point tool. So what I'm gonna do is let's say I wanna actually focus on this little cloud over

Speaker 1: here. I'm gonna drag and drop it there. Hit save. Go back to my application. And I would actually like to maybe crop it

Speaker 0: a little bit differently. Let's go with 300 by 600. Go ahead and save that and check it out. Now this little cloud is in full display, which is all well and good, but of course I really want my volcano back. So I'm just gonna go ahead and make that the focal point.

Maybe actually do keep that at 500. By 300.

Speaker 1: Much better. So we've got our height, we've got our width and our focal point.

Speaker 0: The last thing we're going

Speaker 1: to cover here is the fit. Now the

Speaker 0: fit parameter dictates how the image is going to get manipulated depending on the width and height that we provide. And by default, this is set to be cover. We'll notice not much changes when we set the fit to be cover. But we actually have a couple of other options. For example,

Speaker 1: we have contained, which as we'll see allows us to

Speaker 0: see the entire image and just add some letter boxing where necessary. If I were to switch the width and the height around, then it would add letter boxing accordingly.

Speaker 1: But okay. Let's look at what else we've got. If we go with the inside fit,

Speaker 0: what Directus is going to do is resize the image so that the dimensions are less than or equal to the requested widths and height, keeping the entirety of the image in there. And conversely, outside fit will resize it to be greater than or equal to the requested width and height. So in this case, for example, we're keeping the 500

Speaker 1: height. So to wrap up, I'm

Speaker 0: gonna go ahead and keep that with cover because I'd like to have the images displayed next to each other, sort of like this gallery we see here. And now I know that with focal points, I can select my favorite parts of the photos to be seen when cropped. All right, folks. Well, there you have it. We've learned how to manipulate images with height and fit using Directus SDK.

But don't worry. There's much more in store. So stay tuned for the next episode where we'll learn how to work with size and performance of our images using Directus. I cannot wait to show you what beautiful thumbnails we can create. So stay tuned and see you next episode.

Keep those cameras handy.