tt classic two

The visible result (output) of the tt_classic_two template is identical with the tt_classic_one.

While tt_classic_one is using the common way for WebsiteBaker and LEPTON CMS templates and mix up html and php elements, the tt_classic_two template make use of the Twig Template Engine to realize a template with exactly the same functionality.

Why using the Twig Sevice?

• Twig is very fast, because all templates will be compiled without any comments, compressed and saved in a effective cache.
• Using Twig means also to use only the well documented Twig Script Language and no longer need to use php terms in your templates
• Twig Templates are well readable and very flexible to use.

The index.php of the tt_classic_two is shrinking to only to lines of code:

<?php
  require_once WB_PATH.'/kit2/extension/phpmanufaktur/phpManufaktur/TemplateTools/initialize.php';  
  $template['twig']->display('twig/template.twig');
?>

With the require_once statement you are initializing the TemplateTools (always needed).

$template['twig']->display('twig/template.twig');

will render and show the template twig/template.twig from the tt_classic_two directory /twig/template.twig.

The template twig/template.twig contains only 35 lines of code:

{% extends "@pattern/classic/html.simple.twig" %}
{% block body %}
  <div class="body-container">
    <div class="logo-container">
      <div class="logo">
        <a href="{{ CMS_URL }}" title="{{ CMS_TITLE }}">
          <img src="{{ MANUFAKTUR_URL ~ '/TemplateTools/extension.jpg' }}" width="200" height="200" alt="TemplateTools" />
        </a>
      </div>
      <div class="template-name">
        <div class="template-name-header">
          {{ TEMPLATE_NAME }}
        </div>
        <div class="template-name-path">
          {{ TEMPLATE_PATH }}
        </div>
      </div>
    </div>
    <div class="content">
      <div class="navigation">
        {{ show_menu2() }}
      </div>
      <div class="main">          
        {% include '@pattern/classic/search.div.twig' %}
        <div class="breadcrumb">
          {{ classic_breadcrumb() }}
        </div>
        {{ page_content() }}
      </div>
    </div>
    <div class="footer">
      {{ PAGE_FOOTER }}
    </div>
  </div>
{% endblock body %}  

In the first line the template extends the Classic Pattern html.simple.twig:

{% extends "@pattern/classic/html.simple.twig" %}

In programming languages like php it's no problem to include another file into the actual script to make the contents of this file available for the script. One important restriction is: you can not change the content of the included file at the run-time of the script.

Beneath including other templates Twig offer you the way to extend another template. The extended template contain blocks which can be changed by the calling template.

The template [html.simple.twig]((Classic-Pattern#html-simple) contains multiple blocks:

• {% block meta %} ... {% endblock meta %}
• {% block css %} ... {% endblock css %}
• {% block jquery %} ... {% endblock jquery %}
• {% block body %} ... {% endblock body %}

This is the css block:

{% block css %}
  <link href="{{ MANUFAKTUR_URL }}/TemplateTools/Pattern/classic/css/pattern.min.css" rel="stylesheet" />
  
  {% if file_exists(TEMPLATE_PATH ~ '/css/template.css') %}      
	<link href="{{ TEMPLATE_URL }}/css/template.css" rel="stylesheet" />
  {% elseif file_exists(TEMPLATE_PATH ~ '/template.css') %}
	<link href="{{ TEMPLATE_URL }}/template.css" rel="stylesheet" />
  {% endif %}

  {% if file_exists(TEMPLATE_PATH ~ '/css/print.css') %}      
	<link href="{{ TEMPLATE_URL }}/css/print.css" rel="stylesheet" />
  {% elseif file_exists(TEMPLATE_PATH ~ '/print.css') %}      
	<link href="{{ TEMPLATE_URL }}/print.css" rel="stylesheet" />
  {% endif %}

  {{ register_frontend_modfiles('css') }}
{% endblock css %}

This block is loading the the pattern.min.css and is looking for a template.css and a print.css in the current template path. In addition the block execute register_frontend_modfiles('css') to load needed CSS files for the active add-ons.

You can overwrite this block in your template:

{% extends "@pattern/bootstrap/html.simple.twig" %}
{% block css %}
  <link href="{{ TEMPLATE_URL }}/css/template.css" rel="stylesheet" />	
{% endblock css %}

this will load only the CSS file template.css and nothing else - the content of the parent block will be completely ignored.

You can attach another file to the block:

{% extends "@pattern/bootstrap/html.simple.twig" %}
{% block css %}
  {{ parent() }}
  <link href="{{ TEMPLATE_URL }}/css/special.css" rel="stylesheet" />
{% endblock css %}

with the function parent() you load the content of the origin block (parent) into the new block and than you attach the CSS file special.css.

Like you see blocks are very helpful to create flexible and reusable templates.

Let's go back to the twig/template.twig in tt_classic_two. This template extends the '@pattern/classic/html.simple.twig' but overwrite only the body block:

{% extends "@pattern/classic/html.simple.twig" %}
{% block body %}
   <div class="body-container">
   ...
   </div>
{% endblock body %}

Within the body-container you find all the elements you already know from the tt_classic_one template but in twig style:

<div class="logo-container">
  <div class="logo">
    <a href="{{ CMS_URL }}" title="{{ CMS_TITLE }}">
      <img src="{{ MANUFAKTUR_URL ~ '/TemplateTools/extension.jpg' }}" width="200" height="200" alt="TemplateTools" />
    </a>
  </div>
  <div class="template-name">
    <div class="template-name-header">
      {{ TEMPLATE_NAME }}
    </div>
    <div class="template-name-path">
      {{ TEMPLATE_PATH }}
    </div>
  </div>
</div>

While the logo container in tt_classic_one is using php expressions to print out constants:

<?php echo CMS_URL; ?>

in twig you are simply using the constants as placeholders:

{{ CMS_URL }}

which is less fallible and better readable.

Same to show the search box, add a breadcrumb, prompt the content, add a navigation with show_menu2(), and print a page footer:

<div class="content">
  <div class="navigation">
    {{ show_menu2() }}
  </div>
  <div class="main">          
    {% include '@pattern/classic/search.div.twig' %}
    <div class="breadcrumb">
      {{ classic_breadcrumb() }}
    </div>
    {{ page_content() }}
  </div>
</div>
<div class="footer">
  {{ PAGE_FOOTER }}
</div> 

Instead of

<?php $template['twig']->display('@pattern/classic/search.div.twig'); ?>

you are using

{% include('@pattern/classic/search.div.twig') %}

and instead of

<?php $template['classic']->breadcrumb(); ?>

you are using

{{ classic_breadcrumb() }}

Because you don't need to declare a php expression starting with <?php the twig syntax is always shorter and more readable.

⇐ tt_classic_one | Cookbook ⇒