[{"data":1,"prerenderedAt":456},["ShallowReactive",2],{"footer-primary":3,"footer-secondary":93,"footer-description":119,"tv-translation-station":121,"tv-translation-station-seasons":131,"tv-translation-station-episodes":141,"sales-reps":204},{"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},"e47319b6-40fb-405f-bb35-dd8856dabcd8","Translation Station","167869af-12a1-4424-abd2-b543f8a51804","2465f738-afff-4d47-9437-52fd0ac0f407","c6dd5226-affd-4847-af39-b1a2009cdb5e","Translation Station is a series exploring the vast opportunities for localization in Directus. It covers topics from translating the Directus codebase, translation strings, translating your content, and accessing your translated content via the Directus APIs.","translation-station","Learn how to use translation as part of Directus’ multiple features","published",[132],{"id":133,"number":134,"show":122,"year":135,"episodes":136},"d516a222-02bd-4ee7-bad2-2b1cc31650e7",1,"2025",[137,138,139,140],"0ecac717-cbf2-4dbd-9d2b-aec232c10b0a","b588e6c5-d031-4be6-aef4-e4f421f10cd5","0e2eaf09-d3e4-4cca-97c8-e38e833c731f","e82dc6ab-1cab-4b37-af9f-9c1dcb4c075b",[142,158,173,189],{"id":137,"slug":143,"vimeo_id":144,"description":145,"tile":146,"length":147,"resources":8,"people":8,"episode_number":134,"published":148,"title":149,"video_transcript_html":150,"video_transcript_text":151,"content":8,"seo":152,"status":130,"episode_people":153,"recommendations":155,"season":156},"data-studio-translations-in-directus","1054965103","Directus comes in several languages translated kindly by our community. In this episode, Carmen will show you how to contribute your own translations using Crowdin.","63af0d22-a137-4add-973b-ffe428bd0ae5",7,"2025-02-11","Data Studio Translations in Directus","\u003Cp>Speaker 0: Carmen is so developer, educator, and direct translation station. Is translation station. Alright. Back to English. So here we've got a direct us project that I'm running for my blog.\u003C/p>\n\u003Cp>And, yeah, just one blog post for now. We'll be filling it up with time. But I wanted to show you in the data studio the collections I've got. I've got some authors, I've got some languages, and I've got some posts. So, as you can see, my computer's default language is English.\u003C/p>\n\u003Cp>Now, my Directus project is also running by default in English. But what if I wanna make it available in another language? What I can do is go over to the settings module and then the settings page itself, where amongst other settings, I'm gonna find the default language. I'm gonna open this up and show you just how many languages we have available here and not just languages, but languages specific to a region. So I'm going to scroll down being Chilean myself.\u003C/p>\n\u003Cp>I'm going to set my language to Latin American Spanish. Gina's there too, but I wanna encompass all of this continent. Click on that and I'm going to save my changes. You can see now that a bunch of things have changed already. I'm in the setting in the modules instead of settings and so on and so forth.\u003C/p>\n\u003Cp>What's really key to know here is the Directus project language has now changed. But what happens to the rest of our things? For example, in our data model or modelo de datos, we're gonna see that the names of our collections haven't changed. Or if we go to content or as it is now, we're gonna see that my blog post stays the same. Even the fields on the blog post themselves.\u003C/p>\n\u003Cp>But that's to be expected because our project is now in Spanish, but the content itself and the data model are still in English because that's how it was when I created it. But what I want to focus on here is the language of the Directus project itself. Let's go back to our settings module real quick. You might be wondering where do the translations for these come from and how can I change or contribute to them? Now given that Directus is open source under the BSL license, we actually get these translations as open source contributions.\u003C/p>\n\u003Cp>That's right. You can contribute your own translations to Directus. Next, I'm gonna show you how to do that. Over in the Directus documentation, under resources, community, and contribution translations, we're gonna find the instructions for how to contribute localizations to the Directus Data Studio. And this is done by a platform called Crowdin.\u003C/p>\n\u003Cp>So over in Crowdin, we can see there's a bunch of translations that exist, which I love to see. Got Catalan, Dutch, Finnish, Estonian, and a whole bunch of other languages. So how can I contribute to a language, say, if I find a typo? First thing I need to do is log into Crowdin, which is via free account. Now that I'm logged in, I can go ahead and look for my language and start contributing to it.\u003C/p>\n\u003Cp>For example, let's look for Spanish and specifically focus on that Spanish Latin America. Now on this page, I'm gonna click on translate all. This will give me a list of all of the strings or pieces of text that can be translated in Directus. Now here, under editing preset, I can see the string editor predefinido, but because this is in the current test we're currently editing, it should actually be editando predefinido. So what I'm gonna do is make that suggestion and save it.\u003C/p>\n\u003Cp>But because there's already an approved translation, what I'm gonna do is notify a proofreader. Cool. So now my suggestion is made to improve this Latin American Spanish translation of Directus, but what happens next? So our team over at Directus is going to get a pull request from Croudon with the change that I've made. Now you might be thinking, well, why don't I just make the pull request if it's open source?\u003C/p>\n\u003Cp>Bear in mind that crowding's automatic synchronization is going to overwrite any changes that don't correspond with crowding itself. So it's best to make those translations directly through crowding. Now, the last question is, when am I gonna get that new string? It'll be merged into Directus itself and will be available in the next release. So now we just gotta sit tight.\u003C/p>\n\u003Cp>Alright. Well, there you have it. How to configure your Directus project in another language, which strings are translated directly, and how to contribute your own translations to the greater Directus ecosystem. I hope this was helpful. But there's more stops on this Translation Station journey we're going on.\u003C/p>\n\u003Cp>We'll also be learning about translation strings, translating content in the data studio, and accessing translated content in your own application. So all aboard for the next station, and off we go. See you next time.\u003C/p>","Carmen is so developer, educator, and direct translation station. Is translation station. Alright. Back to English. So here we've got a direct us project that I'm running for my blog. And, yeah, just one blog post for now. We'll be filling it up with time. But I wanted to show you in the data studio the collections I've got. I've got some authors, I've got some languages, and I've got some posts. So, as you can see, my computer's default language is English. Now, my Directus project is also running by default in English. But what if I wanna make it available in another language? What I can do is go over to the settings module and then the settings page itself, where amongst other settings, I'm gonna find the default language. I'm gonna open this up and show you just how many languages we have available here and not just languages, but languages specific to a region. So I'm going to scroll down being Chilean myself. I'm going to set my language to Latin American Spanish. Gina's there too, but I wanna encompass all of this continent. Click on that and I'm going to save my changes. You can see now that a bunch of things have changed already. I'm in the setting in the modules instead of settings and so on and so forth. What's really key to know here is the Directus project language has now changed. But what happens to the rest of our things? For example, in our data model or modelo de datos, we're gonna see that the names of our collections haven't changed. Or if we go to content or as it is now, we're gonna see that my blog post stays the same. Even the fields on the blog post themselves. But that's to be expected because our project is now in Spanish, but the content itself and the data model are still in English because that's how it was when I created it. But what I want to focus on here is the language of the Directus project itself. Let's go back to our settings module real quick. You might be wondering where do the translations for these come from and how can I change or contribute to them? Now given that Directus is open source under the BSL license, we actually get these translations as open source contributions. That's right. You can contribute your own translations to Directus. Next, I'm gonna show you how to do that. Over in the Directus documentation, under resources, community, and contribution translations, we're gonna find the instructions for how to contribute localizations to the Directus Data Studio. And this is done by a platform called Crowdin. So over in Crowdin, we can see there's a bunch of translations that exist, which I love to see. Got Catalan, Dutch, Finnish, Estonian, and a whole bunch of other languages. So how can I contribute to a language, say, if I find a typo? First thing I need to do is log into Crowdin, which is via free account. Now that I'm logged in, I can go ahead and look for my language and start contributing to it. For example, let's look for Spanish and specifically focus on that Spanish Latin America. Now on this page, I'm gonna click on translate all. This will give me a list of all of the strings or pieces of text that can be translated in Directus. Now here, under editing preset, I can see the string editor predefinido, but because this is in the current test we're currently editing, it should actually be editando predefinido. So what I'm gonna do is make that suggestion and save it. But because there's already an approved translation, what I'm gonna do is notify a proofreader. Cool. So now my suggestion is made to improve this Latin American Spanish translation of Directus, but what happens next? So our team over at Directus is going to get a pull request from Croudon with the change that I've made. Now you might be thinking, well, why don't I just make the pull request if it's open source? Bear in mind that crowding's automatic synchronization is going to overwrite any changes that don't correspond with crowding itself. So it's best to make those translations directly through crowding. Now, the last question is, when am I gonna get that new string? It'll be merged into Directus itself and will be available in the next release. So now we just gotta sit tight. Alright. Well, there you have it. How to configure your Directus project in another language, which strings are translated directly, and how to contribute your own translations to the greater Directus ecosystem. I hope this was helpful. But there's more stops on this Translation Station journey we're going on. We'll also be learning about translation strings, translating content in the data studio, and accessing translated content in your own application. So all aboard for the next station, and off we go. See you next time.","0b334619-c239-44e3-8b32-89dca63264d0",[154],"b3f9d8ad-c52b-4a7a-afe9-a29cfdf4782a",[],{"id":133,"number":134,"show":122,"year":135,"episodes":157},[137,138,139,140],{"id":138,"slug":159,"vimeo_id":160,"description":161,"tile":162,"length":147,"resources":8,"people":8,"episode_number":163,"published":148,"title":164,"video_transcript_html":165,"video_transcript_text":166,"content":8,"seo":167,"status":130,"episode_people":168,"recommendations":170,"season":171},"string-translations-in-directus","1055321591","Did you know you can individually translate labels, notes, and other aspects of your Directus project? In this episode, Carmen will show you how to use Directus’ translation strings.","b4569fb1-a314-4563-bb9c-a0f5069565a5",2,"String Translations in Directus","\u003Cp>Speaker 0: Hey, everybody. My name is Carmen, and I'm a Developer Educator at Directus. Now, don't worry. Your TV settings aren't wrong. Those are indeed Spanish subtitles you see under me.\u003C/p>\u003Cp>But why Spanish? Well, because this is Translation Station, the show all about localization and translations using Directus. In this episode, I'll be showing you how to use translation strings, multilingual key value pairs that you can use throughout your Directus project for things like drop downs, placeholder text, field notes, system collections, and more. So get ready, everybody, because next up is Translation Station. Alright.\u003C/p>\u003Cp>Here we are in my Directus project, which is dedicated to my blog. You can see we have a collection here called posts, which is the one we're going to be working with during this episode. Let's go ahead and take a look at its data model. I go to settings and then click on posts. We're going to see we have, amongst other fields, an ID, a slug for accessing our blog with an application, the title of the blog post, the content of the blog post, as well as author, publishing date, the image, and whether it's published or not.\u003C/p>\u003Cp>Now, one thing I'd like to do is add a field to specify the language that our blog post is written in. So I'm gonna go ahead and click on create field and then look for the dropdown. So we're gonna call this language. It's gotta be a string. And we need to add a few choices for this.\u003C/p>\u003Cp>So I'm gonna go ahead and click on create new. First one is going to be English. The value will be en west. And I'm gonna go ahead and do the same for the remaining languages. German.\u003C/p>\u003Cp>And finally, French. Perfect. Let's go ahead and save that field. Now we can go into our content and specify the language of our blog post. So given this post is written in English, I'm going to set the language here to English.\u003C/p>\u003Cp>So this is great. But what happens if I set my DirectUs project to another language? What if, for example, I set it to French? Looks good. But notice what happens when I look at the language dropdown itself.\u003C/p>\u003Cp>Everything else is perfectly in French, but the language dropdown is still in English. The way we can achieve having these different values in different languages is using translation strings, which is what we're going to be adding next. So back in our settings model, we've got hold on. Let me set this back to English for a sec. Lovely.\u003C/p>\u003Cp>Back in our settings module, there's a tab here called Translations. And you can see I've been hard at work creating translation strings for us. So for German, for example, we've got English, Spanish, Deutsch, We've got English, German, Spanish, and French for English. We've got English, Aleman, Francis, and Espanol for Spanish, and English, Francais, Espanol. Hold on.\u003C/p>\u003Cp>We still need German. Let's go ahead and add that. Then click here on the plus button. So the key needs to match the same key for every language. So English is going to be English across all languages.\u003C/p>\u003Cp>In this case, we want to specify German. We want to specify the language to be French. And the value is going to be the name of German in French, which in this case is Aleman. Go ahead and save that. Fantastic.\u003C/p>\u003Cp>Now we've got all of our translation strings ready. So now we just need to integrate them into our data model. This can be achieved by going back to the data model, going back to posts, going back to our language dropdown. And then for each of these, check it out. This translation button here allows us to specify a translation string.\u003C/p>\u003Cp>So now I can go ahead and set these to be the translation strings. And when I change my language, it's going to display the correct language name. So that's all saved. What happens now? Let's go look at my data model again.\u003C/p>\u003Cp>So we can still see English, Spanish, German, and French, which is great. But let's now change the language of our directus instance to be French. And now let's see what happens. So directus is in French. And if I go over to our guide once again, scroll down, and now we can see the correct language is displayed.\u003C/p>\u003Cp>Now you might be wondering hold on. Put this back in English one more time. There we go. Cool. Now you might be wondering, where else can I use these translation strings?\u003C/p>\u003Cp>Well, really this can be used anywhere where you saw that translation button. For example, the notes, a placeholder, and a variety of other ways to do this. For example, if you wanted to have displayed different names for your system collections, you can add a custom dropdown field for that translation key. Just an idea. But all in all, that's how you use translation strings to integrate multiple languages into your Directus project.\u003C/p>\u003Cp>Alright. Well, there you have it. As you can see, we can use translation strings in a multitude of ways to make it more accessible for folks speaking other languages to work on our Directus project. But that's not the only stop on our journey at Translation Station. If you wanna know how to contribute to Directus' localization itself, how to translate your content in the data studio, or how to access your translated content from our SDK or other APIs, check out the other episodes.\u003C/p>\u003Cp>So get ready everybody because next stop after this is Translation Station. See you soon.\u003C/p>","Hey, everybody. My name is Carmen, and I'm a Developer Educator at Directus. Now, don't worry. Your TV settings aren't wrong. Those are indeed Spanish subtitles you see under me. But why Spanish? Well, because this is Translation Station, the show all about localization and translations using Directus. In this episode, I'll be showing you how to use translation strings, multilingual key value pairs that you can use throughout your Directus project for things like drop downs, placeholder text, field notes, system collections, and more. So get ready, everybody, because next up is Translation Station. Alright. Here we are in my Directus project, which is dedicated to my blog. You can see we have a collection here called posts, which is the one we're going to be working with during this episode. Let's go ahead and take a look at its data model. I go to settings and then click on posts. We're going to see we have, amongst other fields, an ID, a slug for accessing our blog with an application, the title of the blog post, the content of the blog post, as well as author, publishing date, the image, and whether it's published or not. Now, one thing I'd like to do is add a field to specify the language that our blog post is written in. So I'm gonna go ahead and click on create field and then look for the dropdown. So we're gonna call this language. It's gotta be a string. And we need to add a few choices for this. So I'm gonna go ahead and click on create new. First one is going to be English. The value will be en west. And I'm gonna go ahead and do the same for the remaining languages. German. And finally, French. Perfect. Let's go ahead and save that field. Now we can go into our content and specify the language of our blog post. So given this post is written in English, I'm going to set the language here to English. So this is great. But what happens if I set my DirectUs project to another language? What if, for example, I set it to French? Looks good. But notice what happens when I look at the language dropdown itself. Everything else is perfectly in French, but the language dropdown is still in English. The way we can achieve having these different values in different languages is using translation strings, which is what we're going to be adding next. So back in our settings model, we've got hold on. Let me set this back to English for a sec. Lovely. Back in our settings module, there's a tab here called Translations. And you can see I've been hard at work creating translation strings for us. So for German, for example, we've got English, Spanish, Deutsch, We've got English, German, Spanish, and French for English. We've got English, Aleman, Francis, and Espanol for Spanish, and English, Francais, Espanol. Hold on. We still need German. Let's go ahead and add that. Then click here on the plus button. So the key needs to match the same key for every language. So English is going to be English across all languages. In this case, we want to specify German. We want to specify the language to be French. And the value is going to be the name of German in French, which in this case is Aleman. Go ahead and save that. Fantastic. Now we've got all of our translation strings ready. So now we just need to integrate them into our data model. This can be achieved by going back to the data model, going back to posts, going back to our language dropdown. And then for each of these, check it out. This translation button here allows us to specify a translation string. So now I can go ahead and set these to be the translation strings. And when I change my language, it's going to display the correct language name. So that's all saved. What happens now? Let's go look at my data model again. So we can still see English, Spanish, German, and French, which is great. But let's now change the language of our directus instance to be French. And now let's see what happens. So directus is in French. And if I go over to our guide once again, scroll down, and now we can see the correct language is displayed. Now you might be wondering hold on. Put this back in English one more time. There we go. Cool. Now you might be wondering, where else can I use these translation strings? Well, really this can be used anywhere where you saw that translation button. For example, the notes, a placeholder, and a variety of other ways to do this. For example, if you wanted to have displayed different names for your system collections, you can add a custom dropdown field for that translation key. Just an idea. But all in all, that's how you use translation strings to integrate multiple languages into your Directus project. Alright. Well, there you have it. As you can see, we can use translation strings in a multitude of ways to make it more accessible for folks speaking other languages to work on our Directus project. But that's not the only stop on our journey at Translation Station. If you wanna know how to contribute to Directus' localization itself, how to translate your content in the data studio, or how to access your translated content from our SDK or other APIs, check out the other episodes. So get ready everybody because next stop after this is Translation Station. See you soon.","3d40d358-4e62-409c-8c0b-8e052eab752a",[169],"78f472a9-e478-4ec7-8ef6-cb6fb949582b",[],{"id":133,"number":134,"show":122,"year":135,"episodes":172},[137,138,139,140],{"id":139,"slug":174,"vimeo_id":175,"description":176,"tile":177,"length":178,"resources":8,"people":8,"episode_number":179,"published":148,"title":180,"video_transcript_html":181,"video_transcript_text":182,"content":8,"seo":183,"status":130,"episode_people":184,"recommendations":186,"season":187},"content-translations-in-directus-data-studio","1055321748","Directus allows you to set up your content to be translated into a bevy of languages. In this episode, Carmen will show you how to activate and use content translations.","fc130184-64bb-481a-bef3-d628cf84bf6d",8,3,"Content Translations in Directus: Data Studio","\u003Cp>Speaker 0: Translation station. Alright. Back to English. So here we are in our data studio working on our blog application. And as you can see, we have a collection of posts.\u003C/p>\u003Cp>So let's take a look at the data model for our posts. By going over to the settings module and over to data model, we can see we have a collection called posts. And now we can see a number of fields here, including ID, the slug, which helps us construct a URL so that we can access the blog post on our application, the title of the blog post, the content of the blog post, as well as the image, publishing date, the author, and whether the blog post is published or not. So that's our data model. Let's go back to our content and take a look at the sample post I've prepared here, the ultimate guide to rabbits.\u003C/p>\u003Cp>And we can see the content is already filled in and in English. But our author, Gerance, also speaks French. So what we're going to be doing in this episode is enabling folks to be able to write their content in several languages. This is going to be achieved by going back to the settings module and adding a new field to our posts collection. So I'm going to open up our post collection and click on create field.\u003C/p>\u003Cp>Now Directus has a plethora of fields that we can add and even one tailored specifically for content translations. By scrolling down over to the relational section, we're going to find the translations field, which is exactly what we need. So I'm going to click on that. And I'm going to walk us through a couple of things that are going to happen. First of all, the key is filled in for us automatically called translations.\u003C/p>\u003Cp>The languages collection is also filled in for us. Now you may think, well, the languages collection doesn't exist yet, but that's fine because what's going to happen is that it is going to be created automatically. We'll see that in just a moment. The last part I want to fill in is the default language of our translations. And you saw already, I had pre written this blog post in English.\u003C/p>\u003Cp>So the default language for our post is going to be, is going to use the language code, which is en US. Now I'm going to go ahead and save. And a number of things just happened. The first thing you'll notice is that we now have our field of translations, which is great. But what else changed?\u003C/p>\u003Cp>Let's have a look. I'm going to go back to my data model. You're going to see a couple of new collections. First off is languages. And this is the collection that I mentioned earlier would be automatically created for us.\u003C/p>\u003Cp>So I'm going to open the languages collection. We're going to see it has three fields, the code, which is that en US, the name, which is English United States, and the direction, which in this case is going to be whether you read from left to right, top to bottom, right to left, and so on and so forth. But there's one more collection that got created and is also invisible. That is, you won't be able to see it when adding content. And this is the post's translations pivot table.\u003C/p>\u003Cp>Now a pivot table is used to connect a post to a language because many posts can be written in many languages. So let's open it up real quick. If I go over to post translations, we're going to see we have three fields here. The ID of the post translation itself, the ID of the post, and the code of the language. That is the identifier, in this case, EMUS, of the language.\u003C/p>\u003Cp>So does that mean we can go ahead and start translating our content? Well, let's hop over to our content module, open up our ultimate guide to rabbits, and you're going to see that by scrolling down, we do have the option of adding translations, but it says empty form. And the reason for this is because, yes, we do have translations, but we have no fields that we can translate. So how do we fix that? Well, let's go back to our settings module and open up that post translations collection.\u003C/p>\u003Cp>Now I'm going to click on create field and add two fields. First is going to be the title. Go ahead and create that. And now the content, which is going to be a WYSIWYG or what you see is what you get field. Alrighty.\u003C/p>\u003Cp>I'm going to click on save. Now, it might not seem like I changed a lot, but check this out. Soon as I go back to my content module and open up my guide once again, I'm going to scroll down real quick. Now we have translations. So we can already start by filling in our title and content.\u003C/p>\u003Cp>So I'm going to go ahead and do that from our English content. Perfect. And now we can add translations for our content. So given Guerance speaks French, she has written this article in French. So I'm going to look up French, and I'm going to add in that content.\u003C/p>\u003Cp>Here we go. There's our title. And now our content. Wonderful. Once this is done, I can go ahead and save my item.\u003C/p>\u003Cp>And now I have a translated blog post. If I take a look, French is there. Wonderful. So this is how I can translate my content using Directus. In another episode of the show, we're going to see how we can access these translations in our applications using the Directus SDK or REST API or GraphQL API.\u003C/p>\u003Cp>Alright. Well, there you have it. How to translate your content in the Data Studio using Directus. But that's not the only stop on our translation station journey. If you wanna know how to translate Directus itself, how to use translation strings, or how to access your translated content using our APIs and SDK, well, tune in for other episodes of Translation Station.\u003C/p>\u003Cp>So all aboard, and I'll see you next time.\u003C/p>","Translation station. Alright. Back to English. So here we are in our data studio working on our blog application. And as you can see, we have a collection of posts. So let's take a look at the data model for our posts. By going over to the settings module and over to data model, we can see we have a collection called posts. And now we can see a number of fields here, including ID, the slug, which helps us construct a URL so that we can access the blog post on our application, the title of the blog post, the content of the blog post, as well as the image, publishing date, the author, and whether the blog post is published or not. So that's our data model. Let's go back to our content and take a look at the sample post I've prepared here, the ultimate guide to rabbits. And we can see the content is already filled in and in English. But our author, Gerance, also speaks French. So what we're going to be doing in this episode is enabling folks to be able to write their content in several languages. This is going to be achieved by going back to the settings module and adding a new field to our posts collection. So I'm going to open up our post collection and click on create field. Now Directus has a plethora of fields that we can add and even one tailored specifically for content translations. By scrolling down over to the relational section, we're going to find the translations field, which is exactly what we need. So I'm going to click on that. And I'm going to walk us through a couple of things that are going to happen. First of all, the key is filled in for us automatically called translations. The languages collection is also filled in for us. Now you may think, well, the languages collection doesn't exist yet, but that's fine because what's going to happen is that it is going to be created automatically. We'll see that in just a moment. The last part I want to fill in is the default language of our translations. And you saw already, I had pre written this blog post in English. So the default language for our post is going to be, is going to use the language code, which is en US. Now I'm going to go ahead and save. And a number of things just happened. The first thing you'll notice is that we now have our field of translations, which is great. But what else changed? Let's have a look. I'm going to go back to my data model. You're going to see a couple of new collections. First off is languages. And this is the collection that I mentioned earlier would be automatically created for us. So I'm going to open the languages collection. We're going to see it has three fields, the code, which is that en US, the name, which is English United States, and the direction, which in this case is going to be whether you read from left to right, top to bottom, right to left, and so on and so forth. But there's one more collection that got created and is also invisible. That is, you won't be able to see it when adding content. And this is the post's translations pivot table. Now a pivot table is used to connect a post to a language because many posts can be written in many languages. So let's open it up real quick. If I go over to post translations, we're going to see we have three fields here. The ID of the post translation itself, the ID of the post, and the code of the language. That is the identifier, in this case, EMUS, of the language. So does that mean we can go ahead and start translating our content? Well, let's hop over to our content module, open up our ultimate guide to rabbits, and you're going to see that by scrolling down, we do have the option of adding translations, but it says empty form. And the reason for this is because, yes, we do have translations, but we have no fields that we can translate. So how do we fix that? Well, let's go back to our settings module and open up that post translations collection. Now I'm going to click on create field and add two fields. First is going to be the title. Go ahead and create that. And now the content, which is going to be a WYSIWYG or what you see is what you get field. Alrighty. I'm going to click on save. Now, it might not seem like I changed a lot, but check this out. Soon as I go back to my content module and open up my guide once again, I'm going to scroll down real quick. Now we have translations. So we can already start by filling in our title and content. So I'm going to go ahead and do that from our English content. Perfect. And now we can add translations for our content. So given Guerance speaks French, she has written this article in French. So I'm going to look up French, and I'm going to add in that content. Here we go. There's our title. And now our content. Wonderful. Once this is done, I can go ahead and save my item. And now I have a translated blog post. If I take a look, French is there. Wonderful. So this is how I can translate my content using Directus. In another episode of the show, we're going to see how we can access these translations in our applications using the Directus SDK or REST API or GraphQL API. Alright. Well, there you have it. How to translate your content in the Data Studio using Directus. But that's not the only stop on our translation station journey. If you wanna know how to translate Directus itself, how to use translation strings, or how to access your translated content using our APIs and SDK, well, tune in for other episodes of Translation Station. So all aboard, and I'll see you next time.","4e93b898-70f8-4cc4-8275-fa038baa4eba",[185],"f956a739-7124-4186-923f-4141a87e5f57",[],{"id":133,"number":134,"show":122,"year":135,"episodes":188},[137,138,139,140],{"id":140,"slug":190,"vimeo_id":191,"description":192,"tile":193,"length":178,"resources":8,"people":8,"episode_number":194,"published":148,"title":195,"video_transcript_html":196,"video_transcript_text":197,"content":8,"seo":198,"status":130,"episode_people":199,"recommendations":201,"season":202},"content-translations-in-directus-sdk","1055321900","You can use your Directus project’s API to access your translated content. In this episode, Carmen will show you how to build an application to display translated content using the Directus SDK, REST and GraphQL APIs.","d7485f2c-f7ae-4d7d-aa36-a071c084eeda",4,"Content Translations in Directus: SDK","\u003Cp>Speaker 0: Carmen. Developer educator. Translation station. So here we've got a Directus project dedicated for storing my blog posts. Now, amongst the collections, we can see posts.\u003C/p>\u003Cp>And I'd like to take a minute to take a look at the structure or the data model of these posts. Gonna hop over to the settings module and take a look at posts itself. So we can see a variety of fields here. And the ones I want to highlight are slug, which will help us build a URL to find our post in our application. Next, we've got the title and the content.\u003C/p>\u003Cp>Another field I want to highlight is translations. Now I've gone ahead and created some translations for our blog posts. If you want to find out how to translate your content in the data studio, check out our data studio content translations episode of Translation Station. Back in our data model, I also want to take a look at post translations, which is a hidden field that holds the translation data for each of our posts. You can see we've got the title and the content.\u003C/p>\u003Cp>Let's now take a look at the post itself. We've got the ultimate guide to rabbits, which is written in both English. Scroll down here. As well as French. So I'm going to show you how you can build an application to retrieve translations of your blog posts.\u003C/p>\u003Cp>So what we have here is an application written in Nuxt, which uses three ways of accessing our translated blog posts. One is using the Directus SDK. One is using the REST API of our Directus project. And the last is using the GraphQL endpoint of our Directus project. I'm gonna give you a short tour of this Nuxt application.\u003C/p>\u003Cp>First, we set up our environment, which will connect to our Directus project and proxy accordingly to go to local host 3,000 slash Directus so that we can access our data. So let's start with the SDK. I've set up a Nuxt plug in here, which instantiates a direct Us client and makes it available to my Nuxt application. By going to SDK slash the language code of the content slash the slug of the blog post, we're going to retrieve and display the translated data for our blog post. Let's walk through this real quick.\u003C/p>\u003Cp>First, we instantiate our client and set up the retrieval of the parameters and a reference for the post itself. Then we asynchronously use the direct client to read several posts. Using the deep and filter parameters, we're going to grab the blog post that corresponds to the slug given in our URL, as well as the translation itself for that locale. We then make available the data of the translations into the result and limit to one just for good measure. Once we have that, we grab the translation itself from that payload and display it accordingly.\u003C/p>\u003Cp>Let's take a look at it in action. So here we are. We've gone to local host 3,000 in my running Nuxt application slash SDK slash enus, that's for English, slash the ultimate guide to rabbits. And that gives us my blog post. To view it in French, I just have to change my URL to frfr.\u003C/p>\u003Cp>Check it out. Now it's in French. Fantastic. Let's see how it's done with REST now. All right.\u003C/p>\u003Cp>So we won't be using our SDK client, and instead, we'll be using the fetch API in order to retrieve the post that match the slug as well as the locale itself. And then retrieving as fields the translation title, content, and the language code, limited to one for good measure. Then we retrieve the translation with the correct language code from our locale. And then just like before, if there's a post, we display its content. Let's see it in action.\u003C/p>\u003Cp>Back in my browser, I'm going to go to rest slash en dash us slash the ultimate guide to rabbits. Access that, and there's our English blog post. And for French, fr dash fr. And there we go. All good and in French.\u003C/p>\u003Cp>One more. Let's look at GraphQL. So just like with the REST API, we'll be using fetch grab the GraphQL data. First, we'll build our query, which will filter out the posts by slug and specifically filter out the translations by the language code alongside that translation's title and content. Then we make a request to the GraphQL endpoint of our Directus project and then set that post value to have that translation data.\u003C/p>\u003Cp>Then just like before, if we have a post, we go ahead and display it. Let's have a look. All right. Back in our browser, let's go to graphql en us the ultimate guide to rabbits. And there we go.\u003C/p>\u003Cp>There it is in English. Now let's try it in French. Wonderful. So that's the three ways we can access our translated data from our Directus projects API. Alright.\u003C/p>\u003Cp>Well, there you have it. How to access your translated content from Directus using our APIs and SDKs. But that's not the only stop on this translation station journey we're on. If you wanna learn how to translate Directus directly or where it gets translated, how to use translation strings, or how to translate your content, check out the other episodes of Translation Station. So I hope this was helpful, and I'll see you on the next stop of Translation Station.\u003C/p>\u003Cp>Bye for now.\u003C/p>","Carmen. Developer educator. Translation station. So here we've got a Directus project dedicated for storing my blog posts. Now, amongst the collections, we can see posts. And I'd like to take a minute to take a look at the structure or the data model of these posts. Gonna hop over to the settings module and take a look at posts itself. So we can see a variety of fields here. And the ones I want to highlight are slug, which will help us build a URL to find our post in our application. Next, we've got the title and the content. Another field I want to highlight is translations. Now I've gone ahead and created some translations for our blog posts. If you want to find out how to translate your content in the data studio, check out our data studio content translations episode of Translation Station. Back in our data model, I also want to take a look at post translations, which is a hidden field that holds the translation data for each of our posts. You can see we've got the title and the content. Let's now take a look at the post itself. We've got the ultimate guide to rabbits, which is written in both English. Scroll down here. As well as French. So I'm going to show you how you can build an application to retrieve translations of your blog posts. So what we have here is an application written in Nuxt, which uses three ways of accessing our translated blog posts. One is using the Directus SDK. One is using the REST API of our Directus project. And the last is using the GraphQL endpoint of our Directus project. I'm gonna give you a short tour of this Nuxt application. First, we set up our environment, which will connect to our Directus project and proxy accordingly to go to local host 3,000 slash Directus so that we can access our data. So let's start with the SDK. I've set up a Nuxt plug in here, which instantiates a direct Us client and makes it available to my Nuxt application. By going to SDK slash the language code of the content slash the slug of the blog post, we're going to retrieve and display the translated data for our blog post. Let's walk through this real quick. First, we instantiate our client and set up the retrieval of the parameters and a reference for the post itself. Then we asynchronously use the direct client to read several posts. Using the deep and filter parameters, we're going to grab the blog post that corresponds to the slug given in our URL, as well as the translation itself for that locale. We then make available the data of the translations into the result and limit to one just for good measure. Once we have that, we grab the translation itself from that payload and display it accordingly. Let's take a look at it in action. So here we are. We've gone to local host 3,000 in my running Nuxt application slash SDK slash enus, that's for English, slash the ultimate guide to rabbits. And that gives us my blog post. To view it in French, I just have to change my URL to frfr. Check it out. Now it's in French. Fantastic. Let's see how it's done with REST now. All right. So we won't be using our SDK client, and instead, we'll be using the fetch API in order to retrieve the post that match the slug as well as the locale itself. And then retrieving as fields the translation title, content, and the language code, limited to one for good measure. Then we retrieve the translation with the correct language code from our locale. And then just like before, if there's a post, we display its content. Let's see it in action. Back in my browser, I'm going to go to rest slash en dash us slash the ultimate guide to rabbits. Access that, and there's our English blog post. And for French, fr dash fr. And there we go. All good and in French. One more. Let's look at GraphQL. So just like with the REST API, we'll be using fetch grab the GraphQL data. First, we'll build our query, which will filter out the posts by slug and specifically filter out the translations by the language code alongside that translation's title and content. Then we make a request to the GraphQL endpoint of our Directus project and then set that post value to have that translation data. Then just like before, if we have a post, we go ahead and display it. Let's have a look. All right. Back in our browser, let's go to graphql en us the ultimate guide to rabbits. And there we go. There it is in English. Now let's try it in French. Wonderful. So that's the three ways we can access our translated data from our Directus projects API. Alright. Well, there you have it. How to access your translated content from Directus using our APIs and SDKs. But that's not the only stop on this translation station journey we're on. If you wanna learn how to translate Directus directly or where it gets translated, how to use translation strings, or how to translate your content, check out the other episodes of Translation Station. So I hope this was helpful, and I'll see you on the next stop of Translation Station. Bye for now.","2627e703-7919-4414-b5a8-981a3fd300a6",[200],"e9f4c135-99d8-40ef-a868-8507cc8b064b",[],{"id":133,"number":134,"show":122,"year":135,"episodes":203},[137,138,139,140],{"reps":205},[206,262],{"name":207,"sdr":8,"link":208,"countries":209,"states":211},"John Daniels","https://meet.directus.io/meetings/john2144/john-contact-form-meeting",[210],"United States",[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,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261],"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":263,"link":264,"countries":265},"Michelle Riber","https://meetings.hubspot.com/mriber",[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,431,432,433,434,435,436,437,438,439,440,441,442,443,444,445,446,447,448,449,450,451,452,453,243,454,455],"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",1773850419185]