Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
©2016 Acquia Inc. — Confidential and Proprietary
D8 Lightning: Speedrun!
Build a Website with Panels, Media, and More in 4...
What is Lightning?
The Drupal 8 Distribution
for Enterprise Authoring
Enable developers to build great
enterprise authoring experiences
for their editorial teams with D8
Persona
Site
Builder
Persona
Content
Author
Persona
Site
Designer
Persona
Developer
Integrations TestingSecurity
Layout Workflow Preview Media
What is Speedrun?
Our site’s requirements
● Store references to tweets, which
can be promoted to the front page
● Ability to move content in...
Time to Prepare!
Content modeling
● Describe all the fields in each entity type
● Describe relationships with other entities
● Describe dis...
Media
Media handling
● Media Entity module defines an abstract entity type for
storing media
● Consistent handling of social med...
Workflow
Content workflow
● Drupal’s default workflow is
published or unpublished
● A boolean workflow doesn’t meet the
needs of ed...
Layout
Layout control
Level 1 of 4: Drupal Core
Layout control
Level 1 of 4: Drupal Core
● You can choose which fields to show,
configure them and reorder them
● No conce...
Layout control
Level 2 of 4: Single layout
● Uses Panels, Panelizer, and Layout Plugin
● Retains core functionality
● Has ...
Theme Wizardry: custom layouts
● Layout Plugin: the standardized solution for custom layouts
● Very familiar to D7 themers...
Layout control
Level 3 of 4: Multi-layout
● What’s better than one panelized layout? Many panelized layouts!
● Choose one ...
Layout control
Level 4 of 4: Panels IPE
Layout control
Level 4 of 4: Panels IPE
● Full drag and drop control
● Begin from a preconfigured (possibly empty) layout ...
Live Demo in Progress
What problems did we solve?
● MEDIA: Media can be anything, can be embedded anywhere, can be molded
to fit business requir...
©2016 Acquia Inc. — Confidential and Proprietary
THANK YOU!
@djphenaproxima / phenaproxima
@balsama / balsama
@commercejoh...
©2016 Acquia Inc. — Confidential and Proprietary
Extra
Let’s build some stuff!!!
● Article with a layout and embedded media
● A training program, which can switch between
layout...
Theme Wizardry: full-bleed regions
● Tricky to do in Drupal OOTB. How did we do it?
● Created a new theme region that sits...
Theme Wizardry: preprocess functions
● Basically ring 0*; any sorcery is possible here
● You can move content from one pla...
Lightning Media
● Built on Media Entity and its related ecosystem
● All media is generic and reusable, and supports arbitr...
Example: Tweets
● Need to store tweets for future reuse
● Need to display tweets in a view
● Need a way to mark choice twe...
Lightning Layout
● Based on the best-of-breed layout solutions for Drupal (in our opinion)
● Goal is to be intuitive and v...
Example:
Landing Page + Panelizer Choices
● Need to visually create attractive landing
pages from pre-built pieces
● Certa...
Lightning Workflow
● Improves on Drupal’s editorial workflow process
● Based upon work that is now in core
● Define arbitr...
Example: Editorial Workflow
● Blog content type
● Must be submitted for legal review before
publication
● Once in legal re...
Lightning Preview
● Based on core Workflow Initiative
● Introduces the concept of workspaces
● Works by separating all con...
Speedrun: Build a Website with Panels, Media, and More in 45 Minutes
Speedrun: Build a Website with Panels, Media, and More in 45 Minutes
Speedrun: Build a Website with Panels, Media, and More in 45 Minutes
Speedrun: Build a Website with Panels, Media, and More in 45 Minutes
Speedrun: Build a Website with Panels, Media, and More in 45 Minutes
Speedrun: Build a Website with Panels, Media, and More in 45 Minutes
Upcoming SlideShare
Loading in …5
×

Speedrun: Build a Website with Panels, Media, and More in 45 Minutes

1,626 views

Published on

Lightning is an open source starter kit and framework that helps developers tap into the richness of key D8 functionality, and build sites and experiences faster. At DrupalCon the team presented a session where we built an authoring experience live. This was the result of months of planning and practice. In this webinar, we will deconstruct each step in the build.

The broad concept for the experience we built during the speedrun was a product launch site with social feeds, CRM connected lead capture forms, authoring workflows for content marketers and campaign specific landing pages.

Speedrun steps that we will deconstruct:

