Twig variable inside data attribute

Question

I have a problem with a twig variable with a filter inside a data- attribute in order to pass some content into a bootstrap modal. The problem is the filter obfuscateEmail which changes the content of the variable: https://github.com/Propaganistas/Email-Obfuscator#twig

My code:

{% for i in 1..20 %}
    <a data-content="{{ _context['content_' ~ i ~ '_raw']|obfuscateEmail }}" data-toggle="modal" href="#modal" class="btn btn-primary">...</a>
{% endfor %}

I already tried to escape it without any success. The problem is always the same either the html code is wrong because of quotes inside the variable coming from the obfuscateEmail filter or the modal wont work or displays pure html.

Answer 1

The problem lays in the fact that the plugin is marking the output as safe, thus returning valid HTML , which breaks your HTML .

You could tweak the extension to fit your needs

<?php 
    namespace Propaganistas\EmailObfuscator\Twig;

    use Twig_Extension;
    use Twig_SimpleFilter;

    class Extension extends Twig_Extension
    {
        /**
         * Returns the name of the extension.
         *
         * @return string The extension name
         */
        public function getName()
        {
            return 'propaganistas.emailObfuscator';
        }
        /**
         * Returns a list of filters to add to the existing list.
         *
         * @return array An array of filters
         */
        public function getFilters()
        {
            return array(
                new Twig_SimpleFilter(
                    'obfuscateEmail',
                    array($this, 'parse')
                ),
            );
        }
        /**
         * Twig filter callback.
         *
         * @return string Filtered content
         */
        public function parse($content, $is_safe = false)
        {
            $content = obfuscateEmail($content);
            return $is_safe ? new Twig_Markup($content, 'UTF-8') : $content;
        }
    }