Commit 1b99cf3d authored by catch's avatar catch
Browse files

Issue #3359421 by Anybody, Grevil: (Re-)Add width / height also on fallback image 

(cherry picked from commit 15755733)
parent ede92c59

core/modules/responsive_image/responsive_image.module

+12 −12
Original line number Diff line number Diff line
@@ -190,18 +190,6 @@ function template_preprocess_responsive_image(&$variables) { 
      '#uri' => _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $variables['uri']),

      '#attributes' => [],

    ];



    // 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'];

  }

  else {

    $variables['output_image_tag'] = FALSE;
@@ -214,6 +202,18 @@ function template_preprocess_responsive_image(&$variables) { 
    ];

  }



  // Get width and height from fallback responsive image style and transfer them

  // to img tag so browser can do aspect ratio calculation and prevent

  // recalculation of layout on image load.

  $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'];



  if (isset($variables['attributes'])) {

    if (isset($variables['attributes']['alt'])) {

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

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

+5 −9
Original line number Diff line number Diff line
@@ -333,14 +333,10 @@ protected function doTestResponsiveImageFieldFormatters($scheme, $empty_styles = 
    }

    $this->assertSession()->responseHeaderContains('X-Drupal-Cache-Tags', 'config:image.style.large');



    // Test the fallback image style.

    $image = \Drupal::service('image.factory')->get($image_uri);

    $fallback_image = [

      '#theme' => 'image',

      '#alt' => $alt,

      '#uri' => $this->fileUrlGenerator->transformRelative($large_style->buildUrl($image->getSource())),

      '#attributes' => ['loading' => 'lazy'],

    ];

    // Test the fallback image style. Copy the source image:

    $fallback_image = $image;

    // Set the fallback image style uri:

    $fallback_image['#uri'] = $this->fileUrlGenerator->transformRelative($large_style->buildUrl($image_uri));

    // The image.html.twig template has a newline after the <img> tag but

    // responsive-image.html.twig doesn't have one after the fallback image, so

    // we remove it here.
@@ -509,7 +505,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\/png" 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\/png" width="220" height="220"\/>\s+<img loading="eager" src="' . \preg_quote($large_transform_url, '/') . '" alt="\w+" \/>\s+<\/picture>/');

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

  }



  /**