WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.156 --> 00:00:05.836 align:middle So we just completely replaced our homepage with a dynamic layout. 00:00:06.216 --> 00:00:09.266 align:middle But, that's not really that interesting. 00:00:09.666 --> 00:00:15.006 align:middle What I really want to be able to do is use my existing homepage template 00:00:15.006 --> 00:00:21.096 align:middle and all this good content I've prepared: but then tweak it by adding little bits 00:00:21.096 --> 00:00:23.106 align:middle of dynamic content here and there... 00:00:23.306 --> 00:00:25.246 align:middle or even rearrange things. 00:00:25.946 --> 00:00:29.956 align:middle To do that in the layout, under the blocks, at the bottom, 00:00:30.186 --> 00:00:33.356 align:middle add a special one called "Twig Block"... 00:00:33.686 --> 00:00:35.776 align:middle and let's put that right below the title. 00:00:36.396 --> 00:00:41.126 align:middle Notice that you can put as many blocks as you want inside of a single zone. 00:00:41.416 --> 00:00:44.896 align:middle These zones don't really end up being all that important. 00:00:45.386 --> 00:00:50.516 align:middle Anyways, when you click a block, on the right side, you'll see that block's options. 00:00:50.946 --> 00:00:54.286 align:middle This has an important one called "Twig block name". 00:00:54.996 --> 00:01:01.476 align:middle Enter body to match the {% block body %} that we have in the template: Ok, 00:01:01.786 --> 00:01:03.716 align:middle hit "publish and continue editing"... 00:01:04.076 --> 00:01:06.876 align:middle then go over and refresh the homepage. 00:01:08.506 --> 00:01:10.416 align:middle Holy content batman! 00:01:10.556 --> 00:01:14.946 align:middle Our Twig content now lives inside this dynamic page. 00:01:15.116 --> 00:01:16.396 align:middle That's awesome! 00:01:16.666 --> 00:01:21.926 align:middle And everything still works: even the fancy "live component" in the center of the page. 00:01:22.726 --> 00:01:25.176 align:middle Okay, so this is cool... 00:01:25.316 --> 00:01:29.486 align:middle but it's still just a bunch of dynamic content on top... 00:01:29.746 --> 00:01:32.746 align:middle then Twig template content on the bottom: 00:01:32.996 --> 00:01:36.986 align:middle we can't really mix anything into the middle of our page. 00:01:37.466 --> 00:01:41.016 align:middle Unless... we add more blocks to our template. 00:01:41.016 --> 00:01:44.026 align:middle For example, keep the block body... 00:01:44.096 --> 00:01:48.336 align:middle just so the page keeps working even if we don't map a layout... 00:01:48.976 --> 00:01:55.186 align:middle but then add a {% block hero %} around the top section, a block called, how about, 00:01:55.186 --> 00:02:04.876 align:middle latest_recipes, {% endblock %}, another called subscribe_newsletter, {% endblock %} 00:02:04.876 --> 00:02:11.706 align:middle and a final one called featured_skills, {% endblock %}: If we stopped now, 00:02:12.016 --> 00:02:18.506 align:middle this would make no difference to our app: we're still rendering the body block down here... 00:02:18.736 --> 00:02:20.816 align:middle which includes all of those. 00:02:21.356 --> 00:02:24.536 align:middle But we just gave ourselves a lot of new power. 00:02:25.316 --> 00:02:28.896 align:middle Check it out: change the body block name to hero. 00:02:28.996 --> 00:02:31.746 align:middle And then let's add a few more Twig blocks. 00:02:35.076 --> 00:02:37.206 align:middle Render latest_recipes for this one. 00:02:38.156 --> 00:02:44.016 align:middle Oh, by the way, the block "labels" are just for us in the admin area: just for clarity. 00:02:44.616 --> 00:02:48.546 align:middle If I enter "Latest Recipes", that shows up above the block. 00:02:48.966 --> 00:02:50.116 align:middle Totally optional. 00:02:50.676 --> 00:02:56.536 align:middle Add two more blocks: one that renders subscribe_newsletter 00:02:58.906 --> 00:03:01.766 align:middle and finally one for featured_skills. 00:03:06.506 --> 00:03:10.356 align:middle Then, up here, I'm going to remove the title block for now. 00:03:10.946 --> 00:03:15.256 align:middle By the way, I'm using the word "block" to mean two different things at once. 00:03:15.656 --> 00:03:21.936 align:middle Blocks are the "things" we add to our layout - like a title, Google map, or list of items. 00:03:22.326 --> 00:03:26.296 align:middle But blocks also refer to the Twig blocks in our templates. 00:03:26.766 --> 00:03:30.056 align:middle And of course, one of the types of blocks we can add... 00:03:30.316 --> 00:03:31.786 align:middle is one that renders... 00:03:31.916 --> 00:03:32.696 align:middle Twig blocks. 00:03:32.836 --> 00:03:35.966 align:middle A little confusing - but that's as bad as it gets. 00:03:36.946 --> 00:03:39.596 align:middle Anyways, say "Publish and continue editing"... 00:03:40.046 --> 00:03:42.136 align:middle then go refresh the frontend. 00:03:42.566 --> 00:03:44.166 align:middle And... sweet! 00:03:44.506 --> 00:03:46.006 align:middle Our page works. 00:03:46.516 --> 00:03:52.856 align:middle I know, it looks exactly like it did a minute ago, but it's now being rendered by layouts... 00:03:52.856 --> 00:03:55.696 align:middle and we can rearrange the pieces! 00:03:56.206 --> 00:04:01.216 align:middle Watch: I'll move the subscribe_newsletter down to the bottom, hit "Publish 00:04:01.216 --> 00:04:04.726 align:middle and continue editing", refresh, and... 00:04:04.986 --> 00:04:09.516 align:middle boom! That static part of the page magically moved to the bottom. 00:04:09.766 --> 00:04:11.096 align:middle That is cool. 00:04:12.156 --> 00:04:14.136 align:middle Or, we could move that back up... 00:04:14.406 --> 00:04:20.616 align:middle then add some dynamic content, like text, in between one of the other blocks. 00:04:21.616 --> 00:04:27.106 align:middle Next, let's get even more aggressive and flexible by allowing the top navigation 00:04:27.106 --> 00:04:32.076 align:middle and bottom footer to be optional, but easy to add, inside the Layout.