Create rich web stories with Drupal 8 and paragraphs

2,114 views

Published on

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.

Published in: Internet
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,114
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
56
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Create rich web stories with Drupal 8 and paragraphs

  1. 1. HOWTOCREATERICHWEBSTORIES WITHPARAGRAPHSANDDRUPAL8 Created by /Tassos Koutlas @akoutlas
  2. 2. CONTENTS Who am I Code examples in github Introduction to paragraphs Advanced use cases Contributions Discussion
  3. 3. WHOAMI
  4. 4. TASSOSKOUTLAS Senior Technical Consultant @ C&W web projects / machine learning / image processing algorithms / administering IT systems / scrum master
  5. 5. CODEEXAMPLES
  6. 6. On github https://github.com/tassoskoutlas/drupalcamplondon2016
  7. 7. Setup running: git clone https://github.com/tassoskoutlas/drupalcamplondon2016.git cd drupalcamplondon2016 && ./init.sh
  8. 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. 9. For multiple drush versions: ./init.sh drush8
  10. 10. INTRODUCTIONTO PARAGRAPHS
  11. 11. Paragraphs provide a way to add components of content without adding individual fields. Like field collections only better.
  12. 12. Control structure and useful editing experience.
  13. 13. Allow creativity in assebling a page.
  14. 14. Work with components that tie in well in atomic desing and agile delivery.
  15. 15. LET'SLOOKATANEXAMPLE ANIMAGECOMPONENT image field which is a standard image field caption field which is a text field
  16. 16. COMPONENTS(PARAGRAPHTYPES) A new menu item within Structure
  17. 17. PUTTINGITTOGETHERATTHENODE
  18. 18. 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
  19. 19. BLOCKQUOTESTRUCTURE We would need to replicate the following structure <blockquote> <p> The text of the quote.</p> - <cite>Tassos Koutlas</cite> </blockquote>
  20. 20. Let's add another component.
  21. 21. TWOTEXTFIELDS
  22. 22. NODEEDITFORM
  23. 23. NODEPAGE
  24. 24. But we want this: <blockquote> <p> The text of the quote.</p> - <cite>Tassos Koutlas</cite> </blockquote>
  25. 25. POWEROFTWIGANDD8 Everything is a template Everything is overwritable Every entity gets a template Every bundle gets a template Every view mode gets a template
  26. 26. 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
  27. 27. 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>
  28. 28. ADVANCESINOTHERAREAS Compartmentalise your code Atomic design principles Reusablity of components Better control on accessibility
  29. 29. ADVANCEDUSECASES
  30. 30. LINKINGCONTENT-MANUAL At a node level there are entity references. At a site level there are views Views are entities in D8
  31. 31. EXAMPLE:REALTEDCONTENTWIDGET
  32. 32. DEFAULTRENDER By default an entity reference renders as a link
  33. 33. BUT...
  34. 34. VIEWMODESOND8 First class citizens
  35. 35. PARAGRAPHS+ENTITYREFERENCES+ VIEWMODES=BFE Manually link content and create widgets Replicate any markup Create re-usable facets of data
  36. 36. LINKINGCONTENT-AUTOMATIC Views are entities in D8 Not content entities so display format links or labels the view moduleviews field formatter
  37. 37. Field Field settings
  38. 38. Manage field display
  39. 39. On the node
  40. 40. ONEBIGADVANTAGE Views like view modes already
  41. 41. 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?
  42. 42. EXAMPLES http://www.baseballhall.org/discover/card- corner/groovin-don-baylor
  43. 43. HEROIMAGE
  44. 44. TEXTWITHIMAGEONTHESIDE
  45. 45. SUBTITLE
  46. 46. REFERENCEDCONTENT
  47. 47. HOWTOCONTRIBUTE 1. issue queue 2. issue queue 3. Spread the word! Paragraphs Views field formatter
  48. 48. THANKYOU!

×