WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.066 --> 00:00:05.846 align:middle The Contentful integration we just installed added two things to our site. 00:00:05.846 --> 00:00:11.556 align:middle First, it added a Layouts integration: new value types, query types, 00:00:11.596 --> 00:00:17.176 align:middle etc so that we can select our Contentful content in list and grid blocks. 00:00:17.556 --> 00:00:22.476 align:middle Second, it added the ability for every piece of content on Contentful 00:00:22.546 --> 00:00:25.596 align:middle to have its own URL and page on our site. 00:00:26.136 --> 00:00:29.826 align:middle The second part has nothing to do with Layouts. 00:00:29.926 --> 00:00:35.146 align:middle A minute ago, we used this handy dandy contentful:routes command to see 00:00:35.146 --> 00:00:39.526 align:middle that there should now be a page at the URL /mashing. 00:00:40.016 --> 00:00:46.866 align:middle When we went there, it didn't give us a 404 error, but it didn't exactly work. 00:00:47.296 --> 00:00:48.976 align:middle The page is nearly empty. 00:00:49.566 --> 00:00:50.746 align:middle Let's see what's going on. 00:00:51.256 --> 00:00:56.666 align:middle Click the Twig icon in the web debug toolbar to find out what templates are being rendered. 00:00:57.686 --> 00:00:58.836 align:middle Let's see here... 00:00:59.376 --> 00:01:00.836 align:middle if we go down a bit... 00:01:01.136 --> 00:01:05.456 align:middle it apparently renders @NetgenLayoutsContentful/contentful 00:01:05.456 --> 00:01:08.036 align:middle /content.html.twig. 00:01:08.496 --> 00:01:10.916 align:middle That must be the template for this page! 00:01:12.346 --> 00:01:13.606 align:middle Let's go check it out. 00:01:14.056 --> 00:01:17.896 align:middle I'll hit Shift+Shift and search for content.html.twig: 00:01:18.626 --> 00:01:21.296 align:middle we want the one from layouts-contentful. 00:01:22.516 --> 00:01:23.656 align:middle And... cool! 00:01:24.076 --> 00:01:27.066 align:middle This is the template that's rendering that page. 00:01:27.656 --> 00:01:30.166 align:middle It prints content.name... 00:01:30.446 --> 00:01:33.376 align:middle but we never actually see that. 00:01:34.156 --> 00:01:38.506 align:middle Ah, that's because it renders it into a block called content. 00:01:39.176 --> 00:01:42.656 align:middle This eventually extends base.html.twig... 00:01:43.016 --> 00:01:48.786 align:middle and since our base template never renders block content, we see nothing. 00:01:49.426 --> 00:01:55.206 align:middle Again, this part of Contentful where you get a URL that renders a controller, 00:01:55.506 --> 00:01:57.726 align:middle that then renders this template... 00:01:57.986 --> 00:02:00.216 align:middle has nothing to do with Layouts. 00:02:00.616 --> 00:02:06.696 align:middle It's just a nice way to expose every piece of Contentful content as a page on our site. 00:02:06.696 --> 00:02:14.366 align:middle So, unrelated to Layouts, if we wanted to, we could override this template 00:02:14.366 --> 00:02:16.806 align:middle in our app and customize it to work. 00:02:17.346 --> 00:02:21.896 align:middle We could change it to use block body and leverage this content variable, 00:02:22.206 --> 00:02:26.216 align:middle which represents the piece of content, to render all of the different fields. 00:02:26.796 --> 00:02:28.376 align:middle But... hold on a second. 00:02:28.856 --> 00:02:31.146 align:middle Isn't that the whole point of Layouts? 00:02:31.806 --> 00:02:37.686 align:middle Layouts lets us build pages dynamically, instead of writing them entirely in Twig. 00:02:38.546 --> 00:02:41.306 align:middle Right now, this page is not linked to a layout. 00:02:41.866 --> 00:02:46.726 align:middle But if we did link it, we could start building the page using data 00:02:46.726 --> 00:02:51.796 align:middle from the matching Contentful Skill, in this case, from the "Mashing" Skill. 00:02:52.706 --> 00:02:58.106 align:middle Head over to our admin section, publish that layout, and then create a new layout. 00:03:01.286 --> 00:03:03.466 align:middle I'll call it "Individual Skill Layout"... 00:03:03.936 --> 00:03:05.616 align:middle and choose "Layout 2". 00:03:06.676 --> 00:03:10.366 align:middle Eventually, we'll make this look more like "Layout 5"... 00:03:11.146 --> 00:03:14.556 align:middle but we can do that later via the column blocks. 00:03:15.206 --> 00:03:19.396 align:middle That's one of the reasons why I really like "Layout 2": it's simple enough, 00:03:19.616 --> 00:03:24.836 align:middle and we can make it more complex later with the tools we already have. 00:03:25.636 --> 00:03:27.156 align:middle Okay, start like normal. 00:03:27.546 --> 00:03:31.606 align:middle Close the web debug toolbar so we can link the header to the shared header... 00:03:34.636 --> 00:03:36.646 align:middle and our footer to the shared footer. 00:03:41.276 --> 00:03:48.746 align:middle Awesome. Then, just to get rolling, add a Title block, type something... 00:03:48.996 --> 00:03:50.546 align:middle then publish the layout. 00:03:53.836 --> 00:03:57.116 align:middle Next, we need to map this layout to that page. 00:03:57.206 --> 00:04:05.216 align:middle So far, we've mapped layouts either by the route name or the URL, also known as the "Path info". 00:04:05.946 --> 00:04:08.196 align:middle We could do that again here. 00:04:08.616 --> 00:04:15.846 align:middle But, as you'll see, what we really want to do is use this layout for all Skills pages. 00:04:16.816 --> 00:04:21.596 align:middle In a few minutes, we're going change the URL for these page from something 00:04:21.596 --> 00:04:26.426 align:middle like /mashing to /skills/mashing. 00:04:26.906 --> 00:04:31.436 align:middle When we do that (let me add a new mapping here and hit details), 00:04:32.696 --> 00:04:38.186 align:middle we could then use the "Path info prefix" to map this layout 00:04:38.186 --> 00:04:41.486 align:middle to any URL that starts with /skills/. 00:04:42.116 --> 00:04:49.076 align:middle But, one thing that can be added to Layouts is another way to map or resolve 00:04:49.166 --> 00:04:52.136 align:middle which layout should be used on which page. 00:04:52.776 --> 00:05:00.526 align:middle And, yea! The Contentful bundle added two new ones: Contentful Entry and Contentful Space. 00:05:01.356 --> 00:05:07.316 align:middle When we go to one of these Contentful pages, the dynamic route tells Symfony 00:05:07.356 --> 00:05:12.586 align:middle which Contentful Entry - that's the individual piece of content on Contentful - 00:05:12.926 --> 00:05:17.206 align:middle and which Contentful Space that this page maps to. 00:05:18.156 --> 00:05:23.866 align:middle Thanks to this, we can leverage one of these new targets to match the entry or space. 00:05:24.416 --> 00:05:29.606 align:middle For example, we could use Contentful Entry to map a specific layout 00:05:29.716 --> 00:05:32.406 align:middle to a specific item on Contentful. 00:05:32.986 --> 00:05:38.786 align:middle Literally, we could say: If the current Content is specifically this 00:05:38.786 --> 00:05:41.846 align:middle "Mashing" skill, then use this layout. 00:05:42.566 --> 00:05:48.206 align:middle Or, we could do what I'm going to do: map via the Contentful Space. 00:05:49.236 --> 00:05:51.976 align:middle We only have one Space, so it's pretty easy. 00:05:52.406 --> 00:05:57.606 align:middle Basically, we're saying: If we are on any dynamic Contentful page, 00:05:57.866 --> 00:06:00.486 align:middle I want you to map to this layout. 00:06:01.076 --> 00:06:02.066 align:middle Let's save this... 00:06:02.506 --> 00:06:05.736 align:middle then link this layout to the "Individual skill" layout. 00:06:07.286 --> 00:06:09.036 align:middle Hit "Confirm" and... 00:06:09.456 --> 00:06:12.616 align:middle good! Head over, refresh and... 00:06:13.076 --> 00:06:15.006 align:middle it works! Yes! 00:06:15.606 --> 00:06:19.966 align:middle As I mentioned earlier, we actually have two types of content 00:06:19.966 --> 00:06:24.286 align:middle in Contentful: Skills and Advertisements. 00:06:24.286 --> 00:06:28.396 align:middle Advertisements aren't meant to have their own page - only skills are. 00:06:28.856 --> 00:06:33.746 align:middle We're going to embed advertisements onto some existing pages a bit later. 00:06:34.416 --> 00:06:36.476 align:middle Head back to the layout linking details. 00:06:37.186 --> 00:06:42.136 align:middle In addition to the Contentful Space, we can go down here to a list of conditions 00:06:42.386 --> 00:06:45.086 align:middle and select "Contentful content types". 00:06:46.136 --> 00:06:49.716 align:middle Conditions are a way to make your matching more specific. 00:06:50.516 --> 00:06:51.506 align:middle Add that condition. 00:06:51.766 --> 00:06:57.066 align:middle And, this is a bit hard to see, but we can select "Skill" or "Advertisement". 00:06:58.256 --> 00:07:01.416 align:middle Select "Skill", save changes, and... 00:07:01.696 --> 00:07:08.696 align:middle sweet! Now this will only match if we go to a Contentful URL that is rendering a skill. 00:07:09.956 --> 00:07:14.366 align:middle At the command line, you can see that we do have one advertisement... 00:07:14.576 --> 00:07:16.576 align:middle it's this funny-looking URL. 00:07:17.176 --> 00:07:22.376 align:middle Yes, right now, the advertisement is available as a page on our site. 00:07:23.146 --> 00:07:24.876 align:middle We'll fix that in a few minutes. 00:07:25.406 --> 00:07:32.036 align:middle But, at the very least, if we went to that weird URL, the page would work... 00:07:32.286 --> 00:07:35.716 align:middle but wouldn't match any layout thanks to our mapping. 00:07:36.046 --> 00:07:38.076 align:middle So, it would basically be blank. 00:07:39.116 --> 00:07:42.666 align:middle So we now have control over Contentful pages. 00:07:42.876 --> 00:07:44.126 align:middle Cool! Though... 00:07:44.306 --> 00:07:47.256 align:middle all we're rendering is a manual title. 00:07:47.426 --> 00:07:54.886 align:middle Snooze. Next: Let's make our layout smarter by rendering real content from the matching skill.