WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.016 --> 00:00:03.336 align:middle Okay, team, things are looking good. 00:00:03.636 --> 00:00:09.656 align:middle We created a Recipe "value type", a custom query to load them, and a value converter 00:00:09.656 --> 00:00:13.416 align:middle to help layouts understand our Recipe objects. 00:00:14.036 --> 00:00:20.296 align:middle What we have not done yet is tell Layouts how to render a Recipe item, 00:00:20.696 --> 00:00:25.666 align:middle item being the word Layouts uses for the individual "things" 00:00:25.756 --> 00:00:27.906 align:middle that grid and list blocks render. 00:00:28.396 --> 00:00:34.566 align:middle And actually, we need to tell Layouts both how to render an admin version of a recipe item, 00:00:34.896 --> 00:00:40.406 align:middle which will show up here, as well as the more-important frontend version of the item. 00:00:41.216 --> 00:00:44.676 align:middle How an item is rendered is called an "item view". 00:00:45.376 --> 00:00:48.826 align:middle To add a new item view, we'll start in the config. 00:00:49.956 --> 00:00:55.876 align:middle Add a view key with item_view below it and app below that. 00:00:56.446 --> 00:01:01.836 align:middle I'll add a comment, because, in Layouts, app means "admin". 00:01:02.396 --> 00:01:09.916 align:middle So what we're about to define under the app key will be the admin view for our recipe item. 00:01:10.896 --> 00:01:12.596 align:middle Next, add recipes_app... 00:01:12.596 --> 00:01:17.856 align:middle with a little note to say that this key is not important. 00:01:18.856 --> 00:01:26.466 align:middle Unlike other things, such as latest_recipes, this internal key won't be used anywhere. 00:01:27.316 --> 00:01:29.796 align:middle Below, we need two important things. 00:01:30.126 --> 00:01:38.106 align:middle First, template - don't include the "s" like I did - set to a template path, like nglayouts - 00:01:38.406 --> 00:01:43.646 align:middle that's a standard directory name to use for templates, but you could use anything - then, 00:01:44.006 --> 00:01:48.446 align:middle how about /admin/recipe_item.html.twig. 00:01:49.686 --> 00:01:54.336 align:middle The second important thing is the very special match key. 00:01:55.186 --> 00:01:58.696 align:middle We need to tell Layouts that this is the template that should be used 00:01:58.926 --> 00:02:02.096 align:middle when a recipe item is being rendered. 00:02:02.916 --> 00:02:10.346 align:middle For example, imagine if we had two value types: recipes and also blog posts. 00:02:11.016 --> 00:02:15.966 align:middle Well, layouts would need to know that this is the template to use for recipes... 00:02:16.266 --> 00:02:19.916 align:middle but to use a different item template for blog posts. 00:02:20.966 --> 00:02:28.666 align:middle To do that, we'll use a strange syntax: item\value_type set to doctrine_recipe, 00:02:29.006 --> 00:02:33.816 align:middle where doctrine_recipe references the name of our value type up here. 00:02:35.136 --> 00:02:39.296 align:middle We're going to see this match key several more times in this tutorial. 00:02:40.046 --> 00:02:43.286 align:middle Layouts has a bunch of built-in "matchers", 00:02:43.746 --> 00:02:48.236 align:middle which are identified by strings like item\value_type. 00:02:48.996 --> 00:02:53.976 align:middle These are used to help match one piece of config, like this template, 00:02:54.136 --> 00:03:00.116 align:middle with some other piece of config, like the doctrine_recipe value type. 00:03:01.246 --> 00:03:04.676 align:middle There are a finite number of these matchers, 00:03:05.126 --> 00:03:08.226 align:middle and we're going to see the most important ones along the way. 00:03:08.656 --> 00:03:10.966 align:middle So don't worry too much about them. 00:03:11.946 --> 00:03:16.566 align:middle Oh, but let me fix my typo: this should be template with no "s". 00:03:17.666 --> 00:03:22.356 align:middle Anyways, I want to mention one quick thing about the view config key: 00:03:23.036 --> 00:03:27.576 align:middle there is only a small number of sub-keys that go under it. 00:03:28.276 --> 00:03:35.156 align:middle Find your terminal and run: php bin/console debug:config netgen_layouts view This will dump 00:03:35.156 --> 00:03:39.026 align:middle a huge list of config, but don't be overwhelmed! 00:03:39.536 --> 00:03:41.956 align:middle We'll check out the important parts of this later. 00:03:42.926 --> 00:03:45.566 align:middle What I want you to look at are the root keys 00:03:45.566 --> 00:03:50.086 align:middle that go below view, like block_view and layout_view. 00:03:51.316 --> 00:03:57.156 align:middle It turns out that there are six different keys you are allowed to put below the view key 00:03:57.246 --> 00:04:00.756 align:middle in your config, but we only care about two of them... 00:04:01.116 --> 00:04:03.506 align:middle which is why I'm mentioning this. 00:04:04.206 --> 00:04:08.166 align:middle When it comes to customizing your views, it's really quite simple! 00:04:08.816 --> 00:04:15.296 align:middle The first key we care about is item_view, which controls the templates used when rendering 00:04:15.476 --> 00:04:19.926 align:middle "items": so when rendering things inside of a grid or list. 00:04:20.936 --> 00:04:24.916 align:middle The only other sub-key we care about is block_view, 00:04:25.366 --> 00:04:30.006 align:middle which is how you configure the template used to render different block types, 00:04:30.296 --> 00:04:32.906 align:middle like the title block or the text block. 00:04:33.686 --> 00:04:38.986 align:middle Yup, you're either rendering a block and want to customize its template 00:04:39.426 --> 00:04:43.756 align:middle or you're rendering an item inside of a block and you want 00:04:43.756 --> 00:04:46.326 align:middle to customize the template for that item. 00:04:47.316 --> 00:04:52.876 align:middle So the configuration looks gigantic, but most of these things are internal 00:04:53.006 --> 00:04:54.826 align:middle and you'll never need to worry about them. 00:04:55.686 --> 00:05:01.936 align:middle Ok: we have our item_view for our doctrine_recipe for the admin area. 00:05:02.446 --> 00:05:03.706 align:middle Let's go add that template. 00:05:04.146 --> 00:05:09.956 align:middle In the templates/ directory, create two new sub-directories: nglayouts/admin. 00:05:09.956 --> 00:05:15.836 align:middle And then, a new file called recipe_item.html.twig. 00:05:16.936 --> 00:05:19.766 align:middle Inside, write Does it work? 00:05:20.146 --> 00:05:26.106 align:middle and... let's also use the dump() function so we can see what variables we have access to. 00:05:27.046 --> 00:05:31.446 align:middle Alright, head back to your browser, refresh the layouts admin and... 00:05:32.436 --> 00:05:33.936 align:middle it does work! 00:05:34.416 --> 00:05:38.556 align:middle And, apparently, we have access to several variables. 00:05:39.206 --> 00:05:41.326 align:middle The most important is item. 00:05:42.126 --> 00:05:45.806 align:middle This is a CmsItem object from Layouts... 00:05:46.116 --> 00:05:50.176 align:middle and it has a property called object set to our Recipe! 00:05:50.746 --> 00:05:51.966 align:middle Let's use that! 00:05:52.796 --> 00:05:58.406 align:middle say {{ item.object.name }}, then a pipe, and... 00:05:58.406 --> 00:06:05.246 align:middle let's also print a date: item.object.createdAt - one of the other properties 00:06:05.246 --> 00:06:10.666 align:middle on Recipe piped into the date filter with Y-m-d. 00:06:11.556 --> 00:06:12.196 align:middle Let's check it! 00:06:12.576 --> 00:06:17.246 align:middle Move over, refresh and... 00:06:17.686 --> 00:06:22.986 align:middle got it! You can make this fancier if you want, but that'll work for us. 00:06:23.686 --> 00:06:27.116 align:middle Next: let's create the frontend item view.