From 460a2ddd468b8602b566d01a4d5ee656f3e27a84 Mon Sep 17 00:00:00 2001
From: nod_ <nod_@598310.no-reply.drupal.org>
Date: Thu, 13 Jun 2024 22:28:16 +0200
Subject: [PATCH] Issue #3377420 by pivica, Berdir, smustgrave, sergey-serov,
bkosborne, bspeare, larowlan: Responsive image width/height values are not
used from fallback image style
---
core/modules/responsive_image/responsive_image.module | 6 ++++++
.../src/Functional/ResponsiveImageFieldDisplayTest.php | 4 ++--
2 files changed, 8 insertions(+), 2 deletions(-)
diff --git a/core/modules/responsive_image/responsive_image.module b/core/modules/responsive_image/responsive_image.module
index 5625cbbea05b..c3d551e1a5d9 100644
--- a/core/modules/responsive_image/responsive_image.module
+++ b/core/modules/responsive_image/responsive_image.module
@@ -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'];
}
}
diff --git a/core/modules/responsive_image/tests/src/Functional/ResponsiveImageFieldDisplayTest.php b/core/modules/responsive_image/tests/src/Functional/ResponsiveImageFieldDisplayTest.php
index 3154872366d8..5347a1f34a4f 100644
--- a/core/modules/responsive_image/tests/src/Functional/ResponsiveImageFieldDisplayTest.php
+++ b/core/modules/responsive_image/tests/src/Functional/ResponsiveImageFieldDisplayTest.php
@@ -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>/');
}
/**
--
GitLab