Issue #2348255 by Jelle_S, attiks, mdrummond, Wim Leers, giupenni, jnettik, Lukas von Blarer, SaltPacket: Provide option to use srcset and/or sizes attributes on img tag instead of the picture element

core/modules/responsive_image/responsive_image.module

@@ -178,18 +178,38 @@ function template_preprocess_responsive_image(&$variables) {
       $variables['sources'][] = responsive_image_build_source_attributes($image, $variables, $breakpoints[$breakpoint_id], $multipliers);
     }
   }
-  // Prepare the fallback image. Use srcset in the fallback image to avoid
+
-  // unnecessary preloading of images in older browsers. See
+  if (isset($variables['sources']) && count($variables['sources']) === 1 && !isset($variables['sources'][0]['media'])) {
-  // http://scottjehl.github.io/picturefill/#using-picture and
+    // There is only one source tag with an empty media attribute. This means
-  // http://scottjehl.github.io/picturefill/#gotchas for more information.
+    // we can output an image tag with the srcset attribute in stead of a
-  $variables['img_element'] = array(
+    // picture tag.
-    '#theme' => 'image',
+    $variables['output_image_tag'] = TRUE;
-    '#srcset' => array(
+    foreach ($variables['sources'][0] as $attribute => $value) {
-      array(
+      if ($attribute != 'type') {
-        'uri' => _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $image->getSource()),
+        $variables['attributes'][$attribute] = $value;
+      }
+    }
+    $variables['img_element'] = array(
+      '#theme' => 'image',
+      '#uri' => _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $image->getSource()),
+    );
+  }
+  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.
+    $variables['img_element'] = array(
+      '#theme' => 'image',
+      '#srcset' => array(
+        array(
+          'uri' => _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $image->getSource()),
+        ),
       ),
-    ),
+    );
-  );
+  }
+
   if (isset($variables['attributes'])) {
     if (isset($variables['attributes']['alt'])) {
       $variables['img_element']['#alt'] = $variables['attributes']['alt'];

core/modules/responsive_image/src/Tests/ResponsiveImageFieldDisplayTest.php

@@ -244,6 +244,7 @@ class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase {
     $cache_tags_header = $this->drupalGetHeader('X-Drupal-Cache-Tags');
     $this->assertTrue(!preg_match('/ image_style\:/', $cache_tags_header), 'No image style cache tag found.');
 
+    $this->removeWhiteSpace();
     $this->assertRaw($default_output, 'Image linked to file formatter displaying correctly on full node view.');
     // Verify that the image can be downloaded.
     $this->assertEqual(file_get_contents($test_image->uri), $this->drupalGet(file_create_url($image_uri)), 'File was downloaded successfully.');
@@ -398,6 +399,52 @@ class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase {
     $this->assertPattern('/srcset="' . preg_quote($thumbnail_style->buildUrl($image_uri), '/') . ' 1x".+?media="\(min-width: 0px\)"/');
   }
 
+  /**
+   * Tests responsive image formatter on node display with one source.
+   */
+  public function testResponsiveImageFieldFormattersOneSource() {
+    $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' => 'medium',
+      ))
+      ->addImageStyleMapping('responsive_image_test_module.empty', '2x', array(
+          'image_mapping_type' => 'image_style',
+          'image_mapping' => 'large',
+        ))
+      ->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', $this->randomMachineName());
+    $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',
+      ),
+    );
+    $display = entity_get_display('node', 'article', 'default');
+    $display->setComponent($field_name, $display_options)
+      ->save();
+
+    // View the node.
+    $this->drupalGet('node/' . $nid);
+
+    // Assert the media attribute is present if it has a value.
+    $large_style = ImageStyle::load('large');
+    $medium_style = ImageStyle::load('medium');
+    $node = $node_storage->load($nid);
+    $image_uri = File::load($node->{$field_name}->target_id)->getFileUri();
+    $this->assertRaw('<img srcset="' . $medium_style->buildUrl($image_uri) . ' 1x, ' . $large_style->buildUrl($image_uri) . ' 2x"');
+  }
+
   /**
    * Tests responsive image formatters linked to the file or node.
    *
@@ -451,6 +498,7 @@ class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase {
 
     // Output should contain all image styles and all breakpoints.
     $this->drupalGet('node/' . $nid);
+    $this->removeWhiteSpace();
     switch ($link_type) {
       case 'file':
         // Make sure the link to the file is present.

core/modules/responsive_image/templates/responsive-image.html.twig

@@ -6,6 +6,8 @@
  * Available variables:
  * - sources: The attributes of the <source> tags for this <picture> tag.
  * - img_element: The controlling image, with the fallback image in srcset.
+ * - output_image_tag: Whether or not to output an <img> tag instead of a
+ *   <picture> tag.
  *
  * @see template_preprocess()
  * @see template_preprocess_responsive_image()
@@ -13,18 +15,22 @@
  * @ingroup themeable
  */
 #}
-<picture>
+{% if output_image_tag %}
-  {% if sources %}
-    {#
-    Internet Explorer 9 doesn't recognise source elements that are wrapped in
-    picture tags. See http://scottjehl.github.io/picturefill/#ie9
-    #}
-    <!--[if IE 9]><video style="display: none;"><![endif]-->
-    {% for source_attributes in sources %}
-      <source{{ source_attributes }}/>
-    {% endfor %}
-    <!--[if IE 9]></video><![endif]-->
-  {% endif %}
-  {# The controlling image, with the fallback image in srcset. #}
   {{ img_element }}
-</picture>
+{% else %}
+  <picture>
+    {% if sources %}
+      {#
+      Internet Explorer 9 doesn't recognise source elements that are wrapped in
+      picture tags. See http://scottjehl.github.io/picturefill/#ie9
+      #}
+      <!--[if IE 9]><video style="display: none;"><![endif]-->
+      {% for source_attributes in sources %}
+        <source{{ source_attributes }}/>
+      {% endfor %}
+      <!--[if IE 9]></video><![endif]-->
+    {% endif %}
+    {# The controlling image, with the fallback image in srcset. #}
+    {{ img_element }}
+  </picture>
+{% endif %}