Add twig template to a custom Module, Block or Page | Drupal 8

Add twig template to a custom Module, Block or Page

Submitted by editor on Wed, 05/11/2016 - 10:52
Question

How to create a custom module (to a bloc, page ...) using a twig template ?

Step 1. Create your module and Block (/tutoriels/107/create-a-simple-block-programmatically)

Step 2. Add your template usin hook_theme()  (here module name = clock)

Example:
function clock_theme($existing, $type, $theme, $path) {
  return array(
    'clock' => array(
      'variables' => array(
        'icon' => NULL,
        'title' => NULL,
        'time' => NULL,
      ),
    ),
  );
}

You cal also use template_preprocess to handle your template.

Example:
function template_preprocess_clock(&$variables) {
  //Add global classes
  $variables['attributes']['class'][] = 'my_clock';
}

Add theme hook suggestions. Example from multivaluefield.module)

/**
 * Implements hook_theme_suggestions_HOOK().
 *  Add template suggestions.
 */
function multivaluefield_theme_suggestions_multivaluefield($variables) {

  $suggestions = array();
  $sett = $variables['settings'];

  $suggestions[] = 'multivaluefield__' . $sett['#field_name'];
  $suggestions[] = 'multivaluefield__' . $sett['#entity_type'];
  $suggestions[] = 'multivaluefield__' . $sett['#bundle'];
  $suggestions[] = 'multivaluefield__' . $sett['#field_name'] . '__' . $sett['#entity_type'] . '__' . $sett['#bundle'];

  return $suggestions;
}

Step 3. Create the twig template in clock/templates/clock.html.twig
Example:
<div {{ attributes }}>
  {% if icon %}
    <img class='clock_block_icon' src='{{ icon }}' alt='{{ title }}'/>
  {% endif %}
  <div class="clock_block_title" >{{ title }}</div>
  <div class="clock_block" data-time="{{ time }}"></div>
</div>

Step 4. Add the template to your block or page, using the render array
Example : 
return array(
      '#theme' => 'clock',
      '#icon' => $icon,
      '#title' => 'The Title',
      '#time' => "The Time is : ".date('H:i:s'),
    );

Finally, don't forget to clear cache and your blocked will use the new template.

 

Another example of add a template suggestions.

1. find the theme preprocess.
For that, activate the theme debug then analyse the code. For example, for the 'views_view_summary' you can find something like :
<!-- THEME DEBUG -->
<!-- CALL: theme('views_view_summary_unformatted') -->
<!-- FILE NAME SUGGESTIONS:
   * views-view-summary-unformatted-view-theviewname-block-1.tpl.php
   * views-view-summary-unformatted-view-theviewname.tpl.php
   x views-view-summary-unformatted.tpl.php
-->

Here, the theme function is "views_view_summary_unformatted" so preprocess is THEME_preprocess_views_view_summary_unformatted.
2. In the template.php of your theme, create new function THEME_preprocess_views_view_summary_unformatted and add the new template suggestion.
Example:

function mytheme_preprocess_views_view_summary_unformatted(&$variables){
  $variables['theme_hook_suggestions'][] = 'my_custom_template';
}

Comments

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.