Twig - display template names if debug mode is enabled

Question

I\'m using Twig lately and I was wondering if it is possible to output the template names which are loaded on the page. The best way I can think of is to display the name ab

Answer 1

Thanks to @DarkBee I was pointed to the right direction and ended up using this: I created a debug-template.class.php with the following content:

<?php

abstract class DebugTemplate extends Twig_Template {

    public function display(array $context, array $blocks = array())
    {
        // workaround - only add the html comment when the partial is loaded with @
        if(substr($this->getTemplateName(),0,1) == '@') {
            echo '<!-- START: ' . $this->getTemplateName() . ' -->';
        }

        $this->displayWithErrorHandling($this->env->mergeGlobals($context), array_merge($this->blocks, $blocks));

        if(substr($this->getTemplateName(),0,1) == '@') {
            echo '<!-- END: ' . $this->getTemplateName() . ' -->';
        }

    }
}
?>

Then I took my index.php and added

require_once 'vendor/twig/twig/lib/Twig/TemplateInterface.php';
require_once 'vendor/twig/twig/lib/Twig/Template.php';

and added the DebugTemplate class

$twig = new Twig_Environment($loader, array(
    'cache' => false,
    'base_template_class' => 'DebugTemplate'
));

The result is just what I want and looks like this

<!-- START: @default/_components/panel.html.twig -->
        <div class="panel panel-default">
<!-- END: @default/_components/panel.html.twig -->

Answer 2

The easiest way to achieve this is using your own Template class

<?php
    namespace My\ProjectName\Here;

    abstract class Template extends \Twig_Template {

        public function render(array $context) {
            $level = ob_get_level();
            ob_start();
            try {
                $this->display($context);
            } catch (Exception $e) {
                while (ob_get_level() > $level) {
                    ob_end_clean();
                }
                throw $e;
            }
            $content = ob_get_clean();
            return '<!-- Template  start : ' . $this->getTemplateName() . ' -->'. $content.'<!-- Template  end : ' . $this->getTemplateName() . ' -->';     
        }

And register it into Twig

<?php   
    $loader = new Twig_Loader_Filesystem(__DIR__ . '/../CMS4U/Views');
    $twig = new Twig_Environment($loader, array(
        'base_template_class'   => '\My\ProjectName\Here\Template',
    ));

Answer 3

Thanks Frank Hofmann yet another usefull feature is to render existing block begin/end within template as well. Beware that not all twig templates are purely HTML. HTML comments will break CSS or JS code. This can be avoided for example using naming conventions...

<?php
abstract class App_Twig_DebugTemplate extends Twig_Template
{
    public function display(array $context, array $blocks = [])
    {
        $this->_renderComment('BEGIN TEMPLATE: ' . $this->getTemplateName());
        $this->displayWithErrorHandling($this->env->mergeGlobals($context), array_merge($this->blocks, $blocks));
        $this->_renderComment('END TEMPLATE: ' . $this->getTemplateName());
    }

    public function displayBlock($name, array $context, array $blocks = [], $useBlocks = true)
    {
        $this->_renderComment('BEGIN BLOCK: ' . $name);
        parent::displayBlock($name, $context, $blocks, $useBlocks);
        $this->_renderComment('END BLOCK: ' . $name);
    }

    /**
     * @param string $comment
     */
    private function _renderComment($comment)
    {
        $extension = pathinfo($this->getTemplateName(), PATHINFO_EXTENSION);
        if (in_array($extension, [
            'css',
            'js',
        ])) {
            echo '/* ' . $comment . ' */';
        } else {
            echo '<!-- ' . $comment . ' -->';
        }
    }
}