mvo/contao-twig

Replace your Contao php templates with Twig templates.

v1.1.1 2021-02-28 17:40 UTC

Requires

• php: >=7.4
• contao/core-bundle: ^4.9
• symfony/twig-bundle: ^4.4 || ^5.0
• webmozart/path-util: ^2.3

Requires (Dev)

• contao/manager-plugin: ^2.0
• contao/test-case: ^4.1
• friendsofphp/php-cs-fixer: ^2.16
• phpstan/phpstan: ^0.11.8
• phpunit/phpunit: ^8.0

Conflicts

• contao/manager-plugin: <2.0 || >=3.0

MIT

• Moritz Vondano

• twig
• contao

README

How to use

1. Make sure you have your twig.default_path set. For example like this:

   twig:
     default_path: '%kernel.project_dir%/templates' 

2. Put a template you want to provide as a twig version inside your template directory (can be any subdirectory). Name it like the Contao template but with .html.twig as file extension instead of .html5.

   For example put a ce_downloads.html.twig file under templates/Contao.

3. Rebuild your cache (the filesystem is scanned for templates in a compiler pass).

   Note: for a better DX your templates will always be loaded in the dev environment.

   That's it. Your new template is now rendered instead. It has the same context as the existing Contao one would have (Template->getData()). ✨

Caveats

As Contao uses input encoding, you'll need to deal for already encoded variables yourself by adding the |raw filter. Use with caution and be sure you know what you are doing.

Some contao templates contain closures that won't be evaluated by Twig - if you want to use them wrap them in the fn() function shipping with this bundle. This will simply execute them and return the 'safe' output (no need for |raw).

Example

{# templates/Contao/ce_downloads.html.twig #}

<div class="ce_downloads --this-looks-nice">    
    <ul>
        {% for file in files %}
            <li class="ext-{{ file.extension }}">
                <a href="{{ file.href|raw }}" title="{{ file.title }}" type="{{ file.mime }}">
                    {{ file.link }} <span>({{ file.filesize }})</span>
                </a>
            </li>
        {% endfor %}
    </ul>
</div>