[{"data":1,"prerenderedAt":513},["ShallowReactive",2],{"footer-primary":3,"footer-secondary":93,"footer-description":119,"tv-sharp-focus":121,"tv-sharp-focus-seasons":131,"tv-sharp-focus-episodes":142,"sales-reps":261},{"items":4},[5,29,49,69],{"id":6,"title":7,"url":8,"page":8,"children":9},"522e608a-77b0-4333-820d-d4f44be2ade1","Solutions",null,[10,15,20,25],{"id":11,"title":12,"url":8,"page":13},"fcafe85a-a798-4710-9e7a-776fe413aae5","Headless CMS",{"permalink":14},"/solutions/headless-cms",{"id":16,"title":17,"url":8,"page":18},"79972923-93cf-4777-9e32-5c9b0315fc10","Backend-as-a-Service",{"permalink":19},"/solutions/backend-as-a-service",{"id":21,"title":22,"url":8,"page":23},"0fa8d0c1-7b64-4f6f-939d-d7fdb99fc407","Product Information",{"permalink":24},"/solutions/product-information-management",{"id":26,"title":27,"url":28,"page":8},"63946d54-6052-4780-8ff4-91f5a9931dcc","100+ Things to Build","https://directus.io/blog/100-tools-apps-and-platforms-you-can-build-with-directus",{"id":30,"title":31,"url":8,"page":8,"children":32},"8ab4f9b1-f3e2-44d6-919b-011d91fe072f","Resources",[33,37,41,45],{"id":34,"title":35,"url":36,"page":8},"f951fb84-8777-4b84-9e91-996fe9d25483","Documentation","https://docs.directus.io",{"id":38,"title":39,"url":40,"page":8},"366febc7-a538-4c08-a326-e6204957f1e3","Guides","https://docs.directus.io/guides/",{"id":42,"title":43,"url":44,"page":8},"aeb9128e-1c5f-417f-863c-2449416433cd","Community","https://directus.chat",{"id":46,"title":47,"url":48,"page":8},"da1c2ed8-0a77-49b0-a903-49c56cb07de5","Release Notes","https://github.com/directus/directus/releases",{"id":50,"title":51,"url":8,"page":8,"children":52},"d61fae8c-7502-494a-822f-19ecff3d0256","Support",[53,57,61,65],{"id":54,"title":55,"url":56,"page":8},"8c43c781-7ebd-475f-a931-747e293c0a88","Issue Tracker","https://github.com/directus/directus/issues",{"id":58,"title":59,"url":60,"page":8},"d77bb78e-cf7b-4e01-932a-514414ba49d3","Feature Requests","https://github.com/directus/directus/discussions?discussions_q=is:open+sort:top",{"id":62,"title":63,"url":64,"page":8},"4346be2b-2c53-476e-b53b-becacec626a6","Community Chat","https://discord.com/channels/725371605378924594/741317677397704757",{"id":66,"title":67,"url":68,"page":8},"26c115d2-49f7-4edc-935e-d37d427fb89d","Cloud Dashboard","https://directus.cloud",{"id":70,"title":71,"url":8,"page":8,"children":72},"49141403-4f20-44ac-8453-25ace1265812","Organization",[73,78,84,88],{"id":74,"title":75,"url":76,"page":77},"1f36ea92-8a5e-47c8-914c-9822a8b9538a","About","/about",{"permalink":76},{"id":79,"title":80,"url":81,"page":82},"b84bf525-5471-4b14-a93c-225f6c386005","Careers","#",{"permalink":83},"/careers",{"id":85,"title":86,"url":87,"page":8},"86aabc3a-433d-434b-9efa-ad1d34be0a34","Brand Assets","https://drive.google.com/drive/folders/1lBOTba4RaA5ikqOn8Ewo4RYzD0XcymG9?usp=sharing",{"id":89,"title":90,"url":8,"page":91},"8d2fa1e3-198e-4405-81e1-2ceb858bc237","Contact",{"permalink":92},"/contact",{"items":94},[95,101,107,113],{"id":96,"title":97,"url":8,"page":98,"children":100},"8a1b7bfa-429d-4ffc-a650-2a5fdcf356da","Cloud Policies",{"permalink":99},"/cloud-policies",[],{"id":102,"title":103,"url":81,"page":104,"children":106},"bea848ef-828f-4306-8017-6b00ec5d4a0c","License",{"permalink":105},"/bsl",[],{"id":108,"title":109,"url":81,"page":110,"children":112},"4e914f47-4bee-42b7-b445-3119ee4196ef","Terms",{"permalink":111},"/terms",[],{"id":114,"title":115,"url":81,"page":116,"children":118},"ea69eda6-d317-4981-8421-fcabb1826bfd","Privacy",{"permalink":117},"/privacy",[],{"description":120},"\u003Cp>A composable backend to build your Headless CMS, BaaS, and more. \u003C/p>",{"id":122,"title":123,"logo":124,"cover":125,"tile":126,"announcement_text":8,"description":127,"slug":128,"one_liner":129,"card_text":8,"status":130,"sort":8},"bdefc4e8-45fb-4cdd-a0e8-1fd4ac654bb4","Sharp Focus","7aeb9d11-7958-4493-a5ef-0cfd788a244e","8e80442a-ceaa-4001-b4cd-2d0ab03ce0cd","aa4f547b-33cf-4b5a-beb3-55ec99383ba7","Sharp Focus is a series exploring the powerful image transformation capabilities in Directus. The show covers essential topics from basic image transformations to advanced manipulation techniques, diving into size optimization, performance considerations, and preset transformations for automated workflows. Each episode demonstrates how to leverage Directus's full integration with the Sharp API to perform sophisticated image processing tasks on the fly.","sharp-focus","Learn how to use image transformation as part of Directus Files.","published",[132],{"id":133,"number":134,"show":122,"year":135,"episodes":136},"4726ce9e-9ed5-4d26-b76e-47d74381bc91",1,"2024",[137,138,139,140,141],"3fd6dfb4-644b-43d0-9aef-5a6e5488efa8","954941eb-b737-412f-967b-387295df72bf","59b18d30-080b-42cf-84ef-fdca7542388d","1c8eb8c1-f7eb-4b24-9cac-e742a70a9da1","731d8184-1ba4-4fa7-99e4-571492d1c552",[143,175,198,220,241],{"id":137,"slug":144,"vimeo_id":145,"description":146,"tile":147,"length":148,"resources":149,"people":8,"episode_number":134,"published":165,"title":166,"video_transcript_html":167,"video_transcript_text":168,"content":8,"seo":169,"status":130,"episode_people":170,"recommendations":172,"season":173},"image-transformations","1030681299","Join Carmen as we learn what image transformations are and how you can assign permissions to them in Directus.","88c07dac-56dd-4ea7-9cbf-a0cef89b3fbe",7,[150,153,156,159,162],{"name":151,"url":152},"Photo credit: Torres del paine: photo by Karla Robinson on Unsplash","https://unsplash.com/es/fotos/un-lago-rodeado-de-montanas-HT2jDxe6UF4?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash",{"name":154,"url":155},"Photo credit: Osorno: photo by Willian Justen de Vasconcellos on Unsplash","https://unsplash.com/es/fotos/monte-fuji-vRLMbO3Wpjw?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash",{"name":157,"url":158},"Photo credit: Geysers del Tatio: photo by Jorge Fernández Salas on Unsplash","https://unsplash.com/es/fotos/foto-de-primer-plano-de-la-montana-01pVoT_YINk?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash",{"name":160,"url":161},"Photo credit: Rapa nui: photo by Sophie Laurent on Unsplash","https://unsplash.com/es/fotos/formacion-rocosa-gris-bajo-nubes-blancas-y-cielo-azul-durante-el-dia-BNdjmu-wLFk?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash",{"name":163,"url":164},"Photo credit: Marble Cathedral of lake General Carrera, Chilean Patagonia ","https://stock.adobe.com/at/contributor/200869569/noradoa?load_type=author&prev_url=detail","2024-11-19","What are Image Transformations","\u003Cp>Speaker 0: Hello, everybody, and welcome to Sharp Focus, the show where we shine a lens on how Directus helps you transform your images and truly make them shine. My name is Carmen, and I will be your guide over the next 5 episodes where we'll learn how images can be transformed, how they work under the hood, how they can be manipulated, how they can be resized to be more performant, how you can use advanced transformations, and how you can use presets to take all of the above and apply it in one fell swoop. Now as it turns out, Directus offers a bevy of options for working with images out of the box, powered by the sharp API from node JS. And we're going to be taking a look at how to do that in a way that's going to be super fun and super approachable. So won't you join me in grabbing our cameras and let's dive right into finding out how Directus works with images.\u003C/p>\u003Cp>So here we are in my very own Directus project running locally dedicated to my photography. Right now, we are in the file library module where you can see that I have a folder over here on the left sidebar. This folder contains photos from my latest trip to my home country, Chile. Now I'm going to use Directus to work with these images for different applications, thumbnails, that sort of thing. But as you can see, a lot of these images are of varying sizes and qualities.\u003C/p>\u003Cp>But that's okay. We can use directives to transform these images to create some consistency and even add some cool effects, which we'll be doing in this series. But first, let's take a little look at what makes these images tick. Now I've already uploaded these to Directus, so this gives me a couple of options to work with them. If I click on one of the images, for example, the photo of my trip to the national park, Torres del Paine, we will see that we can do things like change the title, add a description, some tags, location, if we wish, some focal points, more on that later, and also have access to its asset ID.\u003C/p>\u003Cp>But that's not all. We can even edit that image. Now we're not going to be doing that in this series except for using it to create focal points. But again, more on that later. Now, if I want to access that image from say my browser, I can take that asset ID and navigate to my instances URL /assets/theid of that image, which is fantastic.\u003C/p>\u003Cp>But one thing to bear in mind, I'm logged into Directus as an admin. But if I wanted to access this image from an application, I would need to assign that application the correct permissions, which we can do here in Directus. When I navigate to the settings module and then go over to access policies, we can see that I already have some permissions and roles set for administrators, which is my logged in user. But I want to make these images fully public. So what I can do is click here on public and under permissions, click on add collection and select the Directus Files system collection.\u003C/p>\u003Cp>I will be able to assign different permissions for folks accessing that from anywhere. But I only want to give folks the ability to read. So we'll click here on read access and then assign all access. The last thing to do is to save that permission. Fantastic.\u003C/p>\u003Cp>Now I can access this image from a browser, from an application, from anywhere. So let's go back and look at that image. Now you remember that these images are of different sizes and qualities. So in order to create some consistencies, we're going to be applying different image transformations, but also giving them a little bit of pizzazz with some advanced transformations. It's gonna be super cool.\u003C/p>\u003Cp>Before we wrap up this video, I'd like to show you a couple of the types of transformations we can do. In the next video, we'll be looking at image manipulation where we can use query parameters like width, like height, and fit to manipulate our image. And in this case, make it a consistent 300 by 300 pixels. But that's not all. In our 3rd episode, we'll be looking at how we can manipulate the size and performance of our images.\u003C/p>\u003Cp>For example, here we're applying a quality of 5% and a format of webP to be used in our applications. Next. Now bear with me. We're going to be doing some advanced transformations. Now this looks a little wild, but you'll see that we're applying some powerful transforms with that sharp API.\u003C/p>\u003Cp>So we're applying a blur, a tint, we're negating colors. All of this is done with direct us, which is super cool. And finally, in our last episode, we'll talk about preset transformation where we can assign presets to a key. And that way we don't have to type out all of those transformations, but rather place them in one consistent place in Directus. Finally, let's talk about that processing power.\u003C/p>\u003Cp>You might think it'd be pretty cumbersome if every time I reload this image, it reprocesses all of those transformations. And I have good news. That transformation is done once and then saved in Directus, and you don't have to apply it every time. That means that you can reload that image worry free of any extra processing power done. So there you have it.\u003C/p>\u003Cp>Now we've seen how direct us works with images out of the box and how we can apply access permissions, which is going to be super handy because in the next 4 episodes, we're going to be working with a new Nuxt application to work with these images and display them in a variety of ways using transformations. So what's next? In episode 2, we'll be looking at how to resize our images using width, height, and other parameters, and I can't wait to show you all how it works. So till next time, keep those cameras ready.\u003C/p>","Hello, everybody, and welcome to Sharp Focus, the show where we shine a lens on how Directus helps you transform your images and truly make them shine. My name is Carmen, and I will be your guide over the next 5 episodes where we'll learn how images can be transformed, how they work under the hood, how they can be manipulated, how they can be resized to be more performant, how you can use advanced transformations, and how you can use presets to take all of the above and apply it in one fell swoop. Now as it turns out, Directus offers a bevy of options for working with images out of the box, powered by the sharp API from node JS. And we're going to be taking a look at how to do that in a way that's going to be super fun and super approachable. So won't you join me in grabbing our cameras and let's dive right into finding out how Directus works with images. So here we are in my very own Directus project running locally dedicated to my photography. Right now, we are in the file library module where you can see that I have a folder over here on the left sidebar. This folder contains photos from my latest trip to my home country, Chile. Now I'm going to use Directus to work with these images for different applications, thumbnails, that sort of thing. But as you can see, a lot of these images are of varying sizes and qualities. But that's okay. We can use directives to transform these images to create some consistency and even add some cool effects, which we'll be doing in this series. But first, let's take a little look at what makes these images tick. Now I've already uploaded these to Directus, so this gives me a couple of options to work with them. If I click on one of the images, for example, the photo of my trip to the national park, Torres del Paine, we will see that we can do things like change the title, add a description, some tags, location, if we wish, some focal points, more on that later, and also have access to its asset ID. But that's not all. We can even edit that image. Now we're not going to be doing that in this series except for using it to create focal points. But again, more on that later. Now, if I want to access that image from say my browser, I can take that asset ID and navigate to my instances URL /assets/theid of that image, which is fantastic. But one thing to bear in mind, I'm logged into Directus as an admin. But if I wanted to access this image from an application, I would need to assign that application the correct permissions, which we can do here in Directus. When I navigate to the settings module and then go over to access policies, we can see that I already have some permissions and roles set for administrators, which is my logged in user. But I want to make these images fully public. So what I can do is click here on public and under permissions, click on add collection and select the Directus Files system collection. I will be able to assign different permissions for folks accessing that from anywhere. But I only want to give folks the ability to read. So we'll click here on read access and then assign all access. The last thing to do is to save that permission. Fantastic. Now I can access this image from a browser, from an application, from anywhere. So let's go back and look at that image. Now you remember that these images are of different sizes and qualities. So in order to create some consistencies, we're going to be applying different image transformations, but also giving them a little bit of pizzazz with some advanced transformations. It's gonna be super cool. Before we wrap up this video, I'd like to show you a couple of the types of transformations we can do. In the next video, we'll be looking at image manipulation where we can use query parameters like width, like height, and fit to manipulate our image. And in this case, make it a consistent 300 by 300 pixels. But that's not all. In our 3rd episode, we'll be looking at how we can manipulate the size and performance of our images. For example, here we're applying a quality of 5% and a format of webP to be used in our applications. Next. Now bear with me. We're going to be doing some advanced transformations. Now this looks a little wild, but you'll see that we're applying some powerful transforms with that sharp API. So we're applying a blur, a tint, we're negating colors. All of this is done with direct us, which is super cool. And finally, in our last episode, we'll talk about preset transformation where we can assign presets to a key. And that way we don't have to type out all of those transformations, but rather place them in one consistent place in Directus. Finally, let's talk about that processing power. You might think it'd be pretty cumbersome if every time I reload this image, it reprocesses all of those transformations. And I have good news. That transformation is done once and then saved in Directus, and you don't have to apply it every time. That means that you can reload that image worry free of any extra processing power done. So there you have it. Now we've seen how direct us works with images out of the box and how we can apply access permissions, which is going to be super handy because in the next 4 episodes, we're going to be working with a new Nuxt application to work with these images and display them in a variety of ways using transformations. So what's next? In episode 2, we'll be looking at how to resize our images using width, height, and other parameters, and I can't wait to show you all how it works. So till next time, keep those cameras ready.","560a8148-6c64-4016-9729-cf5ba5a4cb56",[171],"b446d476-774a-4918-85d6-174bca22b2a6",[],{"id":133,"number":134,"show":122,"year":135,"episodes":174},[137,138,139,140,141],{"id":138,"slug":176,"vimeo_id":177,"description":178,"tile":179,"length":180,"resources":181,"people":8,"episode_number":188,"published":165,"title":189,"video_transcript_html":190,"video_transcript_text":191,"content":8,"seo":192,"status":130,"episode_people":193,"recommendations":195,"season":196},"image-manipulation","1030682505","Join Carmen as we apply focal points and other manipulations to our images.","ba3d5e9b-9c0c-49bc-9619-44608195a7a9",6,[182,183,184,185,186],{"name":151,"url":152},{"name":154,"url":155},{"name":157,"url":158},{"name":160,"url":161},{"name":187,"url":164},"Photo credit: Marble Cathedral of lake General Carrera, Chilean Patagonia",2,"Image Manipulation","\u003Cp>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\u003C/p>\u003Cp>Speaker 1: in\u003C/p>\u003Cp>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\u003C/p>\u003Cp>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\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>There's a volcano.\u003C/p>\u003Cp>Speaker 1: Now, what I would like\u003C/p>\u003Cp>Speaker 0: to do for my application is manipulate the image using Directus in order to show it\u003C/p>\u003Cp>Speaker 1: as a thumbnail. So let's take a moment to look at the code. So in\u003C/p>\u003Cp>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,\u003C/p>\u003Cp>Speaker 1: I'm retrieving that asset as a readable stream, which I then convert into a little URL that I\u003C/p>\u003Cp>Speaker 0: can display here on line\u003C/p>\u003Cp>Speaker 1: 21. So what we're doing on line 10 is reading that asset raw, just getting all of the image data. But\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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\u003C/p>\u003Cp>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\u003C/p>\u003Cp>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?\u003C/p>\u003Cp>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\u003C/p>\u003Cp>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\u003C/p>\u003Cp>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\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>Maybe actually do keep that at 500. By 300.\u003C/p>\u003Cp>Speaker 1: Much better. So we've got our height, we've got our width and our focal point.\u003C/p>\u003Cp>Speaker 0: The last thing we're going\u003C/p>\u003Cp>Speaker 1: to cover here is the fit. Now the\u003C/p>\u003Cp>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,\u003C/p>\u003Cp>Speaker 1: we have contained, which as we'll see allows us to\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>Speaker 1: But okay. Let's look at what else we've got. If we go with the inside fit,\u003C/p>\u003Cp>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\u003C/p>\u003Cp>Speaker 1: height. So to wrap up, I'm\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>Keep those cameras handy.\u003C/p>","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 in 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 to my photography, and we're gonna be looking at another one of my photos from my trip to Chile. This time, we'll 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. Now, what I would like to do for my application is manipulate the image using Directus in order to show it as a thumbnail. So let's take a moment to look at the code. So in 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, I'm retrieving that asset as a readable stream, which I then convert into a little URL that I can display here on line 21. So what we're doing on line 10 is reading that asset raw, just getting all of the image data. But 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 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 the volcano in its full glory. But what if I wanted to have a different part of the image displayed when it's cropped? 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 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 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 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. Much better. So we've got our height, we've got our width and our focal point. The last thing we're going to cover here is the fit. Now the 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, we have contained, which as we'll see allows us to 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. But okay. Let's look at what else we've got. If we go with the inside fit, 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 height. So to wrap up, I'm 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.","83f7e0c8-c1b1-4b4c-a55f-2ca7a6648e86",[194],"9d8a980e-b165-4e19-8e08-33c33f467776",[],{"id":133,"number":134,"show":122,"year":135,"episodes":197},[137,138,139,140,141],{"id":139,"slug":199,"vimeo_id":200,"description":201,"tile":202,"length":203,"resources":204,"people":8,"episode_number":210,"published":165,"title":211,"video_transcript_html":212,"video_transcript_text":213,"content":8,"seo":214,"status":130,"episode_people":215,"recommendations":217,"season":218},"size-and-performance","1030681873","Join Carmen as we transform our images to be more performant and format-conscious.","9534ee88-2302-4352-a715-391969efc88f",5,[205,206,207,208,209],{"name":151,"url":152},{"name":154,"url":155},{"name":157,"url":158},{"name":160,"url":161},{"name":187,"url":164},3,"Size and Performance","\u003Cp>Speaker 0: Hello, everybody. My name is Carmen, and welcome to Sharp Focus, the show where we zoom in on how Directus allows you to transform your images and truly make them shine. Now in previous episodes, we've seen how Directus stores your images and how you can grant permission and access to them. And we've also seen how you can manipulate your images width and height and fit using the Directus SDK and REST API. So what's next?\u003C/p>\u003Cp>In this episode, we're going to focus on size and performance. If you're working with a lot of images, you wanna keep some consistency and focus on the user experience, making sure that the images are consistently sized, but more importantly, load quickly. So let's find out how Directus does that for you. Let me just grab my camera, and let's hop right in. All right.\u003C/p>\u003Cp>Here we are in my directest project dedicated to my photography. And once again, we're going to be looking at my photos from my trip to Chile. In this episode, we're going to be working with the photos of the geysers del Tapio, which are located in the Andes mountains of Northern Chile. And these are beautiful geysers that we're going to be working with. So I said in this episode, we're going to be focusing on the size and performance of transforming our images.\u003C/p>\u003Cp>Let's again, look at our Nuxt app, which has now been modified to also show the size of our image here, clocking in at 46 kilobytes. Now over in our code, we've got our width, our height, and our fit as we saw in the image manipulations of episode 2. Our first parameter that we're gonna be working with is quality, which can take a value of 0 to 100. The higher the value, the higher the quality, but let's see what happens when we go lower in quality. I'm gonna start with 50%.\u003C/p>\u003Cp>So we can see the file has been reduced to 26 kilobytes and the image looks a little bit rougher, but not too bad. Let's bring it a little lower, half that to 25. We're seeing a file size of 16 kilobytes and the image looks a little bit grainier. If I bring that down to 5%, we're gonna see the image gets even lower in quality. It becomes a little difficult to see our beautiful geysers, but the image size is 4 kilobytes.\u003C/p>\u003Cp>And if I bring it all the way to a 100%, we're gonna see the image looks beautiful, but the size is a 153 kilobytes. So let's leave it at that 80% sweet spot. Next, we'll look at the format attribute. Its value will modify the format of the image. So we have the options of auto, JPEG, PNG, webp, and tiff.\u003C/p>\u003Cp>So if we start with auto, which is a default value, directives will try to format it in webp or avif depending on browser support. Otherwise, it'll fall back to JPEG. Let's look at JPEG PNG. We'll see that our image now has a size of a 111 kilobytes. If we try and web peak, we'll see 43 kilobytes.\u003C/p>\u003Cp>Let's leave that with auto by default. And finally, we'll have a look at the without enlargement property, which defaults to true. So if we set that to false, Directus will not upscale the image. So now I have a lot more granular control over the sizing of my images when I use them in my applications. All right.\u003C/p>\u003Cp>Well, there you have it folks. We've seen how we can use the direct to SDK to manipulate the quality and the format and the upscaling of our images. And as you can see, it's super straightforward and split fast. So what's next in the next episode, we're really going to dive into the sharp API and get into all of the nitty gritty advanced transformation. This one's super exciting folks.\u003C/p>\u003Cp>So I'm looking forward to seeing you there. Just remember, keep your camera handy and I'll see you in the next one.\u003C/p>","Hello, everybody. My name is Carmen, and welcome to Sharp Focus, the show where we zoom in on how Directus allows you to transform your images and truly make them shine. Now in previous episodes, we've seen how Directus stores your images and how you can grant permission and access to them. And we've also seen how you can manipulate your images width and height and fit using the Directus SDK and REST API. So what's next? In this episode, we're going to focus on size and performance. If you're working with a lot of images, you wanna keep some consistency and focus on the user experience, making sure that the images are consistently sized, but more importantly, load quickly. So let's find out how Directus does that for you. Let me just grab my camera, and let's hop right in. All right. Here we are in my directest project dedicated to my photography. And once again, we're going to be looking at my photos from my trip to Chile. In this episode, we're going to be working with the photos of the geysers del Tapio, which are located in the Andes mountains of Northern Chile. And these are beautiful geysers that we're going to be working with. So I said in this episode, we're going to be focusing on the size and performance of transforming our images. Let's again, look at our Nuxt app, which has now been modified to also show the size of our image here, clocking in at 46 kilobytes. Now over in our code, we've got our width, our height, and our fit as we saw in the image manipulations of episode 2. Our first parameter that we're gonna be working with is quality, which can take a value of 0 to 100. The higher the value, the higher the quality, but let's see what happens when we go lower in quality. I'm gonna start with 50%. So we can see the file has been reduced to 26 kilobytes and the image looks a little bit rougher, but not too bad. Let's bring it a little lower, half that to 25. We're seeing a file size of 16 kilobytes and the image looks a little bit grainier. If I bring that down to 5%, we're gonna see the image gets even lower in quality. It becomes a little difficult to see our beautiful geysers, but the image size is 4 kilobytes. And if I bring it all the way to a 100%, we're gonna see the image looks beautiful, but the size is a 153 kilobytes. So let's leave it at that 80% sweet spot. Next, we'll look at the format attribute. Its value will modify the format of the image. So we have the options of auto, JPEG, PNG, webp, and tiff. So if we start with auto, which is a default value, directives will try to format it in webp or avif depending on browser support. Otherwise, it'll fall back to JPEG. Let's look at JPEG PNG. We'll see that our image now has a size of a 111 kilobytes. If we try and web peak, we'll see 43 kilobytes. Let's leave that with auto by default. And finally, we'll have a look at the without enlargement property, which defaults to true. So if we set that to false, Directus will not upscale the image. So now I have a lot more granular control over the sizing of my images when I use them in my applications. All right. Well, there you have it folks. We've seen how we can use the direct to SDK to manipulate the quality and the format and the upscaling of our images. And as you can see, it's super straightforward and split fast. So what's next in the next episode, we're really going to dive into the sharp API and get into all of the nitty gritty advanced transformation. This one's super exciting folks. So I'm looking forward to seeing you there. Just remember, keep your camera handy and I'll see you in the next one.","96fbce59-099e-498d-beeb-c07e5088e62b",[216],"8479d2d3-dd74-41d6-96c8-4e3027228d25",[],{"id":133,"number":134,"show":122,"year":135,"episodes":219},[137,138,139,140,141],{"id":140,"slug":221,"vimeo_id":222,"description":223,"tile":224,"length":203,"resources":225,"people":8,"episode_number":231,"published":165,"title":232,"video_transcript_html":233,"video_transcript_text":234,"content":8,"seo":235,"status":130,"episode_people":236,"recommendations":238,"season":239},"advanced-transformations","1030680517","Join Carmen as we apply advanced transformations to our images leveraging the Sharp API.","3e734707-3997-41c3-9e81-543f7d27c4a3",[226,227,228,229,230],{"name":151,"url":152},{"name":154,"url":155},{"name":157,"url":158},{"name":160,"url":161},{"name":187,"url":164},4,"Advanced Transformations","\u003Cp>Speaker 0: Hello, everybody. My name is Carmen, and welcome to Sharp Focus, the show where we truly capture how it is that allows you to transform your images and truly make them shine. Now in previous episodes, we've seen how Directus manages your images for you, how you can set permissions, how you can use the SDK to manipulate the width, the height, the fit, the quality, the performance, the format of your images, and much more. But in this episode, we're gonna get into some advanced stuff, my friends. We're gonna be looking at how Directus exposes the Node JS Sharp API to allow you to do some truly wild transformations.\u003C/p>\u003Cp>I'm talking things like rotating images, resizing them, shifting them, tilting them, applying color tints, negation. Oh gosh. There's so much. But don't take my word for it. Let's just hop into some code.\u003C/p>\u003Cp>Let me just grab my camera here and let's get right into it. See you there. Here we are in my directus project dedicated to my photography, and we'll be taking a look at one of my photos from my recent trip to Chile. In this episode, we'll be working with this photo from Rapa Nui or Easter Island. And as said, we'll be working with advanced transformations.\u003C/p>\u003Cp>In order to have advanced control over your files, Directus exposes the full Sharp Node JS API, which has a bevy of options to allow us to work with our images. I'm talking things like rotating, flipping images, flopping images, sharpening, blurring, flattening, negate, color negation, color manipulation, channel manipulation, and many other options. So let's play around with some of these. We'll be working once again with our Nuxt applications, applying some of these transformations. Now you can see that I've applied the width attribute, but we can expand on this using the transforms property, which is an array of Sharp API calls.\u003C/p>\u003Cp>And these are applied as array pairs of property and value. So for example, I'm gonna use the resize property, which allows me to resize my image and make it 1,000 pixels wide. Thereby replacing the width property. And I'm just showing this as something that's possible to do. We're not gonna see much of a difference yet, but let's make things a little bit more interesting.\u003C/p>\u003Cp>Let's add another advanced transformation. How about rotation? Let's rotate it by 90 degrees. Fabulous. Let's try some other stuff and you can see, I can concatenate several transformations.\u003C/p>\u003Cp>For example, let's make it blurry. Let's blur it by 45%. Yep. That's a bit much. Let's blur it by about 15%.\u003C/p>\u003Cp>Cool. Let's make it 5%. Just give it a little bit of an enigma here. Fantastic. Finally, we'll do something just a touch more enigmatic, which is to use the negate transformation.\u003C/p>\u003Cp>We'll negate it. And you see didn't pass any properties and it already reversed the colors. Yep. It's totally possible to concatenate several operations and you can apply them in different orders for different effects. For example, now that I've resized it to be a 1000 pixels wide after I've rotated, you can see the image is wider.\u003C/p>\u003Cp>But what if we wanted to have that height back? Well, the resize transformation does take several parameters. For example, let's make it 500 pixels high. Cool. But, yeah, as said, advanced transformations and other manipulations can be applied in combination.\u003C/p>\u003Cp>So what you can do, for example, is say I want to reduce the quality of the ultimate image. Let's make it 25%. Save that. And now I've got a blurry negated rotated image. Alrighty.\u003C/p>\u003Cp>Well, I don't know about the rest of y'all, but I'm always so impressed with how much you can do using these advanced transformations. And as you can see, it can get pretty cool, all powered by Directus' API and SDK. So what's next in store? What we're gonna cover in the next and final episode is how you can apply all of the stuff we can been doing, but with only presets, which means not having to repeat yourself. And as software developers love to keep stuff D R Y, don't repeat yourself.\u003C/p>\u003Cp>So let's find out how we'll do that in the next episode. But until then, keep those cameras handy, and I'll see you next time.\u003C/p>","Hello, everybody. My name is Carmen, and welcome to Sharp Focus, the show where we truly capture how it is that allows you to transform your images and truly make them shine. Now in previous episodes, we've seen how Directus manages your images for you, how you can set permissions, how you can use the SDK to manipulate the width, the height, the fit, the quality, the performance, the format of your images, and much more. But in this episode, we're gonna get into some advanced stuff, my friends. We're gonna be looking at how Directus exposes the Node JS Sharp API to allow you to do some truly wild transformations. I'm talking things like rotating images, resizing them, shifting them, tilting them, applying color tints, negation. Oh gosh. There's so much. But don't take my word for it. Let's just hop into some code. Let me just grab my camera here and let's get right into it. See you there. Here we are in my directus project dedicated to my photography, and we'll be taking a look at one of my photos from my recent trip to Chile. In this episode, we'll be working with this photo from Rapa Nui or Easter Island. And as said, we'll be working with advanced transformations. In order to have advanced control over your files, Directus exposes the full Sharp Node JS API, which has a bevy of options to allow us to work with our images. I'm talking things like rotating, flipping images, flopping images, sharpening, blurring, flattening, negate, color negation, color manipulation, channel manipulation, and many other options. So let's play around with some of these. We'll be working once again with our Nuxt applications, applying some of these transformations. Now you can see that I've applied the width attribute, but we can expand on this using the transforms property, which is an array of Sharp API calls. And these are applied as array pairs of property and value. So for example, I'm gonna use the resize property, which allows me to resize my image and make it 1,000 pixels wide. Thereby replacing the width property. And I'm just showing this as something that's possible to do. We're not gonna see much of a difference yet, but let's make things a little bit more interesting. Let's add another advanced transformation. How about rotation? Let's rotate it by 90 degrees. Fabulous. Let's try some other stuff and you can see, I can concatenate several transformations. For example, let's make it blurry. Let's blur it by 45%. Yep. That's a bit much. Let's blur it by about 15%. Cool. Let's make it 5%. Just give it a little bit of an enigma here. Fantastic. Finally, we'll do something just a touch more enigmatic, which is to use the negate transformation. We'll negate it. And you see didn't pass any properties and it already reversed the colors. Yep. It's totally possible to concatenate several operations and you can apply them in different orders for different effects. For example, now that I've resized it to be a 1000 pixels wide after I've rotated, you can see the image is wider. But what if we wanted to have that height back? Well, the resize transformation does take several parameters. For example, let's make it 500 pixels high. Cool. But, yeah, as said, advanced transformations and other manipulations can be applied in combination. So what you can do, for example, is say I want to reduce the quality of the ultimate image. Let's make it 25%. Save that. And now I've got a blurry negated rotated image. Alrighty. Well, I don't know about the rest of y'all, but I'm always so impressed with how much you can do using these advanced transformations. And as you can see, it can get pretty cool, all powered by Directus' API and SDK. So what's next in store? What we're gonna cover in the next and final episode is how you can apply all of the stuff we can been doing, but with only presets, which means not having to repeat yourself. And as software developers love to keep stuff D R Y, don't repeat yourself. So let's find out how we'll do that in the next episode. But until then, keep those cameras handy, and I'll see you next time.","ba4fb8f5-d77e-492b-9ee2-07449c5e10af",[237],"4daa5c56-f887-4c28-8002-4ea130548114",[],{"id":133,"number":134,"show":122,"year":135,"episodes":240},[137,138,139,140,141],{"id":141,"slug":242,"vimeo_id":243,"description":244,"tile":245,"length":203,"resources":246,"people":8,"episode_number":203,"published":165,"title":252,"video_transcript_html":253,"video_transcript_text":254,"content":8,"seo":255,"status":130,"episode_people":256,"recommendations":258,"season":259},"preset-transformations","1030679756","Join Carmen as we assign our transformations to presets that we can apply to multiple images.","1c5f6ce6-3c69-408a-8aad-5257f7711fba",[247,248,249,250,251],{"name":151,"url":152},{"name":154,"url":155},{"name":157,"url":158},{"name":160,"url":161},{"name":187,"url":164},"Preset Transformations","\u003Cp>Speaker 0: Hello, everybody. My name is Carmen, and welcome to Sharp Focus, the show where we create a beautiful framing of how Directus allows you to transform your images and truly make them shine. Now in the last 4 episodes, gosh, they've gone by so quickly, we've seen how we can manipulate, create optimizations for, and apply advanced transformations of all of our images in direct Us. But getting to do so becomes a little bit cumbersome if you have to repeat yourself all the time. So in this final episode, we're gonna look at how you can create presets in Direct Us and just quickly grab those keys up and apply them to your images all in one go.\u003C/p>\u003Cp>And it's gonna be a lot of fun. So I hope you've got your cameras handy. I've got mine. Let's look into how we can apply those presets in Directus. Here we are in my Directus project dedicated to my photography, and we'll be looking at the final photo from my trip to Chile, La Capilla de Marmol or Marble Chapels located in the south of Chile in the Lake General Carrera, which is just beautiful, but I digress.\u003C/p>\u003Cp>So as much power and control as these custom and advanced transformations offer us, having to specify them every time we want to retrieve an image can become cumbersome. So what we can do is save presets that we can then later reference and think of this as a collection of transformations that we can then specify and apply at once. Now Directus actually comes with one of these built in, which I would like to show you now. In my code for my Nuxt app, you can see that I'm specifying a key and system large contain. And this is a built in preset that then shows the image in a nice large way that is contained.\u003C/p>\u003Cp>Fantastic. But how can we build our own? Let's go over to our settings module and its according settings section. And we're gonna scroll down here to our transformation presets. And we're gonna go ahead and click on create new.\u003C/p>\u003Cp>Now let's call this cool thumbnail. Naming was never really my thing. And now you're going to recognize a lot of these transformations that we've been using throughout this series. So let's go with contain, a width of 300, a height of 500. We will leave the upscaling as is, and our format is gonna be JPEG.\u003C/p>\u003Cp>We're not gonna do any advanced transformations for now using Sharp, and we're gonna go ahead and save that. Now that that's done and saved, let's go back to our application and start using it. So we've got our ID specified already, and we're gonna replace our key with, as said, cool thumbnail. Go ahead and save that. And now we're going to see, We've applied our preset all in one go.\u003C/p>\u003Cp>And now the great thing about this is that these transformations can be applied not just as the SDK level, but of course at a rest level. So if we wanted to go to that URL, put in our ID, and specify as a query parameter the key cool thumbnail, there's our cropped and resized image. That's how we can create and utilize presets of several transformations in one go. Alright, folks. Well, that's it.\u003C/p>\u003Cp>The last photoshoot is done. It's like we've taken everything we've learned in the last 4 episodes and culminated into one big preset that we can use time and time again without having to write out all of these transformations. So now we can optimize, we can manipulate, and we can apply advanced transformations to our images using Directus. So that ends series 1 of Sharp Focus. Thank you so much for watching.\u003C/p>\u003Cp>If you have any lingering doubts or wanna explore what else you can do with Directus, be sure to check out our documentation and check out the Directus community. But that's it for now. I will say, once again, thanks for watching. Remember, keep those cameras handy, and I will see you in the next episode. Bye for now.\u003C/p>","Hello, everybody. My name is Carmen, and welcome to Sharp Focus, the show where we create a beautiful framing of how Directus allows you to transform your images and truly make them shine. Now in the last 4 episodes, gosh, they've gone by so quickly, we've seen how we can manipulate, create optimizations for, and apply advanced transformations of all of our images in direct Us. But getting to do so becomes a little bit cumbersome if you have to repeat yourself all the time. So in this final episode, we're gonna look at how you can create presets in Direct Us and just quickly grab those keys up and apply them to your images all in one go. And it's gonna be a lot of fun. So I hope you've got your cameras handy. I've got mine. Let's look into how we can apply those presets in Directus. Here we are in my Directus project dedicated to my photography, and we'll be looking at the final photo from my trip to Chile, La Capilla de Marmol or Marble Chapels located in the south of Chile in the Lake General Carrera, which is just beautiful, but I digress. So as much power and control as these custom and advanced transformations offer us, having to specify them every time we want to retrieve an image can become cumbersome. So what we can do is save presets that we can then later reference and think of this as a collection of transformations that we can then specify and apply at once. Now Directus actually comes with one of these built in, which I would like to show you now. In my code for my Nuxt app, you can see that I'm specifying a key and system large contain. And this is a built in preset that then shows the image in a nice large way that is contained. Fantastic. But how can we build our own? Let's go over to our settings module and its according settings section. And we're gonna scroll down here to our transformation presets. And we're gonna go ahead and click on create new. Now let's call this cool thumbnail. Naming was never really my thing. And now you're going to recognize a lot of these transformations that we've been using throughout this series. So let's go with contain, a width of 300, a height of 500. We will leave the upscaling as is, and our format is gonna be JPEG. We're not gonna do any advanced transformations for now using Sharp, and we're gonna go ahead and save that. Now that that's done and saved, let's go back to our application and start using it. So we've got our ID specified already, and we're gonna replace our key with, as said, cool thumbnail. Go ahead and save that. And now we're going to see, We've applied our preset all in one go. And now the great thing about this is that these transformations can be applied not just as the SDK level, but of course at a rest level. So if we wanted to go to that URL, put in our ID, and specify as a query parameter the key cool thumbnail, there's our cropped and resized image. That's how we can create and utilize presets of several transformations in one go. Alright, folks. Well, that's it. The last photoshoot is done. It's like we've taken everything we've learned in the last 4 episodes and culminated into one big preset that we can use time and time again without having to write out all of these transformations. So now we can optimize, we can manipulate, and we can apply advanced transformations to our images using Directus. So that ends series 1 of Sharp Focus. Thank you so much for watching. If you have any lingering doubts or wanna explore what else you can do with Directus, be sure to check out our documentation and check out the Directus community. But that's it for now. I will say, once again, thanks for watching. Remember, keep those cameras handy, and I will see you in the next episode. Bye for now.","ebdc4bff-8de2-4616-9c87-b178bbdcd517",[257],"a35f3518-cde8-42bc-be27-4b8d4aeea910",[],{"id":133,"number":134,"show":122,"year":135,"episodes":260},[137,138,139,140,141],{"reps":262},[263,319],{"name":264,"sdr":8,"link":265,"countries":266,"states":268},"John Daniels","https://meet.directus.io/meetings/john2144/john-contact-form-meeting",[267],"United States",[269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318],"Michigan","Indiana","Ohio","West Virginia","Kentucky","Virginia","Tennessee","North Carolina","South Carolina","Georgia","Florida","Alabama","Mississippi","New York","MI","IN","OH","WV","KY","VA","TN","NC","SC","GA","FL","AL","MS","NY","Connecticut","CT","Delaware","DE","Maine","ME","Maryland","MD","Massachusetts","MA","New Hampshire","NH","New Jersey","NJ","Pennsylvania","PA","Rhode Island","RI","Vermont","VT","Washington DC","DC",{"name":320,"link":321,"countries":322},"Michelle Riber","https://meetings.hubspot.com/mriber",[323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,424,425,426,427,428,429,430,431,432,433,434,435,436,437,438,439,440,441,442,443,444,445,446,447,448,449,450,451,452,453,454,455,456,457,458,459,460,461,462,463,464,465,466,467,468,469,470,471,472,473,474,475,476,477,478,479,480,481,482,483,484,485,486,487,488,489,490,491,492,493,494,495,496,497,498,499,500,501,502,503,504,505,506,507,508,509,510,300,511,512],"Albania","ALB","Algeria","DZA","Andorra","AND","Angola","AGO","Austria","AUT","Belgium","BEL","Benin","BEN","Bosnia and Herzegovina","BIH","Botswana","BWA","Bulgaria","BGR","Burkina Faso","BFA","Burundi","BDI","Cameroon","CMR","Cape Verde","CPV","Central African Republic","CAF","Chad","TCD","Comoros","COM","Côte d'Ivoire","CIV","Croatia","HRV","Czech Republic","CZE","Democratic Republic of Congo","COD","Denmark","DNK","Djibouti","DJI","Egypt","EGY","Equatorial Guinea","GNQ","Eritrea","ERI","Estonia","EST","Eswatini","SWZ","Ethiopia","ETH","Finland","FIN","France","FRA","Gabon","GAB","Gambia","GMB","Ghana","GHA","Greece","GRC","Guinea","GIN","Guinea-Bissau","GNB","Hungary","HUN","Iceland","ISL","Ireland","IRL","Italy","ITA","Kenya","KEN","Latvia","LVA","Lesotho","LSO","Liberia","LBR","Libya","LBY","Liechtenstein","LIE","Lithuania","LTU","Luxembourg","LUX","Madagascar","MDG","Malawi","MWI","Mali","MLI","Malta","MLT","Mauritania","MRT","Mauritius","MUS","Moldova","MDA","Monaco","MCO","Montenegro","MNE","Morocco","MAR","Mozambique","MOZ","Namibia","NAM","Niger","NER","Nigeria","NGA","North Macedonia","MKD","Norway","NOR","Poland","POL","Portugal","PRT","Republic of Congo","COG","Romania","ROU","Rwanda","RWA","San Marino","SMR","São Tomé and Príncipe","STP","Senegal","SEN","Serbia","SRB","Seychelles","SYC","Sierra Leone","SLE","Slovakia","SVK","Slovenia","SVN","Somalia","SOM","South Africa","ZAF","South Sudan","SSD","Spain","ESP","Sudan","SDN","Sweden","SWE","Tanzania","TZA","Togo","TGO","Tunisia","TUN","Uganda","UGA","United Kingdom","GBR","Vatican City","VAT","Zambia","ZMB","Zimbabwe","ZWE","UK","Germany","Netherlands","Switzerland","CH","NL",1773850417596]