WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.016 --> 00:00:04.186 align:middle We can now add a lot of dynamic content to our site, 00:00:04.486 --> 00:00:07.986 align:middle like these static blocks up here, grids, or lists. 00:00:08.706 --> 00:00:14.646 align:middle The grids and lists can hold items from Contentful or our Recipe entity. 00:00:15.266 --> 00:00:21.826 align:middle But to really make our site shine, we need flexibility over how these pieces look. 00:00:22.546 --> 00:00:26.356 align:middle Let's start simple, by overriding the template that renders what the 00:00:26.356 --> 00:00:30.166 align:middle "Title" block looks like for our entire app. 00:00:31.086 --> 00:00:32.156 align:middle To do that... 00:00:32.506 --> 00:00:38.556 align:middle we first need to figure out which template is currently responsible for rendering this block. 00:00:39.516 --> 00:00:44.846 align:middle An easy way to find out is to go to a page that renders one of these, refresh, 00:00:45.126 --> 00:00:48.496 align:middle and click on the Twig icon on the web debug toolbar. 00:00:49.296 --> 00:00:52.916 align:middle Down at the bottom, we see the whole tree. 00:00:53.626 --> 00:00:57.906 align:middle And if we look closely, ah ha! 00:00:57.906 --> 00:01:02.756 align:middle Apparently there's a template called block/title.html.twig! 00:01:03.606 --> 00:01:07.756 align:middle Layouts itself also has a really nice web debug toolbar section. 00:01:08.356 --> 00:01:12.576 align:middle If you go to "Rendered blocks", it shows "Block definition: 00:01:12.576 --> 00:01:15.086 align:middle title", "Text", "List", and "Footer". 00:01:15.786 --> 00:01:20.916 align:middle And, as we saw, the Title is rendered by title.html.twig. 00:01:21.816 --> 00:01:28.166 align:middle Notice that almost all of these templates are nestled inside themes/standard/ directories. 00:01:28.846 --> 00:01:33.096 align:middle Layouts has a concept of themes, though we won't need 00:01:33.096 --> 00:01:38.486 align:middle to create multiple themes unless we're building some sort of multi-site application. 00:01:39.326 --> 00:01:44.826 align:middle In our case, we're just going to use the one built-in theme called standard. 00:01:45.476 --> 00:01:52.346 align:middle But themes are still important, because anything inside of a theme can be easily overridden 00:01:52.386 --> 00:01:55.046 align:middle by putting a template in just the right location. 00:01:55.666 --> 00:01:59.426 align:middle We're going to use that convention to override the Title template. 00:02:00.306 --> 00:02:00.986 align:middle Let's do it! 00:02:01.476 --> 00:02:06.756 align:middle First, in the templates/ directory, make sure you have an nglayouts/ subdirectory. 00:02:07.316 --> 00:02:10.506 align:middle Inside of that, add a new one called themes/... 00:02:10.986 --> 00:02:14.226 align:middle followed by a another subdirectory called standard/. 00:02:15.206 --> 00:02:18.546 align:middle You may have noticed that we're matching the structure that's 00:02:18.546 --> 00:02:21.786 align:middle over here: nglayouts/themes/standard/. 00:02:22.586 --> 00:02:28.506 align:middle Inside of this, since the target template is named block/title.html.twig, 00:02:28.976 --> 00:02:35.076 align:middle if we create that same path, our title.html.twig will win. 00:02:35.826 --> 00:02:43.016 align:middle Do it: add another directory called block/ and a new file inside: title.html.twig. 00:02:43.996 --> 00:02:48.556 align:middle To see if it works, just write some dummy text: Let's try this thing! 00:02:49.016 --> 00:02:52.766 align:middle Go back to the Skills page, refresh, and... 00:02:53.106 --> 00:02:55.866 align:middle absolutely nothing happens. 00:02:56.576 --> 00:03:02.036 align:middle That's because the first time we create this themes/ directory, we need to clear the cache. 00:03:02.696 --> 00:03:03.116 align:middle Do that... 00:03:03.706 --> 00:03:06.886 align:middle then with that behind us, try the page again. 00:03:07.586 --> 00:03:12.046 align:middle Woohoo! We now control how the Title block renders! 00:03:12.506 --> 00:03:13.486 align:middle The power! 00:03:14.446 --> 00:03:18.246 align:middle Okay, but even if we want to customize how the Title renders... 00:03:18.586 --> 00:03:21.846 align:middle we probably don't want to start from scratch. 00:03:22.426 --> 00:03:28.376 align:middle It would be better to reuse part of the core template, or at least use it as a reference. 00:03:29.216 --> 00:03:35.706 align:middle Hit Shift+Shift, search for title.html.twig, and select "Include non-project items". 00:03:36.446 --> 00:03:39.326 align:middle Open the core one from nglayouts/themes/. 00:03:40.206 --> 00:03:43.586 align:middle Wow. There is a lot going on here... 00:03:44.176 --> 00:03:49.866 align:middle including the fact that this extends another template: block.html.twig. 00:03:50.456 --> 00:03:51.146 align:middle Open that up. 00:03:53.376 --> 00:04:00.186 align:middle This contains a lot of base functionality, like reading the dynamic css_class variable, 00:04:00.576 --> 00:04:04.886 align:middle which contains any CSS classes we enter into the admin. 00:04:05.656 --> 00:04:07.886 align:middle It also handles if there's a container or not. 00:04:08.486 --> 00:04:09.906 align:middle That's useful stuff! 00:04:10.816 --> 00:04:17.236 align:middle In title.html.twig, it has code for whether or not the title is a link and other stuff. 00:04:17.946 --> 00:04:23.926 align:middle We could totally replace this template and ignore all this if we wanted to. 00:04:24.416 --> 00:04:31.276 align:middle But instead, copy the core template, paste it into our version: And just to prove that we can, 00:04:31.506 --> 00:04:34.866 align:middle let's remove that title class: Cool! 00:04:35.606 --> 00:04:38.746 align:middle Now go over, refresh and... 00:04:39.386 --> 00:04:41.556 align:middle it goes back to how it looked before. 00:04:42.246 --> 00:04:47.086 align:middle But down here, that title class on the <h1> is gone! 00:04:47.846 --> 00:04:53.736 align:middle So the simplest way to control how something looks is to find the template that renders it 00:04:54.186 --> 00:04:58.556 align:middle and override it completely using this themes/ directory structure. 00:04:59.396 --> 00:05:04.506 align:middle Let's use that trick again next to customize what it looks like when you render an 00:05:04.666 --> 00:05:09.206 align:middle "asset" field from Contentful, like this skill image field. 00:05:09.946 --> 00:05:13.016 align:middle But along the way, we're going to deep dive 00:05:13.016 --> 00:05:18.696 align:middle into a some massively important concepts: block views and view types.