WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.086 --> 00:00:07.786 align:middle If we added five more entities and we wanted to be able to select those as items 00:00:07.836 --> 00:00:14.166 align:middle in the layouts admin, we could add five more value types, query types, and item views. 00:00:14.276 --> 00:00:18.726 align:middle Now that we know what we're doing, it's a pretty quick process 00:00:18.906 --> 00:00:21.806 align:middle and would give us a lot of power on our site. 00:00:22.206 --> 00:00:29.356 align:middle But one of the beautiful things about Layouts is that our value types can come from anywhere: 00:00:29.756 --> 00:00:37.726 align:middle a Doctrine Entity, data on an external API, data in a Sylius store or from Ibexa CMS. 00:00:38.516 --> 00:00:45.776 align:middle In fact, systems like Sylius and Ibexa already have packages that do all of the work 00:00:45.776 --> 00:00:49.086 align:middle of integrating and adding the value types for you. 00:00:50.056 --> 00:00:54.426 align:middle One of the biggest missing pieces on our site is the skills. 00:00:55.096 --> 00:01:02.026 align:middle The skills on the homepage are hard-coded and the "All Skills" link doesn't even go anywhere! 00:01:02.946 --> 00:01:08.416 align:middle We could have chosen to store these skills locally via another Doctrine Entity. 00:01:08.746 --> 00:01:15.646 align:middle But instead, we're going to load them from an external API via a service called "Contentful". 00:01:16.476 --> 00:01:19.566 align:middle I'll head over to Contentful.com and log in. 00:01:22.936 --> 00:01:29.336 align:middle This takes me to a "Contentful space" called "Bark & Bake" that I've already created. 00:01:30.246 --> 00:01:32.156 align:middle Contentful is awesome! 00:01:32.536 --> 00:01:36.066 align:middle It's basically a CMS as a service. 00:01:36.466 --> 00:01:40.926 align:middle It allows us to create different types of content called "content models". 00:01:41.686 --> 00:01:47.156 align:middle Right now, I have a content model called "Skill" and another one called "Advertisement". 00:01:47.156 --> 00:01:53.006 align:middle If we clicked on these, we could enter content via a super-friendly interface. 00:01:53.816 --> 00:01:57.736 align:middle I've already created 5 skills, each with a bunch of data. 00:01:57.736 --> 00:02:01.536 align:middle So, you create and maintain your content here. 00:02:02.036 --> 00:02:08.336 align:middle Then Contentful has a restful API that we can use to fetch all of this. 00:02:09.026 --> 00:02:10.596 align:middle Contentful is cool. 00:02:10.986 --> 00:02:14.946 align:middle But the point of this isn't to teach you about Contentful. 00:02:15.556 --> 00:02:20.986 align:middle Nope! It's to show you how we could grab content for Layouts from anywhere. 00:02:21.616 --> 00:02:25.626 align:middle For example, if we want to load "skills" from Contentful, 00:02:26.066 --> 00:02:31.656 align:middle we could manually create a new value type and do all the work that we did before, 00:02:32.046 --> 00:02:37.666 align:middle except making API requests to Contentful instead of querying the database. 00:02:38.466 --> 00:02:41.066 align:middle But! We don't even need to do that! 00:02:41.546 --> 00:02:46.526 align:middle Why? Because Layouts already has a bundle that supports Contentful. 00:02:47.146 --> 00:02:51.996 align:middle That bundle add the value type, some query types, the item views 00:02:52.236 --> 00:02:55.866 align:middle and even the content browser integration for us. 00:02:56.156 --> 00:02:58.356 align:middle Woh. Let's grab it! 00:02:58.466 --> 00:03:01.486 align:middle Spin over to your terminal and run: 00:03:01.746 --> 00:03:09.446 align:middle composer require netgen/layouts-contentful -W The -W is there just because, 00:03:09.766 --> 00:03:15.846 align:middle at least when recording this, Composer needs to be able to downgrade one small package 00:03:15.846 --> 00:03:17.926 align:middle to make all the dependencies happy. 00:03:18.346 --> 00:03:20.036 align:middle That flag allows it to do that. 00:03:21.156 --> 00:03:28.466 align:middle Ok! The recipe for this package added a new config file: config/packages/contentful.yaml. 00:03:29.036 --> 00:03:32.566 align:middle And this reads two new environment variables... 00:03:32.876 --> 00:03:35.136 align:middle which live in .env. 00:03:37.136 --> 00:03:43.086 align:middle While we're here, let's update these values to point at my Contentful space. 00:03:43.856 --> 00:03:47.396 align:middle Copy the keys from the code block on this page and paste them here. 00:03:48.026 --> 00:03:50.416 align:middle Here's my CONTENTFUL_SPACE_ID... 00:03:50.416 --> 00:03:57.386 align:middle and my CONTENTFUL_ACCESS_TOKEN, which will give us read access to my space. 00:03:57.386 --> 00:04:03.896 align:middle Okay, the Layouts + Contentful integration give us two very separate things, 00:04:04.226 --> 00:04:08.746 align:middle and it's super important to understand the difference to keep everything clear. 00:04:08.746 --> 00:04:15.516 align:middle First, the package adds an integration between Layouts and Contentful. 00:04:15.856 --> 00:04:19.956 align:middle This means it adds new value types, new query types, 00:04:20.236 --> 00:04:23.776 align:middle and all the other stuff we just added for Doctrine. 00:04:24.456 --> 00:04:29.496 align:middle In other words, we can instantly add the skills or advertisements 00:04:29.496 --> 00:04:33.306 align:middle from Contentful into list or grid blocks. 00:04:33.826 --> 00:04:37.956 align:middle That is great, and we'll see it soon. 00:04:37.956 --> 00:04:44.256 align:middle The second thing the Contentful integration adds is completely unrelated to Layouts. 00:04:44.776 --> 00:04:46.426 align:middle It's dynamic routes. 00:04:46.806 --> 00:04:53.336 align:middle It adds a system so that every "item" in Contentful is available via its own URL. 00:04:53.936 --> 00:04:59.836 align:middle Literally, all of these skills will instantly have their own page on our site. 00:05:00.326 --> 00:05:05.736 align:middle This has nothing to do with Layouts, which is all about controlling the layout 00:05:05.736 --> 00:05:10.206 align:middle for existing pages on your site, not adding new pages. 00:05:10.596 --> 00:05:17.936 align:middle But, since Contentful is a CMS, it is nice to have a page for each piece of content. 00:05:18.956 --> 00:05:23.806 align:middle To get the dynamic routes working, go into the config/packages/ directory 00:05:24.316 --> 00:05:27.456 align:middle and add a new file called cmf_routing.yaml. 00:05:27.456 --> 00:05:35.646 align:middle CMF Routing is a package that Contentful uses behind the scenes to add the dynamic routes. 00:05:35.646 --> 00:05:37.256 align:middle I'll paste some config here. 00:05:37.846 --> 00:05:38.946 align:middle It's ugly... 00:05:39.226 --> 00:05:44.936 align:middle but this part doesn't have anything to do with Layouts, so it doesn't matter too much. 00:05:45.506 --> 00:05:52.456 align:middle This is all about allowing Contentful to automatically add dynamic URLs to our site. 00:05:53.046 --> 00:05:55.876 align:middle This routing system stores routes in the database... 00:05:56.346 --> 00:05:59.406 align:middle and that means we need some new database. 00:06:00.216 --> 00:06:06.126 align:middle Head over to your console and run: symfony console make:migration And... 00:06:06.126 --> 00:06:07.296 align:middle I get an error. 00:06:07.476 --> 00:06:10.606 align:middle Rude. Let's try clearing our cache... 00:06:11.016 --> 00:06:12.486 align:middle maybe something weird happened... 00:06:12.486 --> 00:06:14.936 align:middle or it didn't see my new config file yet. 00:06:15.506 --> 00:06:17.026 align:middle Once the cache clears... 00:06:17.556 --> 00:06:18.926 align:middle I'll make the migration again. 00:06:19.656 --> 00:06:20.166 align:middle This time... 00:06:20.546 --> 00:06:26.676 align:middle perfect! Open the migrations/ directory, find that file and... 00:06:27.076 --> 00:06:27.806 align:middle it looks good! 00:06:28.376 --> 00:06:32.266 align:middle We have a few tables that hold info about our Contentful data... 00:06:32.666 --> 00:06:35.476 align:middle and a few to store those dynamic routes. 00:06:37.376 --> 00:06:42.616 align:middle Now run: symfony console doctrine:migrations:migrate And... 00:06:43.226 --> 00:06:46.576 align:middle woohoo! We have the new tables we need. 00:06:46.666 --> 00:06:51.596 align:middle Finally, we can run a command to load all of our content 00:06:51.596 --> 00:06:54.886 align:middle from Contentful and create those dynamic routes. 00:06:55.526 --> 00:07:00.386 align:middle Once again, this is functionality that has nothing to do with Layouts. 00:07:01.086 --> 00:07:06.716 align:middle Run: symfony console contentful:sync And... 00:07:07.176 --> 00:07:07.806 align:middle beautiful! 00:07:08.146 --> 00:07:09.946 align:middle It loaded six items. 00:07:10.726 --> 00:07:15.936 align:middle On production you can set up a webhook so your site is instantly synced 00:07:15.936 --> 00:07:18.786 align:middle with any changes that you make on Contentful. 00:07:19.356 --> 00:07:23.086 align:middle But while we're developing, running this command works fine. 00:07:23.846 --> 00:07:30.616 align:middle The result of this command is that every piece of content on Contentful now has its own page! 00:07:31.186 --> 00:07:36.806 align:middle To see them, run: symfony console contentful:routes And... 00:07:37.136 --> 00:07:41.826 align:middle awesome! Apparently I have a URL called /mashing. 00:07:42.746 --> 00:07:43.706 align:middle Let's go check it out! 00:07:44.196 --> 00:07:47.946 align:middle Go back to our site, navigate to /mashing and... 00:07:48.516 --> 00:07:50.866 align:middle it works! Sort of. 00:07:51.426 --> 00:07:54.476 align:middle It's here, but the middle of it is empty. 00:07:54.476 --> 00:08:02.586 align:middle Let's talk about what's going on next and how we can leverage Layouts to bring this page to life.