WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.016 --> 00:00:05.016 align:middle The Grid of skills on the /skills page looks terrible. 00:00:05.416 --> 00:00:09.846 align:middle Let's go find the layout for that: Skills List Layout. 00:00:11.646 --> 00:00:14.046 align:middle Ok, so this is a normal Grid... 00:00:14.166 --> 00:00:17.136 align:middle and it renders like any other Grid on the site. 00:00:17.186 --> 00:00:23.986 align:middle I want to customize this, but I don't want the Grid block itself to render differently: 00:00:24.576 --> 00:00:27.346 align:middle having them tiled like this is great. 00:00:27.846 --> 00:00:32.336 align:middle What I really want is to change how each item inside the grid is rendered... 00:00:32.776 --> 00:00:35.386 align:middle but just in this one situation. 00:00:35.946 --> 00:00:36.966 align:middle How can we do that? 00:00:37.746 --> 00:00:42.256 align:middle Head over to your terminal and run our favorite debug:config command, 00:00:42.546 --> 00:00:47.536 align:middle this time looking at block_definitions: This is, as we learned, 00:00:47.746 --> 00:00:50.446 align:middle the config for all of the blocks in our system. 00:00:50.886 --> 00:00:51.936 align:middle And check this out! 00:00:52.246 --> 00:00:57.256 align:middle One piece of config we haven't talked about yet is item_view_types. 00:00:57.256 --> 00:01:05.126 align:middle For each "block view type", like one_by_two, list, or grid, there's also item_view_types. 00:01:05.176 --> 00:01:09.826 align:middle So far, all of these currently have a single one called Standard. 00:01:10.466 --> 00:01:16.326 align:middle It's not super common, but for a given view type - like one_by_two or list - 00:01:16.746 --> 00:01:21.926 align:middle you can specify multiple ways to render the items inside of that view type. 00:01:22.646 --> 00:01:24.986 align:middle Those are called item_view_types. 00:01:25.686 --> 00:01:30.696 align:middle Standard is the default, and it means the items will render in the "normal" way. 00:01:31.336 --> 00:01:39.236 align:middle So here's our goal: for the existing grid view type, we're going to add a new "item view type". 00:01:40.006 --> 00:01:44.356 align:middle On a high level, this will allow us, while configuring a grid, 00:01:44.646 --> 00:01:47.606 align:middle to choose a different way to render the items. 00:01:48.346 --> 00:01:52.056 align:middle To start, over in our configuration, find block_definitions. 00:01:52.866 --> 00:01:56.356 align:middle We currently have list, view_types, and one_by_two. 00:01:57.016 --> 00:02:01.936 align:middle Now add grid so we can override that existing view type. 00:02:02.616 --> 00:02:07.736 align:middle Add item_view_types with a new one called, how about, skill_big_view. 00:02:08.436 --> 00:02:10.466 align:middle You'll see how we use that key in a second. 00:02:11.116 --> 00:02:13.426 align:middle Also give this a human-readable name. 00:02:14.176 --> 00:02:15.776 align:middle What did that do? 00:02:16.316 --> 00:02:17.636 align:middle Refresh the admin area... 00:02:20.036 --> 00:02:21.196 align:middle click down on the Grid... 00:02:22.086 --> 00:02:24.386 align:middle and make sure you're on the "Design" tab. 00:02:25.306 --> 00:02:29.066 align:middle Hey! We have a new "Item view type" select! 00:02:29.566 --> 00:02:35.196 align:middle It shows "Standard", which is the default, then our new "Skills Big View"! 00:02:35.196 --> 00:02:39.056 align:middle Select it and hit "Publish and continue editing". 00:02:39.806 --> 00:02:43.346 align:middle What will this change on the frontend when we refresh? 00:02:43.996 --> 00:02:45.956 align:middle Absolutely nothing! 00:02:46.486 --> 00:02:51.366 align:middle That's because we now need a new "item view" that will match this. 00:02:52.246 --> 00:02:55.176 align:middle Back in our config, scroll down to item_views. 00:02:55.916 --> 00:03:02.446 align:middle Below default, copy the contentful_entry/skill section and paste it above. 00:03:03.316 --> 00:03:08.916 align:middle We're putting it above because order is important: we need this new item view 00:03:09.076 --> 00:03:11.496 align:middle to be able to match before the other one. 00:03:12.176 --> 00:03:17.626 align:middle Watch. Call this contentful_entry/skill_big_view and change the template 00:03:17.626 --> 00:03:24.516 align:middle to @nglayouts/item/contentful_entry /skill_big_view.html.twig. 00:03:25.246 --> 00:03:29.696 align:middle We still want to match when item\value_type is contentful_entry 00:03:30.076 --> 00:03:33.306 align:middle and contentful\content_type is skill... 00:03:33.716 --> 00:03:40.946 align:middle but only if the matcher called item\view_type equals the key we created 00:03:40.946 --> 00:03:43.116 align:middle earlier skill_big_view. 00:03:43.116 --> 00:03:50.056 align:middle Thanks to this, if the user selects this as their "Item View Type" for a grid of skills, 00:03:50.506 --> 00:03:53.566 align:middle then all three of these will match. 00:03:54.116 --> 00:04:00.036 align:middle But if the user chooses the default Standard item view type, it would not match this... 00:04:00.346 --> 00:04:02.916 align:middle but it still would match the one below. 00:04:02.916 --> 00:04:05.046 align:middle Let's go add the template. 00:04:05.546 --> 00:04:11.826 align:middle Inside item/contentful_entry/, create the new file: skill_big_view.html.twig. 00:04:12.546 --> 00:04:14.506 align:middle Inside, say BIG VIEW. 00:04:14.506 --> 00:04:16.246 align:middle Let's try it! 00:04:16.686 --> 00:04:18.406 align:middle Make sure the layout is published... 00:04:18.946 --> 00:04:20.456 align:middle then on the frontend... 00:04:21.506 --> 00:04:22.406 align:middle we got it! 00:04:22.836 --> 00:04:24.286 align:middle The rest is easy! 00:04:24.806 --> 00:04:27.656 align:middle Because we've already created several item view templates... 00:04:27.876 --> 00:04:29.696 align:middle I'll just paste in the rest. 00:04:30.016 --> 00:04:31.516 align:middle There's nothing new here. 00:04:32.236 --> 00:04:33.036 align:middle But now... 00:04:34.316 --> 00:04:36.956 align:middle yea! That is the look we're going for. 00:04:37.776 --> 00:04:42.176 align:middle By the way, now that our "Grid" block view has multiple "item view types" - 00:04:42.776 --> 00:04:46.626 align:middle that's our configuration up here - we have the power, 00:04:46.796 --> 00:04:50.006 align:middle on an item-by-item basis, to control that. 00:04:50.006 --> 00:04:52.906 align:middle See this "Override slot view type"? 00:04:53.476 --> 00:04:55.756 align:middle This basically says; Yo Layouts! 00:04:56.106 --> 00:05:02.036 align:middle I want to change whatever the first item in this list is to use the "Standard" view type. 00:05:02.746 --> 00:05:06.816 align:middle I'll hit "Publish and continue editing" and now... 00:05:08.146 --> 00:05:12.636 align:middle you can see that just the first item uses the Standard view type! 00:05:13.246 --> 00:05:20.006 align:middle That's... obviously not what we want on our site, so I'll go back and use "No overrides". 00:05:20.586 --> 00:05:23.746 align:middle But that is a very powerful concept. 00:05:24.576 --> 00:05:25.716 align:middle And... woh! 00:05:26.076 --> 00:05:28.286 align:middle Just one chapter left! 00:05:28.286 --> 00:05:32.616 align:middle One common problem with Layouts is working with vertical spacing: 00:05:33.046 --> 00:05:38.076 align:middle just making sure the spacing is correct between all of our components. 00:05:38.876 --> 00:05:43.576 align:middle We could control that by adding CSS classes to individual blocks. 00:05:44.146 --> 00:05:48.356 align:middle But wouldn't it be nice if every block in the system had a nice drop 00:05:48.356 --> 00:05:52.666 align:middle down where we could select the top and bottom margins automatically? 00:05:53.446 --> 00:05:59.406 align:middle How can we make a modification to an existing block, or even all blocks in our app? 00:06:00.146 --> 00:06:03.716 align:middle That's the job of a block plugin, and that's next.