BUILDING FLEXIBLE PAGE-LAYOUTS WITH DS & PARAGRAPHS

Pieter Mathys - @mathysp - dazzle

First of all

No need to take pictures!

Just follow along here:

bit.ly/dsparagraphs

This presentation is for everyone!

Beginners, Experts, ...

Summary

Who am I?
What's this all about?
Common use cases
Setup D8 + DS + Paragraphs
Configuring Display Suite
Configuring Paragraphs
Bringing it together
Reusing DS + Paragraphs
Known issues
Q&A

Who am I?

Pieter Mathys

Frontend Dev
Themer
Sitebuilder
Teacher

Born in

Duffel

Belgium

Building websites since 2010

Work for

We are hiring! - dazzle.be/jobs

What's this all about then?

The Goal

We want Websites with
Complex Layouts
that are

Easy to use

Easy to maintain

Offer lots of flexibility

But we have a Problem

It's easy to...

... build complex layouts

... give the client lots of power

But combining those 2?

That spells trouble!

The answer is simple

Build websites with

Display Suite
Paragraphs

Display Suite

Layouts

to create our layout templates

Fields

to map functionality to a field

Paragraphs

Create reusable "Content Blocks"

Content

Blocks

Images
Text
...

Default Blocks
Editable Blocks
Views
...

With our powers combined

DS + Paragraphs

A strong tool to create advanced Page Layouts

with flexible, reusable Content Blocks

Common use cases

Example Site: protime360.eu

Text - Full

Full Width Image

Inline Image

Quote Full Width

Quote Inline

Quote Reference

References a Node

View: Homepage Filter

Setup D8+DS+Paragraphs

Setup D8

Download from:

https://www.drupal.org/project/drupal

Or Drush:

drush dl drupal-8 --select

Great Guides:

Install DS

Download from:

https://www.drupal.org/project/ds

$ drush dl ds

Enable:

admin/modules

$ drush en ds

Install Paragraphs

Download from:

https://www.drupal.org/project/paragraphs

$ drush dl paragraphs

Enable:

admin/modules

$ drush en paragraphs

Configuring

Display Suite

Parts

Settings
Layout
DS Fields
DS Classes
Layout Wrappers
Field Templates

Main Settings

Main Settings: Other

ds_content.field_header_image

Emergency Settings

Layouts

Example Without

Example with

Using Layouts

Manage Display

Switching Layouts

Creating Layouts

<theme>.layouts.yml

<template>.html.twig

<theme>.layouts.yml

dz_1col_stacked:
  label: 1 Col - Stacked
  category: Dazzle
  class: '\Drupal\ds\Plugin\DsLayout'
  type: partial
  template: templates/nodes/dz-1col-stacked
  regions:
    ds_header:
      label: Header
    ds_content:
      label: Content
    ds_footer:
      label: Footer

<template>.html.twig

<{{ ds_content_wrapper }}{{ attributes.addClass('dz-1col-stacked', 'clearfix') }}>
  {{ title_suffix.contextual_links }}
  {% if ds_header %}
    <div class="header-wrapper" >
      {{ ds_header }}
    </div>
  {% endif %}
  {% if ds_content %}
    <div class="content-wrapper">
      {{ ds_content }}
    </div>
  {% endif %}
  {% if ds_footer %}
    <div class="footer-wrapper">
      {{ ds_footer }}
    </div>
  {% endif %}
</{{ ds_content_wrapper }}>