Tassos Koutlas talks about Drupal 8 and Paragraphs module at the Drupalcamp London 2016. Paragraphs module provide an innovative way to create rich content on the web. Although available for a couple of years for Drupal 7, Paragraphs module, really shines in Drupal 8 coupled with the power of twig templating engine, the ability to create view modes from the UI and Entity API in core.

1. HOWTOCREATERICHWEBSTORIES
WITHPARAGRAPHSANDDRUPAL8
Created by /Tassos Koutlas @akoutlas

2. CONTENTS
Who am I
Code examples in github
Introduction to paragraphs
Advanced use cases
Contributions
Discussion

3. WHOAMI

4. TASSOSKOUTLAS
Senior Technical Consultant @ C&W
web projects / machine learning / image processing algorithms / administering IT
systems / scrum master

5. CODEEXAMPLES

6. On github
https://github.com/tassoskoutlas/drupalcamplondon2016

7. Setup running:
git clone https://github.com/tassoskoutlas/drupalcamplondon2016.git
cd drupalcamplondon2016 && ./init.sh

8. Different functionality per branch
git 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

9. For multiple drush versions:
./init.sh drush8

10. INTRODUCTIONTO
PARAGRAPHS

11. Paragraphs provide a way to add components of
content without adding individual fields.
Like field collections only better.

12. Control structure and useful editing experience.

13. Allow creativity in assebling a page.

14. Work with components that tie in well in atomic
desing and agile delivery.

15. LET'SLOOKATANEXAMPLE
ANIMAGECOMPONENT
image field which is a standard image field
caption field which is a text field

17. COMPONENTS(PARAGRAPHTYPES)
A new menu item within Structure

19. PUTTINGITTOGETHERATTHENODE

21. LET'SEXTENDTHISFURTHER
The blockquote element represents content that is
quoted from another source, optionally with a citation
which must be within a footer or cite element, and
optionally with in-line changes such as annotations
and abbreviations.
- 4.4.4, The blockquote elementHTML5.1

22. BLOCKQUOTESTRUCTURE
We would need to replicate the following structure
<blockquote>
<p> The text of the quote.</p>
- <cite>Tassos Koutlas</cite>
</blockquote>

23. Let's add another component.

24. TWOTEXTFIELDS

25. NODEEDITFORM

26. NODEPAGE

27. But we want this:
<blockquote>
<p> The text of the quote.</p>
- <cite>Tassos Koutlas</cite>
</blockquote>

28. POWEROFTWIGANDD8
Everything is a template
Everything is overwritable
Every entity gets a template
Every bundle gets a template
Every view mode gets a template

29. TWOTEMPLATESINTHETHEME
field.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 cache
drush8 cr

31. WHEREDOESTHATLEAD?
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>

32. ADVANCESINOTHERAREAS
Compartmentalise your code
Atomic design principles
Reusablity of components
Better control on accessibility

33. ADVANCEDUSECASES

34. LINKINGCONTENT-MANUAL
At a node level there are entity references.
At a site level there are views
Views are entities in D8

35. EXAMPLE:REALTEDCONTENTWIDGET

36. DEFAULTRENDER
By default an entity reference renders as a link

37. BUT...

38. VIEWMODESOND8
First class citizens

39. PARAGRAPHS+ENTITYREFERENCES+
VIEWMODES=BFE
Manually link content and create widgets
Replicate any markup
Create re-usable facets of data

40. LINKINGCONTENT-AUTOMATIC
Views are entities in D8
Not content entities so display format links or
labels the view
moduleviews field formatter

41. Field
Field settings

42. Manage field display

43. On the node

44. ONEBIGADVANTAGE
Views like view modes already

45. WHATISMISSING
Views 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 the
referenced view?

46. EXAMPLES
http://www.baseballhall.org/discover/card-
corner/groovin-don-baylor

47. HEROIMAGE

49. TEXTWITHIMAGEONTHESIDE

51. SUBTITLE

53. REFERENCEDCONTENT

55. HOWTOCONTRIBUTE
1. issue queue
2. issue queue
3. Spread the word!
Paragraphs
Views field formatter

56. THANKYOU!