 Thank you for joining me today My name is Calvin. I'm a senior developer and morph. I've been doing front-end and back-end Drupal for many years Lately I've been involved in projects that make use of the size system to maintain the look and feel of their website and Today I would like to share my experience of building Drupal with Twig to implement the components defined in the design system So one of my daily tasks is to transform a standard Drupal size into the design our clients wants But how? In Drupal we have default a default template engine called twig By making use of the twig functions together with the Drupal design system the Drupal template system We can do something amazing So what is a different so what is a template engine a template engines takes a static template Combines with process data and turns into dynamic pages Let's see some examples I've a standard Drupal 10 site with some content setup It's set up with two content type article and page Some wheel mode default full content and teaser wheel modes and In this demonstration, I'm using bootstrap for our theme and this is the bootstrap sub theme After this is enable This is what the site look like I'm not sure about you, but That's pretty much how I feel when I first look at the site I'm sure bootstrap can do something Better than that So let's see how we can improve it From the bootstrap website, I find this horizontal card and I think that will look good on our teaser wheel mode So let's bring that into our theme. So I first Created a components folder. This is a folder that I'm putting all the bootstrap template and We will create one for the horizontal card So go back to the bootstrap website copy the code and place that into our theme So we replace those bootstrap content and for now we are putting some variables in and That's it. So that piece of code is the implementation of our cards But in order to use that in our wheel mode, we need to set up the wheel mode template wheel mode templates are defined in Drupal and By adding the template into our theme it allows us to override the default template and We will set up for the teaser wheel mode for articles So this is what the wheel modes look like and let's break it down We use the include function, which is a trick functions to pull in the components We just create it and we map the fields into the variables So this is a side-by-side wheel on the left We have the teaser wheel mode and the right is the on the right hand side is the cut the components the cut horizontal that we created and We are mapping the image field into the image the label into the cut title and the summary field in the cut test And it will turn this one Into something like that Which I reckon is much better But if you take a closer look into it It's actually The corner of the image is broken Trust me. It doesn't look good. Like especially if it does and colored image It like I'm sure your kind won't be happy with that So and the reason for that is when we create the component If we put it side-by-side with the bootstrap template We have some classes missing those one highlighted and In order to fix that We need help from preprocessor So preprocessor function defined in the theme function in the theme file It can help us to prepare variables that doesn't exist in the template So in this example, I'm pulling out the data from the media and the file entity and make them available in in our template So with how we've the help of preprocessor function, we can now set up the images with the white classes and Once is that is applied. That's what it looks like Let's also check out the full content will more This is what it looks like by default Which isn't too bad. We have the image on top of the body test But again, there's room to improve in Full content will most we want to set up layout template This layout can be reduced in other content types to keep the site consistent And this is a simple two column layout set up with bootstrap great system and We use blocks to define the region and later on we can assign fields into the regions So let's set up our full content will mode for our articles We use extends to pull in the layout and Then we use blocks. So these are the trick functions And we use blocks to assign the fields. We have the image fields in the sidebar And we have the body fields put in the main content region So after it is in place It turns the articles With two columns layout like that the same sidebar layout we can use it in other content types So in page content type again, we can use extend to pull the Layout in and this time we are assigning a Menu in the sidebar and when we set up the body fields in the main content region To make things more versatile We can set up variables. So instead of that like four eight columns We can replace them with variables So that we can have different column with in different content type So on the left the articles we set up for each column and on the page content type We have different width for the sidebar and the content and after it is set up This is what the articles look like and this is the page content type with the sidebar menu and different column width So to build a site with twig There are some common techniques that we are using So we have the template we set up the templates in the theme folder to overwrite the default template P processor help us to prepare the variables and we have covered some very handy functions from twig include extend and blocks That will allow us to set up components in template that we can use in wheel modes And if you ever need to use the components again in other places Let's say if you want to set up as a paragraph type or you need to do you use the include function to map the fields into the variables Same as layouts once it's defined you can use it in different places and we use extend and blocks to fill in the fields into the regions and There are much more functions available. You can check out All the functions on their website Some of them are very much like PHP functions that allows you to massage the content before this displaying onto the template So That's by no mean the only way to build a Drupal site But I hope my demonstration today give you some idea Next time when you build a website so, thank you and I noticed you are using the view modes and the displays like manager The only strategies for Wondering like the order that they're in or the groups that they might be in in your actual templates Like you're sort of printing each part out The ordering of the field is that what you're referring to Yeah, so this is like Yeah, you just put different fields in the template Inside the block the one way to do it and other way you can also like leverage the The wheel modes in the Drupal UI so to set the order but I'll pretty much just like I have the field body If you have other things just put it on it That's the way how I do it Which is a conflict module That's right, that's right. Yeah for the oh exactly that one there Yeah, so that is the tweak the twig tweak module, which is very powerful and you can see even allows you to find the level of the manual and do the configuration all Right at the time plate Without that you can still do it like with pre-processor function But that would be a lot of much more work to do but this yeah, the tweak Twig tweak modules that just fast shred the process for you