 Okay everyone, I'm going to start already, we've got a lot to cover, so let's start on time. Thank you very much for being here, I appreciate you taking the time. I'm going to talk about two recipes, making blue palade rendered the markup that you want. The slides are already available if you want to follow along, that is the link. My name is Mauricio Dinarte, you can find me as Dinarcom pretty much everywhere on the internet. That's my email and my rupa.org user profile. I am from Nicaragua, I just came from the camp, and it's a beautiful country. We have a lot of lakes and volcanoes, and we are very meta, like we have a big lake with an island, and the island there are two volcanoes, in one of them there is another lagoon, because you know, land, water, land, water. And one of those is arctic, one of those is dormant, so issues. I work for a company called Agaric, which is based in Boston. We are a distributed team. We have people in USA, Nicaragua, Mexico, Germany, and England. Before I start, I want to make clear that this is an introductory session, so my goal is that someone who has never heard about Tweet, they can learn how to use it to overwrite Drupal markups. So if you feel that some of the things are very basic, please bear with me. And the other important point is that even though I am going to be providing recipes, you can simply copy them from the slide deck. The most important part is understanding the process. The author of CSS Secrets says that understanding the process of finding a solution is far more valuable than the solution itself, and I truly believe that. And I think that it is better that we dedicate more time to understanding the process than just to copy and paste in the recipes themselves. If I am going too fast or too slow, feel free to interrupt me anytime. If you want to ask any questions, feel free to do it anytime. So let's get started. When talking about overwriting Drupal markups, the markup produced by Drupal is controlled by the theme. The themes are responsible for controlling the opinions of the website, and they do it in these ways. They define the layout, like how it will behave on mobile, on desktop, on tablet, 4K monitors and so on, like how that content is going to be distributed. The theme is also responsible for setting the color scheme, specifying the fonts to be used, and some of them might provide interactive user experiences like carousels. That can also be provided by modules sometimes, but there is a great line between how interactive a theme or a module can be in the slide, there are going to be a lot of links to resources, so if you want to learn more about that specific topic, you can follow the link. In Drupal, the theme is responsible for producing the markup, and the markup is produced using templates. The templates, they separate the presentation logic from the business logic, and what that means is that when someone is like a front-end developer who is working on a theme, they don't need to care about how the information is processed and how the information is calculated, for example. They just assume that the information is going to be there available for them for output, so they just receive a variable and they print that variable. They don't need to care how that number was calculated. The templates are simply HTML markups with placeholders that are going to be replaced by data dynamic content, and they can contain CSS, JavaScript, and other assets like images as needed. In a Drupal website, we have a lot of templates. Just to produce one page in Drupal, you interact with 10, 20, 100 templates in a single page. So this is like an onion, we have layers, so we have an outermost layer, and we're going to see this in detail just in a moment, but we have an outermost layer for the main page. Then we have more templates for the regions. For example, the right sidebar or the footer, those are regions. We will have one template for that. Then for each specific piece of content, let's say we have a signup block or a region articles block. Each of those is going to be a template for that. Then it keeps going down and down, like you can go to the node level, to the field level, and so on. So let's say that I have a corporate blog. In my company, in my organization, we write blog posts to share with the community what we have learned. In that blog post, when you see one specific one, there is a blog in the right sidebar that leaves more articles by the same author. Like this person already wrote these articles in case you want to see them. So just for that specific blog, in theory, you can interact with at least five templates. The theme region template, which defines with the position of the right sidebar itself. Then the blog template. Then let's assume that this listing was created using a view. Then you interact with a view template because you are listing more articles by the same author. Those articles are nodes. So for each of the articles, you are going to interact with the node template. And let's say that you want to print information about the node itself, like the title, or the author, or the publication date, or some field, like an image, a teacher image. Then you go to the next level, which is the field template. So it is a very simple piece of functionality, like more articles by the same author, and you are already interacting with five layers of templates. And this is for one of the blogs in the page. If you have more blogs, multiply that by as many blogs as you have, and you know, there is a lot of templates that we need to care about. So it is very, very important to understand what piece of information you're dealing with. Because if you're dealing with a view, you need to modify the view template. If you're dealing with a node, a node template, and so on. So there are some tools that we're going to cover them to identify which is the right template that I need to modify. These are some examples of the templates themselves. This is the HTML tweet template. As you can see, it's just like the HTML wrapper, the head, and the body tags. The only important thing here is the five lines from the bottom where it says our curly braces, curly braces, page, and closing curly braces again. So templates call one another. Like one template we call the next one in the hierarchy. So this HTML template, through that page between curly braces, is going to call the next layer. And that next layer is the page template. Here we see many instances of curly braces page dot something, like page dot header, page dot primary menu, page dot highlight, page dot content, page dot cyber figure, cyber second, and so on. So for each of those page dot something, those are the regions available in my theme. So if you ever wonder where the regions come from, this is where they come from, from the page template. So let's say that you want to add a new region to the theme. You do it here. You add the region here and you add, you know, markup around that region to make it, you know, go to the cyber, to the left or the right, or whatever you want to position it. But like each of these is going to call, like the next hierarchy, like the next template, in which case it's like after the page, it is the region. The region template is very simple. It is just a check. Is there something in this region? If there is, I print the region, otherwise I don't print anything. After the region, we get the blog themselves, which is like a title and the content of the blog. Let's say this is the main content of the website. So usually we're going to render a note. So the blog template is going to call the note template. And this is the note template, like title, submitted by the tagline, some content and so on. So you don't need to worry about, you know, understanding all these lines, but the thing here is, like, see how templates call each other and how there is a hierarchy of them. And again, you need to know what piece of the puzzle you're dealing with so you modify the right template. Let's talk about Tweak. Tweak is the templating engine for Drupal 8. It is reading PHP and it is part of the symphony framework. It replaces what in Drupal 7 was called PHP template. There are many reasons why this happened. One is that security in Drupal 7 with PHP template, you had the whole of PHP at your disposal and you, in theory, can, you know, delete your database from the thing, which would be really bad because your site will go down. So with Tweak, you can still do that, but like, you need to write custom code for that, and if you do that, you're shedding yourself in the food. So very likely no one will do that ever. Another reason is security. Tweak already out escapes a lot of things out of the box in the way it is configured for Drupal, and we are going to see one specific example where Tweak helps us in terms of security. And also Tweak is very, uses a syntax that is similar to other languages and other frameworks. So one of the idea is to make adoption of Drupal front-end development easier. So you don't need to be like a specific Drupal developer in order to do this. If you work with Django, if you work with Rails, they are going to be templating system in those languages or frameworks that are very similar to Tweak. So you pick up the idea very, very easily. This is a Tweak template, and this has nothing to do with Drupal. This is just like how a Tweak template look like. It is, again, HTML markup with some placeholders where you're going to render dynamic parts. So let's dive a little bit into the syntax of Tweak. We have variables, variables, you know, those are the dynamic placeholders that are going to be replaced and you use two query braces in a row to say, I want to print this variable. In this case, I am, in line number one, I am saying from the node variable look for the bundle property of that variable and print that. The node bundle corresponds to the content type. So line one is printing the content type of the node that you are visiting right now. Tweak is very flexible in how you can, you know, write the code itself. So from line one to three, they are all equivalent. 99% of the time, they're going to use that dot notation, which is line one. You just, like, put node, dot something, dot something, and so on. But you can also use, like, square brackets and quotes, or you can use attributes and then, you know, the variable and then the property. So in, in that, in Drupal, the second syntax is used only three times in Drupal core. And the third syntax is never used in Drupal core. And I'm going to explain why. For one, like, node, the dot notation is very versatile and we're going to see that in the next slide. But when do you want to use the second syntax? If the variable starts with a hashtag, then you need to use the second syntax. It is required for you to use, like, node, the dot notation. You can use the second or the third one. Drupal core uses the second one. So let's say we have a variable called form and then inside that variable there is a variable called operator and inside that variable there is another one called hash type. So in that case, we use the second syntax. And the third syntax is used when you have a dash in the name of the variable. If you don't use that, that, if you don't use it like that, Tweet will think that you're trying to do a, a subtraction operation. So it will try to get the value of the first part minus the value of what comes next. So this is useful if you, if you work with data attributes in your own template, but Drupal core never does that by itself. Now, why do we use the dot notation? Because it does a lot of things. So for one, it will check, these are all the checks that are run when the dot notation is being used. We check if there are keys of arrays, if there are properties of objects, if there are methods of objects, if there are my method of objects. And everything here is Tweet core. Like Tweet by itself, if you use it in another project, all of it is Tweet itself for line number 15. Line number 15, when it says render something, that is specific to Drupal. And this is like if all the other checks fail, we do a last check. And that last check is, is this a render array? No, we have render arrays. So if this is a render array called the render function and output the result of that. If it is not a render array and render doesn't return anything, then we just give up and return nothing. But like these are all the things that are checked. And line 15 is the only one specific to Drupal. So how, how do we set variables to be used later in the template? We use the set keyword and then the name of the variable and equals the value. The value can be a scalar, which means it can be an integer number, a float number, or like an array. In this case, you know, we have an array and the first element line number, number three is no, just a single string. In line number four, we see like we have a tilde, tilde in Tweet is used for concatenating strings. So we are going to concatenate no dash, dash, dash, dash, then to the node bundle, which is the content type. And, you know, we can do certain logic. We're going to see more of this later, but like we're calling a method and depending on the return value of the method, we set more variables. We can also say like negate the logic using not and so on. We're going to see more of the syntax right away. And then, you know, you have the class and you use attributes.addclass to, you know, print them in the HTML. So filters. This is more about the Drupal syntax. Tweet comes with a lot of filters and in that link, you can find the ones that are specific to Drupal. So filters are used to modify the output before, you know, producing the output itself. In line number one, we have a variable called some text and we are applying the upper filter which will change all the letters to uppercase. You can also have like a regular string and apply the filter and it will go uppercase. So the way that you apply a filter is you have a variable. They use a I symbol and then the name of the filter itself. You can also do it like if there is like a long piece of text that you want to apply a filter to. You can use like a curly bracket percent sign. Then the word filter, the name of the filter itself, whatever you want to transform and then in filter. So that's also an option. In line number 10, we can see that filters can be changed. So for example, that I have a variable called name and I want to street tags. That means like I want to remove all the HTML from that variable and then the result of that I want to make it uppercase. So that means you can use a filter as much as you want. And some filters can receive parameters like in line number 13 we have modules. Modules is an array. In this case, this is an example of Drupal Core, like all the modules that are available in the site and you want to print them. So we use the safe join filter and that receives a parameter. What is going to be like the piece of text that is going to be between each element of the array. In this case, it's a comma and a space. So, a word of warning here, Tweet comes with a filter called join. When working in Drupal 8, never use that filter. For security reasons, Drupal provides its own safe join filter. And there is an effort to move this code to Tweet itself, so we don't have to do our custom stuff here, but so far that hasn't landed yet. And while that doesn't land in Tweet itself, every time that we want to concatenate any stuff in a Tweet template in Drupal 8, we use safe join. In addition to filters, we also have functions. So, a function might return a value that you want to print right away. For example, in line number two, I have the random function and I pass a parameter of seven. So, produce a random number between zero and seven, inclusive, and print that value. In line five to seven, we see the range function which produces like a sequence of numbers, like in this case, from zero to seven. And there you go, that's an array that I will iterate over using the formula. And we're going to use to see about control structures later. And one something that is unique to functions, it's an example in line number 10. It's that we have this attached library and then something, a parameter there. So, when we are using filters, the output of the filter is printed immediately in the template. Like if I have line one at deep, line two something pipe upper and then line three closing deep, like my uppercase text is going to be right in between those other deep tags. With functions, functions might produce something that you want to print immediately. Functions can produce something that you want to use like in a control structure, like in the form, you know? But functions can also modify the whole page itself. Like in this attached library, what we're doing is adding CSS and JavaScript to the page. The CSS and JavaScript won't be in line with the template. It will modify the whole page. So, functions are able to do that while filters cannot. And in Tweet, we also have tests, which, you know, these are checks of true or false that I can use in, you know, to construct certain logic. So, all of these are example of Drupal core except the last one. So, if Q refers to that query string parameter, if it is not empty, which means if there is some query string set, then do something. If label display is in, you know, one of these two values in the array, if the variable is equals this, and there is something in description.content, if the summary is not empty, or the description is not empty, and if some number is odd, like you can check if it is odd, if it is even, and so on. Technically speaking, the only test here is the word odd. All the other ones, like is, not, and, or, those are called operators, but for practical purposes, they add as test, because a test is something that will produce a yes, no value, as simple as that. So, this is like a summary of what we covered. We provide filtered function and test, and filters, they require an expression preceding the filter, they can receive parameters, and the return value will always be a scalar that will be printed in line in the template. Like where you put the filter, it will be, you know, whatever comes out, it will be printed right away. For functions, they don't require an expression behind them, they can also receive arguments, and the return value is mixed, which means they can be a scalar, they can be an array, or they can be something that is modifying the whole page, and when they print it right away. And for tests, they require an expression preceding it, can receive parameters, and the return value will always be a boolean, which is yes or no. So, a little bit of console structures, this is some code from Drupal itself. This is how Drupal prints the messages. You know, when you save a node, and you get a message in green, saying the node has been saved, or when you submit a contact form, and you get a message the contact form has been submitted, this is how Drupal prints those messages. So, messages is an array, and we have a new test check to verify that if the array has some content. How do we do that? We use the length filter. So, messages is an array, we check, we apply the length filter, and that returns a value. If that value is greater than one, then we print what's coming next. One important thing about tweak is that it also tries to make the life easier for the following developers. In Drupal 7, if you have an array, and you want to count the elements in that array, you use one function. If you have a string, and you want to count the characters in that string, you use a different function. In Drupal 8, we tweak that is transparent. The front-end developers, they want to count something. So, they simply apply the length filter, and the length filter will work for both arrays and for strings, and it will return a sensible value, depending on the type of the variable. So, it's making the life easier for the front-end developers so they don't have to care about these PHP syntax, or think about if this is a style, if this is an array, or an object, or so on. So, there are many examples in tweak that there are filters or functions that can operate over different type of variables. So, in this case, if there, in fact, are messages, and there are more than one, we print them using an ordered list, and then we use the four statement to go over each individual message. If there is only one message, we just print that one without the ordered list, which, you know, without the bullets. And again, because messages is a variable, it's an array. So, we want, because there is only one element in that array, we want to print the first element, and that's why we use the first filter there. Another example, it's the breadcrumb. So, the breadcrumb is like when you visit a node, and for any page deep in the side, you get this like navigation, like home, blog, and then let's say a section of Drupal, all the blocks related to Drupal, and then like the node itself. So, that's the breadcrumb, and you can like click on the breadcrumb to go to the parent section. So, this is how Drupal renders the breadcrumb. Breadcrumb is an array, and we go over each element of those array, and we check if usually the last element of the breadcrumb is the page itself, and there is no more, there is not a big point in linking the page to itself. So, that one, like the last element, sometimes it's just like plain text without a link. So, what we do in Drupal is that we check if item, which is like one in each individual piece of the breadcrumb, is there a URL within that element? If yes, we print an href, an a tag, which is like the link, otherwise we just print the text. One thing to take into account is that when we want to print something, we use two square curly brackets for control structure, which is like how we control the logic in tweak, we use square curly bracket and percent sign. So, if there is something curly bracket and percent sign, that thing in between the two, like opening and closing tags, those that will not be printed, but like everything else will. If we do curly brackets, that will be printed. So, just for you to know. And let's see how to order a Drupal marker. So, we talk that when we're working with a Drupal page, there are a lot of templates that are going to be used. So, Drupal code chips with five things, one of them is called stable. A stable alone contains 148 templates. So, if you want to make a little modification, how do you find wish of the 148 templates you need to modify? So, you know, why so many templates? Let's do an exercise. Let's say that I have, you know, that page, which is probably, everyone has seen this before. This is a Drupal 8, right of the box installation. I just created a note called template. You know, I have the submitted line and so on. So, the exercise is to change in the tagline, the tagline, the format of the date. Instead of having, you know, Thursday, the month, day, year, time, I only want to show the month, the day, coma, and the year. So, when I first tried to do this, I said, oh, that's trivial, that is super easy. It will take me five minutes. It turns out that it took me more than an hour to figure that out. But now I can explain it in five minutes. So, this is how you do it. You enable in the box, we're going to see what is that. Then you locate the proper template to override. You copy that template to your theme. You use a template filing suggestion, if needed. We're going to see that too. You make your changes, you clear the cache. Your rinse and repeat, like if you want to make more, many modifications, you do it like that. And in the end, you disable thing debug. And by doing that, you will be a master for overwriting Drupal Markup. So, step one, enable thing debug. In your Drupal website, there will be a file called sites, default services, that's YML. You just need to modify this section with those parameters. There is more documentation about how this work in those links, so you can follow. But trust me, you want to do this when working with Drupal 18. Then, when you do that, and you know, you get the markup of the website, you can inspect the source code, and it will be annotated with comments like this. And these comments provide three pieces of information, all of which are very important. So, the first one is the thing hook. So, in this case, it's what comes next, like it's an article, something, something. That is a node. So, the comment is telling me that what comes next is a node. And why is that important? Remember, you know, the onion, the layers. This is like, this is how I know what I'm dealing with. If it says no, I am dealing with a node. If it says user, I am dealing with a user. If it says field, I am dealing with a field. If it says block, I am dealing with a block, and so on. So, this is like the, how you figure out the field part of the puzzle. The thing hook, it's the very first things that you get. The last thing is like the path to the template itself. So, remember that you have to copy the template and move it to your theme. So, that is how you locate the template that is being used. So, one and two. And the third thing is like finding suggestions. So, let's say that you have different content types in your Drupal website, but you only want to modify the article content type, not every node. If you just copy the node template and make a change there, it will modify all the nodes of all the content types in your website. But if you want to modify only for the specific content type, you can do it like, you copy the name, like node template, but you rename it to something like node dash dash article. That means that this is going to modify only the markup of article's nodes. And if you have a calendar, you know, an event node, those will be modified by this. So, sometimes you want, you know, in the case of nodes, you can modify by content type, by view mode, which is like the teaser or the full page view. And you can modify it by the node ID itself, but that is not recommended because between, you know, if you have a dead stage and live environments, the node ID is going to be different in each case. So, that is not recommended to do, but you can do it with content type or view mode. So, there's more documentation in that link and there is a catch when working with views. Views will not provide the list of all the possible naming suggestions. There are technical reasons for that, but if you need to know which are all the options available in the link in the bottom, you can see which templates are available for views. So, if you're, you know, strolling with views, don't see what you have available, just go to that link and you will have more information. So, back to the exercise. I want to modify the text. So, I identify that the node template is the one being used, that is the link and this is part of the content itself. In line number 94, we get this submitted by author name, then on date. I want to modify the date part. And important to know, in 926 and 27 of that template, it says in comments that the date variable is the theme creation date of the field. What that means is that if you see a template comment that it says theme, that means this is HTML markup. So, if I want to modify that, I will have to parse HTML markup, which is not very fun to do. So, I cannot use the date variable by itself. I need to find some other way to accomplish my task. So, how do I do it? In that same template, in line number 10, I get more variables at my disposal. So, I get like node dot created, get created time and it will return a timestamp of the node creation. So, that is more useful. I can use a timestamp and modify and present it in the way that I want. So, knowing that, I take that node template, I copy it over to my theme and I make my modifications. So, in this case, I have node dot created time, that is the timestamp itself, and then I apply the date filter and the format that I want to use. And as simple as that. Now, if you can see like here, I use custom date. Why I am using a custom variable to print this? This only happens when you have translations enabled in a Drupal template. When you have translations by using the trans function here, you can only print a scholars. That means like text, regular text like submitted by or variables, but those variables need to be like a number or an integer or an audio stream, but you cannot, you can use filters, functions or tests within trans, like it doesn't work. So, because it doesn't work, I need to set a variable outside of trans. I need to set a variable outside of trans and then that variable is going to be a scholar, which I can then print within the trans line. So, that's a catch. For Drupal translation, you need to set the variables before. I mean, so the question is if that is another language, the format needs to be different. So, this is like just a very simple example. Again, we want to separate the business life. So, if you have use case like the local, how the dates and numbers are presented, you can take that off that in the backend and then you just have the variable ready to be printed. So, you can in theory do that in the tree template, but that goes beyond what it is meant to be doing. So, setting, I mean, you can do that. You can set three variables one for the day, for the year and for the month, but remember that the template is static. So, you are just pretty much doing the same, like printing three variables with the same content. If you want to print Chinese, which uses a different format, then you need to somehow write another template for that or overwrite that template. So, for cases where you want to deal with locale, it is better to do that in the backend and just pass the variable ready. Like all your logic should be in a pre-process function, for example, and just print in the template what you need to print. So, once you do that, make your modification, reveal your caches and boom. That's it. July 21st, 2006. So, that's how you do it. And if you pay very close attention, the no template said that, know that get created time parentheses. In my example, I use no dot created time only. So, this I am making use of Twig itself, because Twig is going to do all the checks. It will check for get created, it will check for properties, it will try to call the method. So, all of these three are equivalent in Twig. So, just for you to know. And this is another warning. This is only for demonstration purposes. You should never sub theme party. And there are at the end some links to videos where they explain why you should not use party. Let's see that recipes themselves. Let's say that I want to pass information from Drupal to Twig. How do I do that? I modify in the theme that is going to be, you know, the name of your theme called theme file. So, that is where your PHP code is going to be. You implement a hook, you know, hook preprocess hook. The first hook, in lower case, you are going to replace that by the name of your theme. And the one in uppercase, you are going to modify that by the hook template. Remember that in your example, it says theme hook note. So, let's assume that I have a theme called Nicaragua. And I want to modify this. It will be Nicaragua underscore preprocess underscore note. And then I will see the variables that I can work with. Then you modify the variables array. And like this array is going to be key value. Drupal, after it processes your hook, it will convert all the keys to variables that then you can print in the template itself. And that's the last step, printing the variable. So, let's assume the following. I have a content type called page. And in that content type, I have 1D image, like a hero image that I want to print outside of the context of the node. Remember that the node is like the middle part of the page when I am giving the page. Let's say that I want to take that image out of that box and I want to make it prominent on the top of the page. So, how do I do that? Then I want to modify the page itself. So, I implement the hook preprocess page and I check in the variables. If there is a variable called node, then that means I am viewing a node instead of viewing a view, for example, or a user. So, I check, do I have a variable called node available? And then I check, is that variable bundle, remember that bundle is the content type. If the content type page, if that is the case, then I do the following, the logic. So, in line number six, I say I have the node, get the field called field-understory-image and give me the value or give me the representation of how it will be seen in the full view mode. This, where it says full, that is the view mode. It can be the full view mode that is a view mode and so on. So, I am saying give me that representation and that is going to return a render array, not like the HTML itself. It's going to return a render array. And in Drupal, it is a good practice that you make the conversion from render array to the HTML as late as possible. And that is why it is usually done in the template itself by just printing the variable. And again, for cover title, those are two variables there. So, I already got my two variables. One is going to be called cover image and the second one, cover title. Then, this is how I print. Like, this is my page template. So, I check. If there is a cover image, then print something. If not, no. So, I want you to pay attention to line number three and line number five. So, in line number five, I have my cover title variable just between Curly brackets, nothing more. But in line number three, I am applying a filter called render to the variable. Why? Because remember that what I get from the view before, from the view method, it's a render array. When using Curly bracket, Curly bracket, Drupal, will automatically try to do, to apply the render method. So, I don't have to do it manually. But when it is a control structure that I need for another four, that doesn't happen automatically. So, I need to check, like, does this render array, when it is rendered, does it have a representation? Like, does it have some HTML? Because it is possible to have a render array that when you apply the render method, it returns nothing. But if you check for if, you know, if render array, it is true. Like, it will evaluate to true because just being a render array, it is a true condition. But I don't want to check if the render array is a true condition. I want to check if the render output is a true condition. So, that's why I have to apply the render in the E or in the four, but not when just printing something. So, that's key there. Second recipe, how can I condition render field based on the contents of other fields? Let's assume that I have a Boolean field. And this Boolean field is going to control how a link on the, like, okay, let's, the full example is this. I have three fields in my content type. One is an image, one is a link, and one is a Boolean field set if I should open in a live box or I should open, like, go to the page itself. So, I'm going to use these fields to do the logic. How do I do that? You know, I create a Boolean field, I hide the label, and then the output format, I set it to one and two. By default, Boolean fields can have, like, you know, the on value or the off value. Remember that we're going to use this variable in the trim template. For example, if use, if the on value is opening live box and the off value is do not open in live box, those are strings. The strings, no matter what the content is, it's going to be evaluated to true. So, that is not very helpful. I need, like, one or zero, which within an inf statement, it makes the logic work. So, once I do that, I have this. So, look how this works. In the template itself, I have the content variable, then I have the field itself. I apply the render method, and then I need to apply the trim filter to one. Because even though I am returning zero or one, Drupal is so, you know, given, so helpful that it will print white spaces to the left and to the right of the value itself. So, if I have white space zero, white space, that is also a valid stream. Like, so it will evaluate to true. So, I need to trim the white space outside of it, and then, is it really a zero or a one? And based on that, I can apply my logic. So, here, there is no need to use this set variable, but the reason is because I use it more than once. Like, there are two conditions in my template. This is just like, you know, it's called stream, but there is, like, if you only need to use that condition once, you can put this directly in the if condition, and that will work. And the last thing that we're going to cover today is how can I render images as background fields. So, in 8.3 and onwards, which is to be released next month, this comes out of the boxing core. You just configure your image field to use the URL to image format and render the variable. So, this is how it looks like. You go to the display settings of the content type, you hide the label, you set that format, and you can decide which image style you want to use. And then, you just print that value. So, in this case, I have some inline CSS, background image, the URL, and the URL to the image itself. So, in line number two, like, you know, we can see something, a space less variable is space less. Why do we need a space less filter? Because, again, Drupal is so helpful that it will give you why the space is before and after that into the image. But that is embedded CSS. If you do that, the CSS will not work. So, you need to trim the white spaces from the variable, and you can use, you can do it using the space less filter. So, by doing that, you know, it will work. So, what is the difference between trim and space less? To be honest, I don't know, I don't remember why trim didn't work in this case, but one thing to remember is just like, by seeing the syntax. When I have the space less filter like this, I can have many, many lines in between and it will trim all the white spaces from the beginning and from the end. That trim is going just to work on one line. So, that's a difference. And I tried that trim here and didn't work. I didn't, you know, remember why it didn't work? But, you know, the recipe is that you just use the space less operator and it works. So, sorry for not having a precise answer for that. And before 8.3, you actually needed extra modules to do this. So, you use the image URL for model module, configure the image feed to use that image URL and then render the variable. This is how you do it. That module allows you to link the image to the content, to the node, or to the image itself, like the large version. In this case, you want the link image to nothing. You just want the link itself. So, you configure the filter using the display using that and then you just print the template in the same way. So, we run out of time. Thank you very much. I will be around if you have any questions. And there are a couple of more recipes, but to be honest, these are the three most important. And from here on, you just like repeat the same logic. That's what I said. Understanding the process is more important than having a solution itself. You just copy and paste this and it will work. Thank you very much for having me. Yeah, yeah, so, that is that into the slides. And please provide feedback if that was too easy to hard. Like, in German, I want it with a dog and in English I want it without it. In American English, I want it upside down anyway. So, it's better to do that kind of configuration actually in the app interface and then in the wrapper file. Yeah, that's a very good point. Like the example that I gave, it's just to illustrate how it works. But there is actually a configuration in Drupal that will allow you to modify the date and adapt that to your locale or your language. So, it is better to do that through the UI. But just for example, I did it that way. I mean, but if you do that in the template, like again, if you render the dates like each of the user element in the template itself, it is no longer dynamic. You will have to, if you want to make a variation of the format, do we have to write a new template for that? Excuse me. So, the question is, when do we use Tweet instead of render arrays? Actually, we use them at the same time. So, the render array is something that comes from the backend. The only thing that Tweet does is, if it is a render array, it calls the render function and outputs the value of that. It does the transformation automatically for you, but they are used together. So, like in the first example with the covered image, like in the backend, I provide a render array, like a variable as a render array. And in the front end, I print that variable and Tweet will automatically compare that render array into some HTML representation. So, they are used together. Again, so, what is the benefit of using one or the other? It's, you use them both at the same time, but if I understand your question correctly, like one, why not pass in the HTML representation, like directly from the backend, right? So, because you can have, like, you know, Drupal works with hooks and in many other ways, but like if you want to alter the markup, after calling each hook, you can have another module overriding the markup providing by a module that was called before. And if you have the HTML representation and you want to modify that, you will need to parse using regex, regular expressions, that thing, and it's really, really hard. So, if you have a render array, you can just modify the elements individually and then in the end, in the template, you just call that representation in that process. I don't really understand the question. Maybe we can talk, yeah. I mean, Tweet, we'll do that automatically for you and that's the reason why we use it. But if you have, we can talk to you about it. Thank you very much. Okay, yeah, yeah, there, there, okay.