Contentful with Netgen Layouts workshop
1 like537 views
This document describes Netgen Layouts, a layout and block management system that is intended to control all markup in the <body> section of content-driven sites and applications. It discusses the main concepts of layouts, zones, blocks, collections, and how layouts are resolved. The document then provides a workshop example using Contentful as a headless CMS with the Symfony CMF routing bundle and Netgen Layouts to build a simple site.
![www.netgenlabs.com
Netgen Layouts
- set private composer repo:
”repositories": [
{ "type": "composer", "url": "https://packagist.netgen.biz" }
],
- require “netgen/block-manager”
- docs.netgen.io/projects/layouts/en/latest/
reference/install_instructions.html
Step 4a](https://image.slidesharecdn.com/phpce2017layoutsworkshop-171105133241/85/Contentful-with-Netgen-Layouts-workshop-31-320.jpg)
Contentful with Netgen Layouts workshop
- 1. Advanced layouts and block management Ivo Lukač @ PHPCE, Poland 2017
- 2. www.netgenlabs.com • Ivo Lukač, co-founder of Netgen, Croatia Also: developer, site builder, architect, consultant, project manager, evangelist, speaker, event organiser, business developer, … • Netgen, web agency, Zagreb, Croatia, ~20 employees • 15 years of experience building complex content- centric web solutions, using eZ Publish since 2004, Symfony since 2013. • Clients and partners in Germany, Switzerland, Norway, etc. About me
- 4. www.netgenlabs.com HOW IT ALL STARTED
- 5. www.netgenlabs.com We wanted to improve the process of building complex web solutions and make it more efficient!
- 6. www.netgenlabs.com We wanted to find the intersection of typical web project phases and improve there
- 7. www.netgenlabs.com So what is the common ground for backend, frontend, site building and content?
- 8. www.netgenlabs.com We figured its about layouts and blocks :)
- 9. www.netgenlabs.com - backend developers implement features that need to be placed somewhere on the interface (layout), reuse when necessary - frontend developers apply design on HTML markup which describes the layout - editors place content in prepared blocks - site builders manage the front interface with set of layouts and blocks Layouts and blocks
- 10. www.netgenlabs.com - SaaS solutions like Webflow, Wix, etc - not on enterprise level - hard to extend - prototyping/wireframing tools exporting to HTML/CSS - what about backend? - responsiveness still hard - CMS specific tools - usually focused on one page, one persona Many ways to skin a cat
- 13. www.netgenlabs.com • Layout and Block Management System • an independent view layer for content driven sites/applications • suppose to control all markup in <body> • no WYSIWYG, doesn’t mess with frontend (CSS/JS) • highly extensible and customisable What is it?
- 14. www.netgenlabs.com • Symfony full stack • uses Symfony routing and Twig extending feature to inject Layouts • Can be tightly coupled with Symfony full stack apps • eZ Publish / eZ Platform • PoC with Sylius eCommerce • Could be loosely coupled with any other systems • PoC with Contentful Architecture
- 15. www.netgenlabs.com • Separation of front and backend layer • Implementing front layer for headless backend(s) • Deploying design systems • Fast micro/additional site building • 2-phase replacement of legacy systems Use cases
- 17. www.netgenlabs.com • Layout - responsible to render the layout of a page consisting of Zones with Blocks • Zone - a placeholder for Blocks. More Blocks can be added in a Zone, rendered one after other • Shared Layout - a special layout which purpose is to hold Blocks in Zones that can be linked (reused) in other Layouts Defining layouts
- 19. www.netgenlabs.com • Block - responsible for handling specific features. It renders a specified Block View template. Blocks can use Items from a specified Collection • Collection: • manual - items picked from the backend • dynamic - Query fetches data from the backend. Defining blocks
- 20. www.netgenlabs.com • Layout Resolver - decides what Layout will be used for which request. It traverses Layout mappings and picks the first one which fits the requested URL and matches additional conditions Resolving layouts
- 21. www.netgenlabs.com • Layout mappings - a configuration that defines which Layout is applied to which Target URLs under what Conditions • Target - an abstraction which defines one or more URLs in a generic or backend specific way (e.g. home or all article URLs) • Condition - additional matchers, could be anything known in request context (e.g. type of content, GET parameter, time of the day, user group, …) Layout mappings
- 23. www.netgenlabs.com - use Contentful as content storage - create a Symfony app that shows content from Contentful and uses CMF routing - use Layouts to manage typical pages The task
- 24. www.netgenlabs.com - a headless cloud CMS - features spaces and content types - no content hierarchy - provides REST API - PHP SDK and Symfony bundle provide abstraction of the API with a service for each space - Client Contentful
- 25. www.netgenlabs.com Symfony 3.4 beta1 - install - create new database Step 0
- 26. www.netgenlabs.com Contentful bundle - require “contentful/contentful-bundle” - enable and configure Contentful bundle Step 1a
- 27. www.netgenlabs.com - create Contentful service - show configuration: php bin/console contentful:info - add caching for spaces and content types - run caching script: php bin/console contentful:sync Step 1b
- 28. www.netgenlabs.com Symfony CMF dynamic router - require “symfony-cmf/routing-bundle” - install needed database tables: php bin/console doctrine:schema:update --force - enable and configure Symfony CMF routing Step 2a
- 29. www.netgenlabs.com - create Contentful entity, a local proxy for remote Contentful entry (caching and routing purposes) - extend Contentful service to load the Contentful entity - test loading of example Contentful entity - verify new row in the database: mysql phpce -uroot -p -e "select * from orm_routes" - try the route Step 2b
- 30. www.netgenlabs.com View Controller - create Contentful entity view controller action - configure CMF dynamic router to use it - add content enhancer so the View controller gets the Contentful entity - try the route again Step 3
- 31. www.netgenlabs.com Netgen Layouts - set private composer repo: ”repositories": [ { "type": "composer", "url": "https://packagist.netgen.biz" } ], - require “netgen/block-manager” - docs.netgen.io/projects/layouts/en/latest/ reference/install_instructions.html Step 4a
- 32. www.netgenlabs.com - install needed database tables: php bin/console doctrine:migrations:migrate -- configuration=vendor/netgen/block-manager/migrations/ doctrine.yml - install assets: php bin/console assets:install --symlink --relative - enable Layouts and configure routing - configure admin access with basic auth Step 4b
- 33. www.netgenlabs.com - inject Layouts Resolver in Twig templates - create “Home” layout - map that layout to home URL - create shared layout for header and right column Step 4c
- 34. www.netgenlabs.com Manual item selection with Content Browser - integrate Contentful bundle with ContentBrowser - docs.netgen.io/projects/cb/en/latest/cookbook/ index.html - docs.netgen.io/projects/layouts/en/latest/ cookbook/custom_value_types.html Step 5a
- 35. www.netgenlabs.com - add Layouts item type for Contentful entity - add ContentBrowser item types for Contentful entity and client - add ContentBrowser backend that browses Contentful entities - add additional ContentBrowser columns for Contentful entity Step 5b
- 36. www.netgenlabs.com - include bootstrap4 CSS - select products for home grid - add images: {% for image in item.object.getImage() %} <img src="{{ image.getFile().getUrl() }}?h=120&w=200"/> {% endfor %} - check route table: mysql phpce -uroot -p -e "select * from orm_routes" Step 5c
- 37. www.netgenlabs.com Collection query - docs.netgen.io/projects/layouts/en/latest/ cookbook/custom_query_types.html - add Contentful collection query - configure “latest posts” block Step 6
- 38. www.netgenlabs.com Layouts Resolver target - docs.netgen.io/projects/layouts/en/latest/ cookbook/custom_target_types.html - add 2 target types, for Contentful entity and space - add Twig extension for target type templates - create a “product” layout and map it Step 7
- 39. www.netgenlabs.com Layouts Resolver condition - docs.netgen.io/projects/layouts/en/latest/ cookbook/custom_condition_types.html - add Layouts Resolver condition type for Contentful content type - use the condition for “product” layout Step 8
- 40. www.netgenlabs.com Contentful field block - docs.netgen.io/projects/layouts/en/latest/ cookbook/custom_blocks.html - add Contentful field block type - create a “blog post” layout Step 9
- 41. www.netgenlabs.com Cache all Contentful entries - finalize sync script - run sync script: php bin/console contentful:sync - show debug info Step 10
- 42. www.netgenlabs.com HOW COULD IT LOOK
- 43. www.netgenlabs.com - just released v0.9 with layout translation capabilities - adding more features (like user policies, ad-hoc content etc.) - launching projects based on Layouts and eZ since end of 2016 - first launches by early adopters (agencies from Germany, Italy) last month, several other starting Currently
- 44. www.netgenlabs.com - open source the core - make it sustainable with commercial add-ons - integrate tightly with other Symfony based systems - make loose integrations with everything else easy via REST/SOAP, … Future