Jody Hamilton, Co-founder and CTO of Zivtech, and Steve Persch, Lead Developer Advocate at Pantheon, are here to bust the myths around Drupal 8. They’ll walk through approaches to site building and demonstrate that projects can be turned around quickly with Drupal 8.

1. Streamlined Drupal 8
Site Building Strategies for Tight Deadlines

2. Pantheon.io 2
Who Are We?
Steve Persch
Lead Developer Advocate
at Pantheon
Jody Hamilton
Co-Founder and CTO
at Zivtech

3. 3
Less is More
Lean on Core

4. What We’ll Cover
● Building the IA components
● Admin Experience
● Building Content Editing
Experience
● Displaying your Content
● View Modes and Field
Formatters
● Twig
● Views
● Developer Workflow
4

5. IA the Easy Way

6. Menus
Use blocks to position your
menus sitewide
● Core menu blocks have
depth and visibility level
settings
● Contrib ‘Menu Block’
module has more options
6

7. Pantheon.io 7
Path Patterns for the URL-oriented
● Pathauto is still in Contrib
● Set paths to match menu structure:
○ Page Content Type: [node:menu-link:parent:url:path]/[node:title]
○ Place other content types below their main listing page, e.g. if your
Team listing page is /about/team, set Team Member Content Type
pattern to about/team/[node:title]

8. Breadcrumbs
No More Tears
D8 Breadcrumbs follow Path
Structure (not Menu Tree)
Easy Breadcrumb Contrib module provides
additional display options
8

9. Admin & Editor Experience

10. Pantheon.io
Admin Toolbar Contrib Module
- Extend the core Toolbar with
dropdown menus
- Enable its submodules
10

11. Pantheon.io 11
Managing User Roles & Permissions
● You still need Role Delegation
or RoleAssign Contrib module
to allow editors to create
editor accounts
● Advocate for fewer roles to
start
● Test editor experience using
editor role

12. Building your Content Editing
Experience

13. Pantheon.io 13
CKEditor in Drupal
- No WYSIWYG Configuration
Required!
- Images with Captions!
- Enhance with:
- Linkit
- CKEditor Media Embed
- Custom Styles

14. Pantheon.io 14
Field Types
- Boolean
- Date (and date range)
- Email
- Phone
- Link
- Numbers (integer, decimal, float, list)
- Text (long/short, formatted/plain, list)
- Entity References (content, term, user,
file, image, etc.)

15. Pantheon.io
Manage Form Displays
- Disable fields from displaying on
forms
- Add more form (and view) display
modes at Admin: Structure: Display
Modes
- Field Group Contrib Module is stable
15

16. Pantheon.io 16
Field Widgets
Common Widget Choices:
- Lists: checkboxes/radios
or select?
- References: select,
checkboxes/radios, or
autocomplete?

17. Pantheon.io 17
Paragraphs: Flexible Landing Pages
- Avoid Panels ecosystem for
your D8 site for now
- Paragraphs works well with
component-based design
- Paragraphs ecosystem is
growing:
- Bootstrap Paragraphs
- Parade

18. Pantheon.io 18
Media: We’re Getting There
- Media in 8.5 is half-baked
- Media is included via
entityreference
- Enhance with:
- Inline Entity Form
- Entity Browser
- Stick with generic Image
and File fields if you can
for now

19. Displaying Your Content

20. Strategies for
Customizing Display
1. Very specific CSS for default
Drupal markup
2. Template overrides for
exacting markup
3. Custom plugins for site
building and exact markup
20

21. 21
Override
or Extend?

22. For more on this
evolution, see what I
said in 2015
Rendering HTML with Drupal,
Past, Present, and Future at
Twin Cities Drupal Camp
22

23. Pantheon.io 23
Theme Regions

24. Pantheon.io 24
The "Content" Block is Still Special

25. 25

26. 26

27. View Modes and Field Formatters

28. Pantheon.io 28
View Modes

29. Pantheon.io 29
View Modes and Field Formatters

30. 30

31. Pantheon.io 31
Custom Field Formatter

32. Pantheon.io 32
View Modes and Field Formatters

33. 33

34. Pantheon.io 34
Template Overrides (seen via Twig debug)
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'node' -->
<!-- FILE NAME SUGGESTIONS:
* node--view--articles-aside--block-2.html.twig
* node--view--articles-aside.html.twig
* node--3--highlighted-small.html.twig
* node--3.html.twig
* node--article--highlighted-small.html.twig
* node--article.html.twig
x node--highlighted-small.html.twig
* node.html.twig
-->
<!-- BEGIN OUTPUT from
'core/profiles/demo_umami/themes/umami/templates/content/node--highlighte
d-small.html.twig' -->

35. Pantheon.io 35
Layouts

36. Pantheon.io 36
Generating Code with Drupal Console
drupal generate:plugin:fieldformatter
drupal generate:plugin:fieldwidget
drupal generate:plugin:module
drupal generate:plugin:theme
drupal generate:plugin:command

37. Twig

38. <div>
{{ twig }}
</div>
38

39. Pantheon.io 39
Twig Security
PHPTemplate:
<div class="content">
<?php print $content; ?>
</div>
Twig:
<div class="content">
{{ content }}
</div>

40. Pantheon.io 40
Twig Security, Escape by Default
PHPTemplate:
<?php
print check_plain($title);
?>
Twig:
{{ title }}

41. Pantheon.io 41
Twig Security, Ask For Raw Values
PHPTemplate:
<?php print $title; ?>
Twig:
{{ title|raw }}

42. Pantheon.io 42
Conditionals
PHPTemplate:
<?php if ($count > 0): endif; ?>
Twig:
{% if count > 0 %} {% endif %}

43. Pantheon.io 43
Control Structures
PHPTemplate:
<?php
foreach ($users as $user) {
}
?>
Twig:
{% for user in users %}
{% endfor %}

44. Pantheon.io 44
File Names
PHPTemplate:
node--article.tpl.php
Twig:
node--article.html.twig

45. Pantheon.io 45
Twig Tweak Module
{{ drupal_view('who_s_new', 'block_1') }}
{{ drupal_block('system_powered_by_block') }}
{{ drupal_region('sidebar_first') }}
{{ drupal_entity('node', null, 'teaser') }}
{{ drupal_field('field_image', 'node', 1) }}

46. Pantheon.io 46
Twig Include, Extend, and Embed
https://twig.symfony.com/doc/2.x/tags/embed.html

47. Views

48. Pantheon.io 48
Lists of Entities, Rendered using View Modes

49. Pantheon.io 49
Keep your Views simple

50. Pantheon.io 50
Direct rendering of fields in tables

51. Dev Workflow

52. Pantheon.io 52
Config Management Workflow

53. Pantheon.io 53
Composer - Dependency Management for PHP
symfony/class-loader
symfony/http-kernel
symfony/serializer
twig/twig
drupal/core asm89/stack-cors
drupal/drupal
my/project
drupal/address commerceguys/addressing

54. Questions?