[{"data":1,"prerenderedAt":64},["ShallowReactive",2],{"short-hops-sort-fields":3,"short-hops-sort-fields-next":48},{"id":4,"slug":5,"vimeo_id":6,"description":7,"tile":8,"length":9,"resources":10,"people":11,"episode_number":15,"published":16,"title":17,"video_transcript_html":18,"video_transcript_text":19,"content":10,"status":20,"episode_people":21,"recommendations":35,"season":36,"seo":10},"74a53f16-9a2b-42de-bca2-5de319565462","sort-fields","903061460","Learn how to add sort fields inside of new and existing relationships inside of Directus.","d4a8d6b2-e82a-4fe0-a1b0-6c8448c5ede5",4,null,[12],{"name":13,"url":14},"Bryant Gillespie","https:\u002F\u002Fdirectus.io\u002Fteam\u002Fbryant-gillespie",5,"2024-04-12","Sort Fields","\u003Cp>Bryant: Hi. Welcome back to the next episode of Short Hops. I'm your host Brian Gillespie and today we are talking about sort fields. This is one that I see come up a lot in our community. Very simple fix, and most people overlook this functionality.\u003C\u002Fp>\u003Cp>But surprise surprise, you can add sort fields anytime. So I see this coming up often on our many to any relationships, like our page builder scenario or even standard, like, one to many or many to many relationships. Wanna be able to sort those related items within that particular field. So let's just throw together a page builder here, we'll just call this our page blocks. Great.\u003C\u002Fp>\u003Cp>And then we've got our block FAQs, etcetera. So here on this screen, I don't have a sort option when I'm using the the wizard here, but if I go to continue an advanced field creation mode, I go to my relationship, you'll see there is an option for sort field. So I don't have to manually add a sort field, I can just add sort here and at the bottom, I could see that Directus will create this for me. Likewise, if I wanted to call it something else something else, I wanted to get really fancy with it, I can. So I don't have to name it sort, that's just kind of standard convention, but adding that sort field is as simple as that.\u003C\u002Fp>\u003Cp>So just go into advanced creation mode. Great. And then when I go to my pages now, I go to build a page, I could go in and create a new block, test test. Great. Let's add a hero, test, test and then I can rearrange those using that particular sort field.\u003C\u002Fp>\u003Cp>Great. But what about existing relationships? So if I look at projects for example. Right, if I go in and create a test task and a new task, oh, I can't even spell today, test project. Right.\u003C\u002Fp>\u003Cp>I've already got this relationship set up, but my sort fields, I don't have a way to sort this. How do I fix it? So I just go into my data model, I go to Projects, I look for my field that has a relationship, in this case, it's Tasks, and I go to that relationship tab and I have sort field. So I can pick that item up from one of the existing fields, which there are none, or I can simply just key something in here and Directus is smart enough to know that this field does not exist, so it will actually create it for you. And with that, all I have to do is now go back to our project and I could sort those items however I want.\u003C\u002Fp>\u003Cp>That's it. Easy peasy. I'll catch you on the next one.\u003C\u002Fp>","Hi. Welcome back to the next episode of Short Hops. I'm your host Brian Gillespie and today we are talking about sort fields. This is one that I see come up a lot in our community. Very simple fix, and most people overlook this functionality. But surprise surprise, you can add sort fields anytime. So I see this coming up often on our many to any relationships, like our page builder scenario or even standard, like, one to many or many to many relationships. Wanna be able to sort those related items within that particular field. So let's just throw together a page builder here, we'll just call this our page blocks. Great. And then we've got our block FAQs, etcetera. So here on this screen, I don't have a sort option when I'm using the the wizard here, but if I go to continue an advanced field creation mode, I go to my relationship, you'll see there is an option for sort field. So I don't have to manually add a sort field, I can just add sort here and at the bottom, I could see that Directus will create this for me. Likewise, if I wanted to call it something else something else, I wanted to get really fancy with it, I can. So I don't have to name it sort, that's just kind of standard convention, but adding that sort field is as simple as that. So just go into advanced creation mode. Great. And then when I go to my pages now, I go to build a page, I could go in and create a new block, test test. Great. Let's add a hero, test, test and then I can rearrange those using that particular sort field. Great. But what about existing relationships? So if I look at projects for example. Right, if I go in and create a test task and a new task, oh, I can't even spell today, test project. Right. I've already got this relationship set up, but my sort fields, I don't have a way to sort this. How do I fix it? So I just go into my data model, I go to Projects, I look for my field that has a relationship, in this case, it's Tasks, and I go to that relationship tab and I have sort field. So I can pick that item up from one of the existing fields, which there are none, or I can simply just key something in here and Directus is smart enough to know that this field does not exist, so it will actually create it for you. And with that, all I have to do is now go back to our project and I could sort those items however I want. That's it. Easy peasy. I'll catch you on the next one.","published",[22],{"people_id":23},{"id":24,"first_name":25,"last_name":26,"avatar":27,"bio":28,"links":29},"791e1503-1d88-463d-9347-0b9192933576","Bryant","Gillespie","9013afc8-e8d7-4182-9b18-44db08117bb9","Developer Advocate at Directus",[30,32],{"url":14,"service":31},"website",{"service":33,"url":34},"github","https:\u002F\u002Fgithub.com\u002Fbryantgillespie",[],{"id":37,"number":38,"year":39,"episodes":40,"show":45},"e708d08e-2aea-44fa-a335-9e2af2d40d7e",1,"2024",[41,42,43,44,4],"a0f37f8b-c789-4421-b6c4-e4f681028d66","2766c70a-1fc0-46b1-ac5e-b464ca245334","9627b3fd-7a5b-4748-9c18-4ce318ac2cab","511b1967-c04f-42db-b515-911de7981d33",{"title":46,"tile":47},"Short Hops","2166990a-8dbf-4956-8b25-11b72ad203d5",{"id":49,"slug":50,"season":51,"vimeo_id":52,"description":53,"tile":54,"length":9,"resources":10,"people":10,"episode_number":38,"published":55,"title":56,"video_transcript_html":57,"video_transcript_text":58,"content":59,"seo":60,"status":20,"episode_people":61,"recommendations":63},"e82ffa88-91c1-4605-aefa-67bb8e20a9ed","transformation-presets","a1886f5f-e5c4-4dd2-ac8a-d2e7c176f813","983673160","Discover the power of transformation presets in Directus to streamline your image handling processes. Learn how to create and use these presets to standardize image formats, sizes, and even apply custom transformations across your entire website or application","9ceeec94-7ef3-455a-bb85-ca8c0cad2827","2024-07-26","Transformation Presets","\u003Cp>Speaker 0: Welcome back to another episode of Short Hops. I'm your host Brian Gillespie. And today, we are covering transformation presets. What are transformation presets, you ask? So one of the more powerful features inside Directus is the ability to transform your images.\u003C\u002Fp>\u003Cp>We could do things like cropping. We can adjust the color, change it to gray scale. We can use more compressed formats like webp and avif to make our site load faster. Transformation presets are just shortcuts for those. So you can standardize images and formats, sizes across your entire website or application quickly and easily.\u003C\u002Fp>\u003Cp>So let's take a look. I'm inside a sample project. I've got, some assets here. And if I just open up this, bunny, this is actually probably a hare. You know, we could do things like this where we have our transformations.\u003C\u002Fp>\u003Cp>Right? So I can adjust the width of this image. I can adjust the height of this image. But imagine I've got a blog page where I have cards that are all, roughly a same size. That's a good use case for transformation presets.\u003C\u002Fp>\u003Cp>So what can I do? We're gonna go into the Directus settings, to our project settings. We're gonna scroll down to files and storage. And I'll zoom in even further for you here. So there's a couple of settings when it comes to transformations.\u003C\u002Fp>\u003Cp>I can allow all transformations, which is basically, hey, I can whatever transformation I wanna do as long as it is valid sharp, which is the underlying library that we use, we can do that. I can also disable all transformations, so you get what you get as far as images. And last but not least, I can limit the transformations to presets below. So if you're concerned about people absolutely killing your server with transformations or kind of standardizing, you probably wanna do this limiting option. But as far as our presets, again, these are just shortcuts that you set up to, you know, standardize the format.\u003C\u002Fp>\u003Cp>So you could see this one called 800 width, or 800 w, is basically just a preset width of 800. We use the webp format. And instead of having to pass all these parameters when I actually get the image, I could just do something like this where in my URL for that specific image, you know, slash assets, slash the UUID for that file, I add a key param and I do 800w. Right? So that saves me a lot of time.\u003C\u002Fp>\u003Cp>And again, helps me standardize across my website. Creating these presets is super simple. I just go in. If I wanted to create a new preset, let's call it purple. Right?\u003C\u002Fp>\u003Cp>We'll do 800 wide. Let's do a webp format. And I've just got a additional transform that I wanna do here. We're gonna tint the image and we're gonna apply our directus purple, hence the name purple. So we'll do fit inside, that's great.\u003C\u002Fp>\u003Cp>Save this. And now if I go back to this specific image, all I have to do is change that key. And I now get a purple tinted hair in a field image. Looks amazing. So that is it for transformation presets.\u003C\u002Fp>\u003Cp>Try this out. Leverage it in your projects. It's super helpful. We'll catch you on the next one.\u003C\u002Fp>","Welcome back to another episode of Short Hops. I'm your host Brian Gillespie. And today, we are covering transformation presets. What are transformation presets, you ask? So one of the more powerful features inside Directus is the ability to transform your images. We could do things like cropping. We can adjust the color, change it to gray scale. We can use more compressed formats like webp and avif to make our site load faster. Transformation presets are just shortcuts for those. So you can standardize images and formats, sizes across your entire website or application quickly and easily. So let's take a look. I'm inside a sample project. I've got, some assets here. And if I just open up this, bunny, this is actually probably a hare. You know, we could do things like this where we have our transformations. Right? So I can adjust the width of this image. I can adjust the height of this image. But imagine I've got a blog page where I have cards that are all, roughly a same size. That's a good use case for transformation presets. So what can I do? We're gonna go into the Directus settings, to our project settings. We're gonna scroll down to files and storage. And I'll zoom in even further for you here. So there's a couple of settings when it comes to transformations. I can allow all transformations, which is basically, hey, I can whatever transformation I wanna do as long as it is valid sharp, which is the underlying library that we use, we can do that. I can also disable all transformations, so you get what you get as far as images. And last but not least, I can limit the transformations to presets below. So if you're concerned about people absolutely killing your server with transformations or kind of standardizing, you probably wanna do this limiting option. But as far as our presets, again, these are just shortcuts that you set up to, you know, standardize the format. So you could see this one called 800 width, or 800 w, is basically just a preset width of 800. We use the webp format. And instead of having to pass all these parameters when I actually get the image, I could just do something like this where in my URL for that specific image, you know, slash assets, slash the UUID for that file, I add a key param and I do 800w. Right? So that saves me a lot of time. And again, helps me standardize across my website. Creating these presets is super simple. I just go in. If I wanted to create a new preset, let's call it purple. Right? We'll do 800 wide. Let's do a webp format. And I've just got a additional transform that I wanna do here. We're gonna tint the image and we're gonna apply our directus purple, hence the name purple. So we'll do fit inside, that's great. Save this. And now if I go back to this specific image, all I have to do is change that key. And I now get a purple tinted hair in a field image. Looks amazing. So that is it for transformation presets. Try this out. Leverage it in your projects. It's super helpful. We'll catch you on the next one.","\u003Cp>In this episode of Short Hops, dive into the world of transformation presets in Directus. Host Bryant Gillespie guides you through this powerful feature that allows you to standardize and optimize images across your projects with ease.\u003C\u002Fp>\n\u003Cp>What you'll learn:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Understanding transformation presets and their benefits\u003C\u002Fli>\n\u003Cli>How to access and configure transformation settings in Directus\u003C\u002Fli>\n\u003Cli>Creating custom presets for width, format, and special effects\u003C\u002Fli>\n\u003Cli>Applying presets to images using simple URL parameters\u003C\u002Fli>\n\u003Cli>Balancing flexibility and control with transformation options\u003C\u002Fli>\n\u003Cli>Real-world use cases for standardizing images in web applications\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Whether you're managing a blog, e-commerce site, or complex web application, this episode provides valuable insights into streamlining your image handling process. Learn how to create presets that ensure consistency, improve load times with modern formats like WebP, and even apply custom transformations like color tinting.\u003C\u002Fp>","a142eef1-b2ac-48e7-8b53-d4add5047669",[62],"4c955a81-4deb-4d16-940d-fe54a4f3307f",[],1782310065049]