Issue #2513604 by mdrummond, attiks, alexpott, Jelle_S: Create default responsive image styles

core/lib/Drupal/Core/Config/ConfigInstaller.php

@@ -158,6 +158,7 @@ class ConfigInstaller implements ConfigInstallerInterface {
    */
   public function installOptionalConfig(StorageInterface $storage = NULL, $dependency = []) {
     $profile = $this->drupalGetProfile();
+    $optional_profile_config = [];
     if (!$storage) {
       // Search the install profile's optional configuration too.
       $storage = new ExtensionInstallStorage($this->getActiveStorages(StorageInterface::DEFAULT_COLLECTION), InstallStorage::CONFIG_OPTIONAL_DIRECTORY, StorageInterface::DEFAULT_COLLECTION, TRUE);
@@ -168,6 +169,7 @@ class ConfigInstaller implements ConfigInstallerInterface {
       // Creates a profile storage to search for overrides.
       $profile_install_path = $this->drupalGetPath('module', $profile) . '/' . InstallStorage::CONFIG_OPTIONAL_DIRECTORY;
       $profile_storage = new FileStorage($profile_install_path, StorageInterface::DEFAULT_COLLECTION);
+      $optional_profile_config = $profile_storage->listAll();
     }
     else {
       // Profile has not been set yet. For example during the first steps of the
@@ -178,7 +180,8 @@ class ConfigInstaller implements ConfigInstallerInterface {
     $enabled_extensions = $this->getEnabledExtensions();
     $existing_config = $this->getActiveStorages()->listAll();
 
-    $list = array_filter($storage->listAll(), function($config_name) use ($existing_config) {
+    $list = array_unique(array_merge($storage->listAll(), $optional_profile_config));
+    $list = array_filter($list, function($config_name) use ($existing_config) {
       // Only list configuration that:
       // - does not already exist
       // - is a configuration entity (this also excludes config that has an
@@ -188,7 +191,8 @@ class ConfigInstaller implements ConfigInstallerInterface {
 
     $all_config = array_merge($existing_config, $list);
     $config_to_create = $storage->readMultiple($list);
-    // Check to see if the corresponding override storage has any overrides.
+    // Check to see if the corresponding override storage has any overrides or
+    // new configuration that can be installed.
     if ($profile_storage) {
       $config_to_create = $profile_storage->readMultiple($list) + $config_to_create;
     }

core/modules/config/src/Tests/ConfigInstallProfileOverrideTest.php

@@ -105,11 +105,13 @@ class ConfigInstallProfileOverrideTest extends WebTestBase {
     // Test that override of optional configuration which introduces an unmet
     // dependency does not get created.
     $this->assertNull($config_test_storage->load('override_unmet'), 'The optional config_test entity with unmet dependencies is not created.');
+    $this->assertNull($config_test_storage->load('completely_new'), 'The completely new optional config_test entity with unmet dependencies is not created.');
 
     // Installing dblog creates the optional configuration.
     $this->container->get('module_installer')->install(['dblog']);
     $this->rebuildContainer();
     $this->assertEqual($config_test_storage->load('override_unmet')->label(), 'Override', 'The optional config_test entity is overridden by the profile optional configuration and is installed when its dependencies are met.');
+    $this->assertEqual($config_test_storage->load('completely_new')->label(), 'Completely new optional configuration', 'The optional config_test entity is provided by the profile optional configuration and is installed when its dependencies are met.');
   }
 
 }

core/modules/responsive_image/responsive_image.breakpoints.yml

@@ -0,0 +1,6 @@
+responsive_image.viewport_sizing:
+  label: Viewport Sizing
+  mediaQuery: ''
+  weight: 0
+  multipliers:
+    - 1x

core/modules/responsive_image/src/ResponsiveImageStyleForm.php

@@ -96,7 +96,7 @@ class ResponsiveImageStyleForm extends EntityForm {
     $form['breakpoint_group'] = array(
       '#type' => 'select',
       '#title' => $this->t('Breakpoint group'),
-      '#default_value' => $responsive_image_style->getBreakpointGroup(),
+      '#default_value' => $responsive_image_style->getBreakpointGroup() ?: 'responsive_image',
       '#options' => $this->breakpointManager->getGroups(),
       '#required' => TRUE,
       '#description' => $description,

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

@@ -42,9 +42,10 @@ class ResponsiveImageAdminUITest extends WebTestBase {
     $this->drupalGet('admin/config/media/responsive-image-style');
     $this->assertText('There is no Responsive image style yet.');
 
-    // Add a new responsive image style, our breakpoint set should be selected.
+    // Add a responsive image style.
     $this->drupalGet('admin/config/media/responsive-image-style/add');
-    $this->assertFieldByName('breakpoint_group', 'responsive_image_test_module');
+    // The 'Responsive Image' breakpoint group should be selected by default.
+    $this->assertFieldByName('breakpoint_group', 'responsive_image');
 
     // Create a new group.
     $edit = array(

core/profiles/standard/config/optional/image.style.max_1300x1300.yml

@@ -0,0 +1,18 @@
+name: max_1300x1300
+label: 'Max 1300x1300'
+effects:
+  04caae9a-fa3e-4ea6-ae09-9c26aec7d308:
+    id: image_scale
+    data:
+      width: 1300
+      height: 1300
+      upscale: false
+    weight: 1
+    uuid: 04caae9a-fa3e-4ea6-ae09-9c26aec7d308
+langcode: en
+dependencies:
+  module:
+    - responsive_image
+  enforced:
+    module:
+      - responsive_image

core/profiles/standard/config/optional/image.style.max_2600x2600.yml

@@ -0,0 +1,18 @@
+name: max_2600x2600
+label: 'Max 2600x2600'
+effects:
+  9b311dd1-0351-45a1-9500-cd069e4670cb:
+    id: image_scale
+    data:
+      width: 2600
+      height: 2600
+      upscale: false
+    weight: 3
+    uuid: 9b311dd1-0351-45a1-9500-cd069e4670cb
+langcode: en
+dependencies:
+  module:
+    - responsive_image
+  enforced:
+    module:
+      - responsive_image

core/profiles/standard/config/optional/image.style.max_325x325.yml

@@ -0,0 +1,18 @@
+name: max_325x325
+label: 'Max 325x325'
+effects:
+  cb842cc8-682f-42a6-bd05-5a1ac726f0d8:
+    id: image_scale
+    data:
+      width: 325
+      height: 325
+      upscale: false
+    weight: 1
+    uuid: cb842cc8-682f-42a6-bd05-5a1ac726f0d8
+langcode: en
+dependencies:
+  module:
+    - responsive_image
+  enforced:
+    module:
+      - responsive_image

core/profiles/standard/config/optional/image.style.max_650x650.yml

@@ -0,0 +1,18 @@
+name: max_650x650
+label: 'Max 650x650'
+effects:
+  949c201a-77f5-48f6-ba00-be91eb1aad47:
+    id: image_scale
+    data:
+      width: 650
+      height: 650
+      upscale: false
+    weight: 1
+    uuid: 949c201a-77f5-48f6-ba00-be91eb1aad47
+langcode: en
+dependencies:
+  module:
+    - responsive_image
+  enforced:
+    module:
+      - responsive_image

core/profiles/standard/config/optional/responsive_image.styles.narrow.yml

@@ -0,0 +1,23 @@
+uuid: 8eb79e19-da57-4bd3-8304-4e0b5a147276
+status: true
+dependencies:
+  config:
+    - image.style.max_1300x1300
+    - image.style.max_650x650
+    - image.style.max_325x325
+langcode: en
+id: narrow
+label: Narrow
+image_style_mappings:
+  -
+    breakpoint_id: responsive_image.viewport_sizing
+    multiplier: 1x
+    image_mapping_type: sizes
+    image_mapping:
+      sizes: '(min-width: 1290px) 325px, (min-width: 851px) 25vw, (min-width: 560px) 50vw, 100vw'
+      sizes_image_styles:
+        - max_1300x1300
+        - max_650x650
+        - max_325x325
+breakpoint_group: responsive_image
+fallback_image_style: max_325x325

core/profiles/standard/config/optional/responsive_image.styles.wide.yml

@@ -0,0 +1,25 @@
+uuid: 5cffd3ef-5656-4446-b200-b771d8076568
+status: true
+dependencies:
+  config:
+    - image.style.max_2600x2600
+    - image.style.max_1300x1300
+    - image.style.max_650x650
+    - image.style.max_325x325
+langcode: en
+id: wide
+label: Wide
+image_style_mappings:
+  -
+    breakpoint_id: responsive_image.viewport_sizing
+    multiplier: 1x
+    image_mapping_type: sizes
+    image_mapping:
+      sizes: '(min-width: 1290px) 1290px, 100vw'
+      sizes_image_styles:
+        - max_2600x2600
+        - max_1300x1300
+        - max_650x650
+        - max_325x325
+breakpoint_group: responsive_image
+fallback_image_style: max_325x325

core/profiles/standard/src/Tests/StandardTest.php

@@ -160,6 +160,22 @@ class StandardTest extends WebTestBase {
 
     // Ensure that there are no pending entity updates after installation.
     $this->assertFalse($this->container->get('entity.definition_update_manager')->needsUpdates(), 'After installation, entity schema is up to date.');
-  }
 
+    // Make sure the optional image styles are not installed.
+    $this->drupalGet('admin/config/media/image-styles');
+    $this->assertNoText('Max 325x325');
+    $this->assertNoText('Max 650x650');
+    $this->assertNoText('Max 1300x1300');
+    $this->assertNoText('Max 2600x2600');
+
+    // Make sure the optional image styles are installed after enabling
+    // the responsive_image module.
+    \Drupal::service('module_installer')->install(array('responsive_image'));
+    $this->rebuildContainer();
+    $this->drupalGet('admin/config/media/image-styles');
+    $this->assertText('Max 325x325');
+    $this->assertText('Max 650x650');
+    $this->assertText('Max 1300x1300');
+    $this->assertText('Max 2600x2600');
+  }
 }

core/profiles/testing_config_overrides/config/optional/config_test.dynamic.completely_new.yml

@@ -0,0 +1,8 @@
+id: completely_new
+label: Completely new optional configuration
+weight: 0
+protected_property: Default
+status: true
+dependencies:
+  module:
+    - dblog