We now have full control over how the Contentful pages render. That's thanks to the "Individual Skill layout" that we mapped to all Contentful "Skill" pages.
But... all we have is this manual
h1 title. How can we render the real data for whichever Contentful Skill we're viewing?
First, on Contentful's site, if I navigate to "Content model" and click on "Skill", you can see that every Skill has 5 fields... and each field has an internal name. It's... almost easier to see this via the JSON preview. Here we go. So there's a "Title" field, it's internal name is
title, "Short Description", "Technique", and a few other like "Image" and "Advertisement". Advertisement is actually a link to that other type of content.
Anyways, what we really want to do up here is print the skill's title in the
h1. Fortunately, that is possible, thanks to a new block type that the Contentful bundle added. It's here at the bottom: "Contentful entry field".
This allows us to render a single field from whatever Contentful entry is currently being rendered. Let's try it! Then delete the old
The new block has one super important option: field identifier. Set that to the internal name of the field:
title. And make this an
h1. As usual, the block label is optional, but I'll include it.
Cool! Hit publish and continue editing, move over and... yes! It's dynamic. If we go to the URL for some other skill, like
/basic-chop, that works too!
So let's get fancier. Add a column... and move this title inside. Can you guess what I'm about to do? Give the column that same
hero-wrapper class that we used earlier. And you know what else? Each skill has a "Short description". Lets add another entry field block right below.
Notice that one option for this block is "view type". We're going to talk more about that soon, but this should match the "type" of the content that you're pulling from Contentful. So far, both
title and this
shortDescription are "string" types. Leave this as
Testing timer! Hit "Publish and continue editing". And... let's see how it looks. I love that! Let's add more!
Every skill has an image. Inside of that same hero column, add another Contentful entry block at the bottom. This will be called
image... and the type is "referenced assets". You do need to set a width and height. Let's do 200 by 200. Publish that... refresh and... we're on a roll!
One last thing: rendering the skill content below everything. By the way, we could render this in the same zone... or use the zone below. Zones don't matter much in most case.
But let's make this spot more interesting. I want to render the skill content on the left and an advertisement on the right. To do that, for the first time, use a 2-column block. Set this to 66, 33 so that the left side takes up most of the space. Add a title to the left side and make it an
h3 with the text "The Technique:". Below, drag over a contentful entry field.
This one... if I go check my fields... is called
technique and it holds rich text. If you modified it in Contentful, you'd see a rich text editor... and the final value is HTML. So, type
technique, keep it as a
div and select
Finally, on the right side, add one more Contentful entry field. Look back at the content model for Skills... and scroll down a bit. The one we want to use is called
advertisement, and this is a "Referenced entry" type. Yup, if you edited a skill, you would choose the Advertisement from the list of Advertisements we have in Contentful. It's like a database relation.
advertisement, hit "Publish and continue editing"... refresh and... ok! Sort of awesome. We need a container to bring those in. We already have a column, so click "Wrap in container".
And... yea... though this could also use some top margin. On that same column, add a class:
my-3. Publish this... and reload. So much better! Though, the Advertisement is just printing a URL... not rendering an ad. That's because Contentful doesn't know how to render the "Advertisement" content type. We'll help it soon.
But first, let's fix our Skill pages by prefixing all URLs with