Templating with the TIMS module

About

The TIMS module allows site developers to create content templates within the browser using the Twig templating language rather than needing to create PHP tpl.php files in a theme. Once the TIMS module is enabled, navigate to <yoursite>/admin/structure/tims

Naming your templates

Naming convention is as follows (with each part separted by a double underscore):

• template type (node, field, view)
• machine name of specific type or ID (page, faculty_bio, field_link, 4928)
• view mode (teaser, full_content, abbr_teaser)

For example, if you would like to template a node of the article content type, instead of creating a PHP file named node--article.tpl.php you will create a template in this module's interface called node__article 

Order

Multiple templates can apply to a node or a field.  Say we have a Basic Page node that has a node ID of 548 and we're displaying as a teaser in the sidebar.  Say that we've created the following templates that can apply to that node:

Our templates: node, node__page__teaser, node__page, node__548 (among others)

But only one can be used to render the node, so an order must be enforced.  The order that the system will scan for templates for that specifc node is:

1. node__548__teaser
2. node__page__teaser
3. node__teaser
4. node__548
5. node__page
6. node
7. Use the default node.tpl.php file that is part of the default theme

When the system renders the sample node we have described above, it will first look for a template called node__548__teaser and, if found, will use it to render the node.  If not found it will move down the list until it finds a template to use.  So in our sample list of templates above, node__page__teaser will be used.

Twig syntax

For a guide to the Twig syntax, refer to the documention for theming Drupal 8 which uses Twig for theming as part of core. 

Debugging

You can put the following in a template file to see the entire PHP array that you're working with:

<pre>{{ dump() }}</pre>

Samples

The following are samples that try to mimic the default templates.  These make a good starting point as they should produce a similar result to the default template in the system and can then be modified.

<div id="node-{{nid}}" class="{{classes}}"{{attributes}}>
  {{ render(title_prefix) }}
  {% if not page %}
  <h2{{ title_attributes }}><a href="{{ node_url }}">{{ title }}</a></h2>
  {% endif %}
  {{ render(title_suffix) }}
  <div class="content"{{content_attributes}}>
    {% if unl_remove_inner_wrapper == false %}
    <div class="wdn-inner-wrapper">
    {% endif %}
      {{ render(content) }}
    {% if unl_remove_inner_wrapper == false %}
    </div>
    {% endif %}     
  </div>
</div>

TIMS template for node (above) | Default node.tpl.php file

<div class="{{classes}}"{{attributes}}>
  <div class="field-items"{{content_attributes}}>
    {% for item in items %}
    <div class="field-item">{{render(item)}}</div>
    {% endfor %}
  </div>
</div>

TIMS template for field (above) | Default field.tpl.php file