tt bootstrap two - phpManufaktur/kfTemplateTools GitHub Wiki

The visible result (output) of the tt_bootstrap_two template is identical with the tt_bootstrap_one.

While tt_bootstrap_one is using the common way for WebsiteBaker and LEPTON CMS templates and mix up html and php elements, the tt_bootstrap_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_bootstrap_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_bootstrap_two directory /twig/template.twig.

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

{% extends "@pattern/bootstrap/html.simple.twig" %}
{% block body %}
   <div class="container">
      <div class="logo-container row">
        <div class="logo col-sm-3 hidden-xs">
          <a href="{{ CMS_URL }}" title="{{ CMS_TITLE }}">
            <img src="{{ MANUFAKTUR_URL }}/TemplateTools/extension.jpg" class="img-responsive" alt="TemplateTools" />
          </a>
        </div>
        <div class="template-name col-sm-9 col-xs-12">
          <div class="template-name-header">
            {{ TEMPLATE_NAME }}
          </div>
          <div class="template-name-path">
            {{ TEMPLATE_PATH }}
          </div>
        </div>
      </div>      
      <div class="content row">
        <div class="main col-sm-9 col-sm-push-3">
          {% include('@pattern/bootstrap/search.div.twig') %}
          {{ bootstrap_breadcrumb() }}
		  {{ page_content() }}
        </div>        
        <div class="navigation col-sm-3 col-sm-pull-9">
          {{ show_menu2() }}
        </div>        
      </div>      
      <div class="footer row">
        <div class="col-sm-9 col-sm-offset-3">
          {{ PAGE_FOOTER }}
        </div>
      </div>      
    </div>
{% endblock body %}

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

{% extends "@pattern/bootstrap/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]((Bootstrap-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="{{ LIBRARY_URL }}/bootstrap/latest/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
  <link href="{{ MANUFAKTUR_URL }}/TemplateTools/Pattern/bootstrap/css/pattern.min.css" type="text/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 bootstrap.min.css, 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_bootstrap_two. This template extends the '@pattern/bootstrap/html.simple.twig' but overwrite only the body block:

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

Within the Bootstrap container you find all the elements you already know from the tt_bootstrap_one template but in twig style:

<div class="logo-container row">
  <div class="logo col-sm-3 hidden-xs">
    <a href="{{ CMS_URL }}" title="{{ CMS_TITLE }}">
      <img src="{{ MANUFAKTUR_URL }}/TemplateTools/extension.jpg" class="img-responsive" alt="TemplateTools" />
    </a>
  </div>
  <div class="template-name col-sm-9 col-xs-12">
    <div class="template-name-header">
      {{ TEMPLATE_NAME }}
    </div>
    <div class="template-name-path">
      {{ TEMPLATE_PATH }}
    </div>
  </div>
</div>

While the logo container in tt_bootstrap_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 row">
  <div class="main col-sm-9 col-sm-push-3">
    {% include('@pattern/bootstrap/search.div.twig') %}
    {{ bootstrap_breadcrumb() }}
    {{ page_content() }}
  </div>        
  <div class="navigation col-sm-3 col-sm-pull-9">
    {{ show_menu2() }}
  </div>        
</div>
<div class="footer row">
  <div class="col-sm-9 col-sm-offset-3">
    {{ PAGE_FOOTER }}
  </div>
</div>

Instead of

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

you are using

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

and instead of

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

you are using

{{ bootstrap_breadcrumb() }}

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

⇐ tt_bootstrap_one | tt_classic_one ⇒

Contribution to the Wiki

  • If you spot a typo or want to contribute an article, a how-to or a tip, feel free to edit the Wiki directly
  • If you you have any questions, please visit the phpManufaktur Support Forum

TemplateTools This Documentation is part of the kitFramework Project

© 2014 by phpManufaktur, kitFramework and TemplateTools are published under MIT license.

⚠️ **GitHub.com Fallback** ⚠️