Drupal8 theming
Transcript of Drupal8 theming
![Page 1: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/1.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Drupal 8 front-end point of view
![Page 2: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/2.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
About meHristina Hristova-Bozadzhieva Front-end developer at FFW
E-mail: [email protected]
SlideShare: drupal8-theming
![Page 3: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/3.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Agenda1. Drupal 8 the new things2. Custom theme structure3. Classy – new base theme4. Twig. What is Twig? 5. How to debbug and some examples in Drupal 86. Resources
![Page 4: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/4.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
What’s new in Drupal 8
27 Questions (and Answers) from My First Drupal 8 Site Build
![Page 5: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/5.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
A new template engineDrupal 7 = PHP Template Drupal 8 = TWIG Template
Conflict between Back-end & Front-end
Potential Security Issues
55 templates 154 functions
Keeps Back-end & Frontend Separated
More Secure – Autoescaping
149 templates 21 functions
![Page 6: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/6.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Responsive ThemingDrupal 8 Not just mobile friendly, But mobile - first
![Page 7: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/7.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Stop Divs It!!! – How it’s look drupal 7
![Page 8: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/8.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
HTML 5 out of the box
![Page 9: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/9.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Drupal 8 WON’T supportInternet Explorer 6Internet Explorer 7Internet Explorer 8
![Page 10: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/10.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
CSS build on SMACSS and BEMhttps://smacss.com/Bembase layout component state themehttps://www.drupal.org/node/1887918
![Page 11: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/11.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Views in Core
![Page 12: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/12.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Views = fully customizable…With the Drupal 8 views, you can customize:
Admin listings Sidebar content Image galleries Slideshows REST output
![Page 13: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/13.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
New field types• E-mail• Link/URL• Phone number• Data/Time• Entity Reference
![Page 14: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/14.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
New Front-end libraries
![Page 15: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/15.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Create custom theme
![Page 16: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/16.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
CLASSY – a new base themeCore/themes/classy
In D8, default classes are stripped from Drupal core and moved into the base theme Classy.
The role of the Classy theme is to provide default markup and CSS for Drupal.
![Page 17: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/17.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
No more - Sites/all/where/the/f*ck/is/my/themes
[root]/themes/my_themeHow to create theme: great article by Matt Korostoff
![Page 18: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/18.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Drupal 8 theme structure• my_theme.info.yml• my_theme.libraries.yml• my_theme.breakpoints.
yml• my_theme.theme
• Css folder• Templates folder• Sass folder• Img folder• Js folder
![Page 19: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/19.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
theme.info.ymlname: [themename]type: themedescription: This is my custom Drupal 8 Themebase theme: classycore: 8.xengine: twigscreenshot: screenshot.png
# --- CSS ------------------------------------------stylesheets: all: - css/styles.cssstylesheets-remove: - normalize.css
# --- REGIONS --------------------------------------regions: header: ‘Header’...
# --- LIBRARIES --------------------------------------libraries: - [themename]/[namespace]
![Page 20: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/20.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
theme.libraries.yml# Global for all pagesglobal: version: 1.x css:
css/slider.css: {} js: js/slider.js: {} dependencies: - core/jquery
![Page 21: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/21.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
theme.breakpoints.ymlmy_theme.mobile:
label: mobile mediaQuery: '' weight: 0 multipliers: - 1x
my_theme.narrow: label: narrow mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
weight: 1 multipliers: - 1.5x // supports Android
-2x // supports Mac retina displaymy_theme.wide:
label: wide mediaQuery: 'all and (min-width: 851px)' weight: 2 multipliers: - 1x
![Page 22: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/22.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
theme.theme• THEME.theme replace template.php
• Theme functions go here.
![Page 23: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/23.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
![Page 24: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/24.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
What is TWIG? Twig is a “modern” template language ->
symphony, used by other systems
+ It’s easy to learn
Twig is a template framework that has replaced PHP Template in Drupal 8.
fast, secure and flexible.
http://twig.sensiolabs.org/documentation
http://twig.sensiolabs.org/pdf/Twig.pdf
![Page 25: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/25.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Intro to TwigThere are three delimiters you need to knows
• Print variables: {{ … }} • Comments: {# … #}• Execute statements: {% … %}
![Page 26: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/26.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
TWIGVariables 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 ‘.....’ %}
![Page 27: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/27.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Arrays1.PHP
<?phpprint $foo[‘bar’][‘und']->content['baz']['foo']['bar'];
?>
2. TWIG
{{ foo.bar.content.baz.foo.bar }}
![Page 28: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/28.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Finding Stuff in Twig1.Print all available variables
{{ dump() }}
2. Print content of specific variable{{ dump(foo) }}
![Page 29: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/29.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
LoopsTwig template:
<h2>Organizers</h2><ul>
{% for user in users %}<li>{{user.username}}</
li>{% endfor %}
</ul>
Output:
<h2>Organizers</h2><ul>
<li>Hrisi</li><li>John</li><li>Sean</li>
</ul>
![Page 30: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/30.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Loops{{ loop.length }}
{{ loop.first }}
{{ loop.last }}
{{ loop.index}}
{{% if loop.first %}}…{% elseif loop.index == 2 %}…{{% elseif loop.last %}}…{{% endif %}}
![Page 31: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/31.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
|FILTERTwig template
{% set name = ‘Hrisi’ %}<span> {{ name|length}}</span>
Output:
<span>5</span>
More info: http://twig.sensiolabs.org/doc/filters/index.html
![Page 32: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/32.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Filters Reference abs batch capitalize convert_encoding date date_modify default escape first format
join json_encode keys last length lower merge number_format raw
replace reverse round slice sort split striptags title trim upper url_encode
![Page 33: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/33.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
First template {# base.twig #}
{% for post in posts %}
{% block post %} <h1>{{ post.title }}</h1> <p>{{ post.body }}</p> {% endblock %}
{% endfor %}
Second template {# child.twig #}
{% extends "base.twig" %}
{% block post %} <article> <header>{{ post.title }}</header> <section>{{ post.text }}</section> </article>{% endblock %}
TWIG Basics inheritance
![Page 34: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/34.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
TWIG inheritance result{# child.twig #}
{% extends "base.twig" %}
{% block post %} <article> <header>{{ post.title }}</header> <section>{{ post.text }}</section> </article>{% endblock %}
Now, when rendering the child template
![Page 35: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/35.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
![Page 36: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/36.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
TOOLSHow to find stuff and debug
![Page 37: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/37.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Where are the twig files? In the system templates folder
(/core/modules/system/templates)
you’ll find more than 40 templates things like fields, nodes, pages, links.
All templates for the theme: [root]\core\themes\classy\templates\
They are separated in groups- layout- block- views- content- content-edit- field- navigation- dataset- forum- user- misc
![Page 38: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/38.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Services.yml If services.yml does not yet exist; copy default.services.yml and rename it to
services.yml.
Locate the twig.config parameters in your services.yml and make changes there.twig.config:
debug: true
Twig auto-reloadauto_reload: true - Not recommended in production environments (Default:
null).
Twig cachecache: false
![Page 39: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/39.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
SETTINGS.PHP Copy: sites/settings.local.php To: sites/default/settings.php
In Settings.php uncomment:
if (file_exists(__DIR__ . '/settings.local.php')) {include __DIR__ . '/settings.local.php';
}
![Page 40: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/40.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
FirebugIn firebug make sure that "Show Comments" is enabled:
![Page 41: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/41.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Disable CSS cache and clear the cache!!!
![Page 42: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/42.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
After refresh the page
![Page 43: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/43.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Another WayDevel module
• Download Devel module• Install Devel + Kint• Enable Devel and Kint
![Page 44: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/44.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Kint == Krumo for Drupal8
{{ kint(page) }}
![Page 45: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/45.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
![Page 46: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/46.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Resources and further reading• A brilliant blog post about D8 theming (Savas)• D8 theming guide (Sander)• YAML formatting (Symfony)• Intro to BEM (CSS Wizardry)• Adding assets to pages (drupal.org)• Twig documentation (Sensiolabs)• Drupal-specific Twig filters (drupal.org)• Twig coding standards (drupal.org)• Twig debugging and devel (drupalize.me)
![Page 47: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/47.jpg)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Questions &
Answers
![Page 48: Drupal8 theming](https://reader031.fdocuments.in/reader031/viewer/2022012919/58a78c051a28ab5f6c8b47bf/html5/thumbnails/48.jpg)
Thank you!