7 to 8: Transitioning From theme() and Theme Functions to...
Transcript of 7 to 8: Transitioning From theme() and Theme Functions to...
![Page 1: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/1.jpg)
7 to 8: Transitioning From theme() and Theme Functions to Render Arrays and Templates
![Page 2: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/2.jpg)
Gus Childs @guschilds
![Page 3: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/3.jpg)
chromaticsites.com
![Page 4: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/4.jpg)
chromaticsites.com
![Page 5: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/5.jpg)
front-end back-end
![Page 6: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/6.jpg)
front-end this session back-end
![Page 7: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/7.jpg)
![Page 8: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/8.jpg)
<h1> </h1>
![Page 9: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/9.jpg)
render arrays > theme()
![Page 10: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/10.jpg)
templates > theme functions
![Page 11: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/11.jpg)
render arrays > theme() templates > theme functions
![Page 12: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/12.jpg)
render arrays > theme()
![Page 13: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/13.jpg)
![Page 14: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/14.jpg)
$variables['image'] = theme('image', array( 'path' => 'logo.png', 'alt' => t('My logo!'), ));
![Page 15: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/15.jpg)
// Drupal 7. <?php print $image; ?>
![Page 16: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/16.jpg)
<img src="logo.png" alt="My logo!" />
![Page 17: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/17.jpg)
$variables['image'] = array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'), );
![Page 18: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/18.jpg)
// Drupal 7. <?php print $image; ?>
![Page 19: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/19.jpg)
// Drupal 7. <?php print render($image); ?>
![Page 20: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/20.jpg)
$variables['image'] = array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'), );
![Page 21: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/21.jpg)
<img src="logo.png" alt="My logo!" />
![Page 22: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/22.jpg)
// Drupal 8. {{ image }}
![Page 23: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/23.jpg)
$variables['header'] = array( 'title' => array(...), 'slogan' => array(...), 'logo' => array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'), ), );
![Page 24: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/24.jpg)
$variables['header'] = array( 'title' => array(...), 'slogan' => array(...), 'logo' => array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'), ), );
![Page 25: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/25.jpg)
// From page.tpl.php: <?php print render($page['sidebar']); ?>
// From node.tpl.php: <?php print render($content); ?>
![Page 26: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/26.jpg)
render arrays > theme()
![Page 27: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/27.jpg)
templates > theme functions
![Page 28: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/28.jpg)
// Theme functions? // @see drupal.org/node/2575081 theme_image() theme_item_list() theme_link()
![Page 29: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/29.jpg)
![Page 30: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/30.jpg)
![Page 31: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/31.jpg)
![Page 32: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/32.jpg)
// Uses a render array. $variables['image'] = array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'), );
// Uses the theme() function. $variables['image'] = theme('image', array( 'path' => 'logo.png', 'alt' => t('My logo!'), ));
![Page 33: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/33.jpg)
// Uses a render array. $variables['image'] = array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'), );
// Uses the theme() function. $variables['image'] = theme('image', array( 'path' => 'logo.png', 'alt' => t('My logo!'), ));
![Page 34: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/34.jpg)
// Theme function. theme_image()
// Template. image.tpl.php
![Page 35: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/35.jpg)
// Theme function. theme_image()
// Template. // image.tpl.php
![Page 36: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/36.jpg)
![Page 37: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/37.jpg)
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) . ' />'; }
core’s theme.inc
![Page 38: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/38.jpg)
// Never do this! $image = theme_image(array( 'path' => 'logo.png', 'alt' => t('My logo!'), ));
![Page 39: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/39.jpg)
function my_theme_image($variables) { $attributes = $variables['attributes']; $attributes['data-src'] = file_create_url($variables['path']); $attributes['class'][] = 'lazyload';
foreach (array('width', 'height', 'alt', 'title') as $key) {
if (isset($variables[$key])) { $attributes[$key] = $variables[$key]; } }
return '<img' . drupal_attributes($attributes) . ' />'; }
my_theme’s template.php
![Page 40: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/40.jpg)
// Better, but still :(. $image = theme('image', array( 'path' => 'logo.png', 'alt' => t('My logo!'), ));
![Page 41: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/41.jpg)
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) . ' />'; }
core’s theme.inc
![Page 42: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/42.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; }
core’s theme.inc
![Page 43: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/43.jpg)
$output = '<div class="item-list">';
![Page 44: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/44.jpg)
core’s theme.incfunction 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; }
![Page 45: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/45.jpg)
// Theme function. theme_image()
// Template. image.tpl.php
![Page 46: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/46.jpg)
// Theme function. // theme_image()
// Template. image.tpl.php
![Page 47: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/47.jpg)
// Disclaimer: this is just an example. // Core already does this, but in a different // way, and you won’t need to in order to // render an image.
![Page 48: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/48.jpg)
my_module.module/** * Implements hook_theme(). */ function my_module_theme() { return array( 'image' => array( 'template' => 'image', 'variables' => array( 'path' => NULL, 'width' => NULL, 'height' => NULL, 'alt' => NULL, 'title' => NULL, 'attributes_array' => array(), 'attributes' => NULL, ), ), ); }
![Page 49: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/49.jpg)
my_module.module/** * Implements hook_theme(). */ function my_module_theme() { return array( 'image' => array( 'template' => 'image', 'variables' => array( 'path' => NULL, 'width' => NULL, 'height' => NULL, 'alt' => NULL, 'title' => NULL, 'attributes_array' => array(), 'attributes' => NULL, ), ), ); }
![Page 50: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/50.jpg)
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) . ' />'; }
core’s theme.inc
![Page 51: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/51.jpg)
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) . ' />'; }
core’s theme.inc
![Page 52: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/52.jpg)
// Drupal 7's theoretical image.tpl.php. <img<?php print $attributes; ?> />
// Drupal 8's theoretical image.html.twig. <img{{ attributes }} />
![Page 53: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/53.jpg)
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) . ' />'; }
core’s theme.inc
![Page 54: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/54.jpg)
/** * Implements hook_preprocess_HOOK() for image. */ function my_module_preprocess_image(&$variables) { $variables['attributes_array']['src'] = file_create_url($variables['path']);
foreach (array('width', 'height', 'alt', 'title') as $key) { if (isset($variables[$key])) { $variables['attributes_array'][$key] = $variables[$key]; } } }
my_module.module
![Page 55: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/55.jpg)
my_module.module
/** * Implements hook_process_HOOK() for image. */ function my_module_process_image(&$variables) { $variables['attributes'] = drupal_attributes($variables['attributes_array']); }
![Page 56: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/56.jpg)
my_module.module/** * Implements hook_preprocess_HOOK() for image. */ function my_module_preprocess_image(&$variables) { $variables['attributes_array']['src'] = file_create_url($variables['path']);
foreach (array('width', 'height', 'alt', 'title') as $key) { if (isset($variables[$key])) { $variables['attributes_array'][$key] = $variables[$key]; } } }
/** * Implements hook_process_HOOK() for image. */ function my_module_process_image(&$variables) { $variables['attributes'] = drupal_attributes($variables['attributes_array']); }
![Page 57: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/57.jpg)
function my_theme_image($variables) { $attributes = $variables['attributes']; $attributes['data-src'] = file_create_url($variables['path']); $attributes['class'][] = 'lazyload';
foreach (array('width', 'height', 'alt', 'title') as $key) {
if (isset($variables[$key])) { $attributes[$key] = $variables[$key]; } }
return '<img' . drupal_attributes($attributes) . ' />'; }
my_theme’s template.php
![Page 58: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/58.jpg)
/** * Implements hook_preprocess_HOOK() for image. */ function my_theme_preprocess_image(&$variables) { $variables['attributes_array']['class'][] = 'lazyload'; $variables['attributes_array']['data-src'] = $variables['attributes_array']['src']; unset($variables['attributes_array']['src']); }
my_theme’s template.php
![Page 59: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/59.jpg)
/** * Implements hook_preprocess_HOOK() for image. */ function my_module_preprocess_image(&$variables) { $variables['attributes_array']['src'] = file_create_url($variables['path']);
foreach (array('width', 'height', 'alt', 'title') as $key) { if (isset($variables[$key])) { $variables['attributes_array'][$key] = $variables[$key]; } } }
/** * Implements hook_preprocess_HOOK() for image. */ function my_theme_preprocess_image(&$variables) { $variables['attributes_array']['class'][] = 'lazyload'; $variables['attributes_array']['data-src'] = $variables['attributes_array']['src']; unset($variables['attributes_array']['src']); }
/** * Implements hook_process_HOOK() for image. */ function my_module_process_image(&$variables) { $variables['attributes'] = drupal_attributes($variables['attributes_array']); }
![Page 60: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/60.jpg)
/** * Implements hook_preprocess_HOOK() for image. */ function my_module_preprocess_image(&$variables) { $variables['attributes_array']['src'] = file_create_url($variables['path']);
foreach (array('width', 'height', 'alt', 'title') as $key) { if (isset($variables[$key])) { $variables['attributes_array'][$key] = $variables[$key]; } } }
/** * Implements hook_preprocess_HOOK() for image. */ function my_theme_preprocess_image(&$variables) { $variables['attributes_array']['class'][] = 'lazyload'; $variables['attributes_array']['data-src'] = $variables['attributes_array']['src']; unset($variables['attributes_array']['src']); }
/** * Implements hook_process_HOOK() for image. */ function my_module_process_image(&$variables) { $variables['attributes'] = drupal_attributes($variables['attributes_array']); }
![Page 61: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/61.jpg)
$variables['image'] = array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'), );
![Page 62: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/62.jpg)
// Drupal 7. <?php print render($image); ?>
// Drupal 8. {{ image }}
![Page 63: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/63.jpg)
// Without the lazyload preprocessing. <img src="logo.png" alt="My logo!" />
// With the lazyload preprocessing. <img data-src="logo.png" class="lazyload" alt="My logo!" />
![Page 64: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/64.jpg)
// Drupal 7's theoretical image.tpl.php. <img<?php print $attributes; ?> />
// Drupal 8's theoretical image.html.twig. <img{{ attributes }} />
![Page 65: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/65.jpg)
core’s theme.incfunction 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; }
![Page 66: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/66.jpg)
templates > theme functions
![Page 67: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/67.jpg)
render arrays > theme()
![Page 68: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/68.jpg)
// Example: You’re building a module for a // multi-site installation that renders the // logo in a particular way. This logo will // be printed in each site’s page template // and may be altered by each theme.
![Page 69: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/69.jpg)
<header> <h1><?php print $title; ?></h1> <?php print theme('image', array( 'path' => 'logo.png', 'alt' => t('My logo!'), )); ?> </header>
page.tpl.php
![Page 70: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/70.jpg)
/** * Implements hook_preprocess_HOOK() for page. */ function cool_logo_preprocess_page(&$variables) { $variables['logo'] = theme('image', array( 'path' => 'logo.png', 'alt' => t('My logo!'), )); }
cool_logo.module
![Page 71: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/71.jpg)
<header> <h1><?php print $title; ?></h1> <?php print $logo; ?> </header>
page.tpl.php
![Page 72: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/72.jpg)
cool_logo.module
/** * Implements hook_preprocess_HOOK() for page. */ function cool_logo_preprocess_page(&$variables) { $variables['logo'] = theme('image', array( 'path' => 'logo.png', 'alt' => t('My logo!'), )); }
![Page 73: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/73.jpg)
/** * Implements hook_preprocess_HOOK() for page. */ function my_theme_preprocess_page(&$variables) { dpm($variables['logo']); }
my_theme’s template.php
![Page 74: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/74.jpg)
<img src="logo.png" alt="My logo!" />
![Page 75: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/75.jpg)
/** * Implements hook_preprocess_HOOK() for page. */ function my_theme_preprocess_page(&$variables) { $find = 'My logo!'; $replace = t('Woah! Logo!'); $logo = str_replace($find, $replace, $variables['logo']); $variables['logo'] = $logo; }
my_theme’s template.php
![Page 76: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/76.jpg)
cool_logo.module
/** * Implements hook_preprocess_HOOK() for page. */ function cool_logo_preprocess_page(&$variables) { $variables['logo'] = theme('image', array( 'path' => 'logo.png', 'alt' => t('My logo!'), )); }
![Page 77: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/77.jpg)
/** * Implements hook_preprocess_HOOK() for page. */ function cool_logo_preprocess_page(&$variables) { $variables['logo'] = array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'), ); }
cool_logo.module
![Page 78: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/78.jpg)
my_theme’s template.php
/** * Implements hook_preprocess_HOOK() for page. */ function my_theme_preprocess_page(&$variables) { dpm($variables['logo']); }
![Page 79: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/79.jpg)
array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'), );
![Page 80: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/80.jpg)
/** * Implements hook_preprocess_HOOK() for page. */ function my_theme_preprocess_page(&$variables) { // Change the alt text of the logo. $variables['logo']['#alt'] = t('Woah! Logo!'); }
my_theme’s template.php
![Page 81: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/81.jpg)
<header> <h1><?php print $title; ?></h1> <?php print render($logo); ?> </header>
page.tpl.php
![Page 82: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/82.jpg)
<header> <h1><?php print $title; ?></h1> <?php print render($logo); ?> </header>
overridden page.tpl.php
![Page 83: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/83.jpg)
<header> <h1><?php print $title; ?></h1> <?php print render($logo); ?> </header>
page.tpl.php
![Page 84: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/84.jpg)
<header> <h1>{{ title }}</h1> {{ logo }} </header>
page.html.twig
![Page 85: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/85.jpg)
woah. huh?
![Page 86: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/86.jpg)
// Uses a render array. $variables['image'] = array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'), );
// Uses the theme() function. $variables['image'] = theme('image', array( 'path' => 'logo.png', 'alt' => t('My logo!'), ));
![Page 87: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/87.jpg)
// Theme function. theme_image()
// Template. image.tpl.php
![Page 88: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/88.jpg)
my_module.module/** * Implements hook_theme(). */ function my_module_theme() { return array( 'image' => array( 'template' => 'image', 'variables' => array( 'path' => NULL, 'width' => NULL, 'height' => NULL, 'alt' => NULL, 'title' => NULL, 'attributes_array' => array(), 'attributes' => NULL, ), ), ); }
![Page 89: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/89.jpg)
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) . ' />'; }
core’s theme.inc
![Page 90: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/90.jpg)
core’s theme.incfunction 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; }
![Page 91: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/91.jpg)
// Drupal 7's theoretical image.tpl.php. <img<?php print $attributes; ?> />
// Drupal 8's theoretical image.html.twig. <img{{ attributes }} />
![Page 92: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/92.jpg)
my_module.module/** * Implements hook_preprocess_HOOK() for image. */ function my_module_preprocess_image(&$variables) { $variables['attributes_array']['src'] = file_create_url($variables['path']);
foreach (array('width', 'height', 'alt', 'title') as $key) { if (isset($variables[$key])) { $variables['attributes_array'][$key] = $variables[$key]; } } }
/** * Implements hook_process_HOOK() for image. */ function my_module_process_image(&$variables) { $variables['attributes'] = drupal_attributes($variables['attributes_array']); }
![Page 93: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/93.jpg)
function my_theme_image($variables) { $attributes = $variables['attributes']; $attributes['data-src'] = file_create_url($variables['path']); $attributes['class'][] = 'lazyload';
foreach (array('width', 'height', 'alt', 'title') as $key) {
if (isset($variables[$key])) { $attributes[$key] = $variables[$key]; } }
return '<img' . drupal_attributes($attributes) . ' />'; }
my_theme’s template.php
![Page 94: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/94.jpg)
/** * Implements hook_preprocess_HOOK() for image. */ function my_theme_preprocess_image(&$variables) { $variables['attributes_array']['class'][] = 'lazyload'; $variables['attributes_array']['data-src'] = $variables['attributes_array']['src']; unset($variables['attributes_array']['src']); }
my_theme’s template.php
![Page 95: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/95.jpg)
/** * Implements hook_preprocess_HOOK() for image. */ function my_module_preprocess_image(&$variables) { $variables['attributes_array']['src'] = file_create_url($variables['path']);
foreach (array('width', 'height', 'alt', 'title') as $key) { if (isset($variables[$key])) { $variables['attributes_array'][$key] = $variables[$key]; } } }
/** * Implements hook_preprocess_HOOK() for image. */ function my_theme_preprocess_image(&$variables) { $variables['attributes_array']['class'][] = 'lazyload'; $variables['attributes_array']['data-src'] = $variables['attributes_array']['src']; unset($variables['attributes_array']['src']); }
/** * Implements hook_process_HOOK() for image. */ function my_module_process_image(&$variables) { $variables['attributes'] = drupal_attributes($variables['attributes_array']); }
![Page 96: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/96.jpg)
<header> <h1><?php print $title; ?></h1> <?php print theme('image', array( 'path' => 'logo.png', 'alt' => t('My logo!'), )); ?> </header>
page.tpl.php
![Page 97: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/97.jpg)
cool_logo.module
/** * Implements hook_preprocess_HOOK() for page. */ function cool_logo_preprocess_page(&$variables) { $variables['logo'] = theme('image', array( 'path' => 'logo.png', 'alt' => t('My logo!'), )); }
![Page 98: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/98.jpg)
/** * Implements hook_preprocess_HOOK() for page. */ function my_theme_preprocess_page(&$variables) { $find = 'My logo!'; $replace = t('Woah! Logo!'); $logo = str_replace($find, $replace, $variables['logo']); $variables['logo'] = $logo; }
my_theme’s template.php
![Page 99: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/99.jpg)
/** * Implements hook_preprocess_HOOK() for page. */ function cool_logo_preprocess_page(&$variables) { $variables['logo'] = array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'), ); }
cool_logo.module
![Page 100: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/100.jpg)
/** * Implements hook_preprocess_HOOK() for page. */ function my_theme_preprocess_page(&$variables) { // Change the alt text of the logo. $variables['logo']['#alt'] = t('Woah! Logo!'); }
my_theme’s template.php
![Page 101: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/101.jpg)
<header> <h1><?php print $title; ?></h1> <?php print render($logo); ?> </header>
page.tpl.php
![Page 102: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/102.jpg)
<img src="logo.png" alt="My logo!" />
![Page 103: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/103.jpg)
render arrays > theme() templates > theme functions
![Page 104: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/104.jpg)
further reading Render Arrays in Drupal 7. drupal.org/node/930760
Twig best practices - preprocess functions, templates, and render arrays.
drupal.org/node/1920746
![Page 105: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/105.jpg)
thanks!
![Page 106: 7 to 8: Transitioning From theme() and Theme Functions to ...blog-media.chromaticsites.com.s3.amazonaws.com/badcamp-2015/… · 7 to 8: Transitioning From theme() and Theme Functions](https://reader033.fdocuments.us/reader033/viewer/2022043013/5faea2b46e7de41e9d10aa7c/html5/thumbnails/106.jpg)
questions?