create rich web stories with drupal 8 and paragraphs

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!