Upload File

aha! understanding and using render arrays in drupal 8...and using render arrays in drupal 8 gus...

  • Home
  • Documents
  • 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
171
Aha! Understanding and Using Render Arrays in Drupal 8

Upload: others

Post on 03-Jan-2021

10 views

Category:

Documents


0 download

Report

TRANSCRIPT

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

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

Gus Childs @guschilds

Page 3: 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

chromatichq.com @chromatichq

http://chromatichq.com
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
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
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

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

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

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

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

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

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

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

(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

“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
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

“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

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

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

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

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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

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

// 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

// 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

// 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

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

/** * 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

/** * 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

/** * 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

/** * 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

/** * 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

// 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

// 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

// 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

/** * 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

/** * 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

/** * 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

/** * 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

/** * 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

/** * 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

/** * 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

/** * 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

/** * 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
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

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

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

/** * 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

/** * 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

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

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

// 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

/** * 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

/** * 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

/** * 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

/** * 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

<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

{% 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

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

/** * 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

// 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

// 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

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

<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

// 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

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

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

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

// 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://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://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

<?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

<?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

/** * 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

/** * 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

<?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

<?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

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

/** * 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

// 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

/** * 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

/** * 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

/** * 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

// 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

/** * 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

// 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

<?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

// 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

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

// 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

/** * 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

{% 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

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

(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

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

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

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

#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

#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

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

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

“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

/** * @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

/** * @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

// 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

// 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

// 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

/** * @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

/** * @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

// 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

/** * @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

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

// 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

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

// 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

Cacheability of render arrays drupal.org/developing/api/8/render/arrays/cacheability

https://www.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

// 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

// 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

// 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

#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

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

the future

(Davis Doherty, Flickr)

Page 152: 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

[meta] Refactor Render API to be OO drupal.org/node/1843798

https://www.drupal.org/node/1843798
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

Unify & simplify render & theme system: component-based rendering (enables pattern library, style guides, interface previews,

client-side re-rendering) drupal.org/node/2702061

https://www.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

Unify & simplify render & theme system: component-based rendering (enables pattern library, style guides, interface previews,

client-side re-rendering) drupal.org/node/2702061

https://www.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

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

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

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

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

// 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

/** * 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

// 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

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

<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

// 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

/** * 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

// 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

#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

// 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

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

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

http://api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!theme.api.php/group/theme_render/8.2.x
http://api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!theme.api.php/group/themeable/8.2.x
http://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

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

http://api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!theme.api.php/group/theme_render/8.2.x
http://api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!theme.api.php/group/themeable/8.2.x
http://drupal.org/node/930760

DRUPAL - Swico...Drupal 8.6.x 2018- 17634 files 104MB core Composer With libraries 22352 files 135MB. Basics - Performance Caches Entity Cache Render Cache Metadata bubbling Context

Theming Drupal 7 - Meet your new best friend, render()

Drupal kurzus security (Drupal 7)

SynapeIndia Drupal- Presentation on Drupal

Headless Drupal, Singapore Drupal Meetup

Arrays. Overview Overview of Arrays Creating Arrays Using Arrays

Chapter 7 Arrays and Vectors Introducing Arrays Introducing Arrays Declaring Arrays, Creating Arrays, and Initializing Arrays Declaring Arrays, Creating

STANWORTH HOUSE - Ribble Valley · Profile Sheeting Wall Timber Frames Render Stone Light AB AB AB SVP WP Render Render Render Slate Slate Render Brick Render Render Render Slate

CS193P - Lecture 19 - Stanford Universityweb.stanford.edu/class/cs193p/cgi-bin/drupal/system/...•Quickly render 2D or 3D graphics •Hardware implementation agnostic •OpenGL ES

Drupal Render API

Drupal campleuven: Secure Drupal Development

Computer programming1 Arrays. Computer programming2 ARRAYS Motivation Introduction to Arrays Static arrays Arrays and Functions Arrays, Classes, and typedef

Drupal | drupal themes | ecommerce sites | drupal theming

Installing Modules (Drupal 7) _ Drupal

V-Ray Render (GOOGLE SketchUp) - Interior Hotel Render

RETHINKING THE THEME LAYER IN DRUPAL 8COMPLEXITY Sensible flow of subsystems for Drupal 8*!* we still need help! drupal! render default! template template! override theme! registry

Arrays: Narrower terms include bead arrays, bead based arrays, bioarrays, bioelectronic arrays, cDNA arrays, cell arrays, DNA arrays, gene arrays, gene

SW Drupal Summit: HTML5+Drupal

Architecture of Drupal - Drupal Camp

GAM531 DPS931 – Week 11 Render State. The Render State Render State BuffersShadersSamplers Rasterizer State Blend State

Drupal Commerce Drupal camp

RETHINKING THE THEME LAYER IN DRUPAL 8 Sensible flow of subsystems for Drupal 8*! * we still need help! drupal! render default! template template! override theme! registry theme hook!

Learn Drupal 8 Render Pipeline

How to go from non-Drupal to Drupal 8 - Bixal · Installing Drupal 8 with drupal-composer ... namespace Drupal\migrate_from_symfony\Plugin\migrate\process; use Drupal\migrate\ProcessPluginBase;

Drupal 6 to Drupal 7

More Arrays Arrays and classes Multi-dimensional Arrays Dynamic arrays

THE NEW THEME LAYER IN DRUPAL 8 7: NEGATIVE Object or Array? •Mixed data types (strings, objects & arrays) Saturday, March 30, 2013 DRUPAL 7: NEGATIVE print or print render() ? •Different

Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the

OpenGL ES 1.1+ and ES 2 - AMDdeveloper.amd.com/.../GDC06-GLES_Tutorial_Day-Munshi-OpenGLES… · Buffer Objects Vertex Arrays Used to render primitives in OpenGL ES 1.0 Vertex array

Drupal and-flex-drupal camp

Dapper Drupal · Front-end Developer HTML + CSS + JS + themes + base themes + starter themes + theme functions + template files + render arrays + preprocess functions + process functions

Drupal 7 Render Array

DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays

Drupal Website Development, Drupal website Design, Drupal, Drupal developer

Drupal 8 Cache API …and tacos! · • Render arrays are the building blocks of a Drupal page • Introduced in Drupal 7 and allow for flexibility in extending / altering / overriding