summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAlex Pott2015-02-18 11:51:12 (GMT)
committerAlex Pott2015-02-18 11:51:12 (GMT)
commit097d6d35543c9e4055b9281e825c665bd407ec88 (patch)
treedc85cb1400b9969c5195e7aa7c98223db5df3477
parent5d36a994111f34f61956278f723225d92fcfc718 (diff)
Issue #2424727 by Jelle_S: Do not output empty media attribute for source tags
-rw-r--r--core/modules/responsive_image/responsive_image.module5
-rw-r--r--core/modules/responsive_image/src/Tests/ResponsiveImageFieldDisplayTest.php50
-rw-r--r--core/modules/responsive_image/tests/modules/responsive_image_test_module/responsive_image_test_module.breakpoints.yml15
3 files changed, 66 insertions, 4 deletions
diff --git a/core/modules/responsive_image/responsive_image.module b/core/modules/responsive_image/responsive_image.module
index f7e2192..927c20c 100644
--- a/core/modules/responsive_image/responsive_image.module
+++ b/core/modules/responsive_image/responsive_image.module
@@ -401,8 +401,11 @@ function responsive_image_build_source_attributes(ImageInterface $image, array $
ksort($srcset);
$source_attributes = new \Drupal\Core\Template\Attribute(array(
'srcset' => implode(', ', array_unique($srcset)),
- 'media' => $breakpoint->getMediaQuery(),
));
+ $media_query = trim($breakpoint->getMediaQuery());
+ if (!empty($media_query)) {
+ $source_attributes->setAttribute('media', $media_query);
+ }
if (count(array_unique($derivative_mime_types)) == 1) {
$source_attributes->setAttribute('type', $derivative_mime_types[0]);
}
diff --git a/core/modules/responsive_image/src/Tests/ResponsiveImageFieldDisplayTest.php b/core/modules/responsive_image/src/Tests/ResponsiveImageFieldDisplayTest.php
index 45a418d..1e683d0 100644
--- a/core/modules/responsive_image/src/Tests/ResponsiveImageFieldDisplayTest.php
+++ b/core/modules/responsive_image/src/Tests/ResponsiveImageFieldDisplayTest.php
@@ -308,6 +308,56 @@ class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase {
}
/**
+ * Tests responsive image formatter on node display with an empty media query.
+ */
+ public function testResponsiveImageFieldFormattersEmptyMediaQuery() {
+ $this->responsiveImgStyle
+ // Test the output of an empty media query.
+ ->addImageStyleMapping('responsive_image_test_module.empty', '1x', array(
+ 'image_mapping_type' => 'image_style',
+ 'image_mapping' => RESPONSIVE_IMAGE_EMPTY_IMAGE,
+ ))
+ // Test the output with a 1.5x multiplier.
+ ->addImageStyleMapping('responsive_image_test_module.mobile', '1x', array(
+ 'image_mapping_type' => 'image_style',
+ 'image_mapping' => 'thumbnail',
+ ))
+ ->save();
+ $node_storage = $this->container->get('entity.manager')->getStorage('node');
+ $field_name = Unicode::strtolower($this->randomMachineName());
+ $this->createImageField($field_name, 'article', array('uri_scheme' => 'public'));
+ // Create a new node with an image attached.
+ $test_image = current($this->drupalGetTestFiles('image'));
+ $nid = $this->uploadNodeImage($test_image, $field_name, 'article');
+ $node_storage->resetCache(array($nid));
+
+ // Use the responsive image formatter linked to file formatter.
+ $display_options = array(
+ 'type' => 'responsive_image',
+ 'settings' => array(
+ 'image_link' => '',
+ 'responsive_image_style' => 'style_one',
+ 'fallback_image_style' => 'medium',
+ ),
+ );
+ $display = entity_get_display('node', 'article', 'default');
+ $display->setComponent($field_name, $display_options)
+ ->save();
+
+ // View the node.
+ $this->drupalGet('node/' . $nid);
+
+ // Assert an empty media attribute is not output.
+ $this->assertNoPattern('@srcset="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== 1x".+?media="@');
+
+ // Assert the media attribute is present if it has a value.
+ $thumbnail_style = ImageStyle::load('thumbnail');
+ $node = $node_storage->load($nid);
+ $image_uri = File::load($node->{$field_name}->target_id)->getFileUri();
+ $this->assertPattern('/srcset="' . preg_quote($thumbnail_style->buildUrl($image_uri), '/') . ' 1x".+?media="\(min-width: 0px\)"/');
+ }
+
+ /**
* Tests responsive image formatters linked to the file or node.
*
* @param string $link_type
diff --git a/core/modules/responsive_image/tests/modules/responsive_image_test_module/responsive_image_test_module.breakpoints.yml b/core/modules/responsive_image/tests/modules/responsive_image_test_module/responsive_image_test_module.breakpoints.yml
index 0d32372..0f1391a 100644
--- a/core/modules/responsive_image/tests/modules/responsive_image_test_module/responsive_image_test_module.breakpoints.yml
+++ b/core/modules/responsive_image/tests/modules/responsive_image_test_module/responsive_image_test_module.breakpoints.yml
@@ -1,7 +1,16 @@
+responsive_image_test_module.empty:
+ label: empty
+ mediaQuery: ''
+ weight: 0
+ multipliers:
+ - 1x
+ - 1.5x
+ - 2x
+
responsive_image_test_module.mobile:
label: mobile
mediaQuery: '(min-width: 0px)'
- weight: 0
+ weight: 1
multipliers:
- 1x
- 1.5x
@@ -9,7 +18,7 @@ responsive_image_test_module.mobile:
responsive_image_test_module.narrow:
label: narrow
mediaQuery: '(min-width: 560px)'
- weight: 1
+ weight: 2
multipliers:
- 1x
- 1.5x
@@ -17,7 +26,7 @@ responsive_image_test_module.narrow:
responsive_image_test_module.wide:
label: wide
mediaQuery: '(min-width: 851px)'
- weight: 2
+ weight: 3
multipliers:
- 1x
- 1.5x