README

This bundle builds on top of Twig support bundle and replaces the most core templates with twig templates. In addition, it comes with an expandable frontend framework architecture that allows to select a frontend framework in your layout and automatically use customized templates instead of the core templates.

Features

• replaces various core templates with twig templates
• expandable frontend framework architecture to easily add your frontend framework without changing all templates in contao backend or override core templates
• automatic usage of templates prepared for frontend frameworks, if set in settings (inspired by contao-bootstrap/templates)
• bundles bootstrap 4 support with optional support for custom form controls

Installation

Install via composer: composer require heimrichhannot/contao-twig-templates-bundle and update your database.

Additional frontend frameworks

Available (known) extensions:

• Bootstrap 3
• Bootstrap 5

Usage

It's as simple as that: Check 'Use twig templates' in your page layout configuration. If your want to use a frontend framework like bootstrap, select the corresponding option in the 'Use framework' select. This way the automapping takes place and according to the current content element or module, the correct template is used.

Automapping order (check if template exists, else use the next one):

1. Frontend framework twig template
2. Core/custom twig template
3. Default/Custom (contao html5) template

If you don't want to use automapping you can also assign the template you want in the ordinary way by selecting it in the customTpl field of your module or content element.

Additional dca configuration keys

These keys can be used in fields eval entry:

Additional twig functions

Bundled templates

Block templates

Content elements

Member elements

Gallery

Both version with minimal setting. You definitely need to change those templates to fit your requirements.

Modules

Navigation

Search

Developers

Events

To modify template data before parsing or rendering, use the events of twig support bundle with a priority lower than 100 (0 is default, so you don't need to set this value in most cases).

Add custom frontend frameworks

1. Create a class which implements HeimrichHannot\TwigTemplatesBundle\FrontendFramework\FrontendFrameworkInterfacce

   Please read the method comments for implementation

2. Register your newly created class as service with huh.contao_twig_templates.framework service tag

3. For each template, you want to replace, create an html5 template (where filename suffix is the same as the identifier set in the class, example form_checkbox_bs4.html5) and call the template factory. Typical this code can be used without any adjustment:

   <?= \Contao\System::getContainer()->get('huh.utils.template')->renderTwigTemplate($this->getName(), $this->getData()); ?>

   • If your want to set template specific options (for example bootstrap 4 custom control support) you can use $template::addSupport(). Example:

      <?php 
     $template = \Contao\System::getContainer()->get('huh.twig.template.factory')->createInstance($this);
     $template->addSupport('custom-forms', true);
     echo $template->render();
     

4. Create a twig template with the same name as the html5 template (e.g. form_checkbox_bs4.html.twig). This is the place where your custom template code will live. All template variable are given as twig variables. Please see bundle templates for some examples.

Template variables

Additional template variables