WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.106 --> 00:00:03.686 align:middle Head to https://twig.symfony.com... 00:00:03.926 --> 00:00:06.366 align:middle and then click to check its documentation. 00:00:08.136 --> 00:00:09.886 align:middle There's lots of good stuff here. 00:00:10.196 --> 00:00:14.356 align:middle But what I want you to do is scroll down to the Twig reference. 00:00:14.546 --> 00:00:20.886 align:middle Yea! The first things to look at, on the left, are these things called tags. 00:00:21.466 --> 00:00:27.626 align:middle This list represents every possible thing you can use with the do something syntax. 00:00:28.286 --> 00:00:36.136 align:middle Yup, it will always be {% and then one of these things, like for or if. 00:00:36.666 --> 00:00:42.006 align:middle And honestly, you're only going to use about 5 of these on an everyday basis. 00:00:42.006 --> 00:00:47.666 align:middle If you want to know the syntax for one of these, just click to see its docs. 00:00:49.436 --> 00:00:54.236 align:middle In addition to the 20 tags, Twig also has something called filters. 00:00:54.426 --> 00:00:56.426 align:middle These are sweet. 00:00:56.636 --> 00:01:02.286 align:middle Filters are basically functions, but with a more hipster syntax. 00:01:02.996 --> 00:01:06.686 align:middle Twig does also have functions, but there are fewer: 00:01:07.196 --> 00:01:10.636 align:middle Twig really prefers filters: they're way cooler! 00:01:10.696 --> 00:01:14.386 align:middle For example, there's a filter called upper. 00:01:15.076 --> 00:01:19.126 align:middle Using a filter is like using the | key on the command line. 00:01:19.436 --> 00:01:25.496 align:middle You have some value - then you "pipe it into" the filter you want, like upper. 00:01:26.606 --> 00:01:28.036 align:middle Let's try this! 00:01:28.296 --> 00:01:33.006 align:middle Print track.artist|upper. 00:01:33.006 --> 00:01:33.856 align:middle And now... 00:01:34.556 --> 00:01:35.866 align:middle it's uppercase! 00:01:35.946 --> 00:01:42.846 align:middle If you want to confuse your coworkers, you can pipe that to lower... 00:01:43.206 --> 00:01:45.596 align:middle which sends things back to lowercase. 00:01:46.126 --> 00:01:51.186 align:middle There's no real reason to do this, but filters can be chained like this. 00:01:52.236 --> 00:01:57.386 align:middle Anyways, check out the filters list because there's probably something you'll find useful. 00:01:58.156 --> 00:02:00.136 align:middle And... that's pretty much it! 00:02:00.806 --> 00:02:06.586 align:middle Beyond functions, there's also something called "tests", which are handy in if statements: 00:02:07.206 --> 00:02:13.306 align:middle you can say things like "if number is divisibleby 5". 00:02:13.306 --> 00:02:17.366 align:middle Ok, just one more thing to learn about Twig, and it's cool. 00:02:18.216 --> 00:02:20.406 align:middle View the HTML source of the page. 00:02:21.606 --> 00:02:27.676 align:middle Notice that there is no HTML structure: there's no html, head or body tags. 00:02:28.146 --> 00:02:33.376 align:middle Literally the HTML that we have inside of our template, is what we get. 00:02:33.636 --> 00:02:34.726 align:middle Nothing more. 00:02:34.966 --> 00:02:36.336 align:middle So is there... 00:02:36.336 --> 00:02:41.996 align:middle some sort of layout system in Twig where we can add a base layout around us? 00:02:42.646 --> 00:02:43.636 align:middle Absolutely. 00:02:43.926 --> 00:02:45.456 align:middle And it's incredible. 00:02:45.806 --> 00:02:47.986 align:middle It's called template inheritance. 00:02:48.016 --> 00:02:54.676 align:middle If you have a template and you want that to use some base layout, at the very top of the file, 00:02:54.896 --> 00:02:58.396 align:middle use a "do something" tag called extends. 00:02:59.076 --> 00:03:03.696 align:middle Pass this the name of the layout file: base.html.twig. 00:03:04.566 --> 00:03:06.556 align:middle That's referring to this template right here. 00:03:07.566 --> 00:03:12.166 align:middle Before we check that out, if we try this now, yikes! 00:03:12.336 --> 00:03:18.046 align:middle Big error: A template that extends another cannot include content outside Twig blocks. 00:03:18.046 --> 00:03:22.566 align:middle To figure out what that means, open base.html.twig. 00:03:24.336 --> 00:03:26.476 align:middle This is your base layout file... 00:03:26.866 --> 00:03:30.756 align:middle and you're totally free to customize it however you want. 00:03:31.716 --> 00:03:32.476 align:middle Right now... 00:03:32.756 --> 00:03:35.686 align:middle it's mostly just boring HTML tags... 00:03:36.056 --> 00:03:39.806 align:middle except for a number of these "blocks". 00:03:39.806 --> 00:03:45.516 align:middle Blocks are basically "holes" into which a child template can place content. 00:03:46.226 --> 00:03:48.376 align:middle Let me explain that in a different way. 00:03:48.926 --> 00:03:54.566 align:middle When we say extends 'base.html.twig', that basically says: Yo Twig! 00:03:54.876 --> 00:04:00.836 align:middle When you render this template, I want you to actually render base.html.twig ... 00:04:01.096 --> 00:04:04.596 align:middle and then put my content inside of it. 00:04:05.226 --> 00:04:08.816 align:middle Twig then politely replies: Ok cool... 00:04:08.816 --> 00:04:09.696 align:middle I can do that. 00:04:10.146 --> 00:04:15.506 align:middle But where in base.html.twig do you want me to put all of your content? 00:04:15.916 --> 00:04:18.476 align:middle Do you want me to put it at the bottom of the page? 00:04:18.686 --> 00:04:19.356 align:middle At the top? 00:04:19.676 --> 00:04:21.556 align:middle Some random place in the middle? 00:04:22.416 --> 00:04:29.426 align:middle The way we tell Twig where to put our content within base.html.twig is by override a block. 00:04:30.636 --> 00:04:35.136 align:middle Notice that base.html.twig already has a block called body... 00:04:35.536 --> 00:04:39.856 align:middle and that's right where we want to put our template's HTML. 00:04:41.106 --> 00:04:47.466 align:middle To put it there, in our template, surround all of the content with {% block body %}... 00:04:47.466 --> 00:04:50.206 align:middle and then {% endblock %}. 00:04:50.206 --> 00:04:55.026 align:middle This is called template inheritance because we are overriding 00:04:55.026 --> 00:04:57.966 align:middle that body block with this new content. 00:04:59.036 --> 00:05:02.966 align:middle So now, when Twig renders base.html.twig... 00:05:03.456 --> 00:05:09.186 align:middle and it gets to this block body part, it's going to print the block body HTML 00:05:09.256 --> 00:05:13.396 align:middle from our template Watch: refresh and... 00:05:13.786 --> 00:05:15.646 align:middle the error is gone. 00:05:16.606 --> 00:05:21.286 align:middle And if you view the page source, we have a full HTML page! 00:05:22.246 --> 00:05:25.606 align:middle Oh, and the names of these blocks are not important. 00:05:26.016 --> 00:05:31.116 align:middle If you want to rename them after your favorite 90's sitcom character, do it. 00:05:31.116 --> 00:05:36.406 align:middle Just remember to also update its name in any child templates. 00:05:36.436 --> 00:05:38.526 align:middle You can also add more blocks. 00:05:38.886 --> 00:05:43.206 align:middle Every block you add is just another potential override point. 00:05:44.266 --> 00:05:48.556 align:middle Oh, and you may have noticed that blocks can have default content. 00:05:49.836 --> 00:05:53.056 align:middle Look at the page right now: the title says "Welcome". 00:05:53.606 --> 00:05:56.996 align:middle That's because the title block has default content... 00:05:57.396 --> 00:05:59.706 align:middle and we're not overriding it. 00:06:00.986 --> 00:06:03.966 align:middle Let's change the default title to "Mixed Vinyl". 00:06:04.486 --> 00:06:08.456 align:middle So now that will be the title of every page on our site... 00:06:08.976 --> 00:06:11.306 align:middle unless we override that. 00:06:12.286 --> 00:06:17.746 align:middle In our template, either above block body or below - the order of blocks doesn't matter - 00:06:18.266 --> 00:06:25.266 align:middle add {% block title %}, {% endblock %} and, in between "Create a new Record". 00:06:26.506 --> 00:06:27.416 align:middle And now... 00:06:28.116 --> 00:06:31.046 align:middle yes! This page has a custom title. 00:06:32.006 --> 00:06:37.356 align:middle Oh, and you might be wondering: What if I don't want to replace a block entirely.... 00:06:37.626 --> 00:06:40.636 align:middle but instead, I want to add to a block? 00:06:41.166 --> 00:06:42.536 align:middle That's totally possible. 00:06:43.196 --> 00:06:48.216 align:middle In base.html.twig, the title block is set to "Mixed Vinyl". 00:06:48.276 --> 00:06:53.386 align:middle If we wanted to prepend our custom title to that, 00:06:53.996 --> 00:06:58.816 align:middle we could say "Create a new Record" then use the "say something" tag 00:06:59.076 --> 00:07:01.816 align:middle to print a function called parent(). 00:07:02.436 --> 00:07:08.486 align:middle That does exactly what you'd expect: it finds the parent template's content for this block.. 00:07:08.716 --> 00:07:09.966 align:middle and prints it. 00:07:11.046 --> 00:07:12.196 align:middle Refresh and... 00:07:12.626 --> 00:07:14.446 align:middle that's so nice. 00:07:15.446 --> 00:07:21.686 align:middle If you're ever confused about how template inheritance works, it's useful, for me at least, 00:07:21.906 --> 00:07:26.546 align:middle to think about it exactly like object-oriented inheritance. 00:07:27.226 --> 00:07:31.986 align:middle Each template is like a class and each block is like a method. 00:07:32.066 --> 00:07:38.236 align:middle So the homepage "class" extends the base.html.twig "class", 00:07:38.326 --> 00:07:40.876 align:middle but overrides two of its methods. 00:07:41.666 --> 00:07:44.506 align:middle If that only confused you, don't worry about it. 00:07:44.506 --> 00:07:47.366 align:middle So... that's it for Twig. 00:07:47.836 --> 00:07:52.976 align:middle You're basically a Twig expert, which I'm told is a popular topic at parties. 00:07:53.916 --> 00:07:58.336 align:middle Next: one of the killer features of Symfony is its debugging tools. 00:07:58.886 --> 00:08:01.136 align:middle Let's get these installed and check 'em out.