Verified Commit 460a2ddd authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3377420 by pivica, Berdir, smustgrave, sergey-serov, bkosborne,... 

Issue #3377420 by pivica, Berdir, smustgrave, sergey-serov, bkosborne, bspeare, larowlan: Responsive image width/height values are not used from fallback image style
parent 5e2806f1

core/modules/responsive_image/responsive_image.module

+6 −0
Original line number Diff line number Diff line
@@ -221,6 +221,12 @@ function template_preprocess_responsive_image(&$variables) { 
      $variables['img_element']['#title'] = $variables['attributes']['title'];

      unset($variables['attributes']['title']);

    }

    if (isset($variables['img_element']['#width'])) {

      $variables['attributes']['width'] = $variables['img_element']['#width'];

    }

    if (isset($variables['img_element']['#height'])) {

      $variables['attributes']['height'] = $variables['img_element']['#height'];

    }

    $variables['img_element']['#attributes'] = $variables['attributes'];

  }

}

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

+2 −2
Original line number Diff line number Diff line
@@ -498,7 +498,7 @@ public function testResponsiveImageFieldFormattersMultipleSources() { 
    $image_uri = File::load($node->{$field_name}->target_id)->getFileUri();

    $medium_transform_url = $this->fileUrlGenerator->transformRelative($medium_style->buildUrl($image_uri));

    $large_transform_url = $this->fileUrlGenerator->transformRelative($large_style->buildUrl($image_uri));

    $this->assertSession()->responseMatches('/<img loading="eager" srcset="' . \preg_quote($medium_transform_url, '/') . ' 1x, ' . \preg_quote($large_transform_url, '/') . ' 1.5x, ' . \preg_quote($large_transform_url, '/') . ' 2x" width="220" height="220" src="' . \preg_quote($large_transform_url, '/') . '" alt="\w+" \/>/');

    $this->assertSession()->responseMatches('/<img loading="eager" srcset="' . \preg_quote($medium_transform_url, '/') . ' 1x, ' . \preg_quote($large_transform_url, '/') . ' 1.5x, ' . \preg_quote($large_transform_url, '/') . ' 2x" width="480" height="480" src="' . \preg_quote($large_transform_url, '/') . '" alt="\w+" \/>/');



    $this->responsiveImgStyle

      // Test the output of an empty media query.
@@ -510,7 +510,7 @@ public function testResponsiveImageFieldFormattersMultipleSources() { 


    // Assert the picture tag has source tags that include dimensions.

    $this->drupalGet('node/' . $nid);

    $this->assertSession()->responseMatches('/<picture>\s+<source srcset="' . \preg_quote($large_transform_url, '/') . ' 1x" media="\(min-width: 851px\)" type="image\/webp" width="480" height="480"\/>\s+<source srcset="' . \preg_quote($medium_transform_url, '/') . ' 1x, ' . \preg_quote($large_transform_url, '/') . ' 1.5x, ' . \preg_quote($large_transform_url, '/') . ' 2x" type="image\/webp" width="220" height="220"\/>\s+<img loading="eager" src="' . \preg_quote($large_transform_url, '/') . '" width="480" height="480" alt="\w+" \/>\s+<\/picture>/');

    $this->assertSession()->responseMatches('/<picture>\s+<source srcset="' . \preg_quote($large_transform_url, '/') . ' 1x" media="\(min-width: 851px\)" type="image\/webp" width="480" height="480"\/>\s+<source srcset="' . \preg_quote($medium_transform_url, '/') . ' 1x, ' . \preg_quote($large_transform_url, '/') . ' 1.5x, ' . \preg_quote($large_transform_url, '/') . ' 2x" type="image\/webp" width="220" height="220"\/>\s+<img loading="eager" width="480" height="480" src="' . \preg_quote($large_transform_url, '/') . '" alt="\w+" \/>\s+<\/picture>/');

  }



  /**