Scribd
Upload
75 views

Drupal 8 Theming Deep Dive

This document discusses theming in Drupal 8. It explains that theming controls the HTML output and overrides the default renderings from modules. Templates are used to generate HTML output and Drupal 8 uses the Twig templating language. Themes can provide template suggestions, preprocess functions, libraries, breakpoints configuration, and declare theme hooks to customize output.

Uploaded by

kavudin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
75 views

Drupal 8 Theming Deep Dive

This document discusses theming in Drupal 8. It explains that theming controls the HTML output and overrides the default renderings from modules. Templates are used to generate HTML output and Drupal 8 uses the Twig templating language. Themes can provide template suggestions, preprocess functions, libraries, breakpoints configuration, and declare theme hooks to customize output.

Uploaded by

kavudin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 55

Drupal 8 Theming

Deep Dive
Romain JARRAUD

Trainer/consultant

Trained People

@romainjarraud (mainly in french)
What is theming?
Theming?

Fonctionnal Display

Drupal and modules Theme


Theming?

• THEMING = HTML output



• Other outputs could be RSS feed, JSON…

• HEADfull Drupal8 here!
Theming?
• Modules produce datas.

• Modules have default renderings.

• For example, Block module define
block.twig.html template which render each
block.

• The theme OVERRIDES the default


renderings.
Theming?

Theme overrides defaults:


• html code for every element on the


page.

• styles: font size, colors, images...

• effets using javascript.
Web Page
Browser CSS

Request
Theme
HTML

Drupal &
Templates
modules Content
Create a theme
Create a theme
• /themes/ive/ive.info.yml
End of the story!
Maybe not…
Theme files
Templates
TWIG

• Drupal 8 uses TWIG.



• TWIG created by Fabien Potencier.

• Templating system to generate HTML.
TWIG

• Template name .html.twig: example of


page.html.twig for the page template.

• They hold the HTML tags along with
TWIG code.
TWIG (quickly)
• Display the content of var: {{ var }}.

• Display any kind of variable (string, array, object):
{{ node.title }}.

• Function: {% if var %} {% endif %}.

• Comments: {# comment #}

• Translation:

• {% trans %} translatable {{ string }} {% endtrans %}.

• Ready to be translated through Drupal UI!
TWIG (quickly)
• Filters:

• {{ date|format_date(‘medium’) }}

• string:

• Escaping: {{ text }} (default).

• No escaping: {{ text|passthrough }} (be carreful!).

• Placeholder : {{ text|placeholder }}.

• {{ content|without(‘links’) }}.

• {{ string|lower }} (upper as well).

• {{ class_name|clean_class }}.

• {{ id_name|clean_id }}.
TWIG
/themes/ive/templates/block.html.twig
TWIG Debug

Activate Twig Debug in local environment by


editing the file /sites/default/services.yml.
TWIG Debug
• Not enough because Drupal caches entity rendering.

• Uncomment the loading of a local.settings.php file
in /sites/default/settings.php.

That file adds a backend cache render service which avoid


Drupal to cache.
Template suggestions

• Depending on context you can ask Drupal


to load a specific template.

• For example to display a node Drupal uses
node.html.twig. But it can use node--
article.html.twig (if it exists!) for any node
of type article.
Template suggestions

• A module defines suggestions with


hook_theme_suggestions_HOOK().

• Other modules or themes can add
suggestions with
hook_theme_suggestions_alter() or
hook_theme_suggestions_HOOK_alter().
Template suggestions

(Those comments are shown



thanks to TWIG Debug mode)
Override

• Copy original file into theme template


folder.

• Rename it if necessary.

• Empty theme registry.

• Do what you want!
Preprocess functions
Preprocess functions
Modules Theme
preprocess preprocess
$variables

$variables
$variables

Default
Template
preprocess
Called functions order
Theme suggestions

• MODULE_theme_suggestions_HOOK(array $variables)

• OTHERMODULE_theme_suggestions_alter(array &$suggestions, array $variables,
$hook)

• OTHERMODULE_theme_suggestions_HOOK_alter(array &$suggestions, array
$variables)

• THEME_theme_suggestions_alter(array &$suggestions, array $variables, $hook)

• THEME_theme_suggestions_HOOK_alter(array &$suggestions, array $variables)

Preprocess

• template_preprocess_HOOK(array &$variables)

• OTHERMODULE_preprocess(array &$variables, $hook)

• OTHERMODULE_preprocess_HOOK(array &$variables)

• THEME_preprocess(array &$variables, $hook)

• THEME_preprocess_HOOK(array &$variables)
Librairies
Librairies
• No more manually asset loading.

• Bye bye drupal_add_css(), drupal_add_js()
and drupal_add_library()!

• Must add any asset through a library.

• Drupal takes care of libraries loading and
dependencies.
Librairies

Declaration Loading
Libraries declaration
/themes/ive/ive.libraries.yml
Libraries loading
Loading from /themes/ive/ive.info.yml
Libraries loading

Loading from a template file



/themes/ive/templates/block.html.twig
Libraries loading
Loading from /themes/ive/ive.theme using
THEME_page_attachments_alter()
Libraries loading

Loading from /themes/ive/ive.theme using a


preprocess fonction
Library dependency
• No javascript loaded for anonymous users.

• Dependencies should be explicit.
/themes/ive/ive.libraries.yml
From PHP to JS
/themes/ive/ive.theme

/themes/ive/js/ive.js
Breakpoints
Breakpoints

Breakpoints are exposed on the server side.



For example, images can be loaded depending
on those breakpoints (using Responsive Image
module).
Breakpoints
/themes/ive/ive.breakpoints.yml
Breakpoints
Configuration
Configuration

• How to add settings in the backoffice.



• Each theme gets its own default form.

• Alter the form with
THEME_form_system_theme_settings_alter()
(using the Form API).
Configuration
/themes/ive/config/install/ive.settings.yml

Defines:

• ive.settings configuration.

• « ive » with its default value « one ».

This configuration is loaded during installation.
Configuration
/themes/ive/ive.theme
Configuration
Theme hook
declaration
Theme hook declaration

•Each theme hook is associated with a


template file.

•Each theme hook got its own


preprocess function
(template_preprocess_HOOK()) and
theme suggestions function
(MODULE_theme_suggestions_HOOK()).
Theme hook declaration
/modules/simple/simple.module
Theme hook declaration
/modules/simple/src/Controller/simple.php
A few more things…
• Everything is a bloc (nearly): breadcrumb,
messages…

• Logo format is SVG.



• Base theme Classy.

• No more theme functions but templates instead.

• No more theme() fonction but Render Arrays.

• No more process functions.

• PLEASE, no more database queries in templates!!!
Conclusion

Not so many things


to learn compared to Drupal 7.

!

Easier with Drupal 8!


Thanks!
Q&A

You might also like