4

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?

1

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>
  • Great solution, gonna use that going forward – littledynamo Nov 22 '17 at 11:20
5

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)

  • 1
    This worked for me too! – 0711master Feb 12 '18 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>
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)

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.