Issue #3095714 by mdupont, Chi: Add file_uri filter

README.md

@@ -215,8 +215,17 @@ Twig filters.
 
 ### Image Style
 ```twig
+{# Basic usage #}
 {{ 'public://images/ocean.jpg'|image_style('thumbnail') }}
+
+{# Make sure to check that the URI is valid #}
+{% set image_uri = node.field_media_optional_image|file_uri %}
+{% if image_uri is not null %}
+  {{ image_uri|image_style('thumbnail') }}
+{% endif %}
 ```
+`image_style` will trigger an error on invalid or empty URIs, to avoid broken
+images when used in an `<img>` tag.
 
 ### Transliterate
 ```twig
@@ -288,11 +297,6 @@ it will return the URL to the resource, similar to the `file_url` filter.
 {{ node.field_media|file_uri }}
 ```
 
-Useful to apply the `image_style` filter to Media fields.
-```twig
-{{ node.field_media|file_uri|image_style('thumbnail') }}
-```
-
 ### File URL
 For string arguments it works similar to core `file_url()` Twig function.
 ```twig

tests/src/Functional/TwigTweakTest.php

@@ -302,10 +302,6 @@ final class TwigTweakTest extends BrowserTestBase {
     $xpath = '//div[@class = "tt-image-style" and contains(text(), "styles/thumbnail/public/images/ocean.jpg")]';
     $this->assertXpath($xpath);
 
-    // -- Image style from File URI from media field.
-    $xpath = '//div[@class = "tt-image-style-from-file-uri-from-media-field" and contains(text(), "styles/thumbnail/public/image-1.png")]';
-    $this->assertXpath($xpath);
-
     // -- Transliterate.
     $xpath = '//div[@class = "tt-transliterate" and contains(text(), "Privet!")]';
     $this->assertXpath($xpath);
@@ -359,6 +355,10 @@ final class TwigTweakTest extends BrowserTestBase {
     $xpath = '//div[@class = "tt-file-uri-from-media-field" and contains(text(), "public://image-1.png")]';
     $this->assertXpath($xpath);
 
+    // -- Image style from File URI from media field.
+    $xpath = '//div[@class = "tt-image-style-from-file-uri-from-media-field" and contains(text(), "styles/thumbnail/public/image-1.png")]';
+    $this->assertXpath($xpath);
+
     // -- File URL from URI.
     $xpath = '//div[@class = "tt-file-url-from-uri" and contains(text(), "/files/image-test.png")]';
     $this->assertXpath($xpath);

tests/twig_tweak_test/templates/twig-tweak-test.html.twig

@@ -62,7 +62,6 @@
   <div class="tt-token-replace">{{ 'Site name: [site:name]'|token_replace }}</div>
   <div class="tt-preg-replace">{{ 'FOO'|preg_replace('/(foo)/i', '$1-bar') }}</div>
   <div class="tt-image-style">{{ 'public://images/ocean.jpg'|image_style('thumbnail') }}</div>
-  <div class="tt-image-style-from-file-uri-from-media-field">{{ node.field_media|file_uri|image_style('thumbnail') }}</div>
   <div class="tt-transliterate">{{ 'Привет!'|transliterate('ru') }}</div>
   <div class="tt-check-markup">{{ '<b>bold</b> <strong>strong</strong>'|check_markup('twig_tweak_test') }}</div>
   <div class="tt-format-size">{{ 12345|format_size() }}</div>
@@ -88,7 +87,11 @@
   <div class="tt-field-item-view">{{ node.title[0]|view }}</div>
   <div class="tt-file-uri-from-image-field">{{ node.field_image|file_uri }}</div>
   <div class="tt-file-uri-from-image-field-delta">{{ node.field_image[0]|file_uri }}</div>
-  <div class="tt-file-uri-from-media-field">{{ node.field_media|file_uri }}</div>
+  {% set media_uri = node.field_media|file_uri %}
+  <div class="tt-file-uri-from-media-field">{{ media_uri }}</div>
+  {% if media_uri is not null %}
+    <div class="tt-image-style-from-file-uri-from-media-field">{{ media_uri|image_style('thumbnail') }}</div>
+  {% endif %}
   <div class="tt-file-url-from-uri">{{ 'public://image-test.png'|file_url }}</div>
   <div class="tt-file-url-from-image-field">{{ node.field_image|file_url }}</div>
   <div class="tt-file-url-from-image-field-delta">{{ node.field_image[0]|file_url }}</div>