drupal 8 introduction to theming
TRANSCRIPT
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?