Exploring localisation & translation with headless CMS

[Music] oh we planned that pretty well I could not see you before going live with that lovely countdown all right button on engine running we are live now yeah we're just discussing before this in our prep okay let's turn on the engines and go live and do this thing because we're talking localization and translation today and those are actually pretty different things and so before we dive into all of that um Nikki I know you've been a guest for a while but say your name properly what do you do and why you want to be here please sure I'm going to start in the pr first order actually I'm not here I I'm not here against my will I Pro oh yeah you want to be here because of me of course I'm here because of you of course go no but seriously my name is Nikolai that's how you say it usually but it's fine if you improvise go for it um I'm a Solutions engineer at hgraph and I usually help on the pre-sale side kind of fles out the products strengths and capabilities to our customers and usually I'm the one who helps them technically along the way until they actually become a real customer um I'm here today because Tim asked me to be uh a part of this conversation about localization and translation and kind of walk you through our process when we usually talk to customers about those things so we're going to go through several different steps here uh Tim already mentioned that we're going to talk about what's the difference between translation and localization we're going to go flesh that out then we're going to see what are the different approaches you can take within the platform itself to approach each of those and then we're actually going to do some fun stuff towards the end that I don't want to spoil yet so let's get into stay nice nice uh CDA there dude this is honestly I could just put Nikki in here I'll just go offline and we're good but it's also fun to do it together because we tend like our guests always do like real world stuff it's not like hypothetical CMS things no Nikki actually does this with our prospects and customers and figures out what you really have to use and so let's talk about this difference between translation and localization and so what do you think Nikki should I just give it a crack and then you correct me or you want to go what's the best way I think both of those are can be quite fun but I I'll actually be interested to hear what's your take on the difference let's do that because I come from this a while ago I used to work at agencies and we would do projects that were like 60 markets and then 40 languages or something and so what that means is if you do translation you just translate one thing to another language in the same context right so that would just be a an English sentence to a French sentence or a dictionary of words Chang for interface things on your website but the thing is with all these bigger projects that I always had to do that translation bit was actually almost like the smallest part of the whole thing because if you go to another Market even if they're the same language so Belgian French and French French or stuff like that content is different because it's a different Market they're selling different things or they might in their way they have their own campaigns and so you might translate from English to French but the content is actually different and so we've always had to talk about that stuff with our customers because if you put them in the same bucket like most developers actually do because it's just this one thing we have to do right I usually did that you can hurt yourself a bit so what do you think there does that make sense it it absolutely makes sense and you're right on the money there right I can give you a really cool example of everything that you just said that we actually had as a prospect a while back and it was around the automotive industry and there is a very distinct way in the in the way that they offer their products uh in different different geographical zones right and for all intents and purposes when I say different geographical zones I'm going to be referring to localization and we're talking about different languages I'm going to be referring to translations okay so I was close then I think you were right on the bunny like it was 100% right awesome yeah it was perfect nice um but yeah my my point there with that particular example was that the same car that you're going to sell in Europe and in the US and I mean the exact same car like nothing changes will have different characteristics in terms of size of the motor and the horsepower in the US and in Europe oh really because yes because we calculate things in metric in Europe and the US in the US so oh yeah for example for example my car in Europe is 175 horsepower right and that's how we calculate it but the exact same engine like the exact same car that they sell here is sold in the US as 181 for example something like but aren't horses the same across the world somehow that's the thing it's not oh no you learn something every day so the horsepower in the in Europe is different than in the US it it has a different wattage output than they do in the US it is because of the Imperial metric thing really because there's another one here from Brian saying one thing I've seen in the past was a healthc care website that had to localize around Healthcare laws in different countries also a very important one yeah absolutely right also American horses apparently better well if there more do you want to come on the on the stream so we can discuss this in person yeah we could actually put Brian on the screen but I'm not sure he wants us in our current mood all right cool so okay where do we go from here yeah so where do we go from here so let's talk about if you have a hatless CMS or any CMS we somehow have to make that work yes Brian is saying something again just going to spew my live from chat that's fine dude we'll find you later we know where you work at exactly we know where you work so um maybe we can talk about a few things around how you set this up in your content because later on yeah we might show something on how you would actually then query and code it but let's now just look at a few approaches the it's it's very interesting that we're on this topic because I think it was a month ago I did a live stream for a company called localized which are oh yeah I remember that like webinar right exactly and it was very very similar to what we're discussing right now and they actually invited two huge Professionals in the localization business that had worked with much much bigger companies worldwide helping them localize their content specifically across different geographical regions and they have they had several different and very important advices that that they give to gave to the audience in terms of how they're going to build everything especially in a headless environment because in our small corner of the world yeah your CMS isn't the only thing in the play you have to think about many many different things and one of one of the things I still remember are you going to say the words no it's m on sorry continue I'm just having yeah but anyway one thing that really struck me as as very interesting there was when we talked about prices right and why it's important to leave price localization to the system that's actually going to manage those prices and the example that they give was for example Japan they have a law that basically makes you include the tax in the final price of the product yeah which is in the US I know it's state by state so it's not really set in stone but in most cases you don't really includ the the tax in the price so kind of okay that in your head but that is a very good example of how things can differ across different countries and how nightmarish it can be to manage the whole thing right so the first thing that I would give here as a as a takeaway and you might want to put that somewhere on the screen is that basically you have to delegate the important localization parts to the respective system that is going to manage that you think I could write all that in a banner like you're saying because if I want to put something on the screen like from the top to the bottom everything okay wait like basically basically please don't do that okay let's go all right cool let let's phrase it in three words okay okay okay delegate delegate vocalization to the appropriate system I I I need to relearn how to count this was like five wordss okay we're gonna do it like this like a marquee let's go I even used the American way to write localization there we go that's what I'm talking about yeah anyway you can see that we're extremely prepared for this yeah this is one of those streams we we're in a mood but we're gonna I promise it's G to look good so um do you want to maybe show share your screen a little bit and show you what we can do let's let's actually do that because that's going to be I think much more useful yeah all right cool here we go all right So currently we're looking at hgraph exactly this is actually one of our starter projects you know Shameless plug here you can actually play with this yourself so everything that you're going to see me do in this particular project today you can do yourself don't worry about right you want can you show how you can actually get started with this one you go to that's a good point so if you go to the homepage and high graph and you scroll to the bottom basically which is the thing that you're going to see here this is the project that I'm talking about so when you start click and go click get started follow the the thing here you'll be fine exactly right now going back to this project let's do a couple of things the first thing I'm going to show you is how you can localize sorry how you can translate stuff within the system out of the box and this is something that you can handle pretty easily and then we're going to talk about different approaches you might take when you're actually local izing stuff for different geographical regions make sense sure perfect cool so Tim how would you guess we would add a new local or a new language to our project well luckily I prepped that much we can actually go to our project settings and add a local so I would go here exactly and then we can choose exactly cool now one very important thing that we need to mention here is that hgraph always needs to have a default local right yeah by by default that's English but you can change that like I can come here I can change that to whatever I want so I've done project where I made it that one French for example as the base yeah absolutely possible and it's funny because even people from within hgraph sometimes don't know this but you can change the default local it doesn't have to be English there we goe tip of the day pre tip of the day right so let's add French for example right we'll just add that hit that and it's easy to make here um if you're on a free account you can add two if you want to add more you have to be on a paid account that's a very good point noce that's a very good point but yeah you can play at least with at least two languages on a free tier exactly go wild cool so it's as easy is that as having a language within the system now one very interesting thing here is that you can still use those locals as a sort of an actual Geographic localization why do I say that well here we're currently using the very simple nomenclature of English German and French basically just two the two letter abbreviation but I can also go and say I want to have English but I want to have English for New Zealand right and if I add that it will just be technically another translation but practically I can use that to localize content for different geographical regions right exactly yeah it will essentially still be the translation but it will allow you to have a very let's say simple way to localize content for different regions cool let's remove that because we don't need it right now but it is an option cool now the next step that you need to think about when you start localizing or translating stuff within hgraph is what exactly would you want to translate is it a whole object is it a particular field how you going to approach that and uh the very good thing about the system especially with translations is that it's extremely granular and you can even or Sorry by default you basically go to the field level when you think about translations so as an example here we're going to be working with our page model which essentially serves as the main building block of this particular project right and in here in the schema Builder you can see that we have two Fields Title and subtitle that have been marked as localized oh yeah and it's only the two of those that have been marked like that so what happens if we say we want to change the I don't know the rich text content for a particular page to also be localized can we do that no you can just hit edit field and check a checkbox true it's as easy as that you don't even have to recreate the field like this is something that you can do after effect this is nice so it's different instance of that field essentially but the same schema correct so this is a very important remark there like in in Aller systems the way that localization used to work as was you basically get different copies of the same object for right yeah which is not that great exactly right here you essentially have the exact same entity the exact same ID the exact same configuration that will just have different translations when you request this from the API it's not a different object it's the exact same one so once you have that once you have Mark Fields localized or localizable you can then just go wild and start translating stuff so if we go to our content section and we go to all of our Pages for example let's say we want to work with the homepage here Tim how do you suggest we add our French localization here well there's this lovely thing here on the right side there's this this whole panel and there's like French that's not highlighted so we can just add a little plus here and then all the fields that will be localizable will be able to just write it now and so correct as it stands right now in our in our new studio Beta release we don't have this yet but I'm pretty sure that this is one of the the first things coming out I'm absolutely I'm looking at potential product folks in our chat to perhaps say Tim don't say these things but I'm assuming yes I'm gonna I'm going to guess it's quite high on the priority list important feature exactly right so you're absolutely right basically translations and different localizations that you're going to have in a particular entry are displayed as different Feld right so in this case we have English German and French enabled and we have an English German and a French versions of a particular field but all the other it almost looks like you per for for a living uh you you would think so you would think so but actually no no ah there we go it's on high priority list for the near future that says nothing but I love it what's what's in near future Brian like are we talking in decades months no we're talking Millennium no a few days no we we should shut up now let's continue let's actually translate some stuff right cool so how do you actually translate stuff within the platform give many guesses why you type it in and you hit save you're right right let's type some stuff in oh okay cool so let's translate marketing websites with hyra in 2025 I do have some annoying questions about this later because at scale this might not be the easiest thing to do so this is the extent of my German uh just gonna in German in French there we go okay I actually do know some French but I have no idea how to translate this so let's get that we're fine okay at least we know now so true I would say let's let's save this one and see how we can get this data out or do you have a few other things you want to show first so let's see how we can get the data out and then we're going to talk about how this actually scales because you right like filling in the information within the system is fine for small projects but when you have something bigger it gets quite tedious to do that and Team Management across different regions can get and also lots of the times different companies doing it for you for example true absolutely true cool so let's see how we can extract the title in different languages from the API yes and actually before we do that let me oh let's just add the French copy in the in the rich text maybe no I'm actually going to leave the French copy of the subtitle empty just so we can see something specific cool okay so I'm gonna copy the ID of this particular entry we're going to go to the API playground we're going to build a new query here and being the graph kill wizard that I am I'm just going to point and click in my side view here cool part about this thing we can literally point and click it's so fun exactly like before this company I never worked with graphql and then I saw this it's like why have has nobody ever done this before this is amazing right okay well that's the two things we had so let's have a look what this says what does this give English as as we probably suspected let me kind of do we see everything here yeah you might want to zoom in more like one there we go is this zooming yeah we're good we're good yeah okay yeah this is nice we see everything in English because we didn't really specify a local right exactly that's normal now if let's say we wanted the German one like what would you do Tim how would you guess this would work well thinking of the fact that this is graph Q I would say well before actually making it variables and all that stuff I'm thinking it's an array because we have multiple options and I think knowing graphql with all their ways of saying words I would just do locals and there we go there we go and then just make it an array of French let's get French cool ah so no subtitle something very important exactly now what happens if you still want to display something where you are I want fall back because I need to be able to like like imagine we're halfway down done with localizations I still want to my page to show good for like my QA person or let's say it's an image that you don't want to localize to another one but it's just the same for all of them we want something to fall back right yeah and this is why the local parameters is actually an array so I can have a fullback chain so I can say something like give me the English next then if that doesn't exist give me the German one next and I can Daisy CH them chain them as long as I want if you have 100 profils you can do that it's fine so if we now run that yeah doesn't work but why that's weird why though yeah let's go oh I know why I know why so oh here we go this is a very key thing that we needed to discuss so let's actually go back to content now let's go back in the same entry here I think I know you probably didn't delete no we will need to delete the frenal because as a whole why because now oops you need to that because while the fields are localized on the field level the record itself is localized on the global level this is a very important thing but you now just removed French so your title is also not French correct so how do I now get a French title and an English subtitle this is where actual localization comes into play yeah and the different approaches you can have with that exactly so let's go back to our content here let me expand the stuff that we collapsed and let me zoom out a bit yeah let's start thinking about this so let's say we just explain a little bit about what you're about to do because we were looking something it broke you fixed it but I don't know how you fixed it right so explain it a bit the the the thing that we just did with the French vocal that we had was we basically had French and we had a French title right so let's do that cool yeah but we didn't add a French subtitle now exctly while the subtitle is empty for the French local the French translation of this object actually exists it's there it's just that the French field is empty right yeah sure so when you're requesting the record you're requesting the in our case we requested the French version but we requested the French version of the whole page and in the French version of the whole page that subtitle is empty yes okay that makes sense right now how do you get that that particular subtitle if you want to be able to have that fallback on the field level I have zero idea at the moment right teach me please because I'm about to build bunch of demos with this so yeah learn in the open let's think of this in a bit more logical way so if we for example wrap this thing in a component so let's say this is going to be a description section or a subtitle section was it subtitle it was a subtitle yes subtitle okay a subtitle in a rich text field so it it's kind of strange all right so let's do subtitle section going to add that as a component in here we can say where is this Rich text Rich text Rich text Tim help me here yeah there it is there we go right so we're going to name this text we're gonna localize that here we go I I like this one and we should be done power comes great complexity yep there we go so now we're going to go back to page and we're going to add a component field here and we're going to name this subtitle section yeah and then you select the one you just made exactly and I hope this works because now I start to have doubts with it is yeah I love it we have to work in the open here this is the way to go we're learning again we're obviously very prepared for today obviously cool so now we have two versions of this we have the subtitle fields and we have the subtitle section right yeah so let's go back to content let's go back to our page here and let's go to our homepage so in this case now we have that subtitle section here we can add a different one and in here we can say English German and let's leave the French empty as well well so let's save that I really hope this will work but let's see now we go back and now we go to subtit say subtitle section and in here I can have the same thing and now I can say give me frch if you don't have French give me English if you don't have English give me German right and but okay okay uh sorry we need text exactly yeah that's what I was looking for we probably need text as HTM a let's do tax text is tax it's fine yeah yeah cool so um no did we just discover a book I hope so this is awesome we're going to have a look at this in my example later on when I'm coding because we it actually worked so that's very interesting oh there you go so we have now a French title and an English subtitle set yeah but this should actually work with the fall but it doesn't interesting I think we just discovered a book awesome this is why we do live streams we have to learn together this is the best interesting Okay cool so technically speaking this is how you would approach actual localization because you're going to have different sections for different languages or locals like in this case we're losing the we're using the locals as uh essentially tax for a particular field but you can do the exact same thing with a an enumeration or even model taging right you can have a different geographical region as a particular entry and you can link that to a particular section you could potentially also just like we did a few streams ago where we had like two projects or two websites in one project they would share all the the schemas and you could do translations like that as well I imagine right pretty much yes absolutely so if you're interested we I'm not sure if NG is here but you could maybe link out to that stream and put it in um it takes a bit too long for us to to find that live and paste that in or Brian if you're around if you could find it because it's pretty interesting yeah all right but you could also just do different projects even you can yeah right but then you don't share schemas and then you have to keep them updated so that's a little much but it's possible it's yeah it's a bit on the heavier side there all right cool some projects are like that so let's let's have a look at how you can translate that scale then yeah that that's what I was going to say before I hand it over to you to show that cool project that you had yeah let's think a bit about how you can actually scale this thing now there are several different ways you can think about this the first one is you essentially keep everything within the platform itself within HRA right and that's absolutely possible you essentially will work with different teams and each of those teams will have different permission settings right yeah the cool thing about the system is that you can actually have different roles and permissions that can allow users to have different access to the content German editors how about that exactly that's cool so if we look at the permission set here they can read everything because they need B a basis from which they need to see the English for example exactly because that's the base version right but then they can create update and delete only the German versions oh that's awesome the content right so this is one way you can scale the whole localization process within hgraph itself and this the cool thing about this is that all of this will happen within the platform itself yeah exactly we need to make a drinking game every single time I say this somebody need needs to drink we won't be able to finish the Sprint ever right cool that's fine sure in a lot of cases though companies have an external agency that's doing the translations for with Excel sheets most likely probably so how do you approach that oh we have a new version available can you imagine somebody just fixed that we discover we already found the bug in the system on the stream you better just click refresh to update right let's yeah probably we're living on the stream probably nice right um again did I just enter in a refresh Lo we're good all right cool nope let's let I I'm just going to exit okay cool right so when you have an external agency doing your translations for you you chances are they're using a tool right in a lot of cases or one of the most popular um systems out there is called localize and I mentioned them before because we did a webinar with them they're fortunately a partner of ours and I have them enabled in this particular project essentially this is just an app an addon that you can have to add it to your project basically install it here there are a bunch of other options that we have out there so if you go to Marketplace you go to view all apps and you go to localization oops oops yeah there we go there we go like there are several platforms that you can use like it's not just but what's even cooler is that in a lot of cases the code base for the these is open and you can personalize that to any translation service have so you can do lot more with this the s is though that in all of those cases it the workflow is kind of the exact same thing so let's go ahead and translate one of our pages with localize so for the audience I have never seen this so I'm really excited to see how this works perfect cool so what the app will do for you in a project is basically it will give you a custom app view here which is basically a customized screen here like that whole thing is custom yeah you can build whatever you want here but in this case you basically get a grid for all of the models that you have marked as exportable to that particular service right okay in the configuration of the app you can select Which models will be localizable sure so let's say we want to personalize our about us page so not personalized localized so how would we go about that well you basically Market and you click on submit to translate here is where you select what the base language for that export will be by default obviously it's English because that's our base version but if your translation team for example Works in German you might want to give them that version as well so you can just click that too oh yeah sure yeah but now let's leave it English submit to translate as soon as that's there we should get a popup here saying that the export was successful there we go and now if we go to our localized instance here and I refresh the page we should see our about us strings pop up here and these are the localizable fs that we have so what I can do now is I can come here and with my amazing translation skills I can go in and I can say about us oh and this could entally because this localized app might have like an AI implementation or whatever correct actually use their stuff to make this work yes that's cool and then once you hit save you are able to like push it back in I imagine exactly so if we now go back to our project here you can just click on import translation Again by marking the record that you actually want to get translations for and by the way before you do that you are going to see the status here oh that's good it's completed or not if people export it again while it's in progress you have pain exactly yeah so now we want to import the German version of this so we're going to untick the French one hit import and fingers crossed that this works because apparently the bug gos are with us today now if we go again to our about page we have about us in German and we have in German oh yeah there we go a this is super cool as easy as that and so I imagine lots of agencies just work with localized already because it's a pretty famous company right so if we integrate like this with them it's solved in that sense pretty much yes and again the the thing that we just did was essentially manual translation again just annal service the cool thing about companies like localy is that they're very much from the AI Hy train and they actually have a translations yeah as options there so you can have everything automated but if I had like the old school Excel sheet you wouldn't work with that in hgraph but you can just go to localize and they obviously have some sort of way to import that right exactly yeah exactly nice so I think it's time to show some code of how we would actually query it and code it in like a real thing that I have so frantically worked on just before this stream I think it's a good idea show us how you did the image localization for example yes so I'm just going to switch around some screens here so it looks good when I hit share and also don't look down to my laptop but actually towards the camera somewhat uh here we go so we are now looking at some code you can already see some localization stuff going down here and we definitely didn't do this five minutes before the start don't say these things my friend all right so um if you have been watching our streams or our space for the last while you know about our skin care starter and I can zoom that in a little so this is essentially um a project that's like kind of a posh or fancy thing about your skincare however when you look at what we're selling uh yeah if it loads you'll see it's all snail slime and kind of really fun copy that I invented that doesn't exist so I'm just having my fun with our demos essentially but there are so many French companies that do this stuff and they have French in English and so why not localize this thing and you can see this says n here can I zoom into that there we go probably but we also want to see this thing in French so I did some of it and it kind of works and so um not all of it is in French yet but you so what you see there's some in English some in French which is very interesting and so um how about we have a look in hgraph first and then I'll show you how I coded it and the things that I had to learn while doing this and this is what I love about our live streams where I kind of just learn you know in public and we figure these things out because we're all developers in the end of the day if we at least work with hgraph in such a way um that's how most developers would probably find out as well um so in high graph let's just go to our page so um first settings locals so I have English and French and oh there's also the refresh to update here I'm just going to do it so essentially what this one is I haven't set it up like with uh that's pretty wide okay en n GB and F R something right so it's not the like the local but it's the translation for now in this one English and French and you can see this is a free account so if you want more you can just go to upgrade and I think the professional plan will give you four locals there we go so if you need more go there or just reach me on Twitter and we'll figure something out which we which happens once in a while or just you can actually go here how about that this is even better I'm doing my CTA early you can actually join us on slack and ask about stuff all right so um in my schema and I've only worked on the homepage for now and so essentially this project has a lot of components and so we have a very simple schema for a page and in it you see editorials product highlights routines Heroes all those kind of things so this is a hero this is a product highlight this is a routine component then we have an editorial one like a bunch of things that are all kind of drag and droppable and so um what I first of course did the title and description need to be localized so I said localize field same goes for description and then in here all these components they're also localized so let's say the hero here you see this actually has a localized hero and right now I left the image the same so this is and also if I wanted to localize it here I couldn't because the image itself that's a reference and so you cannot localize the reference but you would have to localize it here in the image itself um so let's have a look at what I did with my homepage and so you see I've I've turned on French here and so it says home or AK which it means kind of homepage there's because it's French there's 15 types of ways of saying that but I just chose this one um see they call it the page daai so it's basically the homepage and here in my hero I've also done a few things like you see they have the French um and so this is basically what we're just showing and luckily this is not a big page so it was relatively easy to do this but now we have to have a look at the code so in my code here and so I'm going to be super honest and open here I try to do this in nextjs because I know most of you folks actually use next and react and after 3 hours of doing next app directory localization routing on the server then on the client with links without result I was like you know what I'll do it in next and I had it done in about 30 minutes of which 20 was uploading images so that is but that doesn't speak to if these Frameworks are good or not it speaks to human capability which for me is just not that let's be honest and we do have demos that actually work in next with localization in our getting started guide in the docs so if you actually go here to the docs and go to our getting started there is localization with next that works perfectly and thank you Romina and low because I'm just going to grab that code and learn for myself and put it in here but because of that this is all in um few and next and let's see what says Romina um you can localize the image and if you add metadata to the image you can yeah you can localize that metadata as well um that's actually a very cool feature about the assets and H graph right you can extend them as much as you want which is the thing that we did last week yeah so how would I do that so this is like an image right right so you can add let's say a text field for the for the Met metadata here and then localize and yeah exactly okay um I'll show you in a sec the difference between a French and an English image for example because I have done that um um first let's just have a look at the code to see what what comes out and so in N at least the way I've set it up I actually have a folder with queries all right so let's go to the page and so what I've added here which isn't even that much I just did the same thing but here I'm just querying one local for a page where the slug is let's say home and the stage is published and then you have all the normal things because it will just whatever whatever the title is if it's English it will come back in English if it's French it will come back in French and then you can see here for the image which I think is to be this um it gets the local but if that connection doesn't exist we'll give me back the English one this is essentially what we were just trying to show that we somehow managed to not show and I'll show you in a sec that that will actually work and so here on the editorial component we get the image for whatever the is and then English as a fallback the same goes for all these components the hero component product highlight which are all those hero product highlight that's all those stuff like and those are the images they're actually working right and so um let me first go back to not having the English the French image and then showing you that it breaks and then how it's fixed so let's go to the assets for uh let's go to the asset for the hero which is this one and you can hear hit edit you see I actually have an English and a French image here we can actually do let's save that because that's fun I see your language skills are very close my language skills are like I've lived here 10 years but there you go I honestly wouldn't know the word for hero in French if anybody in the Stream knows please isn't Ito yeah yes just say it with a French accent when I go to the bakery I just say things in French accent and they they understand because there's lots of English folks that live here they do that and they have to adapt anyways that's a whole different story so let me just remove the French version of that hero image I'm actually right it is Arrow well that's interesting can I not save it without huh what do you mean no it has to be there well let me grab the same one it it it's a very good thing that this happens because it's actually a very good thing yes yes because the constraints that you have on models and on fields that are localizable will transfer to different languages so if you mark a field as required it will be required in all the languages that you enable very cool right um Tim do do do you think you can upload a different image for French just so we can see the difference content let me just grab another image um from our or you can just create a new one on the Fly is there something yeah this one we can probably use this one oh there you go can I just just grab this one I'm just going to upload it by URL so this is just me hacking around our own system a little bit because I don't have them on my hard drive all right so now we go back to our hero we want to edit our image and for French I'm just going to grab another one and by the way we're doing this now in our classic um hgraph classic Studio not not the new one and so that's just because of the localizations that that's coming super soon and so we just chose to do most of our stuff here and this also has not the new asset management system yet but that's just this project if you make a new project even in classic you will get the new Asset Management all right so now we have two different images oh would be nice to see if we can actually make that work so English let's go to French I think is loading there you go there you go nice nice so let's have a look at that code so I've been querying for locals and so what I have here in my code base is I made something called a composable in N which is basically making a custom hook in react it's very similar and so I call this use page and it has a bunch of properties and so normally what you would do there okay I'm going to query a page of certain type and so I called it page but it's just a schema and you can get the type page for product detail page PDP and I have a slug but I also added local here as a string right so now what we can do is of course here I'm checking am I in draft or in published mode so let me query a different stage and then I'm just going to go for well if the type is Page let me query a page with the slug a stage and a local of whatever I give it so I think I have to save this before when we actually go to my page let's go to the index so what I do is use page for the home type page and the local is what I get for my whatever I've installed in next as the the you know the internationalization plug-in essentially so in N you have this module called N internationalization I love this thing about n because you just add modules and they do blackbox things and they tend to just work where in next and react it has it's you have to code everything here it tends to just work and comes out of the box if you have a bug though that's problematic because it's you have to go into the box and unpack it but it generally just works and so I just set it as my default local is English the locals that we have are these two and you can set a a strategy like it can even be like a different URL completely or a query parameter in this case it's a prefix so when you actually go to let's say phase serum it will go to FR fr PDP face serum that's the that's the prefix and there's a few other things in here if you are interested there's actually a local config here or an internationalization config if you had a whole bunch of strings that don't don't come from a CMS you can actually just set them up here and so in this case if I wanted to get like this intro on the page I could potentially do that like like I won't do it now but you could do it like this you can load the T function and it would be like this and so this would print skincare offers the best of the best blah blah blah and if the language is set to French it would offer like it would show you this one so this is like little extra helper things that are super nice to use um not for now though anyways I know the local so I put that in there and I get stuff back and that's literally how easy it is I haven't actually touched the components much um unless we talk about the hero I did some stuff because I actually do something super nerdy here I'm looking for the word your and then split it and make that a brand text well of course the word your is not the same in French it's F so I've had to make a computed property of it and find it and then parse it this is a little nasty but it's good fun that's this part right because you don't want to put the fact that it's brown in the CMS that's not what a CMS is for not really right the CMS is for data so this is a thing you would do in the front end and then here it parses your as brown and that's it so how about we localize this one right because half is English and half is French because I just didn't kind of didn't finish and that works super well because of this English fallback thing so so what what happens if you have an image that doesn't have a French version though so how about we upload one like that so let's remove this one then add oh what oh here sorry add image um should we just upload something I probably have some cats somewhere which cat there we go we do this one this one yeah let's upload this this actually my cat called Titan so we have just uploaded Titan here let's hit save so now Titan actually doesn't have an English version at all and it's probably going to work because of oh no or break everything oh no it actually works and I know why and I do need to solve one thing I added an empty component here that's why that decided not to work so let's see if this is fixed now yeah so this is working now and the whole reason it's working is because of that fallback thing that we did so let me just grab and remove that fullback thing so this was the editorial where's editorial here's editorial and there's a component here oh no it look it's looking for an image so let's just not have this English f black and now let's refresh our code base so it actually does um some nice code gen for me with typescript and queries and all the things so now it's most likely going to completely die if I go to French of course because we didn't upload French yes there it is so it cannot read the URL and what that means is when we actually go to the editorial code base editorial there's this image and I'm just so going like oh just grab me image the URL because why not add an image in a component that needs an image right this doesn't exist in French and so when I now go to English it actually does work because it's there in English and so we can do two things or I just make an English version of that image in English which we would do here like we can go add it just add like um sorry add the French version here just turn it on and add a French version or and this is what um Nikki was showing us just now can actually say well let's fall back to English and just show me that one after okay let's run that query now there's it in English there it is in French so it's just showing us the English version and the cool thing is if we now add a French one and make that actually different let's do this one and now we're in French refresh and there's the French one so that's a super nice way of doing this if you don't have the field just follow it back and show the rest and um I think for now this is what I wanted to show codwise um if you wanted to do this in react or in next it's not that different the main thing is you will have to do it in the middleware so it does server side rendered stuff in here this in N it does that in the module so I couldn't really show you now so Nikki is there anything that you want me to highlight from this code still from the code or anything specific I might have done differently or I think we're good here right I I think we are like the only thing we didn't really cover today but that's kind of a much deeper topic is if we go all out in terms of vocalization like different page structures for different vocals and stuff like that yeah so we haven't really shown that now because of course you might want to say for let's say we did this French thing right and then the most of the companies I worked for in the past an agency for example they would sell differently in different countries so they different pages different campaigns but the same data structures the same components all that but just differently organized using different ones whatever and so Nikki what's the best way for people to do that o Tim that's another stream in itself to be honest yes that's not an easy one and so it's not easy is not easy it's not an easy it's not an easy one like but if we look at at it on the surface level I think the best way you can think about that is that you have to make the differentiation between the way you model out content for your front end yeah in the actual Essence meaning you have to separate your data and presentation layers right even in the Headless CMS both of those will have different things associated with them the way you present let's say a product on a product Details page is irrelevant to what the product information actually is right exactly that being said in that particular case when we're talking about different page structures bottom line is you will have a different presentation layer for every country that you're going to be presenting that but the source of the information like let's take the PDP again the product itself will remain the same yeah and so that's why hatless cmss are awesome because they let you do all those things right but you also have to understand how all that works to be able to properly do it and I kind of like that because you just learn on the go with these bigger projects and do the things and become better at your job because if you use let's say one of the more monolitic systems like the big dxps they'll just force you to do it one way or two ways and then if you want to do something slightly different you have to customize it and you can never update your product anymore yeah and everything goes to Hell shall we say and if you do it like this like this is what you always see if you compare hatas to the monoliths Atlas has a bigger hump to get over to get started but once you get it and once you're in the Freedom Is Awesome right and so that's why we do these streams to help you get over this hump a little bit and then learn with us because the hump is there for me today especially also and then you learn and then you move on and then you see um the less opinion we take as a company towards how you manage your data but is give you all the hooks you can use um you can do all the different things like I think we today we probably discussed like six ways to do it pretty much and you just need to figure out what works for you I guess but yeah with that bombshell we're reaching the hour so it's time to show some of this especially this like all this localization stuff and how you query it and um our lovely Romina who's in the chat today is actually written about all that in our documentation so you can find that here and you can also if you're trying this yourself come to select at hyra.com and actually ask us or show us how you did it because it's probably different um Nikki you want to do the last one sign up it's free exactly so two languages is free though three you have to go to the professional plan that's it's an important one to mention that's a clarification though it's still free exactly like our free tier is like really liberal there's like a lot like I have never had to update anything for all the things I've worked with in hgraph except if you want three languages that's where it starts um and then as a last one delegate localization to the appropriate system um that's that's Nikki all over it um thank you everybody for watching and um I love how the audience grew over time in this stream that's great toward the nerdy bit most people were there that's what I like um thank you everyone and thank you Nikki and see you next week cheers now we wait for the