[{"data":1,"prerenderedAt":433},["ShallowReactive",2],{"footer-primary":3,"footer-secondary":93,"footer-description":119,"short-hops-conditional-fields":121,"short-hops-conditional-fields-next":164,"sales-reps":181},{"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":128,"episode_number":132,"published":133,"title":134,"video_transcript_html":135,"video_transcript_text":136,"content":8,"status":137,"episode_people":138,"recommendations":152,"season":153,"seo":8},"a0f37f8b-c789-4421-b6c4-e4f681028d66","conditional-fields","903063878","Learn how to conditionally show and hide fields inside of Directus Editor.","d4c79052-82e1-4e08-8461-a5ac9a4bf9a1",7,[129],{"name":130,"url":131},"Bryant Gillespie","https://directus.io/team/bryant-gillespie",1,"2024-03-15","Conditional Fields ","\u003Cp>Speaker 0: Hi. Welcome back to another episode of Short Hops where I give you a couple of my best directest tips and tricks. I'm your host, Brian Gillespie, and today we are talking about conditional fields. This is one of my favorite features. I know I say that a lot, but, as a a pet peeve of mine, I hate presenting information or or fields for somebody to fill out that aren't relevant or aren't necessary.\u003C/p>\u003Cp>And the conditional fields inside Directus allow you to create a better user experience for your content editors, your marketers, anybody who's using the actual Directus app. And typically, that could be nontechnical folks, and they will thank you if you build a great experience using these conditional fields. So let's take a look at a pretty common scenario. You know, we've got posts on our site. These could be resources, whatever.\u003C/p>\u003Cp>We've got different types of posts. And depending on the type of post, we may not need things like a video URL or, if we're doing a case study, we probably wanna have company name or contact name, company URL. But in all other scenarios, it's not necessary to present this. So let's control this. We'll go into our data model and for our posts, let's just create a new radio button called post type.\u003C/p>\u003Cp>We'll give a couple choices. Right? We have a blog or an article. We have video. We have a case study.\u003C/p>\u003Cp>Great. Okay. So it's for score study. Perfect. Okay.\u003C/p>\u003Cp>So now I hit Save and we have a post type. Maybe we sort this out. Cool. Great job, Bryant. Let's pat you on the back.\u003C/p>\u003Cp>And we pick blog or video, post type, case study. None of this actually changes. Right? So this is where our custom fields come into play. This video URL, let's go in and go to the field settings.\u003C/p>\u003Cp>We're gonna hide this on the detail view. We don't need it, until we do. So let's show when type equals video. So the name here is just adding some additional context to this condition, and we're gonna set up a rule for this. So when the post type equals video, then we are going to unhide that.\u003C/p>\u003Cp>So we're gonna make sure hidden on detail is unchecked. And just like that, we can go in and now for our blog post, you can see that video field is hidden, but if I change it to the post type to video, now we can see we've got that field for video URL. Some other ways that I use this, you can see I have a group of fields here. We could go in and add a detail detail group for this. So let's just call this case study details.\u003C/p>\u003Cp>Right? And if I go into the conditions for this, maybe we'll we'll hide this by default and show when type equals case study. So give it a name just so we have that. Again we'll set this condition or the rule for this when the post type equals case study, we are going to show this item inside the form. And then last but not least, I'll just drag my items into the actual form.\u003C/p>\u003Cp>So if I use this grouping, I I don't necessarily have to add the conditions to these individual fields because they're part of that group. So now if I scroll and for any blog posts, you see that we just have content image for a video now that video URL pops up, but for a case study, I now have this collapsible case study details section. One other quick way that I use this. A common scenario is that we need to disable editing after a particular item is created inside a collection. So if I had some fields that I wanted to prevent the user from editing after I created an item, I could do the conditional fields for that.\u003C/p>\u003Cp>So let's just say I wanted to prevent the user from, let's add a field for date published. That'll be a good example. Date published, cool, and let's just pretend that if there is a this has already been published or there's a date published, I want to prevent people from editing the slug of this particular item. So I can go into our conditions and if date published, do not allow editing. So I can go in and set date published where is that new field that we just created.\u003C/p>\u003Cp>If date value isn't null, we are going to disable editing this value. Alright. So let's save that, And on this post now we have a date published, but if I go in and choose a date published, you could see that now I cannot edit that slug, which, you know, could help prevent, any 404 errors in the future. That's just one of the ways that you can use conditional fields. I hope this is tremendously helpful for you.\u003C/p>\u003Cp>Keep the questions coming. I love seeing these pop up in the community. Stay tuned for the next episode.\u003C/p>","Hi. Welcome back to another episode of Short Hops where I give you a couple of my best directest tips and tricks. I'm your host, Brian Gillespie, and today we are talking about conditional fields. This is one of my favorite features. I know I say that a lot, but, as a a pet peeve of mine, I hate presenting information or or fields for somebody to fill out that aren't relevant or aren't necessary. And the conditional fields inside Directus allow you to create a better user experience for your content editors, your marketers, anybody who's using the actual Directus app. And typically, that could be nontechnical folks, and they will thank you if you build a great experience using these conditional fields. So let's take a look at a pretty common scenario. You know, we've got posts on our site. These could be resources, whatever. We've got different types of posts. And depending on the type of post, we may not need things like a video URL or, if we're doing a case study, we probably wanna have company name or contact name, company URL. But in all other scenarios, it's not necessary to present this. So let's control this. We'll go into our data model and for our posts, let's just create a new radio button called post type. We'll give a couple choices. Right? We have a blog or an article. We have video. We have a case study. Great. Okay. So it's for score study. Perfect. Okay. So now I hit Save and we have a post type. Maybe we sort this out. Cool. Great job, Bryant. Let's pat you on the back. And we pick blog or video, post type, case study. None of this actually changes. Right? So this is where our custom fields come into play. This video URL, let's go in and go to the field settings. We're gonna hide this on the detail view. We don't need it, until we do. So let's show when type equals video. So the name here is just adding some additional context to this condition, and we're gonna set up a rule for this. So when the post type equals video, then we are going to unhide that. So we're gonna make sure hidden on detail is unchecked. And just like that, we can go in and now for our blog post, you can see that video field is hidden, but if I change it to the post type to video, now we can see we've got that field for video URL. Some other ways that I use this, you can see I have a group of fields here. We could go in and add a detail detail group for this. So let's just call this case study details. Right? And if I go into the conditions for this, maybe we'll we'll hide this by default and show when type equals case study. So give it a name just so we have that. Again we'll set this condition or the rule for this when the post type equals case study, we are going to show this item inside the form. And then last but not least, I'll just drag my items into the actual form. So if I use this grouping, I I don't necessarily have to add the conditions to these individual fields because they're part of that group. So now if I scroll and for any blog posts, you see that we just have content image for a video now that video URL pops up, but for a case study, I now have this collapsible case study details section. One other quick way that I use this. A common scenario is that we need to disable editing after a particular item is created inside a collection. So if I had some fields that I wanted to prevent the user from editing after I created an item, I could do the conditional fields for that. So let's just say I wanted to prevent the user from, let's add a field for date published. That'll be a good example. Date published, cool, and let's just pretend that if there is a this has already been published or there's a date published, I want to prevent people from editing the slug of this particular item. So I can go into our conditions and if date published, do not allow editing. So I can go in and set date published where is that new field that we just created. If date value isn't null, we are going to disable editing this value. Alright. So let's save that, And on this post now we have a date published, but if I go in and choose a date published, you could see that now I cannot edit that slug, which, you know, could help prevent, any 404 errors in the future. That's just one of the ways that you can use conditional fields. I hope this is tremendously helpful for you. Keep the questions coming. I love seeing these pop up in the community. Stay tuned for the next episode.","published",[139],{"people_id":140},{"id":141,"first_name":142,"last_name":143,"avatar":144,"bio":145,"links":146},"791e1503-1d88-463d-9347-0b9192933576","Bryant","Gillespie","9013afc8-e8d7-4182-9b18-44db08117bb9","Developer Advocate at Directus",[147,149],{"url":131,"service":148},"website",{"service":150,"url":151},"github","https://github.com/bryantgillespie",[],{"id":154,"number":132,"year":155,"episodes":156,"show":161},"e708d08e-2aea-44fa-a335-9e2af2d40d7e","2024",[122,157,158,159,160],"2766c70a-1fc0-46b1-ac5e-b464ca245334","9627b3fd-7a5b-4748-9c18-4ce318ac2cab","511b1967-c04f-42db-b515-911de7981d33","74a53f16-9a2b-42de-bca2-5de319565462",{"title":162,"tile":163},"Short Hops","2166990a-8dbf-4956-8b25-11b72ad203d5",{"id":165,"slug":166,"season":167,"vimeo_id":168,"description":169,"tile":170,"length":171,"resources":8,"people":8,"episode_number":132,"published":172,"title":173,"video_transcript_html":174,"video_transcript_text":175,"content":176,"seo":177,"status":137,"episode_people":178,"recommendations":180},"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",4,"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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\u003Cp>Try this out. Leverage it in your projects. It's super helpful. We'll catch you on the next one.\u003C/p>","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/p>\n\u003Cp>What you'll learn:\u003C/p>\n\u003Cul>\n\u003Cli>Understanding transformation presets and their benefits\u003C/li>\n\u003Cli>How to access and configure transformation settings in Directus\u003C/li>\n\u003Cli>Creating custom presets for width, format, and special effects\u003C/li>\n\u003Cli>Applying presets to images using simple URL parameters\u003C/li>\n\u003Cli>Balancing flexibility and control with transformation options\u003C/li>\n\u003Cli>Real-world use cases for standardizing images in web applications\u003C/li>\n\u003C/ul>\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/p>","a142eef1-b2ac-48e7-8b53-d4add5047669",[179],"4c955a81-4deb-4d16-940d-fe54a4f3307f",[],{"reps":182},[183,239],{"name":184,"sdr":8,"link":185,"countries":186,"states":188},"John Daniels","https://meet.directus.io/meetings/john2144/john-contact-form-meeting",[187],"United States",[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,238],"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":240,"link":241,"countries":242},"Michelle Riber","https://meetings.hubspot.com/mriber",[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,430,220,431,432],"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",1773850422684]