drupal 8 introduction to theming

DRUPAL8 THEMINGBraham Pal Singh

Senior consultant, Capgemini

INTRODUCTION

● What’s New in Drupal8

● D8 core structure

● D8 theme structure

● The Twig Template Engine

● Responsive Images

What’s new in Drupal 8?

Responsive Theming

HTML5 out of the box

Views in Core

Views = fully customizable...With the Drupal 8 views, you can

customize:– Admin listings – Sidebar content – Image galleries – Slideshows – REST output

Restyled administration interface

New front-end libraries

The Classy Base Theme• core/themes/classy• Used by Bartik & Seven• Declare in theme.info.yml: base theme: classy

The D8 core structure●root/themes

●root/modules

●root/core/themes

●root/core/modules

The D8 theme structure●themename.info.yml

●themename.libraries.yml

●themename.theme

●css folder

●templates folder

●sass folder

●img folder

●js folder

Create an .info.yml file

DRUPAL 7 DRUPAL 8

theme.info.ymlname: [themename]type: themedescription: This is my custom Drupal 8 Themecore: 8.xengine: twigscreenshot: screenshot.pngstylesheets: all: - css/styles.cssregions: header: ‘Header’...

libraries: - [themename]/[namespace]

theme.libraries.yml

[namespace]: version: 1.x js: js/foo.js

What is TWIG ??

What is Twig?Twig is a template framework that has replaced

PHPTemplate in Drupal 8.

fast, secure and flexible.

http://twig.sensiolabs.org/documentation

TWIG

IDE integration

TWIG

recognizable syntax

by the creator of Symfony Fabien

Potencier

TWIG

Intro to Twig

TWIG

There are three delimeters you need to know.

● Print variables: {{ … }}

● Comments: {# … #}

● Execute statements: {% … %}

TWIG

● Variables can be accessed directly in Twig.

● Classes can be drilled into to show attributes:

<div {{ attributes }}>

{{ content }}

</div>

● Conditional statements: {% if … %}{% endif %}

● Loops: {% for … %}{% endfor %}

● Blocks:

{% block blockname %}...{% endblock %}

● Extends:

{% extends ‘.....’ %}

TWIGPHPTemplat

eTwig

what does it look like?

TWIG

print with {{ }}

TWIG

commands with {% %}

TWIG

comments with {# #}

TWIG

drill down into all variables with .(dot)

TWIG

less code than PHP functions

TWIG

theme_image becomes image.html.twig

less code than PHP functions

TWIG

theme_username becomes username.html.twig

TWIG

• PHP template reads files from disk on every use

Twig templates are read once & compiled into classes

Rendering should get much faster when the same

content element appears multiple times on the page.

Consolidating many similar templates will result in an additional gain.

Possible performance gains

TWIG

• Saving PHP code in the database is a HUGE no-no.

• Twig is not PHP, and is safe to store!

In-browser template editing finally safe.

TWIG

One template can return markup for both your PHP generated pages, as well as pages generated vi JS in AJAX callbacks.

We can use other open source libraries like TwigJS.

(https://github.com/schmittjoh/twig.js)

Security• Drupal 7 would often print out unsanitized data. You could

even run database queries from directly inside the theme files.

• Drupal 8 can automatically sanitize variables and won't permit unsafe functions to run.

Twig template files can be used on the front end, too.

TWIGWhy Twig in Drupal8?

Drupal 7: Drupal 8:

D8 IMPROVEMENTS

remove theme functions (and overrides) entirely.

remove process.

D8 IMPROVEMENTS

remove render. remove page alter?

Drupal 8 Template FilesDrupal 7 node.tpl.php file: Drupal 8 node.html.twig file:

THEME.schema.yml

Theme functions & preprocess

Responsive Images

• theme.breakpoints.ymlEnable the Responsive images

module

Thank you!

Questions?