WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.126 --> 00:00:03.836 align:middle Ok, let's see what Layouts is all about. 00:00:04.376 --> 00:00:09.356 align:middle In this chapter, we'll, step-by-step, create & use a "layout", 00:00:09.656 --> 00:00:13.276 align:middle learning exactly how Layouts works its magic along the way. 00:00:13.886 --> 00:00:19.796 align:middle To check out the Layouts admin section, head to /nglayouts/admin to find... 00:00:20.226 --> 00:00:21.846 align:middle a login form! 00:00:22.446 --> 00:00:25.386 align:middle The login form has nothing to do with the Layouts... 00:00:25.556 --> 00:00:30.486 align:middle it's just that the layouts admin area requires you to be logged in... 00:00:30.586 --> 00:00:33.676 align:middle and I've already added a login form to our site. 00:00:34.016 --> 00:00:36.156 align:middle There's even a user in the database! 00:00:36.796 --> 00:00:41.686 align:middle Log in with doggo@barkbite.com, password woof. 00:00:41.686 --> 00:00:43.266 align:middle And when we submit... 00:00:43.686 --> 00:00:45.196 align:middle access denied! 00:00:45.696 --> 00:00:49.876 align:middle No worries: click down on the web debug toolbar's security icon... 00:00:49.876 --> 00:00:51.556 align:middle and go to "Access Decision". 00:00:52.856 --> 00:00:59.686 align:middle Yup: we were denied access because it was looking for a role called ROLE_NGLAYOUTS_ADMIN. 00:01:00.376 --> 00:01:04.406 align:middle To access the layouts admin area, we need to have this role. 00:01:04.916 --> 00:01:10.256 align:middle The simplest way to add it is to go to config/packages/security.yaml. 00:01:10.846 --> 00:01:15.566 align:middle The user we're logged in as right now has ROLE_ADMIN. 00:01:15.796 --> 00:01:21.316 align:middle So, under role_hierarchy also give our user ROLE_NGLAYOUTS_ADMIN: 00:01:22.056 --> 00:01:25.806 align:middle And now if we click back, ta-da! 00:01:26.206 --> 00:01:28.686 align:middle Welcome to the layouts admin section! 00:01:29.296 --> 00:01:31.226 align:middle To understand what layouts does... 00:01:31.486 --> 00:01:33.526 align:middle it's best to see it in action. 00:01:33.906 --> 00:01:35.506 align:middle Start in this Layouts section... 00:01:35.726 --> 00:01:37.946 align:middle and click to create a new layout. 00:01:38.976 --> 00:01:42.796 align:middle This shows us about six different layout types we can choose from. 00:01:43.436 --> 00:01:49.296 align:middle As you'll see, these are much less important than they might seem at first, because, 00:01:49.406 --> 00:01:53.846 align:middle once you're in a layout, you can really do whatever you want, 00:01:54.036 --> 00:01:56.476 align:middle including floating things left and right. 00:01:57.056 --> 00:01:58.916 align:middle I typically choose "Layout 2". 00:01:59.646 --> 00:02:03.226 align:middle Call this "Homepage Layout" because I'm planning to use this on our homepage. 00:02:03.736 --> 00:02:06.796 align:middle And... welcome to the layout editor! 00:02:07.346 --> 00:02:11.266 align:middle Quick tour: these items on the left side are called "blocks", 00:02:11.456 --> 00:02:16.796 align:middle and there are many different types, from simple title blocks to Google maps... 00:02:16.966 --> 00:02:23.116 align:middle to more complex things like lists and grids where you can render dynamic collections 00:02:23.116 --> 00:02:25.426 align:middle of things, like featured recipes. 00:02:26.176 --> 00:02:30.896 align:middle The main things we "do" on this page is choose a block on the left... 00:02:30.896 --> 00:02:34.436 align:middle then drag it onto one of the "zones" in the middle. 00:02:35.076 --> 00:02:37.766 align:middle Grab a "Title" block and drag it somewhere onto the page... 00:02:37.886 --> 00:02:39.506 align:middle then give it some text. 00:02:41.076 --> 00:02:45.656 align:middle Cool! It's a modest start, but, good enough! 00:02:45.656 --> 00:02:48.106 align:middle In the upper right, hit "Publish Layout". 00:02:49.026 --> 00:02:53.206 align:middle And now that we have this new layout, open a second tab 00:02:53.206 --> 00:02:56.056 align:middle and go to the homepage to discover that... 00:02:56.606 --> 00:02:59.026 align:middle absolutely nothing changed! 00:02:59.526 --> 00:03:01.686 align:middle Let me actually rearrange my tabs. 00:03:02.126 --> 00:03:08.376 align:middle Anyways, nothing changed because, once you have a layout, you need to map it 00:03:08.376 --> 00:03:11.276 align:middle to a specific page or set of pages. 00:03:11.566 --> 00:03:14.436 align:middle That's the job of the layout mapping section. 00:03:15.166 --> 00:03:18.836 align:middle These are really the only two important sections in the admin area. 00:03:19.826 --> 00:03:23.026 align:middle Here, add a new mapping and then go to Details. 00:03:24.146 --> 00:03:28.836 align:middle There are multiple ways that you can map a layout to a specific URL. 00:03:29.276 --> 00:03:35.346 align:middle You could use, for example, the path info, which is a fancy term that means 00:03:35.346 --> 00:03:38.126 align:middle "the URL, but without query parameters". 00:03:38.626 --> 00:03:43.116 align:middle Or you could use a path info prefix - like use this layout 00:03:43.116 --> 00:03:46.416 align:middle for all URLs that start with "/products". 00:03:47.006 --> 00:03:51.256 align:middle Or you can even map a layout to a specific route name. 00:03:51.826 --> 00:03:52.626 align:middle Let's try that one. 00:03:52.916 --> 00:03:54.016 align:middle Hit "Add target". 00:03:54.416 --> 00:04:01.166 align:middle Then... let's go find our homepage route name: src/Controller/MainController.php. 00:04:01.166 --> 00:04:07.066 align:middle Here it is: app_homepage: Move back over, paste and hit "Save target". 00:04:07.066 --> 00:04:13.116 align:middle We're going to talk about other ways to map or "activate" a layout for pages later. 00:04:13.346 --> 00:04:16.806 align:middle But route and path info are the simplest and flexible. 00:04:17.016 --> 00:04:23.496 align:middle They say: If the current route or URL matches what we have here, use this layout. 00:04:24.216 --> 00:04:25.576 align:middle Hit save changes. 00:04:26.496 --> 00:04:31.646 align:middle To choose which layout goes with this mapping, hit "Link layout" 00:04:31.646 --> 00:04:34.236 align:middle and select the only one: "Homepage Layout". 00:04:34.726 --> 00:04:41.406 align:middle Awesome! So now when we go to the homepage, it should use the homepage layout. 00:04:41.856 --> 00:04:44.466 align:middle But... what does that even mean? 00:04:45.206 --> 00:04:46.036 align:middle Let's find out! 00:04:46.356 --> 00:04:47.596 align:middle Refresh and... 00:04:48.426 --> 00:04:50.596 align:middle we still don't see any difference! 00:04:50.816 --> 00:04:53.116 align:middle It's the same static page from Symfony! 00:04:53.706 --> 00:04:57.906 align:middle Oh, that's because we missed an important installation step. 00:04:58.166 --> 00:05:04.236 align:middle My bad! Go open the template for this page: templates/main/homepage.html.twig. 00:05:05.136 --> 00:05:11.436 align:middle Right now, we're extending base.html.twig: And that template, like usual, 00:05:11.576 --> 00:05:16.446 align:middle has a block called body in the middle: So it's a super traditional setup. 00:05:17.216 --> 00:05:24.866 align:middle Now, change the extends to a dynamic variable called nglayouts.layoutTemplate: 00:05:26.106 --> 00:05:26.946 align:middle Try the page again. 00:05:28.106 --> 00:05:30.326 align:middle Error! That's progress! 00:05:30.646 --> 00:05:33.376 align:middle It says: Base page layout, not specified. 00:05:33.716 --> 00:05:38.816 align:middle To render the page with Layouts, specify the base page layout with this config. 00:05:39.676 --> 00:05:42.006 align:middle This will all make more sense in a minute. 00:05:42.406 --> 00:05:47.466 align:middle What it wants us to do is open config/packages/ and create a new file - 00:05:47.696 --> 00:05:52.716 align:middle which can be called anything - but let's call it netgen_layouts.yaml. 00:05:53.856 --> 00:06:03.176 align:middle Inside, add netgen_layouts and, below that, pagelayout set to our base.html.twig: 00:06:03.976 --> 00:06:05.806 align:middle I'll explain this all in a minute. 00:06:06.466 --> 00:06:07.866 align:middle If we refresh now... 00:06:08.576 --> 00:06:09.726 align:middle huh, same error! 00:06:10.116 --> 00:06:13.056 align:middle It's possible Symfony didn't see my new config file... 00:06:13.226 --> 00:06:18.196 align:middle so let me clear the cache to be sure: And now... 00:06:18.866 --> 00:06:20.736 align:middle yes! It works! 00:06:21.186 --> 00:06:25.286 align:middle Except... it's still the same static page! 00:06:25.846 --> 00:06:30.586 align:middle But, for the first time, down on the web debug toolbar, 00:06:30.806 --> 00:06:35.236 align:middle it shows that the "Homepage Layout" is being used. 00:06:35.546 --> 00:06:38.596 align:middle So it realized the layout should be used... 00:06:38.816 --> 00:06:41.536 align:middle it just doesn't seem to be rendering it. 00:06:41.536 --> 00:06:45.536 align:middle To fix that, we need to do one last thing... 00:06:45.946 --> 00:06:51.276 align:middle then we'll back up and explain what's going on and how cool it is. 00:06:52.076 --> 00:06:57.726 align:middle In base.html.twig, around {% block body %}, add {% block layout %}... 00:06:57.726 --> 00:07:02.446 align:middle then after {% endblock %}: Refresh one more time. 00:07:02.866 --> 00:07:04.286 align:middle And... whoa! 00:07:04.556 --> 00:07:06.096 align:middle Our page is gone! 00:07:06.576 --> 00:07:09.046 align:middle Okay, we still have the nav and footer... 00:07:09.176 --> 00:07:15.326 align:middle which come from above and below the blocks in base.html.twig, but the actual contents 00:07:15.326 --> 00:07:20.396 align:middle of our page are gone and replaced by the dynamic title block! 00:07:20.876 --> 00:07:23.086 align:middle What Black Magic is this? 00:07:23.176 --> 00:07:28.986 align:middle First, before I explain, let me say that there are much faster ways to start 00:07:28.986 --> 00:07:32.096 align:middle with Netgen Layouts: they have starter projects 00:07:32.096 --> 00:07:37.086 align:middle for normal Symfony apps, Sylius apps and Ibexa CMS apps. 00:07:37.086 --> 00:07:41.406 align:middle But we did all this set up work manually on purpose... 00:07:41.796 --> 00:07:47.656 align:middle because I really want you to understand how Layouts works: it's surprisingly simple. 00:07:47.656 --> 00:07:53.126 align:middle First, our page is still hitting our normal route - app_homepage - 00:07:53.426 --> 00:08:00.036 align:middle and it's still executing our normal controller and still rendering our normal template. 00:08:00.306 --> 00:08:03.116 align:middle No magic there at all. 00:08:03.746 --> 00:08:07.726 align:middle But then, we extend nglayouts.layoutTemplate. 00:08:08.236 --> 00:08:10.306 align:middle What does that point to? 00:08:11.056 --> 00:08:14.866 align:middle If there is no layout mapped to a particular page, 00:08:15.296 --> 00:08:21.186 align:middle nglayouts.layoutTemplate will resolve to base.html.twig. 00:08:21.666 --> 00:08:27.936 align:middle That's thanks to the config we added here: But if layouts does find a layout mapping 00:08:27.936 --> 00:08:34.736 align:middle for this page, then nglayouts.layoutTemplate resolves to a core Layouts template. 00:08:35.426 --> 00:08:41.346 align:middle In this case, if you hit Shift+Shift, it's called layout2.html.twig... 00:08:41.486 --> 00:08:43.496 align:middle since we selected "Layout 2". 00:08:44.076 --> 00:08:51.896 align:middle This renders the dynamic layout via these nglayouts_render_zone tags: each of these refers 00:08:51.896 --> 00:08:55.616 align:middle to a different section - or "zone" - inside our layout. 00:08:57.476 --> 00:09:00.436 align:middle Anyways, what's really important is 00:09:00.436 --> 00:09:05.196 align:middle that it renders the layout into a Twig block called layout. 00:09:05.826 --> 00:09:14.466 align:middle It then extends ngLayouts.pageLayoutTemplate, which resolves to our base.html.twig. 00:09:15.186 --> 00:09:20.086 align:middle The end result is that our page renders completely normally 00:09:20.236 --> 00:09:23.456 align:middle and it still extends base.html.twig... 00:09:23.956 --> 00:09:30.976 align:middle but a block called layout has been added that holds the contents of the dynamic layout. 00:09:31.456 --> 00:09:34.616 align:middle That's why we didn't see any changes on the page at first. 00:09:35.106 --> 00:09:42.796 align:middle Until we actually included {% block layout %} in base.html.twig, the layout was loading... 00:09:42.896 --> 00:09:45.666 align:middle we just weren't rendering it anywhere. 00:09:45.666 --> 00:09:51.646 align:middle The takeaway is this: if you're on a page that does not map to a layout, 00:09:52.026 --> 00:09:55.236 align:middle everything is exactly the same as always. 00:09:55.866 --> 00:09:58.876 align:middle But if you are on a page that maps to a layout, 00:09:59.246 --> 00:10:05.456 align:middle it simply means that you now have a block called layout whose contents are equal 00:10:05.456 --> 00:10:08.436 align:middle to whatever you have inside of that layout. 00:10:08.436 --> 00:10:14.446 align:middle So as I mentioned earlier, we don't have to add layouts to every page on our site: 00:10:14.956 --> 00:10:17.976 align:middle we could add it to the homepage and be done! 00:10:18.586 --> 00:10:25.876 align:middle But every page that we want to support layouts needs to extend nglayouts.layoutTemplate. 00:10:26.476 --> 00:10:28.936 align:middle The nice thing is, even if we extend this, 00:10:29.316 --> 00:10:33.886 align:middle nothing happens unless we actually map a layout to this page. 00:10:33.936 --> 00:10:37.296 align:middle So, there's no downside to using it everywhere. 00:10:38.156 --> 00:10:47.536 align:middle I'll quickly update login.html.twig to use it: then list.html.twig and show.html.twig: 00:10:47.816 --> 00:10:49.716 align:middle I can really move fast when I need to! 00:10:50.496 --> 00:10:56.386 align:middle Back in the browser, the recipe list and recipe show pages still look the same... 00:10:56.686 --> 00:10:59.016 align:middle because no layout is resolved. 00:10:59.706 --> 00:11:03.286 align:middle But they're now ready to use layouts, if we want to. 00:11:03.966 --> 00:11:08.256 align:middle Now, as interesting as it is to dynamically control the content 00:11:08.256 --> 00:11:12.846 align:middle on the homepage, we uh, kind of did too much! 00:11:13.216 --> 00:11:15.596 align:middle All of our old content is gone. 00:11:16.146 --> 00:11:20.066 align:middle Is it possible to mix dynamic content with some 00:11:20.066 --> 00:11:23.376 align:middle of the static content from our homepage Twig template? 00:11:23.936 --> 00:11:25.016 align:middle Absolutely. 00:11:25.266 --> 00:11:28.286 align:middle And that's a big part of what makes layouts special. 00:11:28.986 --> 00:11:30.066 align:middle That's next.