WEBVTT

NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com

00:00:00.386 --> 00:00:06.446 align:middle
Thanks to the Contentful integration, in
addition to our doctrine_recipe value type,

00:00:06.696 --> 00:00:11.356 align:middle
we now have a second value type that
can load things from Contentful.

00:00:11.926 --> 00:00:14.806 align:middle
This means that we can render lists and grids

00:00:14.856 --> 00:00:19.826 align:middle
of skills inside any layout,
like over here on our homepage.

00:00:20.266 --> 00:00:20.906 align:middle
Let's try it!

00:00:21.616 --> 00:00:22.606 align:middle
Publish this layout...

00:00:22.916 --> 00:00:24.946 align:middle
then edit the Homepage Layout.

00:00:27.736 --> 00:00:31.956 align:middle
Oh, and we can delete this old
grid we were playing with earlier.

00:00:33.016 --> 00:00:38.096 align:middle
Below, we're currently rendering
the featured_skills Twig block.

00:00:38.276 --> 00:00:44.056 align:middle
But in reality, if you looked at our
template, those are totally hardcoded!

00:00:44.586 --> 00:00:45.286 align:middle
No problem!

00:00:45.716 --> 00:00:47.076 align:middle
Add a Grid block...

00:00:47.906 --> 00:00:50.676 align:middle
which is already set it to
a "Manual Collection".

00:00:51.216 --> 00:00:52.166 align:middle
But check this out!

00:00:52.376 --> 00:00:57.796 align:middle
We can now choose between manually
selecting "Contentful entries" or recipes!

00:00:58.016 --> 00:01:02.946 align:middle
And when we click "Add Items",
the content browser already works!

00:01:03.626 --> 00:01:05.056 align:middle
Select a few of these...

00:01:05.596 --> 00:01:07.606 align:middle
good... then publish this.

00:01:10.046 --> 00:01:12.516 align:middle
Refresh. Um...

00:01:12.716 --> 00:01:14.956 align:middle
ok! They do render...

00:01:15.136 --> 00:01:16.306 align:middle
but just the title.

00:01:16.666 --> 00:01:17.266 align:middle
Good start.

00:01:17.826 --> 00:01:21.296 align:middle
To make this a tiny bit better,
go to the "Design" tab...

00:01:21.476 --> 00:01:23.026 align:middle
and wrap this in a container.

00:01:23.506 --> 00:01:26.706 align:middle
That should, at least, give us some gutters.

00:01:28.206 --> 00:01:28.886 align:middle
There we go.

00:01:29.546 --> 00:01:34.236 align:middle
Ultimately, we want these to render
like the hardcoded skills below them.

00:01:34.526 --> 00:01:36.796 align:middle
And we're going to work on
that in a few minutes.

00:01:37.306 --> 00:01:44.296 align:middle
But before we get there, what about a
/skills page that lists all of the skills?

00:01:45.186 --> 00:01:49.206 align:middle
Well, the Contentful integration
did not give us this URL.

00:01:49.716 --> 00:01:50.826 align:middle
But, no problem!

00:01:51.046 --> 00:01:53.756 align:middle
We can create it ourselves in Symfony!

00:01:54.706 --> 00:01:59.626 align:middle
Well, actually, we could do
this entirely in Contentful!

00:02:00.506 --> 00:02:05.226 align:middle
We could create a "Page" content
type, create a "Skills" page,

00:02:05.466 --> 00:02:09.666 align:middle
which could become /skills,
then map that to a Layout.

00:02:10.516 --> 00:02:15.486 align:middle
This is the type of thing you'd normally
do when you have a CMS at your fingertips

00:02:15.946 --> 00:02:18.176 align:middle
But we'll create this page the manual way.

00:02:18.346 --> 00:02:24.386 align:middle
After all, Layouts is really about helping
organize how existing pages look...

00:02:24.866 --> 00:02:27.456 align:middle
it's not really about adding dynamic pages.

00:02:27.736 --> 00:02:29.066 align:middle
That's a job for a CMS.

00:02:29.066 --> 00:02:34.806 align:middle
In your editor, open up
src/Controller/MainController.php.

00:02:36.136 --> 00:02:44.306 align:middle
Copy the homepage() action, paste,
change to /skills, call it app_skills

00:02:44.646 --> 00:02:46.886 align:middle
and rename the method to skills().

00:02:46.926 --> 00:02:52.966 align:middle
For the template, render
main/skills.html.twig: Now,

00:02:53.036 --> 00:02:59.076 align:middle
in the templates/main/ directory,
create that: skills.html.twig.

00:03:00.376 --> 00:03:08.176 align:middle
Let's start with the smallest possible
thing: extend nglayouts.layoutTemplate: Cool.

00:03:08.636 --> 00:03:13.316 align:middle
While we're here, open base.html.twig
and link to this.

00:03:14.076 --> 00:03:15.136 align:middle
Search for "Skills".

00:03:15.716 --> 00:03:16.406 align:middle
There's the link.

00:03:16.846 --> 00:03:23.036 align:middle
Set the href to {{ path('app_skills')
}}: I like it!

00:03:23.816 --> 00:03:27.906 align:middle
Refresh, try the link in the header and...

00:03:28.236 --> 00:03:29.286 align:middle
the page works!

00:03:30.076 --> 00:03:36.676 align:middle
To put content onto this page, we could also
do that manually by writing code in our app!

