WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.126 --> 00:00:03.876 align:middle Let's create a layout for our "individual recipe" page 00:00:04.006 --> 00:00:06.116 align:middle so that we can customize this a bit more. 00:00:06.646 --> 00:00:11.896 align:middle I love that we can create new layouts on the fly, whenever a page needs to be tweaked. 00:00:12.716 --> 00:00:19.006 align:middle Add a new layout, choose our favorite Layout 2 and call it "Individual Recipe Layout". 00:00:20.736 --> 00:00:23.226 align:middle And y'all know the drill at this point. 00:00:23.716 --> 00:00:26.046 align:middle Start by linking the Header zone... 00:00:27.216 --> 00:00:28.476 align:middle then the Footer zone. 00:00:31.476 --> 00:00:36.506 align:middle Cool! And then because we're going to be applying this to a normal page 00:00:36.506 --> 00:00:40.986 align:middle that already exists in Twig, add a "Full View" block, 00:00:41.206 --> 00:00:44.036 align:middle which will render the body block from our template. 00:00:44.656 --> 00:00:45.806 align:middle Solid start. 00:00:46.406 --> 00:00:47.206 align:middle Hit "Publish"... 00:00:47.456 --> 00:00:49.456 align:middle so we can map this. 00:00:50.336 --> 00:00:55.076 align:middle Add a new mapping, link it to the "Individual Recipe Layout"... 00:00:56.576 --> 00:00:58.226 align:middle then hit "Details". 00:00:58.776 --> 00:01:01.316 align:middle This time, let's link via the route name. 00:01:02.676 --> 00:01:08.076 align:middle To get that name, open src/Controller/RecipeController.php. 00:01:08.076 --> 00:01:10.046 align:middle Here it is: app_recipes_show. 00:01:10.756 --> 00:01:14.816 align:middle Paste that, hit "Save Changes" and... 00:01:15.056 --> 00:01:16.726 align:middle let's try this! 00:01:16.726 --> 00:01:19.736 align:middle We shouldn't see any difference yet and... 00:01:19.736 --> 00:01:23.966 align:middle we don't. But we can see that it's using our layout! 00:01:24.616 --> 00:01:26.236 align:middle Let's spice this page up a bit! 00:01:27.346 --> 00:01:32.916 align:middle Go back to the layouts admin and edit the "Individual Recipe Layout". 00:01:35.176 --> 00:01:41.056 align:middle Add a new Grid and change it to a "Dynamic Collection"... 00:01:41.806 --> 00:01:43.996 align:middle that uses "Contentful Search. 00:01:46.876 --> 00:01:51.226 align:middle Load Skills, show the newest first and limit to 3. 00:01:52.486 --> 00:01:55.386 align:middle Ok, if we "Publish and continue editing"... 00:01:55.536 --> 00:01:56.956 align:middle then refresh... 00:01:57.856 --> 00:02:02.206 align:middle whoa! It's cool that we can just put those anywhere now. 00:02:03.146 --> 00:02:05.386 align:middle Though, let's wrap that in a container. 00:02:09.336 --> 00:02:11.106 align:middle And... much better. 00:02:11.106 --> 00:02:14.756 align:middle So far, this is all easy! 00:02:15.206 --> 00:02:16.726 align:middle Ready for the complication? 00:02:17.306 --> 00:02:23.846 align:middle I want to customize how this grid looks: I want to have one big recipe on the left 00:02:24.196 --> 00:02:27.166 align:middle and then two smaller recipes on the right. 00:02:27.556 --> 00:02:32.116 align:middle But I do not want to change how the grid looks on other parts 00:02:32.116 --> 00:02:34.316 align:middle of our site, like on the homepage. 00:02:35.266 --> 00:02:41.226 align:middle So the question is: how can we change how this grid renders on just this page? 00:02:41.826 --> 00:02:44.426 align:middle Click on the Grid and go to design tab. 00:02:45.216 --> 00:02:48.786 align:middle It turns out that a Grid is really just a "List" block. 00:02:49.386 --> 00:02:53.906 align:middle And the "List" block has two "view types": list and grid. 00:02:55.146 --> 00:02:56.536 align:middle Head over to your terminal and run: 00:02:56.536 --> 00:03:05.496 align:middle php bin/console debug:config netgen_layouts view.block_view Oh, but spell netgen correctly. 00:03:06.746 --> 00:03:10.346 align:middle This displays the configuration for how blocks are rendered. 00:03:10.486 --> 00:03:13.066 align:middle Find the default section... 00:03:13.386 --> 00:03:14.786 align:middle then scroll down a bit. 00:03:15.396 --> 00:03:19.446 align:middle Here: we see the two view types for list and grid. 00:03:20.246 --> 00:03:24.716 align:middle As I mentioned, it turns out that these are actually both part 00:03:24.716 --> 00:03:28.276 align:middle of the same block type called list. 00:03:28.776 --> 00:03:34.246 align:middle They're just two different view types: one called list and one called grid. 00:03:35.186 --> 00:03:40.226 align:middle When you switch the "view type" in the layouts admin, you're effectively switching 00:03:40.226 --> 00:03:43.376 align:middle which template is used to render that block. 00:03:44.186 --> 00:03:50.566 align:middle Run that same command, but instead of view.block_views, check block_definitions: 00:03:51.346 --> 00:03:56.006 align:middle Block definitions is where you define what the blocks actually are. 00:03:56.476 --> 00:04:00.976 align:middle So every root key under this config represents a different block 00:04:00.976 --> 00:04:03.646 align:middle that we can use inside the admin area. 00:04:06.076 --> 00:04:09.386 align:middle Find the one called list: here it is. 00:04:09.916 --> 00:04:14.386 align:middle This defines things like what form fields are rendered in the admin area 00:04:14.386 --> 00:04:17.826 align:middle for this block and what "view types" it has. 00:04:18.476 --> 00:04:21.166 align:middle This has two: list and grid. 00:04:21.836 --> 00:04:27.326 align:middle Layouts reads this config to render the "View Type" select field in the admin. 00:04:27.876 --> 00:04:34.556 align:middle Then, once we select the view type, it uses the block_views config we looked at before 00:04:34.756 --> 00:04:36.986 align:middle to know which template to render. 00:04:37.836 --> 00:04:40.806 align:middle Ok, enough deep config and theory. 00:04:41.096 --> 00:04:46.186 align:middle Let's give ourselves a new way to render lists by creating a new view type. 00:04:46.686 --> 00:04:47.636 align:middle That's next.