drupal 8 theming
DESCRIPTION
TRANSCRIPT
![Page 1: Drupal 8 theming](https://reader036.vdocuments.us/reader036/viewer/2022081716/54b7b9764a7959181f8b46c0/html5/thumbnails/1.jpg)
INTRODUCTION TO DRUPAL 8 THEMINGSuryanto Rachmat Pratomo Ardianto
![Page 2: Drupal 8 theming](https://reader036.vdocuments.us/reader036/viewer/2022081716/54b7b9764a7959181f8b46c0/html5/thumbnails/2.jpg)
WHAT’S NEW
• Completely new theme system: Twig
• New javascript libraries: jQuery 2.0, Underscore.js & Backbone.js (not loaded by default)
• .info files are now .info.yml
![Page 3: Drupal 8 theming](https://reader036.vdocuments.us/reader036/viewer/2022081716/54b7b9764a7959181f8b46c0/html5/thumbnails/3.jpg)
WHAT’S GONE?• theme_ * functions not used (use Twig templating
system .html.twig instead)
• Most first/last/odd/even classes removed in favor of CSS3 pseudo selectors
• Garland removed from Drupal core
• Internet Explorer 6, 7 and 8 no longer fully supported (https://drupal.org/project/ie8)
![Page 4: Drupal 8 theming](https://reader036.vdocuments.us/reader036/viewer/2022081716/54b7b9764a7959181f8b46c0/html5/thumbnails/4.jpg)
WHAT’S THE SAME?
• Region and blocks
• Preprocess function
![Page 5: Drupal 8 theming](https://reader036.vdocuments.us/reader036/viewer/2022081716/54b7b9764a7959181f8b46c0/html5/thumbnails/5.jpg)
WHAT DOES IT LOOK LIKE?
![Page 6: Drupal 8 theming](https://reader036.vdocuments.us/reader036/viewer/2022081716/54b7b9764a7959181f8b46c0/html5/thumbnails/6.jpg)
WHAT DOES IT LOOK LIKE? .info.yml
![Page 7: Drupal 8 theming](https://reader036.vdocuments.us/reader036/viewer/2022081716/54b7b9764a7959181f8b46c0/html5/thumbnails/7.jpg)
.THEME FILE
![Page 8: Drupal 8 theming](https://reader036.vdocuments.us/reader036/viewer/2022081716/54b7b9764a7959181f8b46c0/html5/thumbnails/8.jpg)
NODE.HTML.TWIG
![Page 9: Drupal 8 theming](https://reader036.vdocuments.us/reader036/viewer/2022081716/54b7b9764a7959181f8b46c0/html5/thumbnails/9.jpg)
SYSTEM TEMPLATES core/modules/system/templates
![Page 10: Drupal 8 theming](https://reader036.vdocuments.us/reader036/viewer/2022081716/54b7b9764a7959181f8b46c0/html5/thumbnails/10.jpg)
BREADCRUMB TEMPLATE core/modules/system/breadcrumb.html.twig
![Page 11: Drupal 8 theming](https://reader036.vdocuments.us/reader036/viewer/2022081716/54b7b9764a7959181f8b46c0/html5/thumbnails/11.jpg)
TWIG TEMPLATES
![Page 12: Drupal 8 theming](https://reader036.vdocuments.us/reader036/viewer/2022081716/54b7b9764a7959181f8b46c0/html5/thumbnails/12.jpg)
MORE READABLE TEMPLATE
![Page 13: Drupal 8 theming](https://reader036.vdocuments.us/reader036/viewer/2022081716/54b7b9764a7959181f8b46c0/html5/thumbnails/13.jpg)
TWIG DELIMITERS
![Page 14: Drupal 8 theming](https://reader036.vdocuments.us/reader036/viewer/2022081716/54b7b9764a7959181f8b46c0/html5/thumbnails/14.jpg)
VARIABLES
![Page 15: Drupal 8 theming](https://reader036.vdocuments.us/reader036/viewer/2022081716/54b7b9764a7959181f8b46c0/html5/thumbnails/15.jpg)
FILTERS
![Page 16: Drupal 8 theming](https://reader036.vdocuments.us/reader036/viewer/2022081716/54b7b9764a7959181f8b46c0/html5/thumbnails/16.jpg)
CONTROL STRUCTURE
![Page 17: Drupal 8 theming](https://reader036.vdocuments.us/reader036/viewer/2022081716/54b7b9764a7959181f8b46c0/html5/thumbnails/17.jpg)
INCLUDING OTHER TEMPLATES FILE
![Page 18: Drupal 8 theming](https://reader036.vdocuments.us/reader036/viewer/2022081716/54b7b9764a7959181f8b46c0/html5/thumbnails/18.jpg)
TEMPLATE INHERITANCE
![Page 19: Drupal 8 theming](https://reader036.vdocuments.us/reader036/viewer/2022081716/54b7b9764a7959181f8b46c0/html5/thumbnails/19.jpg)
CHILD TEMPLATE FILE
![Page 20: Drupal 8 theming](https://reader036.vdocuments.us/reader036/viewer/2022081716/54b7b9764a7959181f8b46c0/html5/thumbnails/20.jpg)
EXTENDING TWIG
• custom filters
• custom functions
• custom tags
![Page 21: Drupal 8 theming](https://reader036.vdocuments.us/reader036/viewer/2022081716/54b7b9764a7959181f8b46c0/html5/thumbnails/21.jpg)
QUESTION?