Branch Out of Your Comfort Zone with Twig Templates Larry - - PowerPoint PPT Presentation

Branch Out of Your Comfort Zone with Twig Templates

Larry Walangitan

@larrywalangitan

@ChromaticHQ http://chromatichq.com

PHPTemplate

Twig

PHPTemplate vs Twig

PHPTemplate vs Twig

// node.tpl.php <?php if (!$page): ?> <h2<?php print $title_attributes; ?>> <a href="<?php print $node_url; ?>"><?php print $title; ?></a> </h2> <?php endif; ?> // node.html.twig {% if not page %} <h2{{ title_attributes.addClass('node__title') }}> <a href="{{ url }}”> {{ label }}</a> </h2> {% endif %}

Creating Templates Overriding Default Templates Theme Hook Suggestions Naming Conventions Variables Conditionals

Roadmap

Control Structures Filters Links Render Arrays Debugging Coding Standards

Creating Templates

Creating Templates: Drupal 7

aggregator-feed- source.tpl.php aggregator-item.tpl.php aggregator-summary- item.tpl.php aggregator-summary- items.tpl.php aggregator-wrapper.tpl.php block-admin-display- form.tpl.php block.tpl.php book-all-books-block.tpl.php book-export-html.tpl.php book-navigation.tpl.php book-node-export- html.tpl.php comment-wrapper.tpl.php comment.tpl.php field.tpl.php forum-icon.tpl.php forum-list.tpl.php forum-submitted.tpl.php forum-topic-list.tpl.php forums.tpl.php node.tpl.php

• verlay.tpl.php

poll-bar--block.tpl.php poll-bar.tpl.php poll-results--block.tpl.php poll-results.tpl.php poll-vote.tpl.php profile-block.tpl.php profile-listing.tpl.php profile-wrapper.tpl.php search-block-form.tpl.php search-result.tpl.php search-results.tpl.php page.tpl.php maintenance-page.tpl.php region.tpl.php html.tpl.php axonomy-term.tpl.php toolbar.tpl.php user-picture.tpl.php user-profile-category.tpl.php user-profile-item.tpl.php user-profile.tpl.php

in `modules/*/..`

Creating Templates: Drupal 7

function THEME_preprocess_node(&$variables) { if ($variables['promote']) { $variables['theme_hook_suggestions'] = 'node__promoted'; } }

* node.tpl.php * node--promoted.tpl.php template.php

Creating Templates: Drupal 8

| theme | - templates | | - block.html.twig | | - comment.html.twig | | - maintenance-page.html.twig | | - node.html.twig | | - page.html.twig | | - status-messages.html.twig | | - custom-template.html.twig

