Upload
tassos-koutlas
View
2.067
Download
5
Embed Size (px)
Citation preview
HOW TO CREATE RICH WEB STORIESWITH PARAGRAPHS AND DRUPAL 8
Created by / Tassos Koutlas @akoutlas
CONTENTSWho am I
Code examples in github
Introduction to paragraphs
Advanced use cases
Contributions
Discussion
WHO AM I
TASSOS KOUTLAS
Senior Technical Consultant @ C&Wweb projects / machine learning / image processing algorithms / administering IT
systems / scrum master
CODE EXAMPLES
On githubhttps://github.com/tassoskoutlas/drupalcamplondon2016
Setup running:git clone https://github.com/tassoskoutlas/drupalcamplondon2016.gitcd drupalcamplondon2016 && ./init.sh
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
For multiple drush versions:./init.sh drush8
INTRODUCTION TOPARAGRAPHS
Paragraphs provide a way to add components ofcontent without adding individual fields.
Like field collections only better.
Control structure and useful editing experience.
Allow creativity in assebling a page.
Work with components that tie in well in atomicdesing and agile delivery.
LET'S LOOK AT AN EXAMPLE
AN IMAGE COMPONENT
image field which is a standard image fieldcaption field which is a text field
COMPONENTS (PARAGRAPH TYPES)A new menu item within Structure
PUTTING IT TOGETHER AT THE NODE
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
BLOCKQUOTE STRUCTUREWe would need to replicate the following structure<blockquote> <p> The text of the quote.</p> - <cite>Tassos Koutlas</cite> </blockquote>
Let's add another component.
TWO TEXT FIELDS
NODE EDIT FORM
NODE PAGE
But we want this:<blockquote> <p> The text of the quote.</p> - <cite>Tassos Koutlas</cite> </blockquote>
POWER OF TWIG AND D8Everything is a templateEverything is overwritableEvery entity gets a templateEvery bundle gets a templateEvery view mode gets a template
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
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>
ADVANCES IN OTHER AREASCompartmentalise your codeAtomic design principlesReusablity of componentsBetter control on accessibility
ADVANCED USE CASES
LINKING CONTENT - MANUALAt a node level there are entity references.
At a site level there are views
Views are entities in D8
EXAMPLE: REALTED CONTENT WIDGET
DEFAULT RENDERBy default an entity reference renders as a link
BUT ...
VIEW MODES ON D8First class citizens
PARAGRAPHS + ENTITY REFERENCES +VIEW MODES = BFE
Manually link content and create widgetsReplicate any markupCreate re-usable facets of data
LINKING CONTENT - AUTOMATICViews are entities in D8
Not content entities so display format links orlabels the view
moduleviews field formatter
Field
Field settings
Manage field display
On the node
ONE BIG ADVANTAGE
Views like view modes already
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?
EXAMPLEShttp://www.baseballhall.org/discover/card-
corner/groovin-don-baylor
HERO IMAGE
TEXT WITH IMAGE ON THE SIDE
SUBTITLE
REFERENCED CONTENT
HOW TO CONTRIBUTE1. issue queue2. issue queue3. Spread the word!
ParagraphsViews field formatter
THANK YOU!