WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.076 --> 00:00:07.406 align:middle Open up base.html.twig and move the block layout to be around everything. 00:00:07.506 --> 00:00:11.076 align:middle So, put the start just insert the body tag... 00:00:11.486 --> 00:00:14.576 align:middle and the end just inside the closing body tag. 00:00:17.876 --> 00:00:19.666 align:middle If we refresh homepage now... 00:00:20.046 --> 00:00:21.846 align:middle it's destroyed! 00:00:22.246 --> 00:00:24.956 align:middle The top nav and footer are gone. 00:00:25.476 --> 00:00:27.266 align:middle Why did I do this? 00:00:27.466 --> 00:00:29.336 align:middle Because I love chaos! 00:00:29.626 --> 00:00:33.986 align:middle Kidding - I did it just because it gives us the power inside layouts 00:00:34.276 --> 00:00:41.006 align:middle to create totally custom pages: even pages without the traditional navigation and footer, 00:00:41.376 --> 00:00:44.916 align:middle maybe like a temporary landing page for a promotion. 00:00:45.276 --> 00:00:50.856 align:middle But let's be honest, 99% of the time, we will want the nav and footer. 00:00:51.676 --> 00:00:55.186 align:middle No problem, head back over to base.html.twig. 00:00:56.186 --> 00:00:59.596 align:middle Remember: adding blocks give us more flexibility. 00:00:59.806 --> 00:01:06.536 align:middle So, above the navigation, add a new block called nav, with endblock after. 00:01:09.036 --> 00:01:11.966 align:middle Then, down here, another called footer... 00:01:13.406 --> 00:01:14.706 align:middle and endblock. 00:01:15.676 --> 00:01:17.826 align:middle I bet you know what I'll do next. 00:01:18.376 --> 00:01:24.456 align:middle In the layout admin, we can now add a Twig block to the top that renders navigation... 00:01:27.536 --> 00:01:29.556 align:middle then one down here on the bottom. 00:01:30.256 --> 00:01:32.536 align:middle It doesn't need to be in this last zone... 00:01:32.536 --> 00:01:33.756 align:middle but it makes sense there. 00:01:34.726 --> 00:01:35.646 align:middle Render footer. 00:01:36.806 --> 00:01:37.436 align:middle Let's try it! 00:01:37.546 --> 00:01:40.436 align:middle Hit "publish and continue editing" and... 00:01:40.716 --> 00:01:44.416 align:middle refresh. We are back! 00:01:45.246 --> 00:01:50.066 align:middle Let's create a second layout, this time for the /recipes page. 00:01:50.066 --> 00:01:55.986 align:middle If you look at RecipeController, you'll see that I already did all the work to query 00:01:55.986 --> 00:01:58.926 align:middle for the recipes, and pass them into this template. 00:01:59.226 --> 00:02:05.636 align:middle And in that template, we loop over them and render each one, including pagination. 00:02:06.206 --> 00:02:09.016 align:middle And so, we are definitely going to want to include all 00:02:09.016 --> 00:02:11.366 align:middle of this custom work in the new layout. 00:02:11.986 --> 00:02:14.896 align:middle Back on the admin area, I'll hit "publish layout" 00:02:15.226 --> 00:02:18.016 align:middle as an easy way to get back to the layout list. 00:02:18.606 --> 00:02:25.016 align:middle Then hit new layout, I'll choose my favorite layout 2 and call it "Recipes List Layout". 00:02:25.016 --> 00:02:30.796 align:middle Just to start, Add a new block called "Full View"... 00:02:31.046 --> 00:02:35.136 align:middle drag it anywhere onto the page, whoops! 00:02:35.206 --> 00:02:35.686 align:middle There we go. 00:02:36.446 --> 00:02:38.516 align:middle What is this "Full View". 00:02:38.976 --> 00:02:42.436 align:middle It's nothing special, in fact, it's kind of redundant! 00:02:42.786 --> 00:02:47.796 align:middle It's nothing more than a "Twig block" that renders the block called body, 00:02:48.226 --> 00:02:53.116 align:middle which we could have easily added by using the normal Twig block. 00:02:53.116 --> 00:02:56.206 align:middle Ok, publish this layout... 00:02:57.016 --> 00:02:58.846 align:middle then go to "Layout Mappings". 00:02:59.976 --> 00:03:00.886 align:middle Add a new one... 00:03:01.546 --> 00:03:03.486 align:middle and this time I'll link it first... 00:03:03.796 --> 00:03:05.776 align:middle to "Recipes List Layout". 00:03:07.276 --> 00:03:08.586 align:middle Then click "Details". 00:03:09.636 --> 00:03:13.056 align:middle Like last time, we could map this via the route name. 00:03:13.406 --> 00:03:20.406 align:middle But to see something different, use "Path Info", which, again, is just a fancy word for the URL, 00:03:20.406 --> 00:03:22.556 align:middle but without any query parameters. 00:03:23.376 --> 00:03:25.256 align:middle Make it match /recipes... 00:03:25.256 --> 00:03:29.466 align:middle "Save Changes" and... 00:03:30.936 --> 00:03:33.296 align:middle sweet! When we try the page... 00:03:33.746 --> 00:03:35.386 align:middle it looks awesome! 00:03:35.666 --> 00:03:39.326 align:middle Except, whoops, I forgot the nav and footer! 00:03:40.026 --> 00:03:43.706 align:middle Adding those two blocks to "Recipe List Layout" is easy. 00:03:44.256 --> 00:03:51.806 align:middle But what if, later we decide that every page should render both the navigation block on top 00:03:52.056 --> 00:03:56.996 align:middle as well as a dynamic banner, maybe for some sale that we're having right now. 00:03:57.616 --> 00:04:03.666 align:middle If that happened, we would need to edit every layout to manually add that new banner. 00:04:03.666 --> 00:04:09.226 align:middle Fortunately, there's a better way to handle repeated layout elements like this. 00:04:10.376 --> 00:04:12.856 align:middle Hit "Discard" to get back to the layouts list, 00:04:13.106 --> 00:04:16.676 align:middle then click "Shared Layouts" and "New Shared Layout". 00:04:17.916 --> 00:04:22.766 align:middle As usual, the layout type doesn't matter much, so I'll use my normal... 00:04:22.766 --> 00:04:25.166 align:middle then call it "Nav and Footer Layout". 00:04:26.046 --> 00:04:30.376 align:middle This is not going to be a real layout that's linked to any pages. 00:04:30.916 --> 00:04:35.476 align:middle Nope, it's just going to be a layout that we steal pieces from. 00:04:35.606 --> 00:04:40.516 align:middle So up in the top zone, create a Twig Block that renders navigation... 00:04:41.046 --> 00:04:44.526 align:middle and I'll even label it "Top Nav" to make it more clear. 00:04:45.146 --> 00:04:50.016 align:middle And then, anywhere in any other zone here - you can put it at the bottom, but you don't have to, 00:04:50.406 --> 00:04:54.556 align:middle add another twig block that renders footer and is labeled Footer. 00:04:55.486 --> 00:04:57.466 align:middle Cool! Hit "Publish Layout". 00:04:57.466 --> 00:05:00.736 align:middle So now we have one shared layout. 00:05:01.146 --> 00:05:07.996 align:middle These are not meant to be mapped to page: they're just meant for us to use in other real. 00:05:09.096 --> 00:05:11.566 align:middle Check it out: edit "Recipe List Layout". 00:05:12.396 --> 00:05:16.816 align:middle On the bottom left of the screen, hiding behind the web debug toolbar - 00:05:17.086 --> 00:05:22.756 align:middle I'll close that temporarily - there's a button to link a zone with a shared layout zone. 00:05:23.216 --> 00:05:27.426 align:middle Click that, then select the top zone, called the "Header" zone... 00:05:27.506 --> 00:05:29.366 align:middle though that name isn't important. 00:05:30.076 --> 00:05:33.166 align:middle Now, we can find a shared zone from a shared layout... 00:05:33.446 --> 00:05:34.986 align:middle and we only have one. 00:05:35.626 --> 00:05:37.356 align:middle Hit "Select Zone" and... 00:05:37.476 --> 00:05:38.206 align:middle that's it! 00:05:38.506 --> 00:05:43.656 align:middle The top zone in our layout will now equal whatever block or blocks are 00:05:43.656 --> 00:05:46.566 align:middle in the top zone of that shared layout. 00:05:47.016 --> 00:05:50.006 align:middle If we added more stuff to that zone in the shared layout, 00:05:50.376 --> 00:05:52.356 align:middle it would automatically show up here. 00:05:53.116 --> 00:05:58.346 align:middle Do that one more time, select the last zone so that the footer definitely shows 00:05:58.346 --> 00:06:01.806 align:middle up at the bottom, select the shared zone and... 00:06:02.076 --> 00:06:08.606 align:middle done! Publish that, move over, refresh and... 00:06:09.176 --> 00:06:11.436 align:middle the full page is back! 00:06:12.176 --> 00:06:15.506 align:middle Let's go quickly repeat that for the "Homepage Layout". 00:06:16.276 --> 00:06:22.046 align:middle Oh, but now this is tricky because I put all of my blocks inside this top zone. 00:06:22.706 --> 00:06:29.266 align:middle Mostly, these zones don't matter, but in this case, to avoid replacing all of this, 00:06:29.636 --> 00:06:34.096 align:middle I'll drag everything except for the navigation twig block down here. 00:06:36.036 --> 00:06:38.456 align:middle We can fix the order later if we want to. 00:06:38.456 --> 00:06:42.206 align:middle And now, set the top zone to use the one from the shared layout. 00:06:43.436 --> 00:06:46.386 align:middle Yup! It replaced what we had there before. 00:06:47.016 --> 00:06:50.506 align:middle And then, down here, also link the bottom zone with the shared layout. 00:06:52.236 --> 00:06:55.786 align:middle Perfect! Let's check our order of things... 00:06:55.946 --> 00:06:58.416 align:middle which is kind of the beauty of layouts. 00:06:58.736 --> 00:07:03.106 align:middle If I don't like the order of what's on my page, I can always change it. 00:07:03.846 --> 00:07:04.426 align:middle That's better. 00:07:04.926 --> 00:07:10.106 align:middle Publish the layout, head back to the homepage on the frontend and... 00:07:10.416 --> 00:07:11.186 align:middle beautiful! 00:07:11.856 --> 00:07:17.056 align:middle Next: let's make our recipe list page more flexible by allowing this top h1 area 00:07:17.056 --> 00:07:22.086 align:middle to be built and customized from inside layouts... 00:07:22.086 --> 00:07:24.616 align:middle instead of it being hardcoded in the template.