theme/templates/*.html.twig

Overriding Default Templates

Overriding Default Templates: Drupal 7

function THEME_preprocess_page(&$variables) { if (isset($variables['node']->type)) { $variables['theme_hook_suggestions'][] = $variables[‘node']->type; } }

* page.tpl.php * page—[node-type].tpl.php template.php

Overriding Default Templates: Drupal 8

1. Locate the template you wish to override.

• 2. Copy the template file from its base location into your theme folder.
• 3. (optionally) Rename the template according to the naming conventions.
• 4. Modify the template to your liking.

“ ”

Theme Hook Suggestions

Theme Hook Suggestions: Drupal 7

/** * Implements hook_preprocess_HOOK. */
 function THEME_preprocess_page(&$variables) { if (isset($variables['node']->type)) { $variables['theme_hook_suggestion'] = $variables[‘node']->type; } }

template.php

Theme Hook Suggestions: Drupal 7

$variables['theme_hook_suggestion'] != $variables['theme_hook_suggestions']

template.php

Theme Hook Suggestions: Drupal 8

function hook_theme_suggestions_alter(array &$suggestions, array &$variables, $hook) { // Alters named suggestions for all theme hooks. } function hook_theme_suggestions_HOOK(array &$variables) { // Provides alternate named suggestions for a specific theme hook. } function hook_theme_suggestions_HOOK_alter(array &$suggestions, array $variables) { // Alters named suggestions of a specific theme hook. // Can reorder or remove suggestions provided by hook_theme_suggestions_HOOK. }

custom.theme

Theme Hook Suggestions: Drupal 8

/** * Implements hook_theme_suggestions_HOOK_alter(). */ function custom_suggestions_user_alter(array &$suggestions, array &$variables) {

if (!empty($variables['elements']['#view_mode'])) {

$suggestions[] = 'user__' . $variables['elements']['#view_mode']; } }

custom.theme user--custom-view-mode.html.twig

Naming Conventions

Naming Conventions: Drupal 7

# Naming Conventions Hierarchy * page--front.tpl.php // but only if node/1/edit is the front page * page--node--1.tpl.php // prefix is not changed because the component is a number * page--node--%.tpl.php * page--node.tpl.php // and prefix is set to page__node * page.tpl.php // this is always a suggestion

http://example.com/node/1

Naming Conventions: Drupal 7

# Naming Conventions Hierarchy * page--front.html.twig // but only if node/1/edit is the front page * page--node--1.html.twig * page--node.html.twig * page.html.twig

http://example.com/node/1

Variables

Variables: Drupal 7

template.php

function THEME_preprocess_node(&$variables) { $variables['foo'] = 'bar'; }

node.tpl.php

<div id="foo-wrapper"> <?php print $foo; ?> </div>

Variables: Drupal 8

custom.theme

function custom_preprocess_node(&$variables) { $variables['foo'] = 'bar'; }

<div id="foo-wrapper"> {{ foo }} </div>

node.html.twig

Variables: Comparison

function custom_preprocess_node(&$variables) { $variables['foo'] = 'bar'; }

template.php || custom.theme node.tpl.php

<div id="foo-wrapper"> {{ foo }} </div>

node.html.twig

<div id="foo-wrapper"> <?php print $foo; ?> </div>

Conditionals

Conditionals: Drupal 7

<?php if ($url): ?> <a href="<?php print $url; ?>"><?php print $image; ?></a> <?php else: ?> <?php print $image; ?> <?php endif; ?>

Conditionals: Drupal 8

{% if url %} <a href="{{ url }}">
 {{ image }} {% else %} {{ image }} {% endif %}

Conditionals: Comparison

{% if url %} <a href="{{ url }}">
 {{ image }} </a> {% else %} {{ image }} {% endif %} <?php if ($url): ?> <a href="<?php print $url; ?>"> <?php print $image; ?> </a> <?php else: ?> <?php print $image; ?> <?php endif; ?>

PHPTemplate Twig

Conditionals: Comparison

// !empty() {% if url is not empty %} <a href="{{ url }}"> My Link! </a> {% endif %} // isset() {% if url is defined %} <a href="{{ url }}"> My Link! </a> {% endif %} // !empty() <?php if !empty($url): ?>
 <a href="<?php print $url; ?>”> My Link! </a>
 <?php endif; ?> // isset() <?php if isset($url): ?>
 <a href="<?php print $url; ?>”> My Link! </a>
 <?php endif; ?>

PHPTemplate Twig

Control Structures

Control Structures: Drupal 7

foreach ($rows as $row) { print $row; } <?php foreach ($rows as $row): ?> <?php print $row; ?> <?php endforeach; ?>

PHP PHPTemplate

Control Structures: Drupal 8

{% for row in rows %}
 {{ row.content }} {% endfor %}

Control Structures: Comparison

PHPTemplate Twig

{% for row in rows %}
 {{ row.content }} {% endfor %} <?php foreach ($rows as $row): ?> <?php print $row; ?> <?php endforeach; ?>

Filters

Filters

• Check Plain
• Translate
• Translate with substitutions
• Implode
• Escape

Filters: Drupal 7

// Check Plain <?php print check_plain($title); ?> // Translate <?php print t('Home'); ?> // Translate with Substitutions <?php print t('Welcome, @username', array('@username' => $user->name)); ?> // Implode <?php echo implode(', ',$usernames); ?> // Escape <?php echo check_plain($title); ?>

Filters: Drupal 8

// Check Plain {{ title|striptags }} // Translate {{ 'Home'|t }} // Translate with Substitutions {{ 'Welcome, @username'|t({ '@username': user.name }) }} // Implode {{ usernames|safe_join(', ') }} // Escape {{ title }}

Filters: Comparison

// Check Plain {{ title|striptags }} // Translate {{ 'Home'|t }} // Translate with Substitutions {{ 'Welcome, @username'| t({ '@username': user.name }) }} // Implode {{ usernames|safe_join(', ') }} // Escape {{ title }}

// Check Plain <?php print check_plain($title); ?> // Translate <?php print t('Home'); ?> // Translate with Substitutions <?php print t('Welcome, @username', array('@username' => $user->name)); ?> // Implode <?php echo implode(', ',$usernames); ?> // Escape <?php echo check_plain($title); ?>

PHPTemplate Twig

Filters: Drupal 8

// Implode and lowercase {{ usernames|safe_join(', ')|lower }}

Links

Links: Drupal 7

drupal_get_path() // returns path of a system item. path_to_theme() // returns path to the current themed element

Template.php

$variable['custom_url'] = url(node_uri($node)['path']);

custom-url.tpl.php

<a href="<?php print $custom_url; ?>”> Check out this link! </a>

Links: Drupal 8

path() - Generates a [relative] URL path given a route name and parameters.
 // Link to the default frontpage content listing view.
 <a href="{{ path('view.frontpage'); }}"> {{ 'View all content'|t }} </a>
 
 
 url() - Generates an absolute URL given a route name and parameters.
 // Link to a specific node page. <a href="{{ url('entity.node.canonical', {'node': node.id}) }}"> {{ 'Read more'|t }} </a>

Render Arrays

Render Arrays: Drupal 7

// Using theme() in D7. $logo = theme('image', array( 'path' => 'logo.png', 'alt' => t('My logo!'), )); // Render array in D7. $logo = array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'),
 );

template.php page.tpl.php

<?php print $logo; ?>

page.tpl.php

<?php print render($logo); ?>

Render Arrays: Drupal 8

{{ logo }} // Render array in D8. $logo = array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'),
 );

custom.theme page.html.twig

Render Arrays: Comparison

{{ logo }} // Render array in D7/D8. $logo = array( '#theme' => 'image', '#path' => 'logo.png', '#alt' => t('My logo!'),
 );

template.php || custom.theme page.html.twig page.tpl.php

<?php print render($logo); ?>

Render Array Resources

Blog Post https://chromatichq.com/blog/badcamp-2015-transitioning-theme-and-theme-functions- render-arrays-and-templates DrupalCon Session https://events.drupal.org/neworleans2016/sessions/aha-understanding-and-using-render- arrays-drupal-8

Debugging

Debugging: Drupal 7

// template.php dpm($variables); // Settings.php $conf['theme_debug'] = TRUE;

Devel Module & Devel Themer

Debugging: Drupal 8

parameters: twig.config: debug: true auto_reload: true

sites/default/services.yml

// *.html.twig {{ kint() }}

Devel Module *.html.twig

// all variables in the current context. {{ dump() }} // a specific variable. {{ dump(variable) }}

Coding Standards

Coding Standards: Drupal 7

* Add 2 spaces for indents. * Match the indentation of long opening and closing block HTML tags. * Avoid curly brackets. * Prefer PHP in HTML to HTML in PHP in templates. * Separate logic from presentation. * Avoid Drupal functions in templates. * Always put a semicolon at the end of your small PHP printing statement

Coding Standards: Drupal 8

* Indent code inside of tags. * Only use lowercase and underscored variable names.

Coding Standards: Drupal 8

* Delimiters (beginning and end) {{, {&, {#
 }}, %}, #}

Place only one space Before:

* Comparison operators * Logic * Ternary operators

Before and After:

* : sign in hashes * , in arrays & hashes

After:

Coding Standards: Drupal 8

* Closing parenthesis in an expression: {{, {&, {#
 }}, %}, #}

No Spaces Before:

* String delimiters ‘ & “ * The following operators:
 | . .. [] * Parenthesis in filter/function calls

Before and After:

* Opening parenthesis in an expression * , in arrays and hashes

After:

Join us for contribution sprints

• n Friday, September 30

First Time Sprinter Workshop - 9:00-12:00 - Room Wicklow2A Mentored Core Sprint - 9:00-18:00 - Wicklow Hall 2B General Sprints - 9:00 - 18:00 - Wicklow Hall 2A

Q & A

Branch Out of Your Comfort Zone with Twig Templates

Evaluate the Session:

https://events.drupal.org/dublin2016/sessions/branch-out- your-comfort-zone-twig-templates