-Develop a brand specific theme based on bootstrap using a css styleguide
-Configure a content approval workflow for content marketers and editors
-Configure new panelizer layouts, set defaults for editors and long-scroll landing pages using panels
-Create views-based social feeds, with curation based on a taxonomy

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Speedrun: Build a Website with Panels, Media, and More in 45 Minutes

  1. 1. ©2016 Acquia Inc. — Confidential and Proprietary D8 Lightning: Speedrun! Build a Website with Panels, Media, and More in 45 Minutes http://lightning.acquia.com
  2. 2. What is Lightning?
  3. 3. The Drupal 8 Distribution for Enterprise Authoring
  4. 4. Enable developers to build great enterprise authoring experiences for their editorial teams with D8
  5. 5. Persona Site Builder Persona Content Author Persona Site Designer Persona Developer
  6. 6. Integrations TestingSecurity Layout Workflow Preview Media
  7. 7. What is Speedrun?
  8. 8. Our site’s requirements ● Store references to tweets, which can be promoted to the front page ● Ability to move content into “needs review” ● Authors and editors must be able to control content layout
  9. 9. Time to Prepare!
  10. 10. Content modeling ● Describe all the fields in each entity type ● Describe relationships with other entities ● Describe display configuration -- not design ● What does the user see? ● Refine iteratively alongside wireframes
  11. 11. Media
  12. 12. Media handling ● Media Entity module defines an abstract entity type for storing media ● Consistent handling of social media and digital media ● != File Entity, because media might not be a file ● Media entities are standard content entities ● Fieldable / Revisionable / Views integration
  13. 13. Workflow
  14. 14. Content workflow ● Drupal’s default workflow is published or unpublished ● A boolean workflow doesn’t meet the needs of editorial teams ● Workbench Moderation lets you configure permissions for transitions between arbitrary states ● Only transitions that CAN be applied will be offered
  15. 15. Layout
  16. 16. Layout control Level 1 of 4: Drupal Core
  17. 17. Layout control Level 1 of 4: Drupal Core ● You can choose which fields to show, configure them and reorder them ● No concept of regions ● If you need to lay things out, you probably need themer help
  18. 18. Layout control Level 2 of 4: Single layout ● Uses Panels, Panelizer, and Layout Plugin ● Retains core functionality ● Has concept of regions ● Can display more than just entity fields ● Don’t need a themer to make layout changes ● Includes additional Panels-ey goodness (contexts, etc.)
  19. 19. Theme Wizardry: custom layouts ● Layout Plugin: the standardized solution for custom layouts ● Very familiar to D7 themers ● At a minimum, layout plugins are YAML + Twig + CSS ● In the simplest case, they’re a set of named regions ● Because they are plugins, they can have logic behind them (configurable layouts!)
  20. 20. Layout control Level 3 of 4: Multi-layout ● What’s better than one panelized layout? Many panelized layouts! ● Choose one to be the default ● Editors can choose a layout, or stick with the default ● Changes will flow downstream ● Still don’t need any help from a themer
  21. 21. Layout control Level 4 of 4: Panels IPE
  22. 22. Layout control Level 4 of 4: Panels IPE ● Full drag and drop control ● Begin from a preconfigured (possibly empty) layout and customize it on a one-off basis ● Instant preview of everything -- nearly WYSIWYG ● STILL don’t need a themer! ● And that, finally, is enough power.
  23. 23. Live Demo in Progress
  24. 24. What problems did we solve? ● MEDIA: Media can be anything, can be embedded anywhere, can be molded to fit business requirements ● LAYOUT: Layouts can be built visually by non-techs, and custom layouts can be used easily by authors ● WORKFLOW: Can build our own workflow according to business needs, and it must be followed ● PREVIEW: Can see exactly what a collection of changes will look like before the users do
  25. 25. ©2016 Acquia Inc. — Confidential and Proprietary THANK YOU! @djphenaproxima / phenaproxima @balsama / balsama @commercejohn / johnkennedy http://lightning.acquia.com/ http://pokemondb.net/pokedex
  26. 26. ©2016 Acquia Inc. — Confidential and Proprietary Extra
  27. 27. Let’s build some stuff!!! ● Article with a layout and embedded media ● A training program, which can switch between layouts ● The home page (a full-bleed landing page with completely arbitrary layout) ● Promote a tweet to the home page
  28. 28. Theme Wizardry: full-bleed regions ● Tricky to do in Drupal OOTB. How did we do it? ● Created a new theme region that sits outside the main page container ● Created custom layouts that supported full-bleed (bundled ones may not work)
  29. 29. Theme Wizardry: preprocess functions ● Basically ring 0*; any sorcery is possible here ● You can move content from one place to another ● You can gather contextual information that is unavailable to the template and use it to influence the output ● Best used for slight, context-sensitive modifications (e.g. adding a CSS class or style if a condition is true) * https://en.wikipedia.org/wiki/Protection_ring
  30. 30. Lightning Media ● Built on Media Entity and its related ecosystem ● All media is generic and reusable, and supports arbitrary metadata ● Reusable via the incredibly flexible Entity Browser module ● Can embed any entity into rich text editors using Embed and Entity Embed ● Lightning provides sane default configuration for these modules, but you can override
  31. 31. Example: Tweets ● Need to store tweets for future reuse ● Need to display tweets in a view ● Need a way to mark choice tweets as “promoted to front page” ● Want to embed tweets into other content as needed
  32. 32. Lightning Layout ● Based on the best-of-breed layout solutions for Drupal (in our opinion) ● Goal is to be intuitive and visual ● Control of layout should be in the hands of authors ● Built on top of a common layout system (Layout Plugin), slated for core ● Panelizer: create reusable layouts for entities in many different contexts ● Panels IPE: A visual layout builder with instant preview
  33. 33. Example: Landing Page + Panelizer Choices ● Need to visually create attractive landing pages from pre-built pieces ● Certain content must support more than one layout, the choice of which is up to authors ● Need custom layouts in order to support full-bleed pages
  34. 34. Lightning Workflow ● Improves on Drupal’s editorial workflow process ● Based upon work that is now in core ● Define arbitrary “moderation states” and transitions between them ● Transitions are a true directional workflow, not just publish/unpublish ● Works with any kind of content entity
  35. 35. Example: Editorial Workflow ● Blog content type ● Must be submitted for legal review before publication ● Once in legal review, must be published or sent back to draft
  36. 36. Lightning Preview ● Based on core Workflow Initiative ● Introduces the concept of workspaces ● Works by separating all content entities into semi-isolated silos ● Conflicts can be tracked and resolved (soon) ● Preview everything exactly as it will appear in the live site HERE BE DRAGONS This is currently experimental

×