Issue #2534066 by Jelle_S, Dom., attiks: Allow selecting the original image...

Issue #2534066 by Jelle_S, Dom., attiks: Allow selecting the original image when creating a responsive image style

core/modules/responsive_image/responsive_image.module

@@ -18,6 +18,7 @@
  * The machine name for the empty image breakpoint image style option.
  */
 const RESPONSIVE_IMAGE_EMPTY_IMAGE = '_empty image_';
+const RESPONSIVE_IMAGE_ORIGINAL_IMAGE = '_original image_';
 
 /**
  * Implements hook_help().
@@ -476,7 +477,12 @@ function responsive_image_get_mime_type($image_style_name, $extension) {
   }
   // The MIME type guesser needs a full path, not just an extension, but the
   // file doesn't have to exist.
-  $fake_path = 'responsive_image.' . ImageStyle::load($image_style_name)->getDerivativeExtension($extension);
+  if ($image_style_name === RESPONSIVE_IMAGE_ORIGINAL_IMAGE) {
+    $fake_path = 'responsive_image.' . $extension;
+  }
+  else {
+    $fake_path = 'responsive_image.' . ImageStyle::load($image_style_name)->getDerivativeExtension($extension);
+  }
   return Drupal::service('file.mime_type.guesser.extension')->guess($fake_path);
 }
 

core/modules/responsive_image/src/ResponsiveImageStyleForm.php

@@ -84,6 +84,7 @@ public function form(array $form, FormStateInterface $form_state) {
     );
 
     $image_styles = image_style_options(TRUE);
+    $image_styles[RESPONSIVE_IMAGE_ORIGINAL_IMAGE] = $this->t('- None (original image) -');
     $image_styles[RESPONSIVE_IMAGE_EMPTY_IMAGE] = $this->t('- empty image -');
 
     if ((bool) $responsive_image_style->id() && $this->operation != 'duplicate') {

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

@@ -77,7 +77,10 @@ public function testResponsiveImageAdmin() {
       array('wide', '1x'),
       array('wide', '2x'),
     );
-
+    $image_styles = array_merge(
+      [RESPONSIVE_IMAGE_EMPTY_IMAGE, RESPONSIVE_IMAGE_ORIGINAL_IMAGE],
+      array_keys(image_style_options(FALSE))
+    );
     foreach ($cases as $case) {
       // Check if the radio buttons are present.
       $this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][image_mapping_type]', '');
@@ -85,8 +88,17 @@ public function testResponsiveImageAdmin() {
       $this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][image_style]', '');
       // Check if the sizes textfields are present.
       $this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][sizes]', '');
-      // Check if the image styles checkboxes are present.
-      foreach (array_keys(image_style_options(FALSE)) as $image_style_name) {
+
+      foreach ($image_styles as $image_style_name) {
+        // Check if the image styles are available in the dropdowns.
+        $this->assertTrue($this->xpath(
+          '//select[@name=:name]//option[@value=:style]',
+          [
+            ':name' => 'keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][image_style]',
+            ':style' => $image_style_name,
+          ]
+        ));
+        // Check if the image styles checkboxes are present.
         $this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][sizes_image_styles][' . $image_style_name . ']');
       }
     }

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

@@ -148,6 +148,11 @@ protected function addTestImageStyleMappings($empty_styles = FALSE) {
           'image_mapping_type' => 'image_style',
           'image_mapping' => 'large',
         ))
+        // Test the output of the original image.
+        ->addImageStyleMapping('responsive_image_test_module.wide', '3x', array(
+          'image_mapping_type' => 'image_style',
+          'image_mapping' => RESPONSIVE_IMAGE_ORIGINAL_IMAGE,
+        ))
         ->save();
     }
   }
@@ -286,6 +291,8 @@ protected function doTestResponsiveImageFieldFormatters($scheme, $empty_styles =
       // Assert the output of the 'srcset' attribute (small multipliers first).
       $this->assertRaw('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== 1x, ' . $thumbnail_style->buildUrl($image_uri) . ' 1.5x');
       $this->assertRaw('/styles/medium/');
+      // Assert the output of the original image.
+      $this->assertRaw(file_create_url($image_uri) . ' 3x');
       // Assert the output of the breakpoints.
       $this->assertRaw('media="(min-width: 0px)"');
       $this->assertRaw('media="(min-width: 560px)"');

core/modules/responsive_image/tests/src/Unit/ResponsiveImageStyleConfigEntityUnitTest.php

@@ -208,6 +208,10 @@ public function testGetKeyedImageStyleMappings() {
       'image_mapping_type' => 'image_style',
       'image_mapping' => 'thumbnail',
     ));
+    $entity->addImageStyleMapping('test_breakpoint2', '2x', array(
+      'image_mapping_type' => 'image_style',
+      'image_mapping' => '_original image_',
+    ));
 
     $expected = array(
       'test_breakpoint' => array(
@@ -236,6 +240,12 @@ public function testGetKeyedImageStyleMappings() {
           'image_mapping_type' => 'image_style',
           'image_mapping' => 'thumbnail',
         ),
+        '2x' => array(
+          'breakpoint_id' => 'test_breakpoint2',
+          'multiplier' => '2x',
+          'image_mapping_type' => 'image_style',
+          'image_mapping' => '_original image_',
+        ),
       )
     );
     $this->assertEquals($expected, $entity->getKeyedImageStyleMappings());