WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.016 --> 00:00:04.586 align:middle Time to create the Recipe item view for the frontend. 00:00:05.246 --> 00:00:07.406 align:middle This starts almost exactly the same. 00:00:07.856 --> 00:00:09.906 align:middle In fact, copy the admin config... 00:00:10.106 --> 00:00:12.286 align:middle then paste. 00:00:12.286 --> 00:00:16.816 align:middle In Layouts, we know that the app key means the "admin" section. 00:00:17.216 --> 00:00:21.856 align:middle And, it turns out, default is used to mean the frontend. 00:00:22.746 --> 00:00:27.066 align:middle Once again, this internal name isn't important, for the template, 00:00:27.066 --> 00:00:29.356 align:middle use the same path but frontend... 00:00:29.886 --> 00:00:32.136 align:middle and keep match exactly the same. 00:00:32.716 --> 00:00:35.536 align:middle I love when things are boring and easy! 00:00:36.196 --> 00:00:37.366 align:middle Let's go create that template. 00:00:38.406 --> 00:00:41.386 align:middle In nglayouts/, make the frontend/ directory... 00:00:42.736 --> 00:00:46.326 align:middle and inside, recipe_item.html.twig. 00:00:47.426 --> 00:00:52.126 align:middle Layouts will pass this the same variables as the admin item template. 00:00:52.696 --> 00:00:59.236 align:middle This means we can, once again, use item.object to access our Recipe object. 00:00:59.846 --> 00:01:02.396 align:middle Let's print the name key to see if things are working. 00:01:03.716 --> 00:01:06.696 align:middle And... they are working. 00:01:06.846 --> 00:01:08.066 align:middle It's alive! 00:01:08.686 --> 00:01:13.596 align:middle One of my favorite things to do when I start working with templates inside Layouts is 00:01:13.596 --> 00:01:16.276 align:middle to click the Twig item on the web debug toolbar. 00:01:16.946 --> 00:01:20.836 align:middle Here, we can actually see how Layouts is rendering. 00:01:21.616 --> 00:01:25.726 align:middle Yup, it renders layout_2.html.twig... 00:01:26.056 --> 00:01:28.326 align:middle then starts rendering each zone. 00:01:28.896 --> 00:01:35.606 align:middle It renders our navigation block, the hero block, then, eventually down here, the grid. 00:01:36.546 --> 00:01:41.746 align:middle You can see it's using grid/3_columns.html.twig. 00:01:42.436 --> 00:01:45.506 align:middle This is something we can control in the admin area. 00:01:46.436 --> 00:01:47.226 align:middle Click the grid. 00:01:48.486 --> 00:01:51.586 align:middle On the right, we're looking at the "Content" tab. 00:01:51.926 --> 00:01:54.136 align:middle But there's also a "Design" tab. 00:01:54.966 --> 00:01:56.926 align:middle Change this to 4 columns... 00:01:57.346 --> 00:01:59.766 align:middle and I'll hit "publish and continue editing". 00:02:01.206 --> 00:02:04.816 align:middle If we refreshed now and reloaded the Twig profiler, 00:02:05.046 --> 00:02:09.026 align:middle we would see it rendering 4_columns.html.twig. 00:02:09.886 --> 00:02:11.126 align:middle Then, hey! 00:02:11.486 --> 00:02:16.716 align:middle Inside of each column, it renders our recipe_item.html.twig. 00:02:17.206 --> 00:02:22.156 align:middle This is just really cool to see, and we're going to look at this again later 00:02:22.406 --> 00:02:25.236 align:middle when we talk about overriding core templates. 00:02:26.416 --> 00:02:33.826 align:middle One thing I do need to mention is that our app is using Bootstrap version 4, not Bootstrap 5. 00:02:34.546 --> 00:02:41.386 align:middle The reason is because, right now, the grid template renders Bootstrap version 4 markup. 00:02:42.046 --> 00:02:46.906 align:middle If you wanted to use Bootstrap 5, that's totally possible, but you would need 00:02:46.906 --> 00:02:54.426 align:middle to override these columns templates - like 4_columns.html.twig - to tweak the classes. 00:02:55.296 --> 00:03:01.196 align:middle Overriding core templates is actually super easy, and we'll talk about how to do it soon. 00:03:01.976 --> 00:03:06.416 align:middle Ok, let's bring this frontend view to life! 00:03:06.536 --> 00:03:10.636 align:middle Open up the homepage template: main/homepage.html.twig... 00:03:11.146 --> 00:03:15.016 align:middle and scroll up to where we loop over the latest recipes. 00:03:15.916 --> 00:03:22.406 align:middle Perfect. What I basically want to do is steal the markup for one of these recipe tiles... 00:03:22.986 --> 00:03:25.676 align:middle then paste that into the frontend template. 00:03:26.616 --> 00:03:28.696 align:middle Now we just need to tweak some variables: 00:03:28.876 --> 00:03:33.996 align:middle instead of recipe.slug, it needs to be item.object.slug. 00:03:34.986 --> 00:03:37.826 align:middle I'll do a find and replace: replace recipe. 00:03:38.166 --> 00:03:40.496 align:middle with item.object.. 00:03:43.456 --> 00:03:45.826 align:middle Nice! Let's see if that worked. 00:03:46.376 --> 00:03:47.906 align:middle Move over, refresh... 00:03:48.206 --> 00:03:50.076 align:middle and it did! 00:03:50.306 --> 00:03:52.316 align:middle That looks like the frontend. 00:03:52.476 --> 00:03:53.826 align:middle We're awesome! 00:03:54.446 --> 00:03:58.126 align:middle Except, it's missing the "gutter" that we have in the original. 00:03:59.136 --> 00:04:00.216 align:middle Inspect element. 00:04:01.976 --> 00:04:06.646 align:middle Ah, the difference is that the original columns were inside 00:04:06.646 --> 00:04:10.216 align:middle of a container div, which adds the margin. 00:04:11.056 --> 00:04:14.406 align:middle In the new code, we are inside of a row... 00:04:14.746 --> 00:04:16.176 align:middle but not a container. 00:04:17.436 --> 00:04:24.456 align:middle To fix this in Layouts, let's add our favorite utility block: a column! 00:04:25.426 --> 00:04:27.176 align:middle Move the grid into that column. 00:04:27.756 --> 00:04:33.046 align:middle Then, we could add a CSS class like we did before in the hero area. 00:04:33.416 --> 00:04:37.846 align:middle But instead, take a shortcut and check "wrap in container". 00:04:38.606 --> 00:04:42.636 align:middle Hit "publish and continue editing" and refresh. 00:04:43.626 --> 00:04:45.006 align:middle Whoops - wrong page. 00:04:45.396 --> 00:04:47.416 align:middle Head back to the homepage and... 00:04:48.216 --> 00:04:49.416 align:middle it looks great! 00:04:49.736 --> 00:04:53.006 align:middle It's now inside of an element with a container class! 00:04:53.906 --> 00:05:00.556 align:middle This "wrap in container" is super handy: it literally adds an extra div around your block 00:05:00.716 --> 00:05:05.176 align:middle with class="container" and every block supports this. 00:05:05.716 --> 00:05:10.756 align:middle Heck, we didn't even need a column: we could have just checked the "wrap 00:05:10.756 --> 00:05:14.076 align:middle in container" on the grid itself. 00:05:14.196 --> 00:05:19.486 align:middle The only reason I put this inside of a column is so we can also add the 00:05:19.486 --> 00:05:21.766 align:middle "Latest Recipes" header there too. 00:05:23.086 --> 00:05:25.116 align:middle Drag a new "Title" block into the column. 00:05:25.696 --> 00:05:26.706 align:middle Get outta here Apple! 00:05:27.646 --> 00:05:34.476 align:middle Inside, type "Latest Recipes" and change to an h2. 00:05:34.476 --> 00:05:39.436 align:middle Hit our favorite "publish and continue editing", refresh and... 00:05:40.296 --> 00:05:41.676 align:middle even closer! 00:05:42.086 --> 00:05:43.906 align:middle We just need to center this... 00:05:44.116 --> 00:05:46.686 align:middle and maybe give it a little top margin. 00:05:47.866 --> 00:05:54.076 align:middle Add two classes to the title: text-center and my-5 for some vertical margin: 00:05:54.976 --> 00:05:56.926 align:middle both classes come from Bootstrap. 00:05:57.276 --> 00:06:02.076 align:middle I'm just repeating the classes that my designer was already using in the template. 00:06:03.236 --> 00:06:03.916 align:middle Publish that... 00:06:04.316 --> 00:06:06.266 align:middle and when we try it... 00:06:07.416 --> 00:06:09.516 align:middle it matches exactly. 00:06:09.716 --> 00:06:15.576 align:middle Woo! But now, we have full control over the recipes inside! 00:06:16.066 --> 00:06:22.216 align:middle We could change to a different query, change the number of items or, in a little while, 00:06:22.546 --> 00:06:27.036 align:middle we could choose to manually select the exact recipes to show. 00:06:27.716 --> 00:06:33.806 align:middle We can also now embed lists and grids of recipes anywhere we want on the site. 00:06:34.906 --> 00:06:39.146 align:middle To celebrate, remove the entire latest_recipes Twig block... 00:06:40.426 --> 00:06:46.786 align:middle and, up in MainController, delete the query, the variable, 00:06:48.006 --> 00:06:53.236 align:middle the repository argument and the use statement. 00:06:55.596 --> 00:07:02.186 align:middle When we refresh, we have just one "latest recipes" section coming from our dynamic block. 00:07:02.856 --> 00:07:09.426 align:middle Oh, but notice in the layouts admin, we're still rendering the latest_recipes block... 00:07:09.916 --> 00:07:12.576 align:middle even though it doesn't exist anymore! 00:07:13.236 --> 00:07:16.846 align:middle Layouts is pretty forgiving to admin users: 00:07:17.206 --> 00:07:20.656 align:middle instead of throwing an error, it simply renders nothing. 00:07:21.326 --> 00:07:22.886 align:middle But let's delete that... 00:07:23.336 --> 00:07:24.516 align:middle then publish... 00:07:25.646 --> 00:07:28.036 align:middle and take one last look. 00:07:28.896 --> 00:07:30.176 align:middle I love it! 00:07:31.446 --> 00:07:37.266 align:middle Next: now that we have this grid inside of layouts, we can do some cool stuff with it, 00:07:37.646 --> 00:07:40.646 align:middle like enabling Ajax-powered pagination.