WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.016 --> 00:00:05.776 align:middle To get a layout, add a new do something tag at the top of show.html.twig: 00:00:09.036 --> 00:00:16.436 align:middle extends 'base.html.twig': This says that we want base.html.twig to be our base template. 00:00:17.056 --> 00:00:18.836 align:middle But where does that file live? 00:00:20.536 --> 00:00:23.766 align:middle Remember: all templates live in app/Resources/views. 00:00:24.166 --> 00:00:26.746 align:middle And look, there's base.html.twig. 00:00:26.866 --> 00:00:31.286 align:middle This little file actually came with Symfony and it's your's to customize. 00:00:31.286 --> 00:00:34.946 align:middle Refresh the browser after just this small change. 00:00:35.606 --> 00:00:41.196 align:middle Nice, a huge error A template that extends another one can't have a body... 00:00:41.326 --> 00:00:43.526 align:middle So what does that mean? 00:00:44.466 --> 00:00:47.776 align:middle In Twig, layouts work via template inheritance. 00:00:47.836 --> 00:00:55.726 align:middle Ooooh. The base.html.twig template is filled with blocks: The job of the child template is 00:00:55.726 --> 00:00:59.376 align:middle to define content that should go into each of these blocks. 00:00:59.376 --> 00:01:04.876 align:middle For example, if you want your child template - show.html.twig in this case - 00:01:04.876 --> 00:01:08.436 align:middle to put content inside this body block, you need to override it. 00:01:08.496 --> 00:01:12.746 align:middle If you want to replace the title, then you'll override the title block. 00:01:14.276 --> 00:01:18.036 align:middle Right now, our show.html.twig file is just barfing content. 00:01:19.036 --> 00:01:24.486 align:middle We're telling Twig we want to use base.html.twig, but it doesn't know where in 00:01:24.486 --> 00:01:26.466 align:middle that file this content should be placed. 00:01:27.386 --> 00:01:33.586 align:middle To fix this, wrap all of the content in a block: {% block body %}. 00:01:33.696 --> 00:01:37.036 align:middle At the end, close it with {% endblock %}: Oh, 00:01:37.416 --> 00:01:40.236 align:middle and the names of these blocks are not important at all. 00:01:40.696 --> 00:01:43.576 align:middle You can change them to whatever you want and can add as many as you need. 00:01:44.546 --> 00:01:47.416 align:middle With this fixed up, head back to the browser and refresh. 00:01:47.986 --> 00:01:53.466 align:middle Cool! It's the same page, but now it has a full html source. 00:01:53.596 --> 00:01:54.256 align:middle Bonus time! 00:01:54.866 --> 00:01:59.326 align:middle Once you have a full html page, the web debug toolbar makes an appearance. 00:01:59.956 --> 00:02:05.306 align:middle This is a killer feature in Symfony: it includes information about which route was matched, 00:02:05.526 --> 00:02:10.916 align:middle which controller was executed, how fast the page loaded, who is logged in and more. 00:02:11.756 --> 00:02:16.876 align:middle You can also click any of the icons to get even more detailed information in the profiler, 00:02:17.176 --> 00:02:21.986 align:middle including this amazing timeline that shows you exactly how long each part 00:02:21.986 --> 00:02:23.636 align:middle of your application took to render. 00:02:24.256 --> 00:02:26.916 align:middle This is amazing for debugging and profiling. 00:02:28.016 --> 00:02:33.426 align:middle There's also details in here on Twig, security, routes and other cool stuff. 00:02:33.426 --> 00:02:35.146 align:middle We'll keep exploring this as we go along. 00:02:36.146 --> 00:02:39.206 align:middle Ok, the title of the page - "welcome" - well, 00:02:39.386 --> 00:02:42.516 align:middle that's not terribly inspiring or accurate for this page. 00:02:43.116 --> 00:02:46.886 align:middle That comes from the base layout, but it's wrapped in a block called title. 00:02:47.436 --> 00:02:48.216 align:middle Let's override that! 00:02:49.406 --> 00:02:59.316 align:middle Add {% block title %}Genus {{ name }}{% endblock %}: The order of blocks doesn't matter: 00:02:59.606 --> 00:03:01.816 align:middle this could be above or below the body. 00:03:02.776 --> 00:03:04.006 align:middle Back to the browser and refresh! 00:03:04.946 --> 00:03:08.966 align:middle Ah ha! There's our new title -- not too shabby. 00:03:09.616 --> 00:03:11.726 align:middle That's it for Twig -- what's not to love?