WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:00.036 --> 00:00:01.996 align:middle So here's the plan. 00:00:02.316 --> 00:00:06.546 align:middle We're going to add a new "view type" to the list block definition. 00:00:06.936 --> 00:00:11.186 align:middle Then we're going to map that to a template via block_views. 00:00:11.306 --> 00:00:19.786 align:middle For step 1, open our netgen_layouts.yaml file and, really anywhere, add block_definitions. 00:00:20.876 --> 00:00:26.466 align:middle This config can be used to create totally new blocks or change options 00:00:26.466 --> 00:00:29.896 align:middle on existing blocks, which is what we want. 00:00:30.946 --> 00:00:35.656 align:middle To do that, we need to repeat the config here: list & view_types. 00:00:35.776 --> 00:00:39.786 align:middle So, list view_types and then add the new one. 00:00:40.416 --> 00:00:44.216 align:middle Let's call it one_by_two - that key can be anything - 00:00:44.566 --> 00:00:48.016 align:middle and give it a name: 1x2 Featured Grid. 00:00:48.016 --> 00:00:53.646 align:middle Just by doing that, if we go over and refresh the admin area... 00:00:53.646 --> 00:01:01.026 align:middle and click down on the grid, we have a new view type! 00:01:01.896 --> 00:01:03.316 align:middle If we change to it... 00:01:03.316 --> 00:01:05.606 align:middle nothing renders in the admin area. 00:01:06.276 --> 00:01:08.856 align:middle And if we hit "Publish and Continue" editing... 00:01:09.476 --> 00:01:10.716 align:middle over on the frontend... 00:01:11.566 --> 00:01:12.886 align:middle also nothing renders. 00:01:13.156 --> 00:01:17.836 align:middle Yay! Click the Layouts link in the web toolbar and... 00:01:17.926 --> 00:01:19.806 align:middle near the bottom, ah. 00:01:20.266 --> 00:01:23.936 align:middle It's rendering invalid_block.html.twig. 00:01:24.956 --> 00:01:31.096 align:middle The block definition is list and the view type is 1x2 Featured Grid. 00:01:31.696 --> 00:01:37.846 align:middle The problem is that we haven't, yet, defined a "block view" for that combination. 00:01:38.036 --> 00:01:40.656 align:middle So, it falls back to "invalid block". 00:01:41.576 --> 00:01:46.026 align:middle Ok, under view, we've already created several "item views". 00:01:46.686 --> 00:01:51.506 align:middle Now add block_view so we can create our first of those. 00:01:52.586 --> 00:01:56.576 align:middle We're going to register both an admin view as well as a frontend view. 00:01:57.026 --> 00:01:57.936 align:middle Because... 00:01:58.156 --> 00:02:01.766 align:middle in the admin area, it currently renders nothing. 00:02:03.246 --> 00:02:07.026 align:middle Add app for the admin and the next key doesn't matter. 00:02:07.106 --> 00:02:14.536 align:middle For the template, because the admin view isn't too important, let's re-use the core admin 00:02:14.536 --> 00:02:18.556 align:middle "grid" template, which you could find via the debug:config command. 00:02:18.936 --> 00:02:24.856 align:middle It's @NetgenLayoutsStandard/app/block/list /grid.html.twig. 00:02:26.486 --> 00:02:28.296 align:middle Now add match. 00:02:28.986 --> 00:02:38.506 align:middle We want to use this template if block\definition is list and block\view_type is one_by_two... 00:02:39.216 --> 00:02:44.296 align:middle making sure that this matches the key we used earlier under the block definition. 00:02:45.066 --> 00:02:49.936 align:middle How did I know to use block\definition and block\view_type? 00:02:50.476 --> 00:02:53.946 align:middle By using our favorite debug:config command! 00:02:54.176 --> 00:02:56.266 align:middle That's always a good guide to follow. 00:02:57.026 --> 00:03:00.136 align:middle Anyways, that should fix the admin area. 00:03:00.136 --> 00:03:02.246 align:middle And... it does! 00:03:02.366 --> 00:03:06.636 align:middle For the frontend view, duplicate that entire section... 00:03:06.786 --> 00:03:07.946 align:middle but use default. 00:03:08.716 --> 00:03:13.526 align:middle This key is fine, it doesn't matter, and change the template to, how about, 00:03:13.956 --> 00:03:19.496 align:middle @nglayouts/block/list /one_by_two_list.html.twig. 00:03:20.776 --> 00:03:22.896 align:middle The match section is perfect already. 00:03:23.786 --> 00:03:25.716 align:middle Ok, let's go make that template! 00:03:26.406 --> 00:03:30.066 align:middle We already have templates/nglayouts/themes/standard/block/... 00:03:30.876 --> 00:03:37.636 align:middle so, create the new list subdirectory then the file: one_by_two_list.html.twig. 00:03:38.916 --> 00:03:41.016 align:middle Start by saying 1x2. 00:03:41.936 --> 00:03:42.676 align:middle Let's check it! 00:03:43.256 --> 00:03:47.416 align:middle Over on the frontend, refresh and... 00:03:47.666 --> 00:03:50.116 align:middle there's our tiny 1x2! 00:03:50.726 --> 00:03:53.236 align:middle Let's bring this to life! 00:03:53.236 --> 00:03:58.016 align:middle Because this renders a "list" block, our template probably has access 00:03:58.016 --> 00:04:01.146 align:middle to some variable that represents the "items". 00:04:01.576 --> 00:04:05.156 align:middle To cheat, which is always a good choice for developers, 00:04:05.636 --> 00:04:11.396 align:middle let's peek at the core grid template: grid.html.twig from the themes directory. 00:04:12.506 --> 00:04:17.096 align:middle Wow! Like many core templates, there's a lot of stuff in here! 00:04:17.856 --> 00:04:20.506 align:middle You can choose what you want to keep or get rid of. 00:04:21.496 --> 00:04:26.326 align:middle The most important thing is this collection_html variable: 00:04:27.026 --> 00:04:31.516 align:middle they loop over collections[collection_identifier]... 00:04:31.826 --> 00:04:36.226 align:middle where collection_identifier is actually just the word default. 00:04:36.656 --> 00:04:39.546 align:middle So it loops over collections.default. 00:04:40.416 --> 00:04:42.376 align:middle Then it includes a template. 00:04:42.456 --> 00:04:45.496 align:middle That templateName variable will be set to something 00:04:45.496 --> 00:04:50.316 align:middle like grid/ the number of columns .html.twig. 00:04:50.396 --> 00:04:58.726 align:middle For example, if the grid is configured to use 3 columns, it would use 3_columns.html.twig. 00:04:59.626 --> 00:05:04.146 align:middle That template adds the div needed for each column in a 3 column setup... 00:05:04.516 --> 00:05:07.796 align:middle and then calls nglayouts_render_result(). 00:05:08.196 --> 00:05:10.306 align:middle That renders the "item". 00:05:11.206 --> 00:05:17.286 align:middle Anyways, if you zoom out, the template basically loops over the collections variable 00:05:17.716 --> 00:05:21.456 align:middle and calls nglayouts_render_result() on each one. 00:05:22.316 --> 00:05:26.966 align:middle Back in our template, I'm going to paste in some code that does something similar. 00:05:27.476 --> 00:05:32.136 align:middle Yup, we extend block.html.twig, just like the core template does, 00:05:32.756 --> 00:05:38.036 align:middle then loop over collections.default, add a div and render each item. 00:05:38.126 --> 00:05:43.906 align:middle So this is effectively a simpler version of what a grid does. 00:05:44.546 --> 00:05:46.436 align:middle And what does it look like? 00:05:47.306 --> 00:05:48.436 align:middle Refresh and... 00:05:48.906 --> 00:05:51.156 align:middle yup! It looks like a grid! 00:05:51.876 --> 00:05:57.916 align:middle But remember the goal: one big skill on the left with two smaller skills on the right. 00:05:58.906 --> 00:06:02.906 align:middle To make that happen, I'll paste in version 2 of my template. 00:06:03.206 --> 00:06:04.466 align:middle Nothing special here. 00:06:04.816 --> 00:06:09.506 align:middle Instead of looping, this renders the 0 key, then the 1 and 2 keys. 00:06:10.646 --> 00:06:11.466 align:middle And now... 00:06:12.756 --> 00:06:15.276 align:middle yes! That's exactly what I wanted! 00:06:15.576 --> 00:06:19.136 align:middle Though, I'll give you the same warning I gave earlier 00:06:19.456 --> 00:06:22.326 align:middle when we were overriding core "item" templates. 00:06:22.906 --> 00:06:27.496 align:middle We are not including all of the custom stuff that lives in the core template. 00:06:27.926 --> 00:06:32.466 align:middle If you need to support a custom option, make sure to include that code. 00:06:32.796 --> 00:06:38.446 align:middle And actually, one thing in here - the number of columns - is not something we need. 00:06:38.816 --> 00:06:42.096 align:middle This is something that we can configure for the block... 00:06:42.656 --> 00:06:47.496 align:middle but it's not relevant at all when using our new view type. 00:06:48.076 --> 00:06:48.586 align:middle Could we... 00:06:48.786 --> 00:06:51.416 align:middle hide that option when using our view type? 00:06:51.846 --> 00:06:57.526 align:middle Yep! Head back to your terminal and debug the block_definitions config again: 00:06:58.196 --> 00:06:59.816 align:middle Search for one_by_two. 00:07:01.216 --> 00:07:07.216 align:middle We could configure this valid_parameters key to remove an option from the block. 00:07:08.046 --> 00:07:11.186 align:middle The list view type does exactly that. 00:07:11.786 --> 00:07:14.036 align:middle I won't do it, but that's how it's done. 00:07:15.246 --> 00:07:19.626 align:middle Ok, head back to the site and go to the "All Skills" page. 00:07:20.326 --> 00:07:23.286 align:middle Yea... things still don't look right. 00:07:23.966 --> 00:07:27.696 align:middle On this layout, we're using a grid to render the items. 00:07:27.976 --> 00:07:34.106 align:middle And, that grid looks ok on other pages but not here, where the skills are meant 00:07:34.106 --> 00:07:36.496 align:middle to be the main content on the page. 00:07:37.706 --> 00:07:43.846 align:middle Next, let's learn how we can customize how these items render for just this grid.