speedrun: build a website with panels, media, and more in 45 minutes
TRANSCRIPT
![Page 1: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/1.jpg)
©2016 Acquia Inc. — Confidential and Proprietary
D8 Lightning: Speedrun!Build a Website with Panels, Media, and More in 45 Minutes
http://lightning.acquia.com
![Page 2: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/2.jpg)
What is Lightning?
![Page 3: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/3.jpg)
The Drupal 8 Distribution for Enterprise Authoring
![Page 4: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/4.jpg)
Enable developers to build great enterprise authoring experiences
for their editorial teams with D8
![Page 5: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/5.jpg)
PersonaSite Builder
PersonaContent Author
PersonaSite Designer
PersonaDeveloper
![Page 6: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/6.jpg)
Integrations TestingSecurity
Layout Workflow Preview Media
![Page 7: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/7.jpg)
What is Speedrun?
![Page 8: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/8.jpg)
![Page 9: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/9.jpg)
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
![Page 10: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/10.jpg)
Time to Prepare!
![Page 11: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/11.jpg)
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
![Page 12: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/12.jpg)
![Page 13: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/13.jpg)
![Page 14: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/14.jpg)
Media
![Page 15: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/15.jpg)
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
![Page 16: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/16.jpg)
Workflow
![Page 17: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/17.jpg)
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
![Page 18: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/18.jpg)
Layout
![Page 19: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/19.jpg)
Layout controlLevel 1 of 4: Drupal Core
![Page 20: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/20.jpg)
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
![Page 21: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/21.jpg)
![Page 22: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/22.jpg)
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.)
![Page 23: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/23.jpg)
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!)
![Page 24: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/24.jpg)
![Page 25: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/25.jpg)
Layout controlLevel 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
![Page 26: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/26.jpg)
![Page 27: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/27.jpg)
Layout control
Level 4 of 4: Panels IPE
![Page 28: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/28.jpg)
Layout controlLevel 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.
![Page 29: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/29.jpg)
Live Demo in Progress
![Page 30: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/30.jpg)
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
![Page 31: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/31.jpg)
©2016 Acquia Inc. — Confidential and Proprietary
THANK YOU!@djphenaproxima / phenaproxima
@balsama / balsama@commercejohn / johnkennedy
http://lightning.acquia.com/http://pokemondb.net/pokedex
![Page 32: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/32.jpg)
©2016 Acquia Inc. — Confidential and Proprietary
Extra
![Page 33: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/33.jpg)
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
![Page 34: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/34.jpg)
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)
![Page 35: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/35.jpg)
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
![Page 36: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/36.jpg)
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
![Page 37: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/37.jpg)
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
![Page 38: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/38.jpg)
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
![Page 39: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/39.jpg)
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
![Page 40: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/40.jpg)
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
![Page 41: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/41.jpg)
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
![Page 42: Speedrun: Build a Website with Panels, Media, and More in 45 Minutes](https://reader031.vdocuments.us/reader031/viewer/2022030223/5883483b1a28abbe6b8b6455/html5/thumbnails/42.jpg)
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 DRAGONSThis is currently experimental