WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.016 --> 00:00:05.496 align:middle We now have full control over how the Contentful pages render. 00:00:06.006 --> 00:00:12.016 align:middle That's thanks to the "Individual Skill layout" that we mapped to all Contentful "Skill" pages. 00:00:12.436 --> 00:00:16.866 align:middle But... all we have is this manual h1 title. 00:00:17.186 --> 00:00:22.766 align:middle How can we render the real data for whichever Contentful Skill we're viewing? 00:00:22.766 --> 00:00:29.346 align:middle First, on Contentful's site, if I navigate to "Content model" and click on "Skill", 00:00:29.896 --> 00:00:33.246 align:middle you can see that every Skill has 5 fields... 00:00:33.396 --> 00:00:35.816 align:middle and each field has an internal name. 00:00:36.276 --> 00:00:39.516 align:middle It's... almost easier to see this via the JSON preview. 00:00:40.476 --> 00:00:40.936 align:middle Here we go. 00:00:41.476 --> 00:00:47.286 align:middle So there's a "Title" field, it's internal name is title, "Short Description", "Technique", 00:00:47.776 --> 00:00:50.776 align:middle and a few other like "Image" and "Advertisement". 00:00:52.376 --> 00:00:56.866 align:middle Advertisement is actually a link to that other type of content. 00:00:57.736 --> 00:01:03.366 align:middle Anyways, what we really want to do up here is print the skill's title in the h1. 00:01:03.366 --> 00:01:10.376 align:middle Fortunately, that is possible, thanks to a new block type that the Contentful bundle added. 00:01:11.066 --> 00:01:14.246 align:middle It's here at the bottom: "Contentful entry field". 00:01:15.006 --> 00:01:17.656 align:middle This allows us to render a single field 00:01:17.726 --> 00:01:20.866 align:middle from whatever Contentful entry is currently being rendered. 00:01:21.566 --> 00:01:22.416 align:middle Let's try it! 00:01:22.496 --> 00:01:27.176 align:middle Then delete the old h1. 00:01:27.176 --> 00:01:31.886 align:middle The new block has one super important option: field identifier. 00:01:32.566 --> 00:01:35.576 align:middle Set that to the internal name of the field: title. 00:01:36.066 --> 00:01:38.806 align:middle And make this an h1. 00:01:38.806 --> 00:01:43.126 align:middle As usual, the block label is optional, but I'll include it. 00:01:44.386 --> 00:01:50.426 align:middle Cool! Hit publish and continue editing, move over and... 00:01:51.056 --> 00:01:53.016 align:middle yes! It's dynamic. 00:01:53.016 --> 00:02:02.266 align:middle If we go to the URL for some other skill, like /basic-chop, that works too! 00:02:02.336 --> 00:02:05.206 align:middle So let's get fancier. 00:02:05.616 --> 00:02:06.746 align:middle Add a column... 00:02:07.056 --> 00:02:08.806 align:middle and move this title inside. 00:02:10.236 --> 00:02:12.716 align:middle Can you guess what I'm about to do? 00:02:13.406 --> 00:02:17.666 align:middle Give the column that same hero-wrapper class that we used earlier. 00:02:18.096 --> 00:02:19.116 align:middle And you know what else? 00:02:19.476 --> 00:02:21.626 align:middle Each skill has a "Short description". 00:02:22.116 --> 00:02:24.816 align:middle Lets add another entry field block right below. 00:02:26.806 --> 00:02:30.186 align:middle Notice that one option for this block is "view type". 00:02:30.896 --> 00:02:35.766 align:middle We're going to talk more about that soon, but this should match the "type" of the content 00:02:35.856 --> 00:02:37.686 align:middle that you're pulling from Contentful. 00:02:38.346 --> 00:02:43.506 align:middle So far, both title and this shortDescription are "string" types. 00:02:43.986 --> 00:02:45.106 align:middle Leave this as div. 00:02:46.246 --> 00:02:47.106 align:middle Testing timer! 00:02:47.336 --> 00:02:49.206 align:middle Hit "Publish and continue editing". 00:02:49.596 --> 00:02:52.296 align:middle And... let's see how it looks. 00:02:52.296 --> 00:02:53.266 align:middle I love that! 00:02:53.876 --> 00:02:54.706 align:middle Let's add more! 00:02:55.396 --> 00:02:56.986 align:middle Every skill has an image. 00:02:57.446 --> 00:03:02.466 align:middle Inside of that same hero column, add another Contentful entry block at the bottom. 00:03:05.346 --> 00:03:06.786 align:middle This will be called image... 00:03:07.106 --> 00:03:09.996 align:middle and the type is "referenced assets". 00:03:11.146 --> 00:03:13.436 align:middle You do need to set a width and height. 00:03:13.866 --> 00:03:15.676 align:middle Let's do 200 by 200. 00:03:17.476 --> 00:03:18.146 align:middle Publish that... 00:03:19.706 --> 00:03:22.056 align:middle refresh and... 00:03:22.306 --> 00:03:23.976 align:middle we're on a roll! 00:03:24.316 --> 00:03:29.056 align:middle One last thing: rendering the skill content below everything. 00:03:29.786 --> 00:03:33.046 align:middle By the way, we could render this in the same zone... 00:03:33.146 --> 00:03:34.836 align:middle or use the zone below. 00:03:35.416 --> 00:03:37.566 align:middle Zones don't matter much in most case. 00:03:37.566 --> 00:03:41.376 align:middle But let's make this spot more interesting. 00:03:41.376 --> 00:03:46.236 align:middle I want to render the skill content on the left and an advertisement on the right. 00:03:47.086 --> 00:03:51.466 align:middle To do that, for the first time, use a 2-column block. 00:03:51.466 --> 00:03:57.206 align:middle Set this to 66, 33 so that the left side takes up most of the space. 00:03:58.626 --> 00:04:08.406 align:middle Add a title to the left side and make it an h3 with the text "The Technique:". 00:04:11.136 --> 00:04:13.806 align:middle Below, drag over a contentful entry field. 00:04:15.176 --> 00:04:15.926 align:middle This one... 00:04:16.326 --> 00:04:17.946 align:middle if I go check my fields... 00:04:18.136 --> 00:04:21.426 align:middle is called technique and it holds rich text. 00:04:21.426 --> 00:04:26.256 align:middle If you modified it in Contentful, you'd see a rich text editor... 00:04:26.506 --> 00:04:28.896 align:middle and the final value is HTML. 00:04:30.886 --> 00:04:35.746 align:middle So, type technique, keep it as a div and select Richtext. 00:04:37.036 --> 00:04:41.686 align:middle Finally, on the right side, add one more Contentful entry field. 00:04:43.226 --> 00:04:45.516 align:middle Look back at the content model for Skills... 00:04:45.656 --> 00:04:47.036 align:middle and scroll down a bit. 00:04:49.536 --> 00:04:55.276 align:middle The one we want to use is called advertisement, and this is a "Referenced entry" type. 00:04:57.636 --> 00:05:03.386 align:middle Yup, if you edited a skill, you would choose the Advertisement from the list 00:05:03.386 --> 00:05:05.786 align:middle of Advertisements we have in Contentful. 00:05:06.076 --> 00:05:08.166 align:middle It's like a database relation. 00:05:09.736 --> 00:05:13.756 align:middle Anyways, enter advertisement, hit "Publish and continue editing"... 00:05:16.976 --> 00:05:18.236 align:middle refresh and... 00:05:19.026 --> 00:05:21.406 align:middle ok! Sort of awesome. 00:05:21.856 --> 00:05:23.896 align:middle We need a container to bring those in. 00:05:24.546 --> 00:05:28.606 align:middle We already have a column, so click "Wrap in container". 00:05:29.866 --> 00:05:30.986 align:middle And... yea... 00:05:31.456 --> 00:05:34.166 align:middle though this could also use some top margin. 00:05:34.906 --> 00:05:38.576 align:middle On that same column, add a class: my-3. 00:05:39.926 --> 00:05:40.896 align:middle Publish this... 00:05:41.346 --> 00:05:42.606 align:middle and reload. 00:05:44.376 --> 00:05:45.496 align:middle So much better! 00:05:45.886 --> 00:05:49.396 align:middle Though, the Advertisement is just printing a URL... 00:05:49.666 --> 00:05:51.506 align:middle not rendering an ad. 00:05:51.976 --> 00:05:57.446 align:middle That's because Contentful doesn't know how to render the "Advertisement" content type. 00:05:57.966 --> 00:05:59.206 align:middle We'll help it soon. 00:05:59.646 --> 00:06:05.866 align:middle But first, let's fix our Skill pages by prefixing all URLs with /skills.