 Thank you very much for coming to the translation management strategy for editors in Drupal 10. I'm Jeremy Chinkwist. This talk was given actually a few months ago more from a developer perspective with a colleague of mine Leopold Novelli. But this one's been adapted a little bit more for us as content users or creators. First off, this in general is the page that we have. It's built with the layout builder that we would like to have a translation for. And so just a quick question, but when you look at this page, what do you think needs to be taken into account when doing translation? I just have to repeat it, but if you say it out loud, come on, the menus, okay? There's nothing yet, nothing else to the translation, nothing? The what? The content of it? Translating the text? Sorry, louder? Yeah, the links, definitely. So yeah, we'll get into some of those specifics. A lot of other elements, for example, the image, whether or not you have two different images for the translation. It's actually how also the language switcher itself works. Is it taking the browser default and then switching? Is it doing other things? So there's a lot to actually keep in your head when you're actually dealing with the translation of a website. It's not simple by any means. So we actually wanted to take our marketing website, which had several features. We were going to also make it then English and German. It's a decoupled website. And for those technical people out there, we did it building on our lupus decoupled set up. It's available. There's a link later on. So we're actually talking front end to back end. These are the links, as you can see. It's just a fully integrated solution for our headless distribution. We have an endpoint that needs to be also changed when we go to multilingual. So this I kept this up here. You not only have the whatever the portal, whatever that's doing, but you have to actually adapt this so that you're getting the language specific components as well. Anyhow, pretty much enough for all of the technical stuff. Let's actually move on to the question. How can translations be made simple using the layout builder? So that what I showed you at the beginning. Here's what the back end looks like. This is a typical layout builder page. You have your different elements. You have your sections here, which are going across the entire page. You can add sections or rows. You've got blocks that you can create. So think of like paragraphs that you can add to specific block sections. And then you have the ability to create, to delete, to update any of these blocks. And we'll come to that. So again, the front end looks like this. You'll want to actually set up the translations. You'll want to be able to do create, update, delete of those translations. You'll also have to do things like manage media entities. So the relationship to the image or video or whatever. So there's actually two approaches. And we looked at both of those approaches. There's the asymmetrical and the symmetrical. First off, I'm going to show you the approach that we didn't go with. The asymmetrical approach has a Drupal module in there. So you can actually install it right away. This approach, got out of order. Okay. Yeah. The asymmetrical approach, basically, you are generating a node or content article. And then you're also generating a completely independent article for that other translation. So everything happens detached. The only thing that actually will coincide is the connection between those two different node languages. But whatever you are creating in one language can be fully created, deleted, updated, reordered and everything in that second language. So you can literally have a text block or an image in one language that you have nowhere in the translation. And that actually created a lot of challenges for us because what happens when you start to diverge, you go away from your entire process, so to speak. So what I just mentioned here, I'll skip over this one. The symmetrical approach, however, is the one that we took, which is we are going to keep things in the same order. We're going to keep things tightly coordinated between the original language and the translation language. So here is, for example, just a very basic page that I threw in in the layout builder. The title is in the upper. You've got a text paragraph on the left. You have an image paragraph on the right. And below is just a listing, basically. As you can see, this is the default in English, so the listing is, for example, automatically pulling the English version of whatever content I have. So the relationship is going with the same language. The image, you can see that I'm loading the English version of the image that I'm referencing. The text paragraph is, of course, in English. There is a module as well. We're using it. Please follow the links because you can always look it up better there. So when I look at the elements, you can see in the lower left corner the teaser image that I was using. That one, I can edit it in the original language. I'm in the original, the English language. When I'm actually looking at the German translation of it, you can see that the teaser image is not there because actually it's set. I can only edit it in the original language. If I want to edit it, if I want to delete it and add a different picture, I have to go to the original language and replace it so I am forced to use the exact same image in the original as in the translation. That can create some issues, but at the same time, it allows us to keep that tight coupling a symmetrical approach. The same thing goes for the layout builder. As you can see where I've got the arrows, you have the elements for creating, deleting, updating, as well as reordering. So you can reorder everything, but this only is allowed in the English language, in the original language. I mean, when I go to the translation, those things are not allowed. As you can see there, I do not have the buttons for the creating and deleting or the reordering. I do have the ability however to edit. So when I want to edit anything, for example, this image again on the right hand side, it opens up the editing panel. However, I can only change certain elements like the text itself. I can translate it. So one thing that I do not have on these images but is very important is this creates the situation that when I want to add a new block to my page, I actually have to go in, add that block to the original language and that block itself, the image or the text or whatever, that is automatically added to all languages. And that becomes a very big disadvantage because for the moment, I have published online a block of text that's in English, but it's showing up on all the German or the German translation as well. So I have to be very quick if I want to be professional about it and then translate that very fast. So that's the one big disadvantage to our approach in that regards. Good. Once again, appearing in all of their languages. I'm actually going to skip over the next few slides because they were more from the coder perspective and that's not actually the intent for today. But you can certainly come up and ask me about more of the coding that we've done or the distribution that we've done so I can give you more of an insight for that afterwards. I left them in here however because of the fact that they were helpful to other people. So just doing the language prefix, the changes to the language path, everything like that. So within our distribution as well as the work that we are doing, we've actually taken a lot of time to do things like hiding of those untranslated fields. For example, the image references and stuff. We actually streamline the process for translations in a symmetrical way. We also have taken a lot of time to do things like developing the language switcher itself. So we've got actually a kickstart that's public for our front end that will manage the language switcher and working with meditakes and things like that. If you want more information, those links that I gave you beforehand, please use those or there's also the stack.lupus.digital which we've got up as well. But really go to thedrupal.org, the decoupled link that I had showed you earlier because that one will be probably the most helpful for you. Once again, thank you very much. My name is Jeremy Jinkwist. I'm actually with the Drupal Austria Club and I'm the cashier there. So we had a lot of fun putting on Drupal Dev Days earlier this year. Hope you can come up and talk to me about that. My colleague again is Leopold Novelli. He also is very enthusiastic for open source technology where he actually has a radio show in Slovenia. He's actually done things like interviewed the Minister of Information for Slovenia, which is really cool. Thank you very much. I think we have a few minutes for questions. Yeah, correct. Yeah, it's incorrect. True. I will one second. I just have to repeat it first. So you were saying that for images, in this case what I've got up here, you are loading the information that's in English, the caption and the other. For screen readers, that's actually a really bad thing. So how do we address this problem? Okay. As you can actually see here, here is the image paragraph that we are loading. The image paragraph has not only the image file itself, but it also has the caption information, the description, etc., and the link. So these things on the right side are actually editable in each language. I can change the capture. I can translate that. I can actually translate the link, the description, etc. But I'm being forced in this instance to keep the same image file. And so I achieve my goal of having it translated as much as I can, but we are not allowing for divergence of this image paragraph. It is actually a media entity. Yeah. Okay, so the question was why don't we make it an image entity from the media library, I assume? And if that is the case, then we were able to load the German translation. Unfortunately, I'm not involved as much in the code in that regards. I'm not sure what was preventing us, but we had decided to go with this route that we have the information translatable here from the paragraph itself. In the media entity, it would certainly be possible. I'm just not sure what the blocking feature was. But yeah, if technology were perfect, that would be great. Then thank you very much and I'm available.