6

I have overridden a Twig template for an image field, which uses Image URL Formatter in order to remove the surrounding Div's.

Here is my Twig template for the field (field--media--field-image--image.twig.html):

{% for item in items %} {{ item.content }} {% if loop.length > 1 and not loop.last %} {{ ', ' }} {% endif %} {% endfor %}

The field is output to the src tag in the Twig template for my Media Bundle (media--image.twig.html):

<div class="allstar-image-wrap"> {% if href is not empty %} <a {{ href }} {{ target }}> {% endif %} <img src="{{ content.field_image }}" {{ alt }} {{ title }} /> {% if href is not empty %} </a> {% endif %} </div>

However, the twig debug information outputs as part of the image URL:

enter image description here

Is there any way to turn off twig debug for a specific template? Or any other way around this?

Improve this question
1

5 Answers 5

Reset to default
3

For my use case, which was a to add a background image to a div, I needed to add spaceless, escape, and striptags as depicted here:

<div class="videoPoster js-videoPoster" style="background-image:url('{% spaceless %}{{ img_url|escape|striptags('<!-- -->') }}{% endspaceless %}');">Hello World</div>
Improve this answer
2
  • Great solution, gonna use that going forward Commented Nov 22, 2017 at 11:20
  • striptags('<!-- -->')|trim worked nicely for adding a field containing a video ID to a YouTube thumbnail URL with debugging turned on. Commented Dec 30, 2019 at 14:15
7

There is also this alternative found here and here where you can do something like this using the triple filter |render|striptags|trim :

<img src="{{ url_image }}" alt="{{ title|render|striptags|trim }}" />

It worked perfectly in my case (|escape didn't work)

Improve this answer
1
  • 1
    This worked for me too! Commented Feb 12, 2018 at 21:44
0

This is more of a workaround than a solution but I decided to grab the image URL from a preprocess function and pass to my Twig template for the media bundle (media--image.twig.html). This circumvents the need for overriding the image field template.

mytheme.theme

/** * Implements hook_preprocess_media(). */ function mytheme_preprocess_media(&$variables) { $media = $variables['elements']['#media']; if($media->bundle() == 'image') { $image = $media->get('field_image')->getValue(); if(isset($image[0]['target_id'])) { // Load the file entity object. $imageObject = entity_load('file', $image[0]['target_id']); $variables['image_url'] = $imageObject->url(); } } }

media--image.twig.html

{# Build the markup. #} <div class="allstar-image-wrap"> {% if href is not empty %} <a {{ href }} {{ target }}> {% endif %} <img src="{{ image_url }}" {{ alt }} {{ title }} /> {% if href is not empty %} </a> {% endif %} </div>
Improve this answer
0

I had the same problem with the title var used for the alt attribute of an image:

<img src="{{ url_image }}" alt="{{ title }}" />

I finally used the escape filter like this:

<img src="{{ url_image }}" alt="{{ title|escape }}" />

or shorter:

<img src="{{ url_image }}" alt="{{ title|e }}" />

(url_image is a custom var)

Improve this answer
0

Another solution uses the Twig Clean Debug module:

Provides a filter for use in twig templates to clean away twig debugging output (mostly html comments describing template suggestions etc).

When in twig debug mode the html comments can interfere with development. This filter cleans away the suggestions using regex.

Usage Must be used in conjunction with the |raw filter otherwise output will be double escaped, e.g.:

{{ content.field_image|clean_debug|raw }}

Warning: this will throw an exeption if the site is not in twig debug mode.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.