Verified Commit d775b620 authored by Dave Long's avatar Dave Long
Browse files

fix: #3522087 set_attribute Twig filter doesn't work on responsive_image_formatter element 

By: odensc
By: smustgrave
By: oily
(cherry picked from commit 3cb299cf)
parent 9d5cb3f3

core/modules/responsive_image/src/Hook/ResponsiveImageThemeHooks.php

+4 −0
Original line number Diff line number Diff line
@@ -40,6 +40,7 @@ public function theme() : array { 
      ],

      'responsive_image_formatter' => [

        'variables' => [

          'attributes' => [],

          'item' => NULL,

          'item_attributes' => NULL,

          'url' => NULL,
@@ -96,6 +97,9 @@ public function preprocessResponsiveImageFormatter(&$variables): void { 
      $variables['responsive_image']['#uri'] = $item->uri;

    }



    // Override any attributes with those set in the render array.

    $attributes = array_merge($attributes, $variables['attributes']);



    foreach (['width', 'height'] as $key) {

      $variables['responsive_image']["#$key"] = $item->$key;

    }

core/modules/responsive_image/tests/src/Functional/ResponsiveImageFieldDisplayTest.php

+32 −0
Original line number Diff line number Diff line
@@ -418,6 +418,38 @@ public function testResponsiveImageFieldFormattersEmptyMediaQuery(): void { 
    $this->assertSession()->responseMatches('/srcset="' . preg_quote($this->fileUrlGenerator->transformRelative($thumbnail_style->buildUrl($image_uri)), '/') . ' 1x".+?media="\(min-width: 0px\)"/');

  }



  /**

   * Tests formatter passes down any attributes in the render array.

   */

  public function testResponsiveImageFieldFormatterAttributesInRenderArray(): void {

    /** @var \Drupal\Core\Render\RendererInterface $renderer */

    $renderer = $this->container->get('renderer');

    $node_storage = $this->container->get('entity_type.manager')->getStorage('node');

    $field_name = $this->randomMachineName();

    $this->createImageField($field_name, 'node', 'article', ['uri_scheme' => 'public']);



    // Create a new node with an image attached.

    $test_image = current($this->getTestFiles('image'));

    $nid = $this->uploadNodeImage($test_image, $field_name, 'article', $this->randomMachineName());

    $node_storage->resetCache([$nid]);

    $node = $node_storage->load($nid);



    $image = [

      '#theme' => 'responsive_image_formatter',

      '#item' => $node->{$field_name}[0],

      '#responsive_image_style_id' => 'style_one',

      '#attributes' => [

        'alt' => 'test alt',

        'data-test1' => 'test1',

        'data-test2' => 'test2',

      ],

    ];

    $html_output = str_replace("\n", '', (string) $renderer->renderRoot($image));

    $this->assertStringContainsString('alt="test alt"', $html_output);

    $this->assertStringContainsString('data-test1="test1"', $html_output);

    $this->assertStringContainsString('data-test2="test2"', $html_output);

  }



  /**

   * Tests responsive image formatter on node display with one and two sources.

   */