WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.036 --> 00:00:05.066 align:middle When it comes to customization, you can do a lot of damage by looking 00:00:05.066 --> 00:00:10.086 align:middle at which templates are rendering and using the theme system to override them. 00:00:10.786 --> 00:00:15.676 align:middle But there are a few cases where you'll need to get even more specific. 00:00:16.516 --> 00:00:20.196 align:middle For example, suppose we want to modify the "item" template 00:00:20.276 --> 00:00:23.566 align:middle for how the skills grid renders on the homepage. 00:00:24.436 --> 00:00:28.586 align:middle If you check the web debug toolbar here and scroll down... 00:00:29.076 --> 00:00:31.026 align:middle I'll actually search for "contentful"... 00:00:32.376 --> 00:00:33.456 align:middle ah, there we go. 00:00:34.146 --> 00:00:36.416 align:middle You can see grid.html.twig... 00:00:36.986 --> 00:00:42.186 align:middle which renders item/contentful_entry.html.twig. 00:00:42.906 --> 00:00:46.876 align:middle To customize the item, we could override that template. 00:00:47.286 --> 00:00:48.456 align:middle Easy peasy. 00:00:49.246 --> 00:00:54.716 align:middle The problem is that, in Contentful, we have multiple content types: 00:00:55.096 --> 00:00:57.436 align:middle we have Skills and Advertisements. 00:00:58.076 --> 00:01:01.686 align:middle So if we override this template, that will override it 00:01:01.686 --> 00:01:04.906 align:middle for both Skills and Advertisements... 00:01:05.246 --> 00:01:08.076 align:middle and we probably want those to look different. 00:01:08.446 --> 00:01:10.546 align:middle So, how can we solve this? 00:01:11.276 --> 00:01:17.766 align:middle Earlier, we ran debug:config netgen_layouts view and talked about the two main sections 00:01:17.766 --> 00:01:23.356 align:middle under here - block_view (which controls how blocks render) and item_view. 00:01:24.246 --> 00:01:30.896 align:middle As I've said a few times, some blocks, like Grid and List, render individual items. 00:01:31.716 --> 00:01:36.376 align:middle This item_view config is where we define those templates. 00:01:36.916 --> 00:01:40.516 align:middle And you'll see some familiar root keys: default for the frontend, 00:01:40.936 --> 00:01:44.646 align:middle ajax for AJAX calls, and app for the admin. 00:01:45.546 --> 00:01:49.216 align:middle Once again, this uses the match config and... 00:01:49.616 --> 00:01:52.646 align:middle hey! We see our entry in here! 00:01:53.456 --> 00:01:55.416 align:middle Remember recipes_default? 00:01:56.006 --> 00:01:58.556 align:middle We configured this inside of our config file, 00:01:59.076 --> 00:02:03.346 align:middle and it's one of the two real item templates we have right now. 00:02:04.146 --> 00:02:09.796 align:middle There's one for recipes, and then Contentful has one for all of the Contentful items. 00:02:10.406 --> 00:02:16.556 align:middle So again, we could just override this template via the themeing system and be done. 00:02:17.356 --> 00:02:23.446 align:middle But our goal is to override this template only when the item is a skill, like this one. 00:02:24.016 --> 00:02:25.906 align:middle So how do we do that? 00:02:26.696 --> 00:02:32.986 align:middle By adding our own item_view to this list that matches that single content type. 00:02:33.796 --> 00:02:34.866 align:middle Let's do it! 00:02:35.616 --> 00:02:36.346 align:middle Over here... 00:02:36.776 --> 00:02:39.656 align:middle we're under item_view, default for the frontend 00:02:40.046 --> 00:02:43.896 align:middle and we have the one entry from earlier: recipes_default. 00:02:44.476 --> 00:02:45.726 align:middle Let's add another. 00:02:46.376 --> 00:02:52.736 align:middle Call it contentful_entry/skill, though this particular key doesn't make any difference. 00:02:53.546 --> 00:02:55.116 align:middle Below that, set template 00:02:55.116 --> 00:03:02.316 align:middle to @nglayouts/item/contentful_entry, followed by skill.html.twig. 00:03:03.216 --> 00:03:07.816 align:middle Before, we were using nglayouts without the @... 00:03:07.816 --> 00:03:13.406 align:middle just because I told you that nglayouts/ was a nice directory for organizing things. 00:03:14.346 --> 00:03:19.616 align:middle Internally, Layouts uses @nglayouts in its template paths. 00:03:20.116 --> 00:03:21.636 align:middle What's the difference? 00:03:22.316 --> 00:03:26.256 align:middle By adding the @, we're hooking into the themeing system. 00:03:26.986 --> 00:03:30.886 align:middle So because we have a templates/nglayouts/ directory 00:03:31.276 --> 00:03:35.996 align:middle with themes/standard/ inside, it will use our template. 00:03:36.836 --> 00:03:41.046 align:middle Feel free to use @nglayouts or just nglayouts. 00:03:41.546 --> 00:03:43.766 align:middle I just wanted you to understand the difference 00:03:44.006 --> 00:03:48.216 align:middle because you'll see the @nglayouts syntax all over the place. 00:03:49.016 --> 00:03:52.216 align:middle The really important key here is match. 00:03:52.856 --> 00:03:56.886 align:middle We want to match only when we're working with a contentful_entry. 00:03:57.656 --> 00:04:00.166 align:middle Ok, copy match from the config... 00:04:00.946 --> 00:04:02.016 align:middle and paste. 00:04:02.686 --> 00:04:04.696 align:middle But we need to be more specific. 00:04:05.146 --> 00:04:10.486 align:middle We also need to match only when the type of the content is a skill. 00:04:11.076 --> 00:04:12.066 align:middle But how do we do that? 00:04:12.576 --> 00:04:15.046 align:middle What matchers are even available? 00:04:15.746 --> 00:04:17.686 align:middle There is a core list... 00:04:18.146 --> 00:04:22.856 align:middle but did Contentful add any additional matchers that we could leverage? 00:04:23.506 --> 00:04:27.656 align:middle Here's a little trick to see the true list of match items. 00:04:28.386 --> 00:04:31.186 align:middle It's a little technical, but works beautifully. 00:04:31.786 --> 00:04:33.846 align:middle Run: php bin/console debug:container -- 00:04:34.056 --> 00:04:40.846 align:middle tag=netgen_layouts.view_matcher What is this doing? 00:04:41.546 --> 00:04:45.826 align:middle Well, anyone can create a custom matcher - like foo\bar. 00:04:46.476 --> 00:04:51.086 align:middle To do that, you create a class and give it this tag. 00:04:51.856 --> 00:04:54.576 align:middle By looking for all services with that tag, 00:04:55.016 --> 00:04:58.486 align:middle we can find all of the existing matchers in the system. 00:04:59.146 --> 00:05:01.656 align:middle And... look at that list! 00:05:02.756 --> 00:05:07.626 align:middle Oh, here's an interesting one: contentful\content_type. 00:05:08.376 --> 00:05:09.466 align:middle I bet we can use that. 00:05:10.216 --> 00:05:14.226 align:middle Try it: contentful\content_type set to skill. 00:05:15.116 --> 00:05:16.936 align:middle Okay, let's go create the template. 00:05:17.586 --> 00:05:23.116 align:middle Inside themes/standard/, instead of block/, this time, create a directory called item/... 00:05:24.576 --> 00:05:30.016 align:middle then contentful_entry/, and then skill.html.twig. 00:05:30.776 --> 00:05:32.886 align:middle Just put some dummy text for now. 00:05:33.806 --> 00:05:41.106 align:middle Ok, if this is working, when we refresh, these items - which are Contentful skills - 00:05:41.376 --> 00:05:44.656 align:middle should re-render using our new template. 00:05:45.216 --> 00:05:46.706 align:middle But when we try it... 00:05:47.186 --> 00:05:49.656 align:middle absolutely nothing changes. 00:05:49.986 --> 00:05:50.666 align:middle What happened? 00:05:51.586 --> 00:05:53.046 align:middle Go back to your terminal and run . 00:05:53.346 --> 00:05:57.596 align:middle /bin/console debug:config netgen_layouts view.item_view again. 00:05:58.546 --> 00:05:59.436 align:middle This all looks good... 00:05:59.816 --> 00:06:01.596 align:middle except for the order. 00:06:02.346 --> 00:06:05.596 align:middle This one from Contentful is on the top of the list... 00:06:06.126 --> 00:06:08.516 align:middle and our new ones are at the bottom. 00:06:09.246 --> 00:06:09.946 align:middle And guess what? 00:06:10.386 --> 00:06:16.356 align:middle When Layouts tries to figure out which template to render, it reads the list from top to bottom 00:06:16.736 --> 00:06:23.256 align:middle and finds the first one that matches: exactly how Symfony's routing system works. 00:06:24.086 --> 00:06:31.026 align:middle So, it first looks at contentful_entry, sees that the value_type is contentful_entry... 00:06:31.446 --> 00:06:32.776 align:middle then uses it. 00:06:33.466 --> 00:06:38.196 align:middle It never makes it to the contentful_entry/skill at the bottom. 00:06:39.006 --> 00:06:44.156 align:middle To fix this, we're going to use a fancy prepend configuration trick. 00:06:44.646 --> 00:06:46.256 align:middle Let's do that next.