Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #2481637 by Jelle_S, attiks, mdrummond, Wim Leers: Use src in fallback image

8.3.x
Alex Pott 2016-10-13 11:12:04 +01:00
parent b09f92223a
commit 40b2b0720d
2 changed files with 8 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
core/modules/responsive_image/responsive_image.module
View File

@ -197,17 +197,13 @@ function template_preprocess_responsive_image(&$variables) {
}
else {
$variables['output_image_tag'] = FALSE;
// Prepare the fallback image. Use srcset in the fallback image to avoid
// unnecessary preloading of images in older browsers. See
// http://scottjehl.github.io/picturefill/#using-picture and
// http://scottjehl.github.io/picturefill/#gotchas for more information.
// Prepare the fallback image. We use the src attribute, which might cause
// double downloads in browsers that don't support the picture tag (might,
// because when picturefill kicks in, it cancels the download and triggers
// the download for the correct image).
$variables['img_element'] = array(
'#theme' => 'image',
'#srcset' => array(
array(
'uri' => _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $image->getSource()),
),
),
'#uri' => _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $image->getSource()),
);
}
@ -265,7 +261,7 @@ function template_preprocess_responsive_image(&$variables) {
* <picture>
* <source media="(min-width: 0px)" srcset="sites/default/files/styles/thumbnail/image.jpeg" />
* <source media="(min-width: 560px)" sizes="(min-width: 700px) 700px, 100vw" srcset="sites/default/files/styles/large/image.jpeg 480w, sites/default/files/styles/medium/image.jpeg 220w" />
* <img srcset="fallback.jpeg" />
* <img src="fallback.jpeg" />
* </picture>
* @endcode
*
@ -294,7 +290,7 @@ function template_preprocess_responsive_image(&$variables) {
* <picture>
* <source [...] mime-type="image/webp" srcset="image1.webp 1x, image2.webp 2x, image3.webp 3x"/>
* <source [...] mime-type="image/jpeg" srcset="image1.jpeg 1x, image2.jpeg 2x, image3.jpeg 3x"/>
* <img srcset="fallback.jpeg" />
* <img src="fallback.jpeg" />
* </picture>
* @endcode
* This way a browser can decide which <source> tag is preferred based on the

6
core/modules/responsive_image/src/Tests/ResponsiveImageFieldDisplayTest.php
View File

@ -315,11 +315,7 @@ class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase {
$fallback_image = array(
'#theme' => 'image',
'#alt' => $alt,
'#srcset' => array(
array(
'uri' => file_url_transform_relative($large_style->buildUrl($image->getSource())),
),
),
'#uri' => file_url_transform_relative($large_style->buildUrl($image->getSource())),
);
// 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