Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine

Lucky you! You found an early release chapter - it will be fully polished and published shortly!

Contentful Page

This Chapter isn't
quite ready...

Rest assured, the gnomes are hard at work
completing this video!

Browse Tutorials

Coming soon...

So we now have full control over the content full pages. That's thanks to our individual skill layout that we have mapped to the content full pages.

But all we have is this manual H one title. How can we render the actual data from content fold? So first, if I go to content model and then click on skill, you can see that this actually have has five different fields here. And each of these fields has kind of an internal name. It's actually almost easier to see on this JSON preview. Here we go. So there's a title field, it's internal name is title, short description technique, and a few other ones like image and advertisement. And advertisement is actually a link to that other type of content. Anyways, what I really wanna do is actually print this title here up inside that H one. Fortunately, Contentful helped us by adding a new custom block down here at the bottom. You can see there's a new one called Contentful Entry Field. This allows us to render a single field from the currently selected Contentful entry. So I'm gonna move that over here. Let's delete d H one. We don't need that. And importantly on here, there, there's one important thing, it's the field identifier. And we're gonna use this field called title. And I'm gonna make this an H one

And the block label's always optional, but I'll include it here. All right, perfect. Let's try publish and continue editing. Move over and awesome. It's dynamic. If I started and if I went to one of the other URLs, one of the other skills, like the basic chop, that works too. All right, so let's get fancier. I'm going to add a column here. Let's move this skill into the column. And then I'm gonna give a column that same hero rapper class that we had before. And you know what else? There's also this, uh, short description. I'm gonna render that as text right below here. So another content, full entry, I'll put it right there. And you see one of the things here is view type. We're gonna talk more about that, but you want this to match the type of, uh, content that's coming from content full. So, so far, title and this new one short description are string types, and we'll leave that as div. All right, let's publish and continue editing. See how that looks and oh, I love that. Cool. Let's add more. Every skill has an image, so let's kind of keep it inside of this hero column. Let's add another content, full entry

At the bottom. This one is going to be called image. And the type here is gonna be referenced assets. And you do have to put a width and height heighten here. So I'll do 200 by 200 and let's try that. Awesome. And let's do one last thing there. Let's actually get the content down here. So now I'll go below that column. I can reuse the same zone or I can use this. Zone. Zones don't really matter very much in this case. What I actually want to do is put the kind of like the dr the the main text over here and a little advertisement on the right. So to do that I'm going to, for the first time, use a two column setup. And I'm gonna make this a 66, 33 so that the left side takes up most of the space. And let's put a title inside of the left side here. I'm gonna make this be an H three. The text will say the technique, so that's like how you do it. And then right below that we will add another content, full entry field. And this one, if I go look over here, yeah, is actually called technique. And this is a rich text. So if you were to edit this inside of

Here, you actually see it's like a rich text editor. So it's gonna contain html. So over here I can say technique only. It has a div, but we'll change this to be rich text. Then final on this right side, I'm gonna use the last field. So content, full entry. And this one, if I go back to my content model for a skill and scroll down a bit, it's called advertisement. And this one is a referenced entry. So this is actually a link when you edit this inside of, uh, here, which you can see is, is actually a reference to another type of, uh, content in here. In particular a specific advertisement. So a lot of different types of content in here. So I'm gonna hit publish and continue editing refresh and sort of awesome . We need a container to bring those in. So let's see. We already have this here, so we can say wrapping container there. And we can also use a little top margin here. So on that same container, I'm gonna add an M Y dash three. Save that and much better. Now you see this over here says advertisement field is not compatible with this block view. Obviously that's something that we are going to need to work on.

Continental doesn't know how to render that related advertisement, so that's something that we're gonna worry about soon. So awesome. This doesn't all look perfectly yet, but we're gonna work on that soon. Next, let's fix the you URL here. So it's slash skills slash mashing.

Leave a comment!

Login or Register to join the conversation
Cat in space

"Houston: no signs of life"
Start the conversation!

What PHP libraries does this tutorial use?

// composer.json
    "require": {
        "php": ">=8.0.0",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "babdev/pagerfanta-bundle": "^3.7", // v3.7.0
        "doctrine/doctrine-bundle": "^2.7", // 2.7.0
        "doctrine/doctrine-migrations-bundle": "^3.2", // 3.2.2
        "doctrine/orm": "^2.13", // 2.13.3
        "easycorp/easyadmin-bundle": "^4.4", // v4.4.1
        "netgen/layouts-contentful": "^1.3", // 1.3.2
        "netgen/layouts-standard": "^1.3", // 1.3.1
        "pagerfanta/doctrine-orm-adapter": "^3.6",
        "sensio/framework-extra-bundle": "^6.2", // v6.2.8
        "stof/doctrine-extensions-bundle": "^1.7", // v1.7.0
        "symfony/console": "5.4.*", // v5.4.14
        "symfony/dotenv": "5.4.*", // v5.4.5
        "symfony/flex": "^1.17|^2", // v2.2.3
        "symfony/framework-bundle": "5.4.*", // v5.4.14
        "symfony/monolog-bundle": "^3.0", // v3.8.0
        "symfony/proxy-manager-bridge": "5.4.*", // v5.4.6
        "symfony/runtime": "5.4.*", // v5.4.11
        "symfony/security-bundle": "5.4.*", // v5.4.11
        "symfony/twig-bundle": "5.4.*", // v5.4.8
        "symfony/ux-live-component": "^2.x-dev", // 2.x-dev
        "symfony/ux-twig-component": "^2.x-dev", // 2.x-dev
        "symfony/validator": "5.4.*", // v5.4.14
        "symfony/webpack-encore-bundle": "^1.15", // v1.16.0
        "symfony/yaml": "5.4.*", // v5.4.14
        "twig/extra-bundle": "^2.12|^3.0", // v3.4.0
        "twig/twig": "^2.12|^3.0" // v3.4.3
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.2
        "symfony/debug-bundle": "5.4.*", // v5.4.11
        "symfony/maker-bundle": "^1.47", // v1.47.0
        "symfony/stopwatch": "5.4.*", // v5.4.13
        "symfony/web-profiler-bundle": "5.4.*", // v5.4.14
        "zenstruck/foundry": "^1.22" // v1.22.1