[{"data":1,"prerenderedAt":432},["ShallowReactive",2],{"footer-primary":3,"footer-secondary":93,"footer-description":119,"short-hops-focal-point":121,"short-hops-focal-point-next":166,"sales-reps":180},{"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,"slug":123,"vimeo_id":124,"description":125,"tile":126,"length":127,"resources":8,"people":8,"episode_number":127,"published":128,"title":129,"video_transcript_html":130,"video_transcript_text":131,"content":132,"status":133,"episode_people":134,"recommendations":149,"season":150,"seo":165},"fcb6f3f2-d6f3-4905-a3d9-b44aed7bb25c","focal-point","983672154","Learn to maintain the focus of your images during asset transformations, enhancing the visual appeal of your website or application.","9031652a-9389-473a-9f8b-a5473b3fc8bc",4,"2024-07-26","Focal Point","\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>","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.","\u003Cp>In this episode of Short Hops, host Bryant Gillespie explores the powerful focal point feature in Directus. Learn how this tool can significantly improve the visual quality of your website or application by ensuring that the key elements of your images remain in frame, even when cropped or resized.\u003C/p>\n\u003Cp>What you'll learn:\u003C/p>\n\u003Cul>\n\u003Cli>Understanding the concept of focal points in image management\u003C/li>\n\u003Cli>How focal points affect image cropping and transformations\u003C/li>\n\u003Cli>Setting up and adjusting focal points in Directus\u003C/li>\n\u003Cli>Practical demonstration using a real-world example\u003C/li>\n\u003Cli>Improving image presentation across different sizes and aspect ratios\u003C/li>\n\u003Cli>Tips for optimizing your images for various layouts and devices\u003C/li>\n\u003C/ul>","published",[135],{"people_id":136},{"id":137,"first_name":138,"last_name":139,"avatar":140,"bio":141,"links":142},"791e1503-1d88-463d-9347-0b9192933576","Bryant","Gillespie","9013afc8-e8d7-4182-9b18-44db08117bb9","Developer Advocate at Directus",[143,146],{"url":144,"service":145},"https://directus.io/team/bryant-gillespie","website",{"service":147,"url":148},"github","https://github.com/bryantgillespie",[],{"id":151,"number":152,"year":153,"episodes":154,"show":162},"a1886f5f-e5c4-4dd2-ac8a-d2e7c176f813",2,"2024",[155,156,157,122,158,159,160,161],"e82ffa88-91c1-4605-aefa-67bb8e20a9ed","1fb83779-28e9-4523-bcbc-57065d7177a1","f711e94f-14c1-48dd-b00c-70a340351412","2d192e76-378b-4540-9d41-2506460a50af","cc653542-7721-4b37-8978-60fee90081dc","0bfed0fe-2c73-4528-8a6a-d3b39b4c0528","0cbf2b23-545e-4ea7-ae45-47707292caec",{"title":163,"tile":164},"Short Hops","2166990a-8dbf-4956-8b25-11b72ad203d5",{"title":8,"meta_description":8},{"id":158,"slug":167,"season":151,"vimeo_id":168,"description":169,"tile":170,"length":127,"resources":8,"people":8,"episode_number":171,"published":128,"title":172,"video_transcript_html":173,"video_transcript_text":174,"content":175,"seo":176,"status":133,"episode_people":177,"recommendations":179},"dynamic-relational-interfaces","983671908","Learn how to create a more intuitive user experience in Directus by implementing dynamic filters on relational interfaces. This episode teaches you to set up dependent field relationships, allowing users to see only relevant options when selecting related items. ","0eb0d695-342c-447c-b406-bc7980733cae",5,"Dynamic Relational Interfaces","\u003Cp>Speaker 0: Welcome back to another episode of Short Hops. I'm your host Brian Gillespie. And in this episode, I'm gonna give you one of the coolest tips and tricks that I've probably ever shared here on Short Ops. So stick with me on this one. It's really cool.\u003C/p>\u003Cp>Alright. So what are we focused on today? We're going to build a better user experience using filters on our relational interfaces. That is a mouthful, kind of underwhelming title. But let's dive into an example project and I'll show you what we've got going on.\u003C/p>\u003Cp>So this is a sample Directus instance. This is my Agency OS project that we put out under the Directus Labs organization. Be sure to check that out. But I wanna show you the scenario. So I'm creating a project in here, and we've got an organization, and we could add multiple contacts to this.\u003C/p>\u003Cp>So a a project belongs to an organization. Let's go with Tesla, in this case, pretty ambiguous name. And then I want to add an existing contact to this. But you could see here, here's my problem. If I take a look, I get all the contacts for this.\u003C/p>\u003Cp>So, you know, I'm only wanting to be able to select contacts that are at Tesla. So this is kind of a dependency here. How do we manage something like this? So I'm just going to open the settings, we're going to go into our data model. I'm going to look for the projects collection.\u003C/p>\u003Cp>And here inside organization, we've got contacts right beside it. What I'm looking for, you know, we could see the relationship tab and how all these things come together. But when I go into the interface, and this is a mini to mini collection or relationship, so you'll have to be mindful of how you've got your relationship set up. But if I want to set that up dependent upon a field that we already have, I could do something like this. Down here in my filter, you know, I could go in and and like hard code a value of, you know, show me all the contacts where the name contains Ashley.\u003C/p>\u003Cp>But we want this to be dynamic, right, so I'm gonna drill into our organizations. This is a many to many relationship. And I'm gonna say organizations dot id equals, and I could do this. So I'm gonna do mustache brackets here, and I'm gonna do organization, which is the name of that other field inside our data model. Alright.\u003C/p>\u003Cp>Great. So let's take a look at this and we'll go back, we'll create a new project. Right now if I click add existing, no contacts show up. How come? Right?\u003C/p>\u003Cp>So what I could do here, we'll say Directus test. That's the company we wanna do this project for. And now I only see the contacts who are part of that organization. Right? Likewise, if I change this to Tesla, I open it up and I see I've got Elon Dusk here as the only option to select.\u003C/p>\u003Cp>So that's it. Take a look at the filter on any of the relational interfaces that you've set up, this is a a nice little technique to use in certain scenarios like this one. That's it for this episode. Stay tuned for the next one.\u003C/p>","Welcome back to another episode of Short Hops. I'm your host Brian Gillespie. And in this episode, I'm gonna give you one of the coolest tips and tricks that I've probably ever shared here on Short Ops. So stick with me on this one. It's really cool. Alright. So what are we focused on today? We're going to build a better user experience using filters on our relational interfaces. That is a mouthful, kind of underwhelming title. But let's dive into an example project and I'll show you what we've got going on. So this is a sample Directus instance. This is my Agency OS project that we put out under the Directus Labs organization. Be sure to check that out. But I wanna show you the scenario. So I'm creating a project in here, and we've got an organization, and we could add multiple contacts to this. So a a project belongs to an organization. Let's go with Tesla, in this case, pretty ambiguous name. And then I want to add an existing contact to this. But you could see here, here's my problem. If I take a look, I get all the contacts for this. So, you know, I'm only wanting to be able to select contacts that are at Tesla. So this is kind of a dependency here. How do we manage something like this? So I'm just going to open the settings, we're going to go into our data model. I'm going to look for the projects collection. And here inside organization, we've got contacts right beside it. What I'm looking for, you know, we could see the relationship tab and how all these things come together. But when I go into the interface, and this is a mini to mini collection or relationship, so you'll have to be mindful of how you've got your relationship set up. But if I want to set that up dependent upon a field that we already have, I could do something like this. Down here in my filter, you know, I could go in and and like hard code a value of, you know, show me all the contacts where the name contains Ashley. But we want this to be dynamic, right, so I'm gonna drill into our organizations. This is a many to many relationship. And I'm gonna say organizations dot id equals, and I could do this. So I'm gonna do mustache brackets here, and I'm gonna do organization, which is the name of that other field inside our data model. Alright. Great. So let's take a look at this and we'll go back, we'll create a new project. Right now if I click add existing, no contacts show up. How come? Right? So what I could do here, we'll say Directus test. That's the company we wanna do this project for. And now I only see the contacts who are part of that organization. Right? Likewise, if I change this to Tesla, I open it up and I see I've got Elon Dusk here as the only option to select. So that's it. Take a look at the filter on any of the relational interfaces that you've set up, this is a a nice little technique to use in certain scenarios like this one. That's it for this episode. Stay tuned for the next one.","\u003Cp>In this episode of Short Hops, host Bryant Gillespie shares an invaluable tip for improving the user experience in Directus projects. Learn how to implement dynamic filters on relational interfaces, creating more intuitive and efficient data entry processes.\u003C/p>\n\u003Cp>What you'll learn:\u003C/p>\n\u003Cul>\n\u003Cli>Understanding the challenge of managing related data in complex structures\u003C/li>\n\u003Cli>How to set up dependent field relationships in Directus\u003C/li>\n\u003Cli>Implementing dynamic filters on many-to-many relationships\u003C/li>\n\u003Cli>Using mustache syntax to create context-aware filters\u003C/li>\n\u003Cli>Practical demonstration using a real-world project management scenario\u003C/li>\n\u003C/ul>","014f5dc9-1c15-4db0-adae-425834f62e90",[178],"3553bb41-b085-40b8-ab7c-ee118829e345",[],{"reps":181},[182,238],{"name":183,"sdr":8,"link":184,"countries":185,"states":187},"John Daniels","https://meet.directus.io/meetings/john2144/john-contact-form-meeting",[186],"United States",[188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237],"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":239,"link":240,"countries":241},"Michelle Riber","https://meetings.hubspot.com/mriber",[242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,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,319,320,321,322,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,219,430,431],"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",1773850439774]