Issue #2349461 by Jelle_S, mdrummond, attiks, Wim Leers: Move fallback image...

Issue #2349461 by Jelle_S, mdrummond, attiks, Wim Leers: Move fallback image style into the responsive image style entity

core/modules/config_translation/src/Tests/ConfigTranslationListUiTest.php

@@ -362,6 +362,7 @@ public function doResponsiveImageListTest() {
     $edit = array();
     $edit['label'] = $this->randomMachineName();
     $edit['id'] = strtolower($edit['label']);
+    $edit['fallback_image_style'] = 'thumbnail';
 
     $this->drupalPostForm('admin/config/media/responsive-image-style/add', $edit, t('Save'));
     $this->assertRaw(t('Responsive image style %label saved.', array('%label' => $edit['label'])));

core/modules/responsive_image/config/schema/responsive_image.schema.yml

@@ -34,6 +34,9 @@ responsive_image.styles.*:
     breakpoint_group:
       type: string
       label: 'Breakpoint group'
+    fallback_image_style:
+      type: string
+      label: 'Fallback image style'
 
 responsive_image.image_mapping_type.image_style:
   type: string
@@ -61,9 +64,6 @@ field.formatter.settings.responsive_image:
     responsive_image_style:
       type: string
       label: 'Responsive image style'
-    fallback_image_style:
-      type: string
-      label: 'Fallback image style'
     image_link:
       type: string
       label: 'Link image to'

core/modules/responsive_image/responsive_image.module

@@ -77,7 +77,6 @@ function responsive_image_theme() {
   return array(
     'responsive_image' => array(
       'variables' => array(
-        'style_name' => NULL,
         'uri' => NULL,
         'width' => NULL,
         'height' => NULL,
@@ -91,7 +90,6 @@ function responsive_image_theme() {
       'variables' => array(
         'item' => NULL,
         'url' => NULL,
-        'image_style' => NULL,
         'responsive_image_style_id' => array(),
       ),
       'function' => 'theme_responsive_image_formatter',
@@ -105,7 +103,6 @@ function responsive_image_theme() {
  * @param array $variables
  *   An associative array containing:
  *   - item: An ImageItem object.
- *   - image_style: An optional image style.
  *   - responsive_image_style_id: The ID of the responsive image style.
  *   - url: An optional \Drupal\Core\Url object.
  *
@@ -117,7 +114,6 @@ function theme_responsive_image_formatter($variables) {
     $image_formatter = array(
       '#theme' => 'image_formatter',
       '#item' => $item,
-      '#image_style' => $variables['image_style'],
       '#url' => $variables['url'],
     );
     return drupal_render($image_formatter);
@@ -127,7 +123,6 @@ function theme_responsive_image_formatter($variables) {
     '#theme' => 'responsive_image',
     '#width' => $item->width,
     '#height' => $item->height,
-    '#style_name' => $variables['image_style'],
     '#responsive_image_style_id' => $variables['responsive_image_style_id'],
   );
   if (isset($item->uri)) {
@@ -163,7 +158,6 @@ function theme_responsive_image_formatter($variables) {
  *   - title: The title text is displayed when the image is hovered in some
  *     popular browsers.
  *   - attributes: Associative array of attributes to be placed in the img tag.
- *   - style_name: The name of the style to be used as a fallback image.
  *   - responsive_image_style_id: The ID of the responsive image style.
  */
 function template_preprocess_responsive_image(&$variables) {
@@ -196,7 +190,7 @@ function template_preprocess_responsive_image(&$variables) {
     '#theme' => 'image',
     '#srcset' => array(
       array(
-        'uri' => _responsive_image_image_style_url($variables['style_name'], $image->getSource()),
+        'uri' => _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $image->getSource()),
       ),
     ),
   );

core/modules/responsive_image/src/Entity/ResponsiveImageStyle.php

@@ -88,6 +88,13 @@ class ResponsiveImageStyle extends ConfigEntityBase implements ResponsiveImageSt
    */
   protected $breakpoint_group = '';
 
+  /**
+   * The fallback image style.
+   *
+   * @var string
+   */
+  protected $fallback_image_style = '';
+
   /**
    * {@inheritdoc}
    */
@@ -167,6 +174,21 @@ public function getBreakpointGroup() {
     return $this->breakpoint_group;
   }
 
+  /**
+   * {@inheritdoc}
+   */
+  public function setFallbackImageStyle($fallback_image_style) {
+    $this->fallback_image_style = $fallback_image_style;
+    return $this;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getFallbackImageStyle() {
+    return $this->fallback_image_style;
+  }
+
   /**
    * {@inheritdoc}
    */
@@ -231,7 +253,7 @@ public function getImageStyleMapping($breakpoint_id, $multiplier) {
    * {@inheritdoc}
    */
   public function getImageStyleIds() {
-    $image_styles = [];
+    $image_styles = [$this->getFallbackImageStyle()];
     foreach ($this->getImageStyleMappings() as $image_style_mapping) {
       // Only image styles of non-empty mappings should be loaded.
       if (!$this::isEmptyImageStyleMapping($image_style_mapping)) {

core/modules/responsive_image/src/Plugin/Field/FieldFormatter/ResponsiveImageFormatter.php

@@ -94,7 +94,6 @@ public static function create(ContainerInterface $container, array $configuratio
   public static function defaultSettings() {
     return array(
       'responsive_image_style' => '',
-      'fallback_image_style' => '',
       'image_link' => '',
     ) + parent::defaultSettings();
   }
@@ -121,15 +120,6 @@ public function settingsForm(array $form, FormStateInterface $form_state) {
       '#options' => $responsive_image_options,
     );
 
-    $image_styles = image_style_options(FALSE);
-    $elements['fallback_image_style'] = array(
-      '#title' => t('Fallback image style'),
-      '#type' => 'select',
-      '#default_value' => $this->getSetting('fallback_image_style'),
-      '#empty_option' => t('Automatic'),
-      '#options' => $image_styles,
-    );
-
     $link_types = array(
       'content' => t('Content'),
       'file' => t('File'),
@@ -155,15 +145,6 @@ public function settingsSummary() {
     if ($responsive_image_style) {
       $summary[] = t('Responsive image style: @responsive_image_style', array('@responsive_image_style' => $responsive_image_style->label()));
 
-      $image_styles = image_style_options(FALSE);
-      unset($image_styles['']);
-      if (isset($image_styles[$this->getSetting('fallback_image_style')])) {
-        $summary[] = t('Fallback Image style: @style', array('@style' => $image_styles[$this->getSetting('fallback_image_style')]));
-      }
-      else {
-        $summary[] = t('Automatic fallback');
-      }
-
       $link_types = array(
         'content' => t('Linked to content'),
         'file' => t('Linked to file'),
@@ -204,13 +185,6 @@ public function viewElements(FieldItemListInterface $items) {
       $link_file = TRUE;
     }
 
-    $fallback_image_style = '';
-
-    // Check if the user defined a custom fallback image style.
-    if ($this->getSetting('fallback_image_style')) {
-      $fallback_image_style = $this->getSetting('fallback_image_style');
-    }
-
     // Collect cache tags to be added for each item in the field.
     $responsive_image_style = $this->responsiveImageStyleStorage->load($this->getSetting('responsive_image_style'));
     $image_styles_to_load = array();
@@ -220,18 +194,6 @@ public function viewElements(FieldItemListInterface $items) {
       $image_styles_to_load = $responsive_image_style->getImageStyleIds();
     }
 
-    // If there is a fallback image style, add it to the image styles to load.
-    if ($fallback_image_style) {
-      $image_styles_to_load[] = $fallback_image_style;
-    }
-    else {
-      // The <picture> element uses the first matching breakpoint (see
-      // http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#update-the-source-set
-      // points 2 and 3). Meaning the breakpoints are sorted from large to
-      // small. With mobile-first in mind, the fallback image should be the one
-      // selected for the smallest screen.
-      $fallback_image_style = end($image_styles_to_load);
-    }
     $image_styles = $this->imageStyleStorage->loadMultiple($image_styles_to_load);
     foreach ($image_styles as $image_style) {
       $cache_tags = Cache::mergeTags($cache_tags, $image_style->getCacheTags());
@@ -250,7 +212,6 @@ public function viewElements(FieldItemListInterface $items) {
           ),
         ),
         '#item' => $file->_referringItem,
-        '#image_style' => $fallback_image_style,
         '#responsive_image_style_id' => $responsive_image_style ? $responsive_image_style->id() : '',
         '#url' => $url,
         '#cache' => array(

core/modules/responsive_image/src/ResponsiveImageStyleForm.php

@@ -100,6 +100,15 @@ public function form(array $form, FormStateInterface $form_state) {
 
     $image_styles = image_style_options(TRUE);
     $image_styles[RESPONSIVE_IMAGE_EMPTY_IMAGE] = $this->t('- empty image -');
+
+    $form['fallback_image_style'] = array(
+      '#title' => $this->t('Fallback image style'),
+      '#type' => 'select',
+      '#default_value' => $responsive_image_style->getFallbackImageStyle(),
+      '#options' => $image_styles,
+      '#required' => TRUE,
+    );
+
     $breakpoints = $this->breakpointManager->getBreakpointsByGroup($responsive_image_style->getBreakpointGroup());
     foreach ($breakpoints as $breakpoint_id => $breakpoint) {
       foreach ($breakpoint->getMultipliers() as $multiplier) {

core/modules/responsive_image/src/ResponsiveImageStyleInterface.php

@@ -71,6 +71,24 @@ public function setBreakpointGroup($breakpoint_group);
    */
   public function getBreakpointGroup();
 
+  /**
+   * Sets the fallback image style for the responsive image style.
+   *
+   * @param string $fallback_image_style
+   *   The fallback image style ID.
+   *
+   * @return $this
+   */
+  public function setFallbackImageStyle($fallback_image_style);
+
+  /**
+   * Returns the fallback image style ID for the responsive image style.
+   *
+   * @return string
+   *   The fallback image style ID.
+   */
+  public function getFallbackImageStyle();
+
   /**
    * Gets the image style mapping for a breakpoint ID and multiplier.
    *

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

@@ -51,6 +51,7 @@ public function testResponsiveImageAdmin() {
       'label' => 'Style One',
       'id' => 'style_one',
       'breakpoint_group' => 'responsive_image_test_module',
+      'fallback_image_style' => 'thumbnail',
     );
     $this->drupalPostForm('admin/config/media/responsive-image-style/add', $edit, t('Save'));
 
@@ -65,6 +66,7 @@ public function testResponsiveImageAdmin() {
     $this->drupalGet('admin/config/media/responsive-image-style/style_one');
     $this->assertFieldByName('label', 'Style One');
     $this->assertFieldByName('breakpoint_group', 'responsive_image_test_module');
+    $this->assertFieldByName('fallback_image_style', 'thumbnail');
 
     $cases = array(
       array('mobile', '1x'),
@@ -84,6 +86,7 @@ public function testResponsiveImageAdmin() {
     $edit = array(
       'label' => 'Style One',
       'breakpoint_group' => 'responsive_image_test_module',
+      'fallback_image_style' => 'thumbnail',
       'keyed_styles[responsive_image_test_module.mobile][1x][image_mapping]' => 'thumbnail',
       'keyed_styles[responsive_image_test_module.narrow][1x][image_mapping]' => 'medium',
       'keyed_styles[responsive_image_test_module.wide][1x][image_mapping]' => 'large',

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

@@ -63,6 +63,7 @@ protected function setUp() {
       'id' => 'style_one',
       'label' => 'Style One',
       'breakpoint_group' => 'responsive_image_test_module',
+      'fallback_image_style' => 'large',
     ));
   }
 
@@ -232,8 +233,6 @@ protected function doTestResponsiveImageFieldFormatters($scheme, $empty_styles =
     // Use the responsive image formatter with a responsive image style.
     $display_options['settings']['responsive_image_style'] = 'style_one';
     $display_options['settings']['image_link'] = '';
-    // Also set the fallback image style.
-    $display_options['settings']['fallback_image_style'] = 'large';
     $display->setComponent($field_name, $display_options)
       ->save();
 
@@ -345,7 +344,6 @@ public function testResponsiveImageFieldFormattersEmptyMediaQuery() {
       'settings' => array(
         'image_link' => '',
         'responsive_image_style' => 'style_one',
-        'fallback_image_style' => 'medium',
       ),
     );
     $display = entity_get_display('node', 'article', 'default');
@@ -384,7 +382,6 @@ private function assertResponsiveImageFieldFormattersLink($link_type) {
       'settings' => array(
         'image_link' => $link_type,
         'responsive_image_style' => 'style_one',
-        'fallback_image_style' => 'large',
       ),
     );
     entity_get_display('node', 'article', 'default')
@@ -406,7 +403,6 @@ private function assertResponsiveImageFieldFormattersLink($link_type) {
       'settings' => array(
         'image_link' => $link_type,
         'responsive_image_style' => 'style_one',
-        'fallback_image_style' => 'large',
       ),
     );
     entity_get_display('node', 'article', 'default')

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

@@ -69,6 +69,7 @@ function testResponsiveImageFormatterUI() {
       'id' => 'style_one',
       'label' => 'Style One',
       'breakpoint_group' => 'responsive_image_test_module',
+      'fallback_image_style' => 'thumbnail',
     ));
     $responsive_image_style
       ->addImageStyleMapping('responsive_image_test_module.mobile', '1x', array(
@@ -97,7 +98,6 @@ function testResponsiveImageFormatterUI() {
     // Assert that the correct fields are present.
     $fieldnames = array(
       'fields[field_image][settings_edit_form][settings][responsive_image_style]',
-      'fields[field_image][settings_edit_form][settings][fallback_image_style]',
       'fields[field_image][settings_edit_form][settings][image_link]',
     );
     foreach ($fieldnames as $fieldname) {
@@ -105,7 +105,6 @@ function testResponsiveImageFormatterUI() {
     }
     $edit = array(
       'fields[field_image][settings_edit_form][settings][responsive_image_style]' => 'style_one',
-      'fields[field_image][settings_edit_form][settings][fallback_image_style]' => 'thumbnail',
       'fields[field_image][settings_edit_form][settings][image_link]' => 'content',
     );
     $this->drupalPostAjaxForm(NULL, $edit, "field_image_plugin_settings_update");
@@ -113,7 +112,6 @@ function testResponsiveImageFormatterUI() {
     // Save the form to save the settings.
     $this->drupalPostForm(NULL, array(), t('Save'));
     $this->assertText('Responsive image style: Style One');
-    $this->assertText('Fallback Image style: Thumbnail (100×100)');
     $this->assertText('Linked to content');
 
     // Click on the formatter settings button to open the formatter settings
@@ -121,7 +119,6 @@ function testResponsiveImageFormatterUI() {
     $this->drupalPostAjaxForm(NULL, array(), "field_image_settings_edit");
     $edit = array(
       'fields[field_image][settings_edit_form][settings][responsive_image_style]' => 'style_one',
-      'fields[field_image][settings_edit_form][settings][fallback_image_style]' => '',
       'fields[field_image][settings_edit_form][settings][image_link]' => 'file',
     );
     $this->drupalPostAjaxForm(NULL, $edit, "field_image_plugin_settings_update");
@@ -129,7 +126,6 @@ function testResponsiveImageFormatterUI() {
     // Save the form to save the third party settings.
     $this->drupalPostForm(NULL, array(), t('Save'));
     $this->assertText('Responsive image style: Style One');
-    $this->assertText('Automatic fallback');
     $this->assertText('Linked to file');
   }
 

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

@@ -67,7 +67,7 @@ protected function setUp() {
   public function testCalculateDependencies() {
     // Set up image style loading mock.
     $styles = [];
-    foreach (['small', 'medium', 'large'] as $style) {
+    foreach (['fallback', 'small', 'medium', 'large'] as $style) {
       $mock = $this->getMock('Drupal\Core\Config\Entity\ConfigEntityInterface');
       $mock->expects($this->any())
         ->method('getConfigDependencyName')
@@ -90,6 +90,7 @@ public function testCalculateDependencies() {
 
     $entity = new ResponsiveImageStyle(['breakpoint_group' => 'test_group']);
     $entity->setBreakpointGroup('test_group');
+    $entity->setFallbackImageStyle('fallback');
     $entity->addImageStyleMapping('test_breakpoint', '1x', ['image_mapping_type' => 'image_style', 'image_mapping' => 'small']);
     $entity->addImageStyleMapping('test_breakpoint', '2x', [
       'image_mapping_type' => 'sizes',
@@ -110,7 +111,7 @@ public function testCalculateDependencies() {
     $dependencies = $entity->calculateDependencies();
     $this->assertEquals(['toolbar'], $dependencies['module']);
     $this->assertEquals(['bartik'], $dependencies['theme']);
-    $this->assertEquals(['image.style.large', 'image.style.medium', 'image.style.small'], $dependencies['config']);
+    $this->assertEquals(['image.style.fallback', 'image.style.large', 'image.style.medium', 'image.style.small'], $dependencies['config']);
   }
 
   /**