Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus...
Transcript of Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus...
![Page 1: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/1.jpg)
Aha! Understanding and Using
Render Arrays in Drupal 8
![Page 2: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/2.jpg)
Gus Childs @guschilds
![Page 4: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/4.jpg)
![Page 5: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/5.jpg)
![Page 6: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/6.jpg)
let’s talk about render arrays
![Page 7: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/7.jpg)
but why render arrays?
![Page 8: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/8.jpg)
problem: build feature X
like the last site but
slightly different
![Page 9: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/9.jpg)
solution: copy/paste?
![Page 10: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/10.jpg)
Don’t Repeat Yourself!
![Page 11: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/11.jpg)
solution: abstraction
![Page 12: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/12.jpg)
render arrays are abstract
(picturesbyann, Flickr)
![Page 13: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/13.jpg)
(davidchief, Flickr)
![Page 14: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/14.jpg)
“arrays in Drupal 8?!” -you
![Page 15: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/15.jpg)
![Page 16: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/16.jpg)
“yeah, sorry.” -maintainers
![Page 17: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/17.jpg)
Aha! Understanding and Using
Render Arrays in Drupal 8
![Page 18: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/18.jpg)
Render Arrays: what they look like
how they work why they’re useful the Render API their future
![Page 19: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/19.jpg)
what do render arrays look like?
(Pulp Fiction)
![Page 20: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/20.jpg)
theme() render arrays
![Page 21: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/21.jpg)
// Using theme() in D7. $logo = theme('image', array( 'path' => 'logo.png', 'alt' => t('My logo!'), ));
![Page 22: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/22.jpg)
// Using theme() in D7. $logo = theme('image', array( 'path' => 'logo.png', 'alt' => t('My logo!'), ));
![Page 23: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/23.jpg)
// Using theme() in D7. $logo = theme('image', array( 'path' => 'logo.png', 'alt' => t('My logo!'), ));
![Page 24: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/24.jpg)
// The equivalent render array in D7. $logo = array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'), );
![Page 25: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/25.jpg)
// The equivalent render array in D7. $logo = array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'), );
![Page 26: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/26.jpg)
// The equivalent render array in D7. $logo = array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'), );
![Page 27: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/27.jpg)
// The equivalent render array in D7. $logo = array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'), );
![Page 28: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/28.jpg)
// Using theme() in D7. $logo = theme('image', array( 'path' => 'logo.png', 'alt' => t('My logo!'), ));
![Page 29: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/29.jpg)
// Printing a string variable in D7. <?php print $logo; ?>
![Page 30: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/30.jpg)
// The resulting markup. <img src="logo.png" alt="My logo!" />
![Page 31: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/31.jpg)
// The equivalent render array in D7. $logo = array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'), );
![Page 32: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/32.jpg)
// How to NOT print a render array in D7. <?php print $logo; ?>
![Page 33: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/33.jpg)
// The result. Huh? Array
![Page 34: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/34.jpg)
// Rendering/printing a render array in D7. <?php print render($logo); ?>
![Page 35: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/35.jpg)
// The resulting markup. That’s better. <img src="logo.png" alt="My logo!" />
![Page 36: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/36.jpg)
// Printing/rendering anything in D8. {{ logo }}
![Page 37: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/37.jpg)
// Printing/rendering a render array in D7. <?php print render($logo); ?>
// Printing/rendering a render array in D8. {{ logo }}
![Page 38: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/38.jpg)
// A simplified page array. array( 'header' => array(...), 'content' => array( 'node' => array( '#theme' => 'node', '#node' => Object, '#view_mode' => 'full', ), ), 'sidebar_first' => array(...), 'footer' => array(...), );
![Page 39: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/39.jpg)
// Rendering the content region in D7. <?php print render($page['content']); ?>
drupal7/modules/system/page.tpl.php
![Page 40: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/40.jpg)
// Rendering the content region in D8. {{ page.content }}
drupal8/core/themes/stable/templates/layout/page.html.twig
![Page 41: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/41.jpg)
// A simplified page array. array( 'header' => array(...), 'content' => array( 'node' => array( '#theme' => 'node', '#node' => Object, '#view_mode' => 'full', ), ), 'sidebar_first' => array(...), 'footer' => array(...), );
![Page 42: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/42.jpg)
// A simplified page array. array( 'header' => array(...), 'content' => array( 'node' => array( '#theme' => 'node', '#node' => Object, '#view_mode' => 'full', ), ), 'sidebar_first' => array(...), 'footer' => array(...), );
![Page 43: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/43.jpg)
how do render arrays
work?
(Pete Birkinshaw, Flickr)
![Page 44: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/44.jpg)
// Printing/rendering a render array in D7. <?php print render($logo); ?>
// Printing/rendering a render array in D8. {{ logo }}
![Page 45: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/45.jpg)
// Our simple render array in D7. $logo = array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'), );
![Page 46: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/46.jpg)
// The resulting markup. <img src="logo.png" alt="My logo!" />
![Page 47: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/47.jpg)
Theme System
(Erin Khoo, Flickr)
![Page 48: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/48.jpg)
/** * Implements hook_theme(). */ function system_theme() { return array( 'html' => array( 'render element' => 'html', 'template' => 'html', ), 'page' => array( 'render element' => 'page', 'template' => 'page', ), // (Other theme hook definitions). ); }
drupal7/modules/system/system.module drupal7/includes/theme.inc
(simplified)
![Page 49: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/49.jpg)
/** * Implements hook_theme(). */ function system_theme() { return array( 'html' => array( 'render element' => 'html', ), 'page' => array( 'render element' => 'page', ), // (Other theme hook definitions). ); }
drupal8/core/modules/system/system.module drupal8/core/includes/theme.inc
(simplified)
![Page 50: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/50.jpg)
/** * Implements hook_theme(). */ function system_theme() { return array( 'image' => array( 'variables' => array( 'path' => NULL, 'width' => NULL, 'height' => NULL, 'alt' => '', 'title' => NULL, 'attributes' => array(), ), ), ); }
drupal7/modules/system/system.module drupal7/includes/theme.inc
(simplified)
![Page 51: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/51.jpg)
/** * Implements hook_theme(). */ function system_theme() { return array( 'image' => array( 'variables' => array( 'path' => NULL, 'width' => NULL, 'height' => NULL, 'alt' => '', 'title' => NULL, 'attributes' => array(), ), ), ); }
drupal7/modules/system/system.module drupal7/includes/theme.inc
(simplified)
![Page 52: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/52.jpg)
/** * Implements hook_theme(). */ function system_theme() { return array( 'image' => array( 'variables' => array( 'path' => NULL, 'width' => NULL, 'height' => NULL, 'alt' => '', 'title' => NULL, 'attributes' => array(), ), ), ); }
drupal7/modules/system/system.module drupal7/includes/theme.inc
(simplified)
![Page 53: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/53.jpg)
// Our simple render array in D7. $logo = array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'), );
![Page 54: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/54.jpg)
// Our simple render array in D7. $logo = array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'), );
![Page 55: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/55.jpg)
// Our simple render array in D7. $logo = array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'), );
![Page 56: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/56.jpg)
/** * Implements hook_theme(). */ function system_theme() { return array( 'image' => array( 'variables' => array( 'path' => NULL, 'width' => NULL, 'height' => NULL, 'alt' => '', 'title' => NULL, 'attributes' => array(), ), ), ); }
drupal7/modules/system/system.module drupal7/includes/theme.inc
(simplified)
![Page 57: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/57.jpg)
/** * Implements hook_theme(). */ function system_theme() { return array( 'image' => array( 'variables' => array( 'path' => NULL, 'width' => NULL, 'height' => NULL, 'alt' => '', 'title' => NULL, 'attributes' => array(), ), ), ); }
drupal7/modules/system/system.module drupal7/includes/theme.inc
(simplified)
![Page 58: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/58.jpg)
/** * Implements hook_theme(). */ function system_theme() { return array( 'image' => array( 'variables' => array( 'uri' => NULL, 'width' => NULL, 'height' => NULL, 'alt' => '', 'title' => NULL, 'attributes' => array(), 'sizes' => NULL, 'srcset' => array(), 'style_name' => NULL, ), ), ); }
drupal8/core/modules/system/system.module drupal8/core/includes/theme.inc
(simplified)
![Page 59: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/59.jpg)
/** * Implements hook_theme(). */ function system_theme() { return array( 'image' => array( 'variables' => array( 'uri' => NULL, 'width' => NULL, 'height' => NULL, 'alt' => '', 'title' => NULL, 'attributes' => array(), 'sizes' => NULL, 'srcset' => array(), 'style_name' => NULL, ), ), ); }
drupal8/core/modules/system/system.module drupal8/core/includes/theme.inc
(simplified)
![Page 60: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/60.jpg)
/** * Implements hook_theme(). */ function system_theme() { return array( 'image' => array( 'variables' => array( 'uri' => NULL, 'width' => NULL, 'height' => NULL, 'alt' => '', 'title' => NULL, 'attributes' => array(), 'sizes' => NULL, 'srcset' => array(), 'style_name' => NULL, ), ), ); }
drupal8/core/modules/system/system.module drupal8/core/includes/theme.inc
(simplified)
![Page 61: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/61.jpg)
// Our simple render array in D7. $logo = array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'), );
![Page 62: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/62.jpg)
// Our simple render array in D8. $logo = array( '#theme' => 'image', '#uri' => 'public://logo.png', '#alt' => t('My logo!'), );
![Page 63: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/63.jpg)
// A responsive image render array in D8. $logo_uri = 'public://logo.png'; $logo = array( '#theme' => 'image', '#uri' => $logo_uri, '#alt' => t('My logo!'), '#sizes' => '100vw', '#srcset' => array( array( 'uri' => ImageStyle::load('thumbnail')->buildUri($logo_uri), 'width' => '250w', ), array( 'uri' => ImageStyle::load('large')->buildUri($logo_uri), 'width' => '750w', ), ), );
![Page 64: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/64.jpg)
// A responsive image render array in D8. $logo_uri = 'public://logo.png'; $logo = array( '#theme' => 'image', '#uri' => $logo_uri, '#alt' => t('My logo!'), '#sizes' => '100vw', '#srcset' => array( array( 'uri' => ImageStyle::load('thumbnail')->buildUri($logo_uri), 'width' => '250w', ), array( 'uri' => ImageStyle::load('large')->buildUri($logo_uri), 'width' => '750w', ), ), );
![Page 65: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/65.jpg)
// A responsive image render array in D8. $logo_uri = 'public://logo.png'; $logo = array( '#theme' => 'image', '#uri' => $logo_uri, '#alt' => t('My logo!'), '#sizes' => '100vw', '#srcset' => array( array( 'uri' => ImageStyle::load('thumbnail')->buildUri($logo_uri), 'width' => '250w', ), array( 'uri' => ImageStyle::load('large')->buildUri($logo_uri), 'width' => '750w', ), ), );
![Page 66: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/66.jpg)
// A responsive image render array in D8. $logo_uri = 'public://logo.png'; $logo = array( '#theme' => 'image', '#uri' => $logo_uri, '#alt' => t('My logo!'), '#sizes' => '100vw', '#srcset' => array( array( 'uri' => ImageStyle::load('thumbnail')->buildUri($logo_uri), 'width' => '250w', ), array( 'uri' => ImageStyle::load('large')->buildUri($logo_uri), 'width' => '750w', ), ), );
![Page 67: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/67.jpg)
// The resulting responsive image markup. <img src="logo.png" alt="My logo!" sizes="100vw" srcset="styles/thumbnail/public/logo.png 250w, styles/large/public/logo.png 750w">
![Page 68: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/68.jpg)
// A responsive image render array in D8. $logo_uri = 'public://logo.png'; $logo = array( '#theme' => 'image', '#uri' => $logo_uri, '#alt' => t('My logo!'), '#sizes' => '100vw', '#srcset' => array( array( 'uri' => ImageStyle::load('thumbnail')->buildUri($logo_uri), 'width' => '250w', ), array( 'uri' => ImageStyle::load('large')->buildUri($logo_uri), 'width' => '750w', ), ), );
![Page 69: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/69.jpg)
// The resulting responsive image markup. <img src="logo.png" alt="My logo!" sizes="100vw" srcset="styles/thumbnail/public/logo.png 250w, styles/large/public/logo.png 750w">
![Page 70: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/70.jpg)
/** * Implements hook_theme(). */ function system_theme() { return array( 'html' => array( 'render element' => 'html', 'template' => 'html', ), 'page' => array( 'render element' => 'page', 'template' => 'page', ), 'image' => array( 'variables' => array( // Bunches 'o variables. ), ), ); }
drupal7/modules/system/system.module drupal7/includes/theme.inc
(simplified)
![Page 71: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/71.jpg)
/** * Implements hook_theme(). */ function system_theme() { return array( 'html' => array( 'render element' => 'html', 'template' => 'html', ), 'page' => array( 'render element' => 'page', 'template' => 'page', ), 'image' => array( 'variables' => array( // Bunches 'o variables. ), ), ); }
drupal7/modules/system/system.module drupal7/includes/theme.inc
(simplified)
![Page 72: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/72.jpg)
/** * Implements hook_theme(). */ function system_theme() { return array( 'html' => array( 'render element' => 'html', 'template' => 'html', ), 'page' => array( 'render element' => 'page', 'template' => 'page', ), 'image' => array( 'variables' => array( // Bunches 'o variables. ), ), ); }
drupal7/modules/system/system.module drupal7/includes/theme.inc
(simplified)
![Page 73: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/73.jpg)
/** * Returns HTML for an image. */ function theme_image($variables) { $attributes = $variables['attributes']; $attributes['src'] = file_create_url($variables['path']);
foreach (array('width', 'height', 'alt', 'title') as $key) {
if (isset($variables[$key])) { $attributes[$key] = $variables[$key]; } }
return '<img' . drupal_attributes($attributes) . ' />'; }
drupal7/includes/theme.inc
![Page 74: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/74.jpg)
![Page 75: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/75.jpg)
function theme_item_list($variables) { $items = $variables['items']; $title = $variables['title']; $type = $variables['type']; $attributes = $variables['attributes'];
// Only output the list container and title, if there are any list items. // Check to see whether the block title exists before adding a header. // Empty headers are not semantic and present accessibility challenges. $output = '<div class="item-list">'; if (isset($title) && $title !== '') { $output .= '<h3>' . $title . '</h3>'; }
if (!empty($items)) { $output .= "<$type" . drupal_attributes($attributes) . '>'; $num_items = count($items); $i = 0; foreach ($items as $item) { $attributes = array(); $children = array(); $data = ''; $i++; if (is_array($item)) { foreach ($item as $key => $value) { if ($key == 'data') { $data = $value; } elseif ($key == 'children') { $children = $value; } else { $attributes[$key] = $value; } } } else { $data = $item; } if (count($children) > 0) { // Render nested list. $data .= theme_item_list(array('items' => $children, 'title' => NULL, 'type' => $type, 'attributes' => $attributes)); } if ($i == 1) { $attributes['class'][] = 'first'; } if ($i == $num_items) { $attributes['class'][] = 'last'; } $output .= '<li' . drupal_attributes($attributes) . '>' . $data . "</li>\n"; } $output .= "</$type>"; } $output .= '</div>'; return $output; }
drupal7/includes/theme.inc
![Page 76: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/76.jpg)
Don’t Repeat Yourself!
![Page 77: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/77.jpg)
/** * Implements hook_theme(). */ function system_theme() { return array( 'html' => array( 'render element' => 'html', ), 'page' => array( 'render element' => 'page', ), ); }
drupal8/core/modules/system/system.module drupal8/core/includes/theme.inc
(simplified)
![Page 78: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/78.jpg)
/** * Returns HTML for an image. */ function theme_image($variables) { $attributes = $variables['attributes']; $attributes['src'] = file_create_url($variables['path']);
foreach (array('width', 'height', 'alt', 'title') as $key) {
if (isset($variables[$key])) { $attributes[$key] = $variables[$key]; } }
return '<img' . drupal_attributes($attributes) . ' />'; }
drupal7/includes/theme.inc
![Page 79: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/79.jpg)
drupal8/core/themes/stable/templates/field/image.html.twig
<img{{ attributes }} />
![Page 80: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/80.jpg)
drupal7/includes/theme.inc/** * Returns HTML for an image. */ function theme_image($variables) { $attributes = $variables['attributes']; $attributes['src'] = file_create_url($variables['path']);
foreach (array('width', 'height', 'alt', 'title') as $key) {
if (isset($variables[$key])) { $attributes[$key] = $variables[$key]; } }
return '<img' . drupal_attributes($attributes) . ' />'; }
![Page 81: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/81.jpg)
// A responsive image render array in D8. $logo_uri = 'public://logo.png'; $logo = array( '#theme' => 'image', '#uri' => $logo_uri, '#alt' => t('My logo!'), '#sizes' => '100vw', '#srcset' => array( array( 'uri' => ImageStyle::load('thumbnail')->buildUri($logo_uri), 'width' => '250w', ), array( 'uri' => ImageStyle::load('large')->buildUri($logo_uri), 'width' => '750w', ), ), );
![Page 82: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/82.jpg)
/** * Prepares variables for image templates. */ function template_preprocess_image(&$variables) { if (!empty($variables['uri'])) { $variables['attributes']['src'] = file_url_transform_relative(file_create_url($variables['uri'])); }
// There is normally a lot of code here that takes the responsive variables // and turns them into properly formatted attribute values.
foreach (array('width', 'height', 'alt', 'title', 'sizes') as $key) { if (isset($variables[$key])) { // If the property has already been defined in the attributes, // do not override, including NULL. if (array_key_exists($key, $variables['attributes'])) { continue; } $variables['attributes'][$key] = $variables[$key]; } } }
drupal8/core/includes/theme.inc
![Page 83: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/83.jpg)
/** * Prepares variables for image templates. */ function template_preprocess_image(&$variables) { if (!empty($variables['uri'])) { $variables['attributes']['src'] = file_url_transform_relative(file_create_url($variables['uri'])); }
// There is normally a lot of code here that takes the responsive variables // and turns them into properly formatted attribute values.
foreach (array('width', 'height', 'alt', 'title', 'sizes') as $key) { if (isset($variables[$key])) { // If the property has already been defined in the attributes, // do not override, including NULL. if (array_key_exists($key, $variables['attributes'])) { continue; } $variables['attributes'][$key] = $variables[$key]; } } }
drupal8/core/includes/theme.inc
![Page 84: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/84.jpg)
/** * Prepares variables for image templates. */ function template_preprocess_image(&$variables) { if (!empty($variables['uri'])) { $variables['attributes']['src'] = file_url_transform_relative(file_create_url($variables['uri'])); }
// There is normally a lot of code here that takes the responsive variables // and turns them into properly formatted attribute values.
foreach (array('width', 'height', 'alt', 'title', 'sizes') as $key) { if (isset($variables[$key])) { // If the property has already been defined in the attributes, // do not override, including NULL. if (array_key_exists($key, $variables['attributes'])) { continue; } $variables['attributes'][$key] = $variables[$key]; } } }
drupal8/core/includes/theme.inc
![Page 85: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/85.jpg)
/** * Prepares variables for image templates. */ function template_preprocess_image(&$variables) { if (!empty($variables['uri'])) { $variables['attributes']['src'] = file_url_transform_relative(file_create_url($variables['uri'])); }
// There is normally a lot of code here that takes the responsive variables // and turns them into properly formatted attribute values.
foreach (array('width', 'height', 'alt', 'title', 'sizes') as $key) { if (isset($variables[$key])) { // If the property has already been defined in the attributes, // do not override, including NULL. if (array_key_exists($key, $variables['attributes'])) { continue; } $variables['attributes'][$key] = $variables[$key]; } } }
drupal8/core/includes/theme.inc
![Page 86: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/86.jpg)
<img{{ attributes }} />
drupal8/core/themes/stable/templates/field/image.html.twig
![Page 87: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/87.jpg)
{% set classes = [ 'node', 'node--type-' ~ node.bundle|clean_class, node.isPromoted() ? 'node--promoted', node.isSticky() ? 'node--sticky', not node.isPublished() ? 'node--unpublished', view_mode ? 'node--view-mode-' ~ view_mode|clean_class, ] %} {{ attach_library('classy/node') }} <article{{ attributes.addClass(classes) }}> // Node markup. </article>
drupal8/core/themes/classy/templates/content/node.html.twig
![Page 88: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/88.jpg)
Theme System
(Erin Khoo, Flickr)
![Page 89: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/89.jpg)
/** * Implements hook_theme(). */ function system_theme() { return array( 'image' => array( 'variables' => array( 'uri' => NULL, 'width' => NULL, 'height' => NULL, 'alt' => '', 'title' => NULL, 'attributes' => array(), 'sizes' => NULL, 'srcset' => array(), 'style_name' => NULL, ), ), ); }
drupal8/core/modules/system/system.module drupal8/core/includes/theme.inc
(simplified)
![Page 90: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/90.jpg)
// A responsive image render array in D8. $logo_uri = 'public://logo.png'; $logo = array( '#theme' => 'image', '#uri' => $logo_uri, '#alt' => t('My logo!'), '#sizes' => '100vw', '#srcset' => array( array( 'uri' => ImageStyle::load('thumbnail')->buildUri($logo_uri), 'width' => '250w', ), array( 'uri' => ImageStyle::load('large')->buildUri($logo_uri), 'width' => '750w', ), ), );
![Page 91: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/91.jpg)
// Printing/rendering our logo in D8. {{ logo }}
![Page 92: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/92.jpg)
drupal8/core/includes/theme.inc
/** * Prepares variables for image templates. */ function template_preprocess_image(&$variables) { if (!empty($variables['uri'])) { $variables['attributes']['src'] = file_url_transform_relative(file_create_url($variables['uri'])); }
// There is normally a lot of code here that takes the responsive variables // and turns them into properly formatted attribute values.
foreach (array('width', 'height', 'alt', 'title', 'sizes') as $key) { if (isset($variables[$key])) { // If the property has already been defined in the attributes, // do not override, including NULL. if (array_key_exists($key, $variables['attributes'])) { continue; } $variables['attributes'][$key] = $variables[$key]; } } }
![Page 93: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/93.jpg)
<img{{ attributes }} />
drupal8/core/themes/stable/templates/field/image.html.twig
![Page 94: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/94.jpg)
// The resulting responsive image markup. <img src="logo.png" alt="My logo!" sizes="100vw" srcset="styles/thumbnail/public/logo.png 250w, styles/large/public/logo.png 750w">
![Page 95: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/95.jpg)
why are render arrays
useful?
(ndrwfgg, Flickr)
![Page 96: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/96.jpg)
theme functions such as theme_image() hook_theme() defines theme hooks
the theme() function
![Page 97: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/97.jpg)
theme functions such as theme_image() hook_theme() defines theme hooks
the theme() function
![Page 98: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/98.jpg)
// Using theme() in Drupal 7. $logo = theme('image', array( 'path' => 'logo.png', 'alt' => t('My logo!'), ));
![Page 99: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/99.jpg)
https://api.drupal.org/api/drupal/includes!theme.inc/function/theme/7.x
![Page 100: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/100.jpg)
https://api.drupal.org/api/drupal/includes!theme.inc/function/theme/7.x
“Avoid calling this function directly. It is preferable to replace direct calls to the theme() function with calls to
drupal_render() by passing a render array with a #theme key to drupal_render(),
which in turn calls theme().”
![Page 101: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/101.jpg)
<?php if ($logo): ?> <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo"> <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /> </a> <?php endif; ?>
drupal7/modules/system/page.tpl.php
![Page 102: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/102.jpg)
<?php if ($logo): ?> <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo"> <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /> </a> <?php endif; ?>
drupal7/modules/system/page.tpl.php
![Page 103: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/103.jpg)
/** * Preprocess variables for page.tpl.php */ function template_preprocess_page(&$variables) { $variables['logo'] = theme_get_setting('logo'); }
drupal7/includes/theme.inc
![Page 104: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/104.jpg)
/** * Implements hook_preprocess_page(). */ function my_theme_preprocess_page(&$variables) { if (drupal_is_front_page()) { $variables['logo'] = 'logo-front.jpg'; } }
![Page 105: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/105.jpg)
<?php if ($logo): ?> <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo"> <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /> </a> <?php endif; ?>
drupal7/modules/system/page.tpl.php
![Page 106: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/106.jpg)
<?php if ($logo): ?> <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo"> <?php print render($logo); ?> </a> <?php endif; ?>
theoretical drupal7/modules/system/page.tpl.php
![Page 107: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/107.jpg)
theoretical drupal7/includes/theme.inc
/** * Preprocess variables for page.tpl.php */ function template_preprocess_page(&$variables) { $variables['logo'] = theme('image', array( 'path' => theme_get_setting('logo'), 'alt' => t('Home'), )); }
![Page 108: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/108.jpg)
/** * Implements hook_preprocess_page(). */ function my_theme_preprocess_page(&$variables) { dpm($variables['logo']); }
![Page 109: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/109.jpg)
// The current state of the logo variable. <img src="logo.png" alt="Home" />
![Page 110: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/110.jpg)
/** * Implements hook_preprocess_page(). */ function my_theme_preprocess_page(&$variables) { $new_logo = str_replace(' />', ' class="logo" />', $variables['logo']); $variables['logo'] = $new_logo; }
![Page 111: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/111.jpg)
/** * Preprocess variables for page.tpl.php */ function template_preprocess_page(&$variables) { $variables['logo'] = array( '#theme' => 'image', '#path' => theme_get_setting('logo'), '#alt' => t('Home'), ); }
theoretical drupal7/includes/theme.inc
![Page 112: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/112.jpg)
/** * Implements hook_preprocess_page(). */ function my_theme_preprocess_page(&$variables) { dpm($variables['logo']); }
![Page 113: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/113.jpg)
// The current state of the logo variable. array( '#theme' => 'image', '#path' => 'logo.jpg', '#alt' => 'Home', );
![Page 114: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/114.jpg)
/** * Implements hook_preprocess_page(). */ function my_theme_preprocess_page(&$variables) { $variables['logo']['#attributes']['class'][] = 'logo'; }
![Page 115: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/115.jpg)
// The current state of the logo variable. array( '#theme' => 'image', '#path' => 'logo.jpg', '#alt' => 'Home', '#attributes' => array( 'class' => array('logo'), ), );
![Page 116: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/116.jpg)
<?php if ($logo): ?> <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo"> <?php print render($logo); ?> </a> <?php endif; ?>
theoretical drupal7/modules/system/page.tpl.php
![Page 117: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/117.jpg)
// The resulting markup with our class. <img src="logo.png" alt="Home" class="logo" />
![Page 118: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/118.jpg)
problem: build feature X
like the last site but
slightly different
![Page 119: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/119.jpg)
// The current state of the logo variable. array( '#theme' => 'image', '#path' => 'logo.jpg', '#alt' => 'Home', );
![Page 120: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/120.jpg)
/** * Implements hook_preprocess_page(). */ function my_theme_preprocess_page(&$variables) { $variables['logo']['#attributes']['class'][] = 'logo'; }
![Page 121: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/121.jpg)
{% set classes = [ 'node', 'node--type-' ~ node.bundle|clean_class, node.isPromoted() ? 'node--promoted', node.isSticky() ? 'node--sticky', not node.isPublished() ? 'node--unpublished', view_mode ? 'node--view-mode-' ~ view_mode|clean_class, ] %} {{ attach_library('classy/node') }} <article{{ attributes.addClass(classes) }}> // Node markup. </article>
drupal8/core/themes/classy/templates/content/node.html.twig
![Page 122: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/122.jpg)
solution: abstraction
![Page 123: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/123.jpg)
(john mcsporran, Flickr)
the Render API
![Page 124: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/124.jpg)
Theme System? Render API?
![Page 125: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/125.jpg)
Theme System: hook_theme()
hook_preprocess_HOOK() hook_theme_suggestions_HOOK()
Twig templating engine
![Page 126: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/126.jpg)
Render API: Render arrays Render elements
Caching Attachments Placeholders
![Page 127: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/127.jpg)
#theme #type
#[variable] #cache
#attached #weight #markup #prefix #suffix
![Page 128: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/128.jpg)
#theme #type
#[variable] #cache
#attached #weight #markup #prefix #suffix
![Page 129: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/129.jpg)
drupal8/core/lib/Drupal/Core/Render/theme.api.php
“The core structure of the Render API is the render array, which is a hierarchical associative array containing data to be rendered
and properties describing how the data should be rendered.”
![Page 130: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/130.jpg)
Render API: Render arrays Render elements
Caching Attachments Placeholders
![Page 131: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/131.jpg)
“Modules have the capability of defining elements, which are
essentially prepackaged default render arrays.”
![Page 132: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/132.jpg)
/** * @FormElement("checkbox") */ class Checkbox extends FormElement {
public function getInfo() { $class = get_class($this); return array( '#input' => TRUE, '#return_value' => 1, '#process' => array( array($class, 'processCheckbox'), array($class, 'processAjaxForm'), array($class, 'processGroup'), ), '#pre_render' => array( array($class, 'preRenderCheckbox'), array($class, 'preRenderGroup'), ), '#theme' => 'input__checkbox', '#theme_wrappers' => array('form_element'), '#title_display' => 'after', ); }
drupal8/core/lib/Drupal/Core/Render/Element/Checkbox.php
![Page 133: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/133.jpg)
/** * @FormElement("checkbox") */ class Checkbox extends FormElement {
public function getInfo() { $class = get_class($this); return array( '#input' => TRUE, '#return_value' => 1, '#process' => array( array($class, 'processCheckbox'), array($class, 'processAjaxForm'), array($class, 'processGroup'), ), '#pre_render' => array( array($class, 'preRenderCheckbox'), array($class, 'preRenderGroup'), ), '#theme' => 'input__checkbox', '#theme_wrappers' => array('form_element'), '#title_display' => 'after', ); }
drupal8/core/lib/Drupal/Core/Render/Element/Checkbox.php
![Page 134: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/134.jpg)
// Our simple render element in D8. $form['setting'] = array( '#type' => 'checkbox', '#title' => t('Are we having fun yet?'), );
![Page 135: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/135.jpg)
// Our simple render element in D8. $form['setting'] = array( '#type' => 'checkbox', '#title' => t('Are we having fun yet?'), );
![Page 136: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/136.jpg)
// Our simple render element in D8. $form['setting'] = array( '#type' => 'checkbox', '#title' => t('Are we having fun yet?'), );
![Page 137: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/137.jpg)
/** * @FormElement("checkbox") */ class Checkbox extends FormElement {
public function getInfo() { $class = get_class($this); return array( '#input' => TRUE, '#return_value' => 1, '#process' => array( array($class, 'processCheckbox'), array($class, 'processAjaxForm'), array($class, 'processGroup'), ), '#pre_render' => array( array($class, 'preRenderCheckbox'), array($class, 'preRenderGroup'), ), '#theme' => 'input__checkbox', '#theme_wrappers' => array('form_element'), '#title_display' => 'after', ); }
drupal8/core/lib/Drupal/Core/Render/Element/Checkbox.php
![Page 138: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/138.jpg)
/** * @FormElement("checkbox") */ class Checkbox extends FormElement {
public function getInfo() { $class = get_class($this); return array( '#input' => TRUE, '#return_value' => 1, '#process' => array( array($class, 'processCheckbox'), array($class, 'processAjaxForm'), array($class, 'processGroup'), ), '#pre_render' => array( array($class, 'preRenderCheckbox'), array($class, 'preRenderGroup'), ), '#theme' => 'input__checkbox', '#theme_wrappers' => array('form_element'), '#title_display' => 'after', ); }
drupal8/core/lib/Drupal/Core/Render/Element/Checkbox.php
![Page 139: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/139.jpg)
// Our simple render element in D8. $form['setting'] = array( '#type' => 'checkbox', '#title' => t('Are we having fun yet?'), );
![Page 140: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/140.jpg)
/** * @FormElement("checkbox") */ class Checkbox extends FormElement {
public function getInfo() { $class = get_class($this); return array( '#input' => TRUE, '#return_value' => 1, '#process' => array( array($class, 'processCheckbox'), array($class, 'processAjaxForm'), array($class, 'processGroup'), ), '#pre_render' => array( array($class, 'preRenderCheckbox'), array($class, 'preRenderGroup'), ), '#theme' => 'input__checkbox', '#theme_wrappers' => array('form_element'), '#title_display' => 'after', ); }
drupal8/core/lib/Drupal/Core/Render/Element/Checkbox.php
![Page 141: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/141.jpg)
The Form API is a subset of the Render API.
![Page 142: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/142.jpg)
// Our simple render element in D8. $form['setting'] = array( '#type' => 'checkbox', '#title' => t('Are we having fun yet?'), );
![Page 143: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/143.jpg)
Render API: Render arrays Render elements
Caching Attachments Placeholders
![Page 144: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/144.jpg)
// Caching a render array. '#cache' => array( 'keys' => array('entity_view', 'node', $node->id()), 'contexts' => array('languages'), 'tags' => array('node:' . $node->id()), 'max-age' => Cache::PERMANENT, ),
![Page 145: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/145.jpg)
Cacheability of render arrays drupal.org/developing/api/8/render/arrays/cacheability
![Page 146: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/146.jpg)
// Attaching libraries and JS settings to render arrays. $build['#attached']['library'][] = 'core/jquery'; $build['#attached']['drupalSettings']['foo'] = 'bar';
![Page 147: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/147.jpg)
// Using placeholders in render array markup. $build['my_element'] = array( '#attached' => array('placeholders' => array('@foo' => 'replacement')), '#markup' => array('Something about @foo'), );
![Page 148: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/148.jpg)
// Using placeholders in render array markup. $build['my_element'] = array( '#attached' => array('placeholders' => array('@foo' => 'replacement')), '#markup' => array('Something about @foo'), );
![Page 149: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/149.jpg)
#theme #type
#[variable] #cache
#attached #weight #markup #prefix #suffix
![Page 150: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/150.jpg)
Render API: Render arrays Render elements
Caching Attachments Placeholders
![Page 151: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/151.jpg)
the future
(Davis Doherty, Flickr)
![Page 153: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/153.jpg)
Unify & simplify render & theme system: component-based rendering (enables pattern library, style guides, interface previews,
client-side re-rendering) drupal.org/node/2702061
![Page 154: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/154.jpg)
Unify & simplify render & theme system: component-based rendering (enables pattern library, style guides, interface previews,
client-side re-rendering) drupal.org/node/2702061
![Page 155: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/155.jpg)
Render arrays, the current theme system, and the current Render API
may be removed from Drupal 9.
![Page 156: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/156.jpg)
I didn’t just waste an hour of your time.
![Page 157: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/157.jpg)
Render arrays are still important …for now. :)
![Page 158: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/158.jpg)
Render Arrays: what they look like
how they work why they’re handy the Render API their future
![Page 159: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/159.jpg)
// Our simple render array in D8. $logo = array( '#theme' => 'image', '#uri' => 'public://logo.png', '#alt' => t('My logo!'), );
![Page 160: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/160.jpg)
/** * Implements hook_theme(). */ function system_theme() { return array( 'image' => array( 'variables' => array( 'uri' => NULL, 'width' => NULL, 'height' => NULL, 'alt' => '', 'title' => NULL, 'attributes' => array(), 'sizes' => NULL, 'srcset' => array(), 'style_name' => NULL, ), ), ); }
drupal8/core/modules/system/system.module drupal8/core/includes/theme.inc
(simplified)
![Page 161: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/161.jpg)
// Printing/rendering anything in D8. {{ logo }}
![Page 162: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/162.jpg)
drupal8/core/includes/theme.inc/** * Prepares variables for image templates. */ function template_preprocess_image(&$variables) { if (!empty($variables['uri'])) { $variables['attributes']['src'] = file_url_transform_relative(file_create_url($variables['uri'])); }
// There is normally a lot of code here that takes the responsive variables // and turns them into properly formatted attribute values.
foreach (array('width', 'height', 'alt', 'title', 'sizes') as $key) { if (isset($variables[$key])) { // If the property has already been defined in the attributes, // do not override, including NULL. if (array_key_exists($key, $variables['attributes'])) { continue; } $variables['attributes'][$key] = $variables[$key]; } } }
![Page 163: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/163.jpg)
<img{{ attributes }} />
drupal8/core/themes/stable/templates/field/image.html.twig
![Page 164: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/164.jpg)
// The resulting markup. <img src="logo.png" alt="My logo!" />
![Page 165: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/165.jpg)
/** * Implements hook_preprocess_page(). */ function my_theme_preprocess_page(&$variables) { $variables['logo']['#attributes']['class'][] = 'logo'; }
my_theme/template.php
![Page 166: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/166.jpg)
// Our simple render/form element in D8. $form['setting'] = array( '#type' => 'checkbox', '#title' => t('Are we having fun yet?'), );
![Page 167: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/167.jpg)
#theme #type
#[variable] #cache
#attached #weight #markup #prefix #suffix
![Page 168: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/168.jpg)
// Caching a render array. '#cache' => array( 'keys' => array('entity_view', 'node', $node->id()), 'contexts' => array('languages'), 'tags' => array('node:' . $node->id()), 'max-age' => Cache::PERMANENT, ),
// Attaching libraries and JS settings to render arrays. $build['#attached']['library'][] = 'core/jquery'; $build['#attached']['drupalSettings']['foo'] = ‘bar';
// Using placeholders in render array markup. $build['my_element'] = array( '#attached' => array('placeholders' => array('@foo' => 'replacement')), '#markup' => array('Something about @foo'), );
![Page 169: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/169.jpg)
Aha! Understanding and Using
Render Arrays in Drupal 8
![Page 170: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/170.jpg)
further reading:
Render API Overview (8.x) api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!
theme.api.php/group/theme_render/8.2.x
Theme system overview (8.x) api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!
theme.api.php/group/themeable/8.2.x
Render Arrays in Drupal 7 drupal.org/node/930760
![Page 171: Aha! Understanding and Using Render Arrays in Drupal 8...and Using Render Arrays in Drupal 8 Gus Childs @guschilds chromatichq.com @chromatichq let’s talk about render arrays but](https://reader033.fdocuments.net/reader033/viewer/2022053119/60a13f54a4e96129e3067f6a/html5/thumbnails/171.jpg)
further reading:
Render API Overview (8.x) api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!
theme.api.php/group/theme_render/8.2.x
Theme system overview (8.x) api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!
theme.api.php/group/themeable/8.2.x
Render Arrays in Drupal 7 drupal.org/node/930760