00:03:37.296 --> 00:03:43.656 align:middle
The Contentful library we installed earlier
has a ClientInterface service that we could use

00:03:43.736 --> 00:03:47.196 align:middle
to fetch all of these skills from
Contentful in our controller.

00:03:47.786 --> 00:03:54.436 align:middle
But instead, let's take the easy way out
and let layouts fetch the skills for us.

00:03:55.206 --> 00:04:01.756 align:middle
Oh, but before we do that, back in
skills.html.twig, add a {% block title %},

00:04:01.756 --> 00:04:06.256 align:middle
write "All Skills" and then
{% endblock %}: This,

00:04:06.496 --> 00:04:09.756 align:middle
as you probably know, controls the page's title.

00:04:10.256 --> 00:04:16.416 align:middle
I'm doing this here because the title block
is actually not something you can control

00:04:16.416 --> 00:04:17.316 align:middle
via Layouts.

00:04:17.586 --> 00:04:23.266 align:middle
Remember: everything we build in our layout
becomes part of a block called layout.

00:04:24.346 --> 00:04:26.866 align:middle
Ok, hit "Publish" on the Homepage Layout...

00:04:27.196 --> 00:04:29.206 align:middle
and then create a new layout.

00:04:30.436 --> 00:04:34.906 align:middle
I'll use my favorite "Layout 2"
and call it "Skills List Layout".

00:04:37.136 --> 00:04:38.226 align:middle
You know the drill.

00:04:38.606 --> 00:04:40.516 align:middle
Start by linking the header zone...

00:04:40.776 --> 00:04:45.006 align:middle
and the footer zone.

00:04:49.506 --> 00:04:51.976 align:middle
Then, let's build another hero.

00:04:52.396 --> 00:05:01.876 align:middle
Add a column, give it a hero-wrapper class, then
put a "Title" block inside with "All Skills".

00:05:03.906 --> 00:05:08.976 align:middle
To be even cooler, add a text block
below with some intro content.

00:05:08.976 --> 00:05:12.896 align:middle
Nice start!

00:05:13.896 --> 00:05:14.876 align:middle
Publish the layout...

00:05:15.096 --> 00:05:18.576 align:middle
so we can go link it to the /skills page.

00:05:21.606 --> 00:05:26.476 align:middle
Hit "Add New Mapping" and link
this to the "Skills List Layout".

00:05:29.136 --> 00:05:30.566 align:middle
Then go to Details.

00:05:31.546 --> 00:05:37.446 align:middle
This time I'll map via the
Path Info, set to /skills.

00:05:39.006 --> 00:05:40.436 align:middle
Hit save changes.

00:05:42.036 --> 00:05:44.986 align:middle
Let's go see how our first attempt looks.

00:05:45.406 --> 00:05:46.896 align:middle
And... not bad!

00:05:47.666 --> 00:05:50.966 align:middle
Now let's add the important stuff.

00:05:50.966 --> 00:05:54.116 align:middle
Head back to the layouts
admin and edit this layout.

00:05:56.406 --> 00:05:58.856 align:middle
Below the column, add a new Grid.

00:06:01.206 --> 00:06:04.866 align:middle
Change this from a manual
collection to a dynamic collection.

00:06:06.576 --> 00:06:14.416 align:middle
The Contentful package gives us two new "query
types", or ways to "fetch" data from Contentful.

00:06:15.326 --> 00:06:16.806 align:middle
Use "Contentful Search".

00:06:16.956 --> 00:06:18.226 align:middle
That's the main one.

00:06:18.906 --> 00:06:23.696 align:middle
This allows you to choose which content
types to show, like all of them...

00:06:23.696 --> 00:06:24.906 align:middle
or just skills.

00:06:25.686 --> 00:06:31.236 align:middle
We can then sort them, add a
search, skip items or limit them.

00:06:31.566 --> 00:06:34.616 align:middle
It's everything we want, out-of-the-box!

00:06:35.316 --> 00:06:36.736 align:middle
What does it look like?

00:06:37.516 --> 00:06:38.446 align:middle
Hit "Publish".

00:06:38.946 --> 00:06:40.116 align:middle
I bet you can guess.

00:06:41.416 --> 00:06:43.246 align:middle
Yup! It "works"...

00:06:43.436 --> 00:06:45.796 align:middle
by printing out the title of each skill.

00:06:46.606 --> 00:06:49.426 align:middle
Oh, let me at least add that
"container" class...

00:06:49.686 --> 00:06:51.706 align:middle
to get the left and right margin.

00:06:52.046 --> 00:06:55.276 align:middle
But, this is obviously not what we want!

00:06:55.626 --> 00:07:01.176 align:middle
We need to be able to style this and
print out more fields than just the title.

00:07:01.776 --> 00:07:04.216 align:middle
We have the same problem on the homepage.

00:07:04.736 --> 00:07:08.276 align:middle
And actually, this is even
more complex than it seems!

00:07:08.926 --> 00:07:12.686 align:middle
When we customize how a grid of skills renders,

00:07:12.786 --> 00:07:19.286 align:middle
I want to be able to make those items look one
way on the homepage, and a different way on the

00:07:19.286 --> 00:07:23.906 align:middle
"Skills" page, probably larger
and with more fields printed.

00:07:24.846 --> 00:07:29.846 align:middle
Next: let's start learning the very
important topic of how we can override

00:07:29.846 --> 00:07:35.846 align:middle
and customize the templates from Layouts so that
we can make things look exactly like we want.