drupaltour lviv — theming in drupal8 (ivan tibezh, internetdevels)
TRANSCRIPT
![Page 1: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/1.jpg)
Темізація у Drupal 8. Від простого до складного
Ivan Tibezh at InternetDevels
![Page 2: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/2.jpg)
Big Changes
● Twig templating
● IE9 and >
![Page 3: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/3.jpg)
THEME.info.yml
name: Bartiktype: themedescription: 'A flexible, recolorable theme with many regions and a responsive, mobile-first layout.'package: Coreversion: VERSIONcore: 8.x
![Page 4: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/4.jpg)
THEME.info.yml
stylesheets: all: - css/layout.css - css/style.css - css/colors.css print: - css/print.css
![Page 5: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/5.jpg)
THEME.info.yml
regions: header: Header help: Help page_top: 'Page top' page_bottom: 'Page bottom' highlighted: Highlighted featured: Featured content: Content
![Page 6: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/6.jpg)
THEME.info.yml
settings: shortcut_module_link: '0'
![Page 7: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/7.jpg)
logo.svg
logo.png or logo.gif can be addedvia Drupal UI
![Page 8: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/8.jpg)
Declare Base Theme
base theme: classy
![Page 9: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/9.jpg)
Modify Core/Module CSS
stylesheets-override:- global-styling/views.module.css
![Page 10: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/10.jpg)
Remove Core/Module CSS
stylesheets-remove: - normalize.css
![Page 11: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/11.jpg)
Adding Stylesheets
![Page 12: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/12.jpg)
Adding Libraries
![Page 13: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/13.jpg)
Declare Library
THEME.info.yml
liraries: - custom/global-styling
![Page 14: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/14.jpg)
Add CSS and JS
THEME.libraries.ymlglobal-styling:
version: 1.xcss:
theme:global-styling/css/style.css: { media: all }
js:global-styling/js/scripts.js: {}
![Page 15: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/15.jpg)
Optionally Include JQuery
THEME.libraries.yml
dependencies:- core/jquery
![Page 16: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/16.jpg)
Other Ways to include assets
● hook_library_info_alter()
● hook_preprocess_page()
● hook_page_attachments_alter()
![Page 17: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/17.jpg)
Twig
![Page 18: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/18.jpg)
Why Twig
● Secure
● Separate business logic from display
● Faster, smarter templating engine
![Page 19: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/19.jpg)
sites/default/services.yml
debug: trueauto_reload: true
![Page 20: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/20.jpg)
Twig Templates
● 141 Twig templates*
● To override, place in *.html.twig in
theme folder
● Don’t forget to drush cr
![Page 21: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/21.jpg)
Twig Code Basics
● To print {{ my_variable }}
● To comment {# comment #}
● To operate {% if title %}
![Page 22: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/22.jpg)
Twig Code Extras
● Translate {{ 'Home'|t }}
● Check_plain {{ title|striptags }}
![Page 23: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/23.jpg)
Reuse Templates
{% include 'code/modules/node/templates/node.html.twig' %}
![Page 24: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/24.jpg)
Twig Preprocess
THEME.theme replaces template.php
function custom_preprocess_page(&$vars) {$vars['legal'] = t('Legal text');
}
![Page 25: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/25.jpg)
Twig {{dump}}*
● {{ dump()}}
● {{ dump(my_variable) }}
![Page 26: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/26.jpg)
Responsive
Breakpoints in core.
THEME.breakpoints.yml
![Page 27: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/27.jpg)
Other things
● Drupal settings for use in js
● Classy module
● Initialize Image Style Settings in theme
● No HOOK_process
![Page 28: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/28.jpg)
hook_theme
Only templates.
![Page 29: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/29.jpg)
Render API
theme('custom_theme', $params);
$element = array('#theme' => 'custom_theme',// Params.
);
![Page 30: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/30.jpg)
Twig templating
![Page 31: DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c4abe1bb61ebe95a8b462a/html5/thumbnails/31.jpg)
IE9 and >