CROWD Communications Group, LLC About Me Sean T. Walsh - - PowerPoint PPT Presentation

▶
crowd
SMART_READER_LITE
LIVE PREVIEW

CROWD Communications Group, LLC About Me Sean T. Walsh - - PowerPoint PPT Presentation

Sep 14, 2022 1.21k likes •1.58k views

Drupal 8 Ti eming Exploring Twig & Other Frontend Changes CROWD Communications Group, LLC About Me Sean T. Walsh sean@crowdcg.com @seantwalsh @crowdcg irc: crowdcg Agenda What is Twig & Why is it in D8 Improving the Themer

slide-1
SLIDE 1

CROWD

Communications Group, LLC

Drupal 8 Tieming

Exploring Twig & Other Frontend Changes

slide-2
SLIDE 2

About Me

Sean T. Walsh sean@crowdcg.com @seantwalsh @crowdcg irc: crowdcg

slide-3
SLIDE 3

Agenda

  • What is Twig & Why is it in D8
  • Improving the Themer Experience
  • Getting Involved
  • Questions
slide-4
SLIDE 4

Twig & D8

slide-5
SLIDE 5

A New Template Engine

Drupal 7 = PHPTemplate

  • Conflict between 


Back-end & Front-end

  • Potential Security Issues
  • 55 templates


154 functions

Drupal 8 = Twig

  • Keeps Back-end & Front-

end Separated

  • More Secure -

Autoescaping

  • 149 templates


21 functions

slide-6
SLIDE 6

Crash Course

slide-7
SLIDE 7

Comments & Vars

PHP Twig

<?php

// My test variable print $variable;

{# My test variable #} {{ variable }}

slide-8
SLIDE 8

Set Variables

{% set variable = 'result' %} {% set array = [ 'foo', 'bar', ] %}

slide-9
SLIDE 9

Arrays

PHP Twig

<?php print $foo[‘bar’][‘und']->content['baz']['foo']['bar']; ?> {{ foo.bar.content.baz.foo.bar }}

slide-10
SLIDE 10

Finding Stuff in Twig

Print all available variables Print content of specific variable

{{ dump() }} {{ dump(foo) }}

slide-11
SLIDE 11

Loops

<h2>Organizers</h2> <ul> {% for user in users %} <li>{{ user.username}}</li> {% endfor %} </ul> <h2>Organizers</h2> <ul> <li>David</li> <li>Peter</li> <li>Sean</li> </ul>

slide-12
SLIDE 12

Loops (Cont.)

{{ loop.length }} {{ loop.first }} {{ loop.last }} {{ loop.index }} {% if loop.first %} ... {% elseif loop.index == 2 %} ... {% elseif loop.last %} ... {% endif %}

slide-13
SLIDE 13

Loop with Empty Text

<h2>Organizers</h2> <ul> {% for user in users %} <li>{{ user.username}}</li> {% else %} <li>no results found</li> {% endfor %} </ul>

slide-14
SLIDE 14

Filter

<p> {% filter upper %} uppercase for the win {% endfilter %} </p>

slide-15
SLIDE 15

|Filter

{% set name = 'Sean' %} <span> {{ name|length }} </span> <span> 4 </span>

slide-16
SLIDE 16

Filters Reference

  • abs
  • batch
  • capitalize
  • convert_encoding
  • date
  • date_modify
  • default
  • escape
  • first
  • format
  • join
  • json_encode
  • keys
  • last
  • length
  • lower
  • merge
  • nl2br
  • number_format
  • raw
  • replace
  • reverse
  • round
  • slice
  • sort
  • split
  • striptags
  • title
  • trim
  • upper
  • url_encode
slide-17
SLIDE 17

Twig Blocks

page.html.twig page--front.html.twig

{% block headerblock %} <h2>DrupalCamp NJ</h2> {% endblock %} {% extends "page.html.twig" %} {% block headerblock %} {{ parent() }} <h4>Fourth Annual</h4> {% endblock %}

slide-18
SLIDE 18

Other Drupal 8 
 Tieme Changes

slide-19
SLIDE 19

HTML5 + CSS3

slide-20
SLIDE 20

Good Riddance

IE6 
 (<1%) IE7
 (<1%) IE8
 (~10%)

slide-21
SLIDE 21

CSS Built on 
 SMACSS & BEM

CSS 
 HTML

.field { margin: 20px 15px; } .field.field—name { color: orange; } <div class=“field field--name”>DCNJ</div>

slide-22
SLIDE 22

Extra Bits

  • Themes in /themes folder


no more /sites/all/themes/…

  • Templates are auto-loaded with hook_theme

implementation key!

  • Drupal 8 Theme Layer
slide-23
SLIDE 23

theme.info.yml

  • Formerly theme.info (same data)
  • No more stylesheets or scripts properties


(still have stylesheets-override & stylesheets-remove)

  • Need to define CSS & JS in *.libraries.yml

why-slider: version: 1.x css: theme: css/why-slider.css: {} js: js/why-slider.js: {} dependencies:

  • core/jquery
slide-24
SLIDE 24

Twig FTW!

Drupal Specific Functionality

slide-25
SLIDE 25

Filters

{% set class_name = 'dcnj/2015' %} {% set organizers = [ 'davidhernandez', 'pwolanin', ] %} {{ class_name|clean_class }} {{ organizers|without('pwolanin') }}, {{ attendees|placeholder('you') }} dcnj-2015 davidhernandez you

slide-26
SLIDE 26

Other Methods

addClass / removeClass setAttribute / removeAttribute

<div{{ attributes.setAttribute('id', 'camp').setAttribute('I-Love', 'NJ') }}> <div{{ attributes.removeAttribute('id') }}> <div{{ attributes.addClass('field-item-' ~ name|clean_class) }}> <div{{ attributes.removeClass('foo', 'bar').addClass('baz') }}>

slide-27
SLIDE 27

Translate

  • r

{% trans %} Author {{ username }} {% endtrans %} {{ 'Author: @username'| t({'@username':username}) }}

slide-28
SLIDE 28

Twig Debug

<!-- THEME DEBUG --> <!-- CALL: _theme('page') --> <!-- FILE NAME SUGGESTIONS: * page--front.html.twig * page--node.html.twig x page.html.twig

  • ->

<!-- BEGIN OUTPUT from 'core/themes/bartik/templates/page.html.twig' -->

Enable in /sites/default/services.yml

slide-29
SLIDE 29

Improving the 
 Tiemer Experience

CONSENSUS BANANA

Phase 1
 Move classes from preprocess 
 to templates Phase 2
 Move templates from Core 
 to the new Classy base theme


slide-30
SLIDE 30

Consensus Banana

slide-31
SLIDE 31

Phase 1 Example

{% set classes = [ 'node', 'node--type-' ~ node.bundle|clean_class, node.isPromoted() ? 'node--promoted', node.isSticky() ? 'node--sticky', not node.isPublished() ? 'node--unpublished', view_mode ? 'node--view-mode-' ~ view_mode|clean_class, 'clearfix', ] %} <article{{ attributes.addClass(classes) }}> {{ content }} </article>

node.html.twig

slide-32
SLIDE 32

Phase 2 - Classy

slide-33
SLIDE 33

Why Classy

slide-34
SLIDE 34

Getting Involved

  • FREE Mentoring & Collaboration Day


Sunday, Feb. 1 @ Tigerlabs

  • Monthly Mentoring & Collaboration


Third Tuesday 7-9pm @ Tigerlabs

  • IRC #drupal-twig #drupal-contribute
  • Bi-weekly Twig Hangouts (alt. 7am/pm)


Next is Thursday, Feb. 12 @ 7pm

slide-35
SLIDE 35

CROWD

Communications Group, LLC

Questions?

Sean T. Walsh
 sean@crowdcg.com @seantwalsh @crowdcg irc: crowdcg