create rich web stories with drupal 8 and paragraphs
TRANSCRIPT
![Page 1: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/1.jpg)
HOW TO CREATE RICH WEB STORIESWITH PARAGRAPHS AND DRUPAL 8
Created by / Tassos Koutlas @akoutlas
![Page 2: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/2.jpg)
CONTENTSWho am I
Code examples in github
Introduction to paragraphs
Advanced use cases
Contributions
Discussion
![Page 3: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/3.jpg)
WHO AM I
![Page 4: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/4.jpg)
TASSOS KOUTLAS
Senior Technical Consultant @ C&Wweb projects / machine learning / image processing algorithms / administering IT
systems / scrum master
![Page 5: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/5.jpg)
CODE EXAMPLES
![Page 6: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/6.jpg)
On githubhttps://github.com/tassoskoutlas/drupalcamplondon2016
![Page 7: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/7.jpg)
Setup running:git clone https://github.com/tassoskoutlas/drupalcamplondon2016.gitcd drupalcamplondon2016 && ./init.sh
![Page 8: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/8.jpg)
Different functionality per branchgit branch -vva 01-Create_a_custom_paragraph_type_and_templates 02-Create_an_entity_reference_component 03-Create_a_view_display_component
Checkout branches to get more features:git checkout BRANCH && ./init.sh
![Page 9: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/9.jpg)
For multiple drush versions:./init.sh drush8
![Page 10: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/10.jpg)
INTRODUCTION TOPARAGRAPHS
![Page 11: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/11.jpg)
Paragraphs provide a way to add components ofcontent without adding individual fields.
Like field collections only better.
![Page 12: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/12.jpg)
Control structure and useful editing experience.
![Page 13: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/13.jpg)
Allow creativity in assebling a page.
![Page 14: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/14.jpg)
Work with components that tie in well in atomicdesing and agile delivery.
![Page 15: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/15.jpg)
LET'S LOOK AT AN EXAMPLE
AN IMAGE COMPONENT
image field which is a standard image fieldcaption field which is a text field
![Page 16: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/16.jpg)
![Page 17: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/17.jpg)
COMPONENTS (PARAGRAPH TYPES)A new menu item within Structure
![Page 18: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/18.jpg)
![Page 19: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/19.jpg)
PUTTING IT TOGETHER AT THE NODE
![Page 20: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/20.jpg)
![Page 21: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/21.jpg)
LET'S EXTEND THIS FURTHER
The blockquote element represents content that isquoted from another source, optionally with a citation
which must be within a footer or cite element, andoptionally with in-line changes such as annotations
and abbreviations. - 4.4.4, The blockquote elementHTML5.1
![Page 22: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/22.jpg)
BLOCKQUOTE STRUCTUREWe would need to replicate the following structure<blockquote> <p> The text of the quote.</p> - <cite>Tassos Koutlas</cite> </blockquote>
![Page 23: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/23.jpg)
Let's add another component.
![Page 24: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/24.jpg)
TWO TEXT FIELDS
![Page 25: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/25.jpg)
NODE EDIT FORM
![Page 26: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/26.jpg)
NODE PAGE
![Page 27: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/27.jpg)
But we want this:<blockquote> <p> The text of the quote.</p> - <cite>Tassos Koutlas</cite> </blockquote>
![Page 28: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/28.jpg)
POWER OF TWIG AND D8Everything is a templateEverything is overwritableEvery entity gets a templateEvery bundle gets a templateEvery view mode gets a template
![Page 29: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/29.jpg)
TWO TEMPLATES IN THE THEMEfield.html.twig
{% for item in items %} {{ item.content }} {% endfor %}
paragraph--blockquote.html.twig
<blockquote> {{ content.field_quote_text }} <cite>- {{ content.field_quote_citation }}</cite> </blockquote>
Rebuild your theme cachedrush8 cr
![Page 30: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/30.jpg)
![Page 31: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/31.jpg)
WHERE DOES THAT LEAD?A modular way to create content
<article> <h1></h1> <div class="paragraph paragraph--hero"><img></div> <div class="paragraph paragraph--subtitle"><h2></h2></div> <div class="paragraph paragraph--text"><p></p></div> <div class="paragraph paragraph--subtitle"><h2></h2></div> <div class="paragraph paragraph--text"><p></p></div> <div class="paragraph paragraph--image-full"><img></div> <div class="paragraph paragraph--text"><p></p></div> <div class="paragraph paragraph--blockquote"><q></q></div> <div class="paragraph paragraph--text"><p></p></div> <div class="paragraph paragraph--text-image-side"><img></div> <div class="paragraph paragraph--text"><p></p></div> </article>
![Page 32: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/32.jpg)
ADVANCES IN OTHER AREASCompartmentalise your codeAtomic design principlesReusablity of componentsBetter control on accessibility
![Page 33: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/33.jpg)
ADVANCED USE CASES
![Page 34: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/34.jpg)
LINKING CONTENT - MANUALAt a node level there are entity references.
At a site level there are views
Views are entities in D8
![Page 35: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/35.jpg)
EXAMPLE: REALTED CONTENT WIDGET
![Page 36: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/36.jpg)
DEFAULT RENDERBy default an entity reference renders as a link
![Page 37: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/37.jpg)
BUT ...
![Page 38: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/38.jpg)
VIEW MODES ON D8First class citizens
![Page 39: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/39.jpg)
PARAGRAPHS + ENTITY REFERENCES +VIEW MODES = BFE
Manually link content and create widgetsReplicate any markupCreate re-usable facets of data
![Page 40: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/40.jpg)
LINKING CONTENT - AUTOMATICViews are entities in D8
Not content entities so display format links orlabels the view
moduleviews field formatter
![Page 41: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/41.jpg)
Field
Field settings
![Page 42: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/42.jpg)
Manage field display
![Page 43: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/43.jpg)
On the node
![Page 44: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/44.jpg)
ONE BIG ADVANTAGE
Views like view modes already
![Page 45: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/45.jpg)
WHAT IS MISSINGViews field formatter orginate from D7 where views
weren't entities.
List all available views displays and pick one.
What if you could pick a display from thereferenced view?
![Page 46: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/46.jpg)
EXAMPLEShttp://www.baseballhall.org/discover/card-
corner/groovin-don-baylor
![Page 47: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/47.jpg)
HERO IMAGE
![Page 48: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/48.jpg)
![Page 49: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/49.jpg)
TEXT WITH IMAGE ON THE SIDE
![Page 50: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/50.jpg)
![Page 51: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/51.jpg)
SUBTITLE
![Page 52: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/52.jpg)
![Page 53: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/53.jpg)
REFERENCED CONTENT
![Page 54: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/54.jpg)
![Page 55: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/55.jpg)
HOW TO CONTRIBUTE1. issue queue2. issue queue3. Spread the word!
ParagraphsViews field formatter
![Page 56: Create rich web stories with Drupal 8 and paragraphs](https://reader031.vdocuments.net/reader031/viewer/2022021919/5881d6421a28ab331a8b6709/html5/thumbnails/56.jpg)
THANK YOU!