WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.046 --> 00:00:04.516 align:middle Our "item" template for skills is now being used! 00:00:04.716 --> 00:00:06.326 align:middle So, let's finish it! 00:00:07.006 --> 00:00:09.896 align:middle We already know what we want the skills to look like... 00:00:10.116 --> 00:00:15.356 align:middle so let's go steal that from templates/main/homepage.html.twig. 00:00:16.496 --> 00:00:22.076 align:middle Find the featured_skills block, copy what one of those skills looks like, 00:00:22.336 --> 00:00:25.636 align:middle and paste that into skill.html.twig. 00:00:26.696 --> 00:00:29.896 align:middle Let's also add dump(item.object) at the top. 00:00:30.766 --> 00:00:38.126 align:middle We've created an item template before, so we know item.object should give us the underlying 00:00:38.216 --> 00:00:41.416 align:middle "object" that represents this Contentful entry. 00:00:42.216 --> 00:00:43.596 align:middle If we head over and refresh... 00:00:44.176 --> 00:00:48.036 align:middle awesome! This dumps a ContentfulEntry object. 00:00:48.346 --> 00:00:55.436 align:middle And, though you can't see it from here, this class has a get() method we can use to read any 00:00:55.436 --> 00:00:57.916 align:middle of the underlying data from Contentful. 00:00:58.836 --> 00:01:01.416 align:middle For skills, if we dig a little... 00:01:01.646 --> 00:01:04.716 align:middle we have fields like title and shortDescription. 00:01:05.616 --> 00:01:06.766 align:middle Let's use those! 00:01:07.376 --> 00:01:12.646 align:middle For example, in the <h3>, say {{ item.object.get('title') }}. 00:01:12.786 --> 00:01:13.316 align:middle And... yup! 00:01:16.576 --> 00:01:18.636 align:middle That rendered the title. 00:01:18.636 --> 00:01:26.086 align:middle For the <img src="">, replace the asset() stuff with item.object.get('image'), 00:01:26.986 --> 00:01:32.256 align:middle followed by .file.url, which is specific to Contentful. 00:01:33.046 --> 00:01:37.916 align:middle Also fill in the alt attribute with item.object.get('title'). 00:01:39.376 --> 00:01:42.566 align:middle The last thing we need to update is the URL. 00:01:42.916 --> 00:01:48.146 align:middle But, hmm. If we had created a "skill show" page in Symfony, 00:01:48.276 --> 00:01:52.346 align:middle we could use the Twig path function and link to that route! 00:01:52.756 --> 00:02:00.586 align:middle However, each skill page is actually created via a dynamic route thanks to the Contentful bundle. 00:02:00.986 --> 00:02:06.746 align:middle And, to create those routes, it's using the CMF routing system. 00:02:07.176 --> 00:02:10.886 align:middle So, to link, we need to use that system. 00:02:11.256 --> 00:02:20.636 align:middle Say path('cmf_routing_object') and pass _route_object set to item.object. 00:02:21.426 --> 00:02:27.676 align:middle If you were using Sylius or Ibexa CMS, you would use some function from their system 00:02:27.676 --> 00:02:32.146 align:middle to create this link: this is specific to the CMF routing system. 00:02:32.146 --> 00:02:34.496 align:middle If we head over and try that... 00:02:35.706 --> 00:02:38.696 align:middle yes! And if we click on it... 00:02:40.046 --> 00:02:40.996 align:middle double yes! 00:02:41.506 --> 00:02:43.596 align:middle Let's celebrate by removing the dump()... 00:02:43.596 --> 00:02:48.556 align:middle and deleting the featured_skills block from our homepage template. 00:02:48.956 --> 00:02:51.346 align:middle We won't need that at all anymore. 00:02:51.846 --> 00:02:56.136 align:middle We can even remake this <h2> inside of the layouts admin. 00:02:56.276 --> 00:03:06.696 align:middle Let's do that: add a Title block called "Featured Skills", make that "Heading 2"... 00:03:07.076 --> 00:03:12.786 align:middle and give it that same CSS class: text-center mb-4. 00:03:13.656 --> 00:03:15.646 align:middle The Grid is already in a container... 00:03:15.826 --> 00:03:18.296 align:middle but we want all of this in a container. 00:03:18.336 --> 00:03:27.086 align:middle So add a Column, wrap that in a Container, move the Grid and Title blocks inside of it... 00:03:27.086 --> 00:03:30.326 align:middle then we won't need a Container right there anymore. 00:03:32.806 --> 00:03:34.826 align:middle Delete the "Features Skills block"... 00:03:35.946 --> 00:03:39.166 align:middle then finally hit "Publish and continue editing". 00:03:40.206 --> 00:03:44.106 align:middle While we're waiting, delete that block also from the Twig template. 00:03:44.596 --> 00:03:45.526 align:middle And now... 00:03:47.376 --> 00:03:50.026 align:middle yes! It looks perfect! 00:03:50.756 --> 00:03:55.846 align:middle Okay, while we're talking about item views, let's customize the item template 00:03:55.896 --> 00:04:00.526 align:middle for our other content model inside of Contentful: Advertisement. 00:04:01.316 --> 00:04:07.996 align:middle We're only rendering that in one place, on a specific skill page right over... 00:04:07.996 --> 00:04:10.176 align:middle here. Let's go check that out. 00:04:10.976 --> 00:04:12.126 align:middle Publish this layout... 00:04:12.616 --> 00:04:15.156 align:middle then edit the individual skill layout. 00:04:16.436 --> 00:04:19.886 align:middle Earlier, we used the Contentful Entry Field block 00:04:19.886 --> 00:04:24.106 align:middle to render the advertisements field, which is a "referenced entity". 00:04:25.416 --> 00:04:30.416 align:middle Yup, if you modify a skill in Contentful, down on the bottom, 00:04:30.576 --> 00:04:35.636 align:middle the "Advertisement" field allows you to choose from the Advertisements in our system. 00:04:37.006 --> 00:04:39.416 align:middle Click on the Twig icon of the web debug toolbar... 00:04:39.736 --> 00:04:42.586 align:middle search for "item", and scroll down.. 00:04:43.596 --> 00:04:48.156 align:middle No surprise: it's using the standard Contentful "item" template. 00:04:48.636 --> 00:04:52.796 align:middle And, good new, we already know how to override that. 00:04:53.806 --> 00:04:55.386 align:middle Head over to our configuration, 00:04:56.266 --> 00:05:00.966 align:middle copy contentful_entry/skill section, and paste it below. 00:05:00.966 --> 00:05:04.526 align:middle Then replace skill with ad for the section name, 00:05:04.526 --> 00:05:09.036 align:middle template and finally set the content_type to advertisement... 00:05:09.146 --> 00:05:13.166 align:middle because that's the internal name of that type in Contentful. 00:05:14.116 --> 00:05:16.196 align:middle Ok! Let's go add that template. 00:05:17.106 --> 00:05:21.846 align:middle In contentful_entry, create a new file called ad.html.twig... 00:05:22.286 --> 00:05:25.606 align:middle and then just add some text: Advertisement. 00:05:27.076 --> 00:05:28.666 align:middle Moment of truth. 00:05:29.076 --> 00:05:31.016 align:middle Head back over, refresh... 00:05:33.976 --> 00:05:34.796 align:middle we got it! 00:05:35.046 --> 00:05:36.496 align:middle That was easy! 00:05:36.916 --> 00:05:40.926 align:middle For the real template contents, I'll just paste some in. 00:05:41.646 --> 00:05:46.756 align:middle Once again, we'll use item.object.get() to read the url field. 00:05:47.376 --> 00:05:51.206 align:middle There's also an image field and a shortText field. 00:05:52.406 --> 00:05:53.336 align:middle And now... 00:05:54.316 --> 00:05:55.696 align:middle we've got it! 00:05:56.616 --> 00:06:00.266 align:middle Next: What if we wanted to create a Grid of items on our site, 00:06:00.266 --> 00:06:05.596 align:middle but make that one Grid look different than every other grid on the site? 00:06:06.096 --> 00:06:11.396 align:middle We can do that by creating an extra "block view" for an existing block.