drupal architectures for flexible content - drupalcon barcelona
TRANSCRIPT
![Page 1: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/1.jpg)
![Page 2: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/2.jpg)
Drupal architectures for flexible content
Hernâni Borges de Freitas / @hernanibf
Site Building track
![Page 3: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/3.jpg)
About meTechnical Team Lead Acquia EMEA.PT Drupal* many things
hernani.ptTwitter.com/hernanibf
![Page 4: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/4.jpg)
A typical web site for a CMS:• Structured and fixed content: news items, job posts,
events.• Same content structure and typically same layout.
• Flexible content: home pages, landing pages, collection pages, rich pages.• Content structure and layout vary per item and can
be changed by editors.
![Page 5: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/5.jpg)
Today’s session:• Architecture and patterns available for building a Drupal
site with flexible content:• Content Architecture• Layout Architecture• Workflow• Building an unified and comprehensible experience
for content editors
![Page 6: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/6.jpg)
Meet the content editor:• Wants to control most of the details how content
appears on the web site. Flexible content is a major need.• He is a major stakeholder in websites where content is
king: media, entertainment, corporate websites.• Tech savvy on his own way - does not accept technical
limits - if the system does not allow something, he will find a way of doing it anyway.
![Page 7: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/7.jpg)
Typical demands: Change website look and feel. Reuse content anywhere. Review / preview / approve / schedule content as it
will appear. Readapt site purpose on special events. CMS should be easy to understand, fast to
execute and free of problems
![Page 8: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/8.jpg)
Problem in Drupal: Disconnection between content and layout. Disconnection between site building and
content edition. Drupal mantra of create content first, and it will
display on different sections “automagically”. Lack of revisioning system in many pieces of
the puzzle (menus, taxonomy, blocks).
![Page 9: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/9.jpg)
Breaking the problem
Content Architecture
1Layout
Architecture
2Workflow and
preview
3Non-tech
considerations
4
![Page 10: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/10.jpg)
How to create a rich page?
Content Architecture
1Layout
Architecture
2Workflow and
preview
3Non-tech
considerations
4
http://paragraphs.site-showcase.com/demos/creme-caramel
![Page 11: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/11.jpg)
![Page 12: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/12.jpg)
OptionsA. Free form HTML.B. Structured inclusive content including all items.C. Structured referenced content with references
among items.D. Unreferenced content being added through
layout.
![Page 13: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/13.jpg)
Option A - Free form HTML Typically this is never a good solution, but in theory
can give a lot of flexibility. Hard to maintain consistency. Hard to reuse content. WYSIWYG hard to use and manage even with
placeholders. Hard to avoid errors from Content Editors (CE’s)
![Page 14: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/14.jpg)
Option B – Inclusive contentAll content details are stored in the content item using complex fields. Good for pages with lots of details reused elsewhere.
Typical implementations:• Compound fields (custom or contributed).• Field collection module / Paragraphs module treat
the different entity as part of the host entity.
![Page 15: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/15.jpg)
![Page 16: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/16.jpg)
Option C – Referenced content
Different parts of content items are split in different entities which are referenced from the main entity.
Typical implementations: Entity reference field with inline entity form. Extra modules like references dialog module can
help on browsing existing content. Back references to help glue content (CER).
![Page 17: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/17.jpg)
Option C – Referenced content
Different parts of content items are split in different entities which are referenced from the main entity.
Typical implementations: Entity reference field with inline entity form. Extra modules like references dialog module can
help on browsing existing content. Back references to help glue content (CER).
![Page 18: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/18.jpg)
Breaking the problem
Content Architecture
1Layout
Architecture
2Workflow and
preview
3Non-tech
considerations
4
![Page 19: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/19.jpg)
Manage individual page layout
How do I create a new rich page layout in Drupal?
Some options:A. Core template systemB. Display suiteC. Panels / Panelizer
![Page 20: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/20.jpg)
Template system• Prepare different Drupal templates that are selected
depending on some attributes (node type, field, etc..).
• Use display modes and template suggestions to pick the correct template.
![Page 21: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/21.jpg)
Display suiteView modes created by configuration. Drag and drop fields with different formatters for different regions.
Most of the layout/style can be done by site builders.
Good to maintain consistency between view modes.
![Page 22: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/22.jpg)
![Page 23: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/23.jpg)
Panels• Customized layouts for different means, including
for entity layout.• Support creation of pages with custom/fixed
layouts.• Fits well with the idea of widgets than can be drag
and dropped and configured in different regions.
![Page 24: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/24.jpg)
How to create pages with panels?Different ways of creating pages:• Create independent panels.• Page manager with variants.• Panel nodes.• Panelizer
![Page 25: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/25.jpg)
Panelizer• Panel display associated with an entity. • Panel displays available to be used as templates.• Panelize an entity and add panes and fields to
different regions.• Slick interface with Panels IPE.• You can try in Panopoly or Lightning distribution.
![Page 26: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/26.jpg)
Panes• Configuration per instance where the pane is
present (e.g: A view that receives configuration that depends from page to page.
• Fieldable Panel Panes (FAPE)• Panels In place editor (IPE)• Panopoly magic• Panopoly widgets
![Page 27: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/27.jpg)
Ctools content types
![Page 28: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/28.jpg)
Breaking the problem
Content Architecture
1Layout
Architecture
2Workflow and
preview
3Non-tech
considerations
4
![Page 29: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/29.jpg)
How to workflow content and layout together?• Content workflow is easy
• Workbench moderation / Workflow / … modules
• Layout workflow is harder (!)
![Page 30: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/30.jpg)
How to preview?• Easier to achieve when rich content exists as a unit.• Harder to achieve with lots of referenced content.• Easier to achieve when layout stores all the needed
configuration and is associated with revisions (panelizer).
![Page 31: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/31.jpg)
Workflow of flexible contentDirectly in production
• Limited if not well addressed.
• Dependency on revision system.
• Panelizer integrates with with workbench moderation (with patches)
Different environments
• Tricky balance between content and layout.
• Both need to be pushed amongst environments.
![Page 32: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/32.jpg)
Workflow of complex itemsDirectly in production
Modules like:• Quick edit and panels in place
editor contextual links.• Workbench or workflow• Site Preview System.
Different environments
Modules like:• Deploy module and
associated suite can ship content together with associated items.
![Page 33: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/33.jpg)
Breaking the problem
Content Architecture
1Layout
Architecture
2Workflow and
preview
3Non-tech
considerations
4
![Page 34: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/34.jpg)
Non-tech considerations (1/2)
• Content editors are amongst the most important project’s stakeholders.
• They know the content and how the website will work after architects and developers leave.
• They care about what they see and not how does it work.• Should be involved from Discovery phase to User
Acceptance Testing.
![Page 35: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/35.jpg)
Non-tech considerations (2/2)
• Content editors are used to previous systems and will want to keep some old habits.
• Pilots and POCs are very good ways to expose end users with what they will use.
• Distributions like lightning or panopoly are great inspirations and models to start with.
![Page 36: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/36.jpg)
Holistic view
Content Architecture
1Layout
Architecture
2Workflow and
preview
3Non-tech
considerations
4
![Page 37: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/37.jpg)
About my work @ acquiaAn architect in Acquia is responsible technical solutions for clients during different phases.
• Discovery• Solution/Specification• Development phase• Deployment
![Page 38: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/38.jpg)
We are hiringhttp://www.acquia.com/careers
![Page 39: Drupal architectures for flexible content - Drupalcon Barcelona](https://reader036.vdocuments.us/reader036/viewer/2022070522/58ee4e2e1a28ab14558b46c7/html5/thumbnails/39.jpg)