WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.036 --> 00:00:03.756 align:middle Let's override one other template completely. 00:00:04.606 --> 00:00:06.826 align:middle Go into the Individual Skill Layout. 00:00:07.426 --> 00:00:12.156 align:middle We're using a Contentful entry here, which is a "referenced asset"... 00:00:12.546 --> 00:00:15.486 align:middle and it's rendering as this image tag. 00:00:16.046 --> 00:00:21.026 align:middle Cool! This is a great example of how a single Block type - 00:00:21.456 --> 00:00:27.946 align:middle for example the "Contentful Entry Field" block type - can have multiple View types, 00:00:28.176 --> 00:00:30.796 align:middle which basically means "multiple templates". 00:00:31.446 --> 00:00:35.506 align:middle Each of these different View types will be rendered by a different template. 00:00:36.346 --> 00:00:41.436 align:middle We actually see this with a lot of different Block types - even the Grid Block type. 00:00:42.116 --> 00:00:44.516 align:middle I'll add one down here temporarily. 00:00:45.286 --> 00:00:50.896 align:middle It has a View type that allows you to switch between List and Grid. 00:00:51.646 --> 00:00:58.396 align:middle Yup, the List and Grid blocks are actually both the same Block type internally: 00:00:58.776 --> 00:01:04.266 align:middle they just have a different View type, meaning each is rendered by a different template. 00:01:04.846 --> 00:01:05.796 align:middle Go ahead and delete that. 00:01:06.696 --> 00:01:11.296 align:middle Anyway, every Block type can have one or more View types. 00:01:11.776 --> 00:01:16.676 align:middle And I actually want to dive a little deeper into this concept of "views". 00:01:17.616 --> 00:01:18.956 align:middle Find your terminal and run: . 00:01:19.086 --> 00:01:27.086 align:middle /bin/console debug:config netgen_layouts view I'm debugging the configuration that could live 00:01:27.136 --> 00:01:32.016 align:middle under the view key below the netgen_layouts key. 00:01:32.876 --> 00:01:36.966 align:middle When you run this, you see a ton of config. 00:01:37.676 --> 00:01:45.396 align:middle Notice that there are several root keys, like parameter_view, layout_view, and a few others. 00:01:46.046 --> 00:01:53.176 align:middle But there are actually only two that we care about: block_view, which we'll talk about now, 00:01:53.646 --> 00:01:59.556 align:middle and item_view, which controls how the items in a List or Grid render. 00:02:00.306 --> 00:02:04.916 align:middle We actually saw this one earlier when we customized how our Recipe 00:02:05.056 --> 00:02:07.986 align:middle "item" rendered inside a List or Grid. 00:02:08.606 --> 00:02:11.216 align:middle We'll talk even more about those soon. 00:02:12.146 --> 00:02:21.296 align:middle Anyways, to zoom in on the block views, run that same command, but add .block_view Block views, 00:02:21.506 --> 00:02:26.496 align:middle very simply, control how entire block types are rendered. 00:02:27.216 --> 00:02:30.446 align:middle For example, we can see how the "Title block" renders... 00:02:30.616 --> 00:02:34.436 align:middle or the "Text block", or how the "List block" renders. 00:02:35.106 --> 00:02:44.056 align:middle This block_view config can have several keys below it, like default, app, and ajax. 00:02:44.536 --> 00:02:46.976 align:middle And we know what those mean. 00:02:47.586 --> 00:02:53.576 align:middle default means these are used on the frontend, app means they're used in the admin section 00:02:53.996 --> 00:03:00.446 align:middle and ajax, which is not as common, is used on the frontend for AJAX calls. 00:03:01.076 --> 00:03:07.606 align:middle So to override the frontend template for a block, we really mean that we want 00:03:07.606 --> 00:03:12.046 align:middle to override its block "view" under the default key. 00:03:12.666 --> 00:03:20.646 align:middle Let's... zoom in one more time by adding .default: These are all the block views 00:03:20.906 --> 00:03:22.886 align:middle that will be used on the frontend. 00:03:23.406 --> 00:03:27.146 align:middle The trickiest thing about these are the match part. 00:03:27.946 --> 00:03:32.556 align:middle When you define a "block view", it's pretty common to define the template 00:03:32.556 --> 00:03:35.916 align:middle that should be used when two things match. 00:03:36.646 --> 00:03:41.046 align:middle Search for "list/grid": this is a great example. 00:03:41.706 --> 00:03:49.096 align:middle This has two match items: block\definition is set to list because, 00:03:49.386 --> 00:03:56.456 align:middle technically the "Block type" for both the List and Grid blocks is called list. 00:03:57.156 --> 00:04:02.196 align:middle The second match condition is block\view_type set to grid. 00:04:02.986 --> 00:04:10.176 align:middle Together these mean that if a block is being rendered whose block\definition is list 00:04:10.666 --> 00:04:15.466 align:middle and whose block\view_type is grid, use this. 00:04:16.236 --> 00:04:21.726 align:middle By the way, both of these things can be seen very clearly from the web debug toolbar. 00:04:22.406 --> 00:04:28.006 align:middle Go to the homepage, click on the Layouts web debug toolbar, and go to "Rendered blocks". 00:04:28.546 --> 00:04:29.406 align:middle Down here... 00:04:29.916 --> 00:04:30.716 align:middle look at this! 00:04:31.036 --> 00:04:34.976 align:middle You can see "Block definition: List", "View type: grid"! 00:04:35.676 --> 00:04:38.056 align:middle And then it points to the template that was rendered. 00:04:38.056 --> 00:04:41.556 align:middle In this case, it's referring to this Grid right here. 00:04:42.856 --> 00:04:43.626 align:middle So then... 00:04:43.676 --> 00:04:47.766 align:middle why is the Title block rendered by title.html.twig? 00:04:48.376 --> 00:04:50.306 align:middle We can see that in the config. 00:04:50.876 --> 00:04:51.926 align:middle Search for "title"... 00:04:52.566 --> 00:04:53.016 align:middle here we go. 00:04:53.616 --> 00:05:01.926 align:middle This says: if the block\definition is title and the block\view_type is title, use this template. 00:05:02.756 --> 00:05:07.806 align:middle This is an example of a Block type that only has one View type. 00:05:08.316 --> 00:05:13.766 align:middle So, in practice, this is the view that's used for all title blocks. 00:05:14.716 --> 00:05:20.756 align:middle Ok, let's remember our original goal: to override the template that renders this image. 00:05:21.376 --> 00:05:28.236 align:middle We know that this is a "Contentful entry field" and it has a View type of "Referenced assets". 00:05:28.886 --> 00:05:30.886 align:middle So... we can find that in here! 00:05:31.546 --> 00:05:33.426 align:middle Search for "assets" and... 00:05:34.046 --> 00:05:34.986 align:middle there it is! 00:05:35.616 --> 00:05:39.756 align:middle So if block\definition is contentful_entry_field 00:05:40.316 --> 00:05:45.816 align:middle and the block\view_type is assets, this is the template! 00:05:46.646 --> 00:05:52.756 align:middle This means that if we want to override just the assets View type of the Contentful entry, 00:05:53.176 --> 00:05:55.386 align:middle that's the template we need to override. 00:05:56.316 --> 00:06:00.906 align:middle And yes, we could have very easily found this by going 00:06:00.906 --> 00:06:04.716 align:middle to the web debug toolbar and finding the template there. 00:06:05.416 --> 00:06:09.236 align:middle But now we understand a bit more about how blocks are rendered 00:06:09.636 --> 00:06:15.306 align:middle and how each block can have multiple views so that we can choose how they're rendered. 00:06:15.966 --> 00:06:20.456 align:middle Later, we'll add an extra "view type" to an existing block. 00:06:21.396 --> 00:06:23.426 align:middle Okay, so let's get to work. 00:06:23.886 --> 00:06:28.686 align:middle The path starts with the normal nglayouts/themes/standard/, 00:06:29.276 --> 00:06:32.666 align:middle then we need block/, followed by this path. 00:06:33.406 --> 00:06:39.416 align:middle So inside of our block/ directory, create a new sub-directory called contentful_entry_field/. 00:06:40.216 --> 00:06:43.886 align:middle And inside of that, a new assets.html.twig. 00:06:44.446 --> 00:06:47.056 align:middle For now, I'll just say ASSET. 00:06:47.986 --> 00:06:50.686 align:middle Ok! Spin over to the frontend and... 00:06:51.136 --> 00:06:53.426 align:middle yes! It instantly sees it! 00:06:53.686 --> 00:06:55.316 align:middle We're now in control! 00:06:56.326 --> 00:07:01.106 align:middle Like before, we probably don't want to override the entire template. 00:07:01.636 --> 00:07:05.906 align:middle Instead, open the core template - assets.html.twig - 00:07:06.506 --> 00:07:09.526 align:middle so we can steal, um borrow from it. 00:07:10.306 --> 00:07:12.886 align:middle Temporarily, copy the whole thing, paste... 00:07:13.526 --> 00:07:15.566 align:middle and... yep! 00:07:15.976 --> 00:07:16.816 align:middle That works. 00:07:17.666 --> 00:07:19.936 align:middle Contentful is fairly advanced... 00:07:20.406 --> 00:07:26.576 align:middle and you can see that this supports fields that hold a single image as well as multiple images. 00:07:27.216 --> 00:07:32.916 align:middle You can keep this as flexible as you want, but you can also make it your own. 00:07:33.646 --> 00:07:36.416 align:middle I'm going to drastically simplify this template... 00:07:36.686 --> 00:07:39.246 align:middle and replace it with a very simple image. 00:07:39.806 --> 00:07:42.026 align:middle For the src, I'll paste in some code. 00:07:42.836 --> 00:07:46.136 align:middle All of the fancy Twig parts of this code were in the template before. 00:07:46.966 --> 00:07:52.356 align:middle This also shows off a Contentful superpower where you can control the image size. 00:07:53.146 --> 00:07:58.916 align:middle Calling block.parameter() allows us to read the options from the layouts admin, 00:07:59.346 --> 00:08:04.536 align:middle where we earlier configured this block to have a width and height of 200. 00:08:05.416 --> 00:08:06.516 align:middle Let's see what it looks like! 00:08:06.976 --> 00:08:09.156 align:middle Refresh. Yeah! 00:08:09.376 --> 00:08:10.846 align:middle It looks like it worked! 00:08:11.586 --> 00:08:15.826 align:middle But I do want to want give one small warning about customize templates: 00:08:16.276 --> 00:08:19.796 align:middle make sure you don't lose flexibility that you need. 00:08:20.386 --> 00:08:26.516 align:middle For example, we know that we can add extra CSS classes to any block via the admin. 00:08:27.266 --> 00:08:32.416 align:middle If we did that right now, it would not work because... 00:08:32.576 --> 00:08:35.756 align:middle we're simply not rendering those classes! 00:08:36.246 --> 00:08:37.926 align:middle And, that might be fine. 00:08:38.386 --> 00:08:43.066 align:middle But if you do want to support that, you'll need to make sure to add it. 00:08:43.776 --> 00:08:51.186 align:middle In this case we can say class="{{ css_class }}", which is one of the variables we saw earlier. 00:08:51.856 --> 00:08:57.826 align:middle And while we're here, let's also add an alt attribute set to field.value.title. 00:08:58.646 --> 00:08:59.976 align:middle When we try this... 00:09:01.116 --> 00:09:02.166 align:middle I love it! 00:09:03.146 --> 00:09:08.566 align:middle There's the alt attribute and there's our class, including some core classes 00:09:08.566 --> 00:09:11.056 align:middle that Layouts always adds to that variable. 00:09:11.996 --> 00:09:18.666 align:middle Okay, we just talked about block views: how templates are configured for entire blocks. 00:09:19.386 --> 00:09:24.896 align:middle Next, let's talk about item views: how we customize the template that's used 00:09:25.176 --> 00:09:28.726 align:middle when rendering an item inside of a Grid or List. 00:09:29.246 --> 00:09:32.096 align:middle We'll use this to style our skill items.