Problem/Motivation
In #3192234: Apply width and height attributes to allow responsive image tag use loading="lazy" we improved responsive image support and added width and height attributes to image to prevent layout shift for lazy loaded images.
In the same issue the code is added that calculates width and height dimensions. First we will get the width and height from the smallest responsive image style and we put width and height in $variables['attributes']
foreach ($variables['sources'][0] as $attribute => $value) {
if ($attribute != 'type') {
$variables['attributes'][$attribute] = $value;
}
}
and then in next code we are getting width and height from fallback image style which are put in $variables['img_element']
if (isset($variables['sources']) && count($variables['sources']) === 1 && !isset($variables['sources'][0]['media'])) {
...
// We don't set dimensions for fallback image if rendered in picture tag.
// In Firefox, it results in sizing the entire picture element to the size
// of the fallback image, instead of the size on the source element.
$dimensions = responsive_image_get_image_dimensions($responsive_image_style->getFallbackImageStyle(), [
'width' => $variables['width'],
'height' => $variables['height'],
],
$variables['uri']
);
$variables['img_element']['#width'] = $dimensions['width'];
$variables['img_element']['#height'] = $dimensions['height'];
}
The problem is on the end of this function where $variables['attributes'] and $variables['img_element'] values are merged:
if (isset($variables['attributes'])) {
...
$variables['img_element']['#attributes'] = $variables['attributes'];
}
This will overwrite fallback image style width and height with width and height which are calculated from smallest image style. Because of this images will be rendered with the smallest image dimension in browser. This is not ideal and we can not fix this with CSS. We need more accurate width and height values set here that are coming from fallback image style.
Proposed resolution
Make sure that width and height from fallback image style is used and not the width and height from smallest image style.
Remaining tasks
None.
User interface changes
None.
API changes
None.
Data model changes
None.
Release notes snippet
TODO.