Issue #2848104 by davidraijmakers, sgalindo2388, lzimmerman: Add drupal_image function.

src/TwigExtension.php

@@ -2,9 +2,10 @@
 
 namespace Drupal\twig_tweak;
 
+use Drupal\Component\Uuid\Uuid;
 use Drupal\Core\Block\TitleBlockPluginInterface;
-use Drupal\Core\Site\Settings;
 use Drupal\Core\Link;
+use Drupal\Core\Site\Settings;
 use Drupal\Core\Url;
 use Drupal\image\Entity\ImageStyle;
 use Symfony\Cmf\Component\Routing\RouteObjectInterface;
@@ -29,6 +30,7 @@ class TwigExtension extends \Twig_Extension {
       new \Twig_SimpleFunction('drupal_field', [$this, 'drupalField']),
       new \Twig_SimpleFunction('drupal_menu', [$this, 'drupalMenu']),
       new \Twig_SimpleFunction('drupal_form', [$this, 'drupalForm']),
+      new \Twig_SimpleFunction('drupal_image', [$this, 'drupalImage']),
       new \Twig_SimpleFunction('drupal_token', [$this, 'drupalToken']),
       new \Twig_SimpleFunction('drupal_config', [$this, 'drupalConfig']),
       new \Twig_SimpleFunction('drupal_dump', [$this, 'drupalDump']),
@@ -248,6 +250,73 @@ class TwigExtension extends \Twig_Extension {
     return call_user_func_array([$form_builder, 'getForm'], func_get_args());
   }
 
+  /**
+   * Builds an image.
+   *
+   * @param mixed $property
+   *   A property to identify the image.
+   * @param string $style
+   *   (Optional) Image style.
+   * @param array $attributes
+   *   (Optional) Image attributes.
+   * @param bool $responsive
+   *   (Optional) Indicates that the provided image style is responsive.
+   * @param bool $check_access
+   *   (Optional) Indicates that access check is required.
+   *
+   * @return array|null
+   *   A render array to represent the image.
+   */
+  public function drupalImage($property, $style = NULL, array $attributes = [], $responsive = FALSE, $check_access = TRUE) {
+
+    // Determine property type by its value.
+    if (preg_match('/^\d+$/', $property)) {
+      $property_type = 'fid';
+    }
+    elseif (Uuid::isValid($property)) {
+      $property_type = 'uuid';
+    }
+    else {
+      $property_type = 'uri';
+    }
+
+    $files = \Drupal::entityTypeManager()
+      ->getStorage('file')
+      ->loadByProperties([$property_type => $property]);
+
+    // To avoid ambiguity render nothing unless exact one image was found.
+    if (count($files) != 1) {
+      return;
+    }
+
+    $file = reset($files);
+
+    if ($check_access && !$file->access('view')) {
+      return;
+    }
+
+    $build = [
+      '#uri' => $file->getFileUri(),
+      '#attributes' => $attributes,
+    ];
+
+    if ($style) {
+      if ($responsive) {
+        $build['#type'] = 'responsive_image';
+        $build['#responsive_image_style_id'] = $style;
+      }
+      else {
+        $build['#theme'] = 'image_style';
+        $build['#style_name'] = $style;
+      }
+    }
+    else {
+      $build['#theme'] = 'image';
+    }
+
+    return $build;
+  }
+
   /**
    * Replaces a given tokens with appropriate value.
    *

tests/src/Functional/TwigTweakTest.php

@@ -4,6 +4,8 @@ namespace Drupal\Tests\twig_tweak\Functional;
 
 use Drupal\Core\Link;
 use Drupal\Core\Url;
+use Drupal\file\Entity\File;
+use Drupal\responsive_image\Entity\ResponsiveImageStyle;
 use Drupal\Tests\BrowserTestBase;
 
 /**
@@ -23,6 +25,7 @@ class TwigTweakTest extends BrowserTestBase {
     'node',
     'block',
     'image',
+    'responsive_image',
   ];
 
   /**
@@ -34,6 +37,21 @@ class TwigTweakTest extends BrowserTestBase {
     $this->createNode(['title' => 'Alpha']);
     $this->createNode(['title' => 'Beta']);
     $this->createNode(['title' => 'Gamma']);
+
+    file_unmanaged_copy(DRUPAL_ROOT . '/core/misc/druplicon.png', 'public://druplicon.png');
+    $file = File::create([
+      'uri' => 'public://druplicon.png',
+      'filename' => 'druplicon.png',
+      'uuid' => 'b2c22b6f-7bf8-4da4-9de5-316e93487518',
+      'status' => 1,
+    ]);
+    $file->save();
+
+    ResponsiveImageStyle::create([
+      'id' => 'example',
+      'label' => 'Example',
+      'breakpoint_group' => 'responsive_image',
+    ])->save();
   }
 
   /**
@@ -123,6 +141,26 @@ class TwigTweakTest extends BrowserTestBase {
     $xpath = '//div[@class = "tt-form"]/form[@class="system-cron-settings"]/input[@type = "submit" and @value = "Run cron"]';
     $this->assertByXpath($xpath);
 
+    // Test image by FID.
+    $xpath = '//div[@class = "tt-image-by-fid"]/img[contains(@src, "/files/druplicon.png")]';
+    $this->assertByXpath($xpath);
+
+    // Test image by URI.
+    $xpath = '//div[@class = "tt-image-by-uri"]/img[contains(@src, "/files/druplicon.png")]';
+    $this->assertByXpath($xpath);
+
+    // Test image by UUID.
+    $xpath = '//div[@class = "tt-image-by-uuid"]/img[contains(@src, "/files/druplicon.png")]';
+    $this->assertByXpath($xpath);
+
+    // Test image with style.
+    $xpath = '//div[@class = "tt-image-with-style"]/img[contains(@src, "/files/styles/thumbnail/public/druplicon.png")]';
+    $this->assertByXpath($xpath);
+
+    // Test image with responsive style.
+    $xpath = '//div[@class = "tt-image-with-responsive-style"]/picture/img[contains(@src, "/files/druplicon.png")]';
+    $this->assertByXpath($xpath);
+
     // Test token.
     $xpath = '//div[@class = "tt-token" and text() = "Drupal"]';
     $this->assertByXpath($xpath);

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

@@ -1,3 +1,4 @@
+{% set image_attributes = {style: 'width: 30px; height 30px;'} %}
 <style>
   .tt-test > div {
     margin: 15px;
@@ -30,6 +31,11 @@
   <div class="tt-menu-level">{{ drupal_menu('twig-tweak-test', 2) }}</div>
   <div class="tt-menu-depth">{{ drupal_menu('twig-tweak-test', 1, 1) }}</div>
   <div class="tt-form">{{ drupal_form('Drupal\\system\\Form\\CronForm') }}</div>
+  <div class="tt-image-by-fid">{{ drupal_image(1, attributes=image_attributes) }}</div>
+  <div class="tt-image-by-uri">{{ drupal_image('public://druplicon.png', attributes=image_attributes) }}</div>
+  <div class="tt-image-by-uuid">{{ drupal_image('b2c22b6f-7bf8-4da4-9de5-316e93487518', attributes=image_attributes) }}</div>
+  <div class="tt-image-with-style">{{ drupal_image(1, 'thumbnail', image_attributes) }}</div>
+  <div class="tt-image-with-responsive-style">{{ drupal_image(1, 'example', image_attributes, true) }}</div>
   <div class="tt-token">{{ drupal_token('site:name') }}</div>
   <div class="tt-token-data">{{ drupal_token('node:title', {'node': node}) }}</div>
   <div class="tt-config">{{ drupal_config('user.settings', 'anonymous') }}</div>

tests/twig_tweak_test/twig_tweak_test.info.yml

@@ -4,5 +4,5 @@ description: Support module for Tweak twig testing.
 package: Testing
 core: 8.x
 dependencies:
-  - drupa:twig_tweak
   - drupal:node
+  - drupal:twig_tweak