Commit 097d6d35 authored by alexpott's avatar alexpott

Issue #2424727 by Jelle_S: Do not output empty media attribute for source tags

parent 5d36a994
......@@ -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]);
}
......
......@@ -307,6 +307,56 @@ public function testResponsiveImageFieldFormattersLinkToNode() {
$this->assertResponsiveImageFieldFormattersLink('content');
}
/**
* 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.
*
......
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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment