diff --git a/core/modules/responsive_image/src/ResponsiveImageStyleForm.php b/core/modules/responsive_image/src/ResponsiveImageStyleForm.php index 5e53c60..84b2123 100644 --- a/core/modules/responsive_image/src/ResponsiveImageStyleForm.php +++ b/core/modules/responsive_image/src/ResponsiveImageStyleForm.php @@ -115,6 +115,7 @@ public function form(array $form, FormStateInterface $form_state) { $label = $multiplier . ' ' . $breakpoint->getLabel() . ' [' . $breakpoint->getMediaQuery() . ']'; $form['keyed_styles'][$breakpoint_id][$multiplier] = array( '#type' => 'container', + '#title' => $label, ); $image_style_mapping = $responsive_image_style->getImageStyleMapping($breakpoint_id, $multiplier); $form['keyed_styles'][$breakpoint_id][$multiplier]['image_mapping_type'] = array( @@ -127,9 +128,9 @@ public function form(array $form, FormStateInterface $form_state) { ), '#default_value' => isset($image_style_mapping['image_mapping_type']) ? $image_style_mapping['image_mapping_type'] : '_none', ); - $form['keyed_styles'][$breakpoint_id][$multiplier]['image_style'] = array( + $form['keyed_styles'][$breakpoint_id][$multiplier]['image_mapping'] = array( '#type' => 'select', - '#title' => $label, + '#title' => $this->t('Image style'), '#options' => $image_styles, '#default_value' => isset($image_style_mapping['image_mapping']) ? $image_style_mapping['image_mapping'] : array(), '#description' => $this->t('Select an image style for this breakpoint.'), @@ -139,7 +140,7 @@ public function form(array $form, FormStateInterface $form_state) { ), ), ); - $form['keyed_styles'][$breakpoint_id][$multiplier]['sizes'] = array( + $form['keyed_styles'][$breakpoint_id][$multiplier]['image_mapping']['sizes'] = array( '#type' => 'textfield', '#title' => $this->t('Sizes'), '#default_value' => isset($image_style_mapping['image_mapping']['sizes']) ? $image_style_mapping['image_mapping']['sizes'] : '', @@ -150,7 +151,7 @@ public function form(array $form, FormStateInterface $form_state) { ), ), ); - $form['keyed_styles'][$breakpoint_id][$multiplier]['sizes_image_styles'] = array( + $form['keyed_styles'][$breakpoint_id][$multiplier]['image_mapping']['sizes_image_styles'] = array( '#title' => $this->t('Image styles'), '#type' => 'checkboxes', '#options' => array_diff_key($image_styles, array('' => '')), diff --git a/core/modules/responsive_image/src/Tests/ResponsiveImageAdminUITest.php b/core/modules/responsive_image/src/Tests/ResponsiveImageAdminUITest.php index 4c6c303..49dc5fa 100644 --- a/core/modules/responsive_image/src/Tests/ResponsiveImageAdminUITest.php +++ b/core/modules/responsive_image/src/Tests/ResponsiveImageAdminUITest.php @@ -81,12 +81,12 @@ public function testResponsiveImageAdmin() { // Check if the radio buttons are present. $this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][image_mapping_type]', ''); // Check if the image style dropdowns are present. - $this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][image_style]', ''); + $this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][image_mapping]', ''); // Check if the sizes textfields are present. - $this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][sizes]', ''); + $this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][image_mapping][sizes]', ''); // Check if the image styles checkboxes are present. foreach (array_keys(image_style_options(FALSE)) as $image_style_name) { - $this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][sizes_image_styles][' . $image_style_name . ']'); + $this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][image_mapping][sizes_image_styles][' . $image_style_name . ']'); } } @@ -96,37 +96,33 @@ public function testResponsiveImageAdmin() { 'breakpoint_group' => 'responsive_image_test_module', 'fallback_image_style' => 'thumbnail', 'keyed_styles[responsive_image_test_module.mobile][1x][image_mapping_type]' => 'image_style', - 'keyed_styles[responsive_image_test_module.mobile][1x][image_style]' => 'thumbnail', + 'keyed_styles[responsive_image_test_module.mobile][1x][image_mapping]' => 'thumbnail', 'keyed_styles[responsive_image_test_module.narrow][1x][image_mapping_type]' => 'sizes', - 'keyed_styles[responsive_image_test_module.narrow][1x][sizes]' => '(min-width: 700px) 700px, 100vw', - 'keyed_styles[responsive_image_test_module.narrow][1x][sizes_image_styles][large]' => 'large', - 'keyed_styles[responsive_image_test_module.narrow][1x][sizes_image_styles][medium]' => 'medium', + 'keyed_styles[responsive_image_test_module.narrow][1x][image_mapping][sizes]' => '(min-width: 700px) 700px, 100vw', + 'keyed_styles[responsive_image_test_module.narrow][1x][image_mapping][sizes_image_styles][large]' => 'large', + 'keyed_styles[responsive_image_test_module.narrow][1x][image_mapping][sizes_image_styles][medium]' => 'medium', 'keyed_styles[responsive_image_test_module.wide][1x][image_mapping_type]' => 'image_style', - 'keyed_styles[responsive_image_test_module.wide][1x][image_style]' => 'large', + 'keyed_styles[responsive_image_test_module.wide][1x][image_mapping]' => 'large', ); $this->drupalPostForm('admin/config/media/responsive-image-style/style_one', $edit, t('Save')); $this->drupalGet('admin/config/media/responsive-image-style/style_one'); // Check the mapping for multipliers 1x and 2x for the mobile breakpoint. - $this->assertFieldByName('keyed_styles[responsive_image_test_module.mobile][1x][image_style]', 'thumbnail'); + $this->assertFieldByName('keyed_styles[responsive_image_test_module.mobile][1x][image_mapping]', 'thumbnail'); $this->assertFieldByName('keyed_styles[responsive_image_test_module.mobile][1x][image_mapping_type]', 'image_style'); - $this->assertFieldByName('keyed_styles[responsive_image_test_module.mobile][2x][image_style]', ''); $this->assertFieldByName('keyed_styles[responsive_image_test_module.mobile][2x][image_mapping_type]', '_none'); // Check the mapping for multipliers 1x and 2x for the narrow breakpoint. - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.narrow][1x][image_style]', ''); $this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][1x][image_mapping_type]', 'sizes'); - $this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][1x][sizes]', '(min-width: 700px) 700px, 100vw'); + $this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][1x][image_mapping][sizes]', '(min-width: 700px) 700px, 100vw'); $this->assertFieldChecked('edit-keyed_styles-responsive-image-test-modulenarrow-1x-sizes-image-styles-large'); $this->assertFieldChecked('edit-keyed_styles-responsive-image-test-modulenarrow-1x-sizes-image-styles-medium'); $this->assertNoFieldChecked('edit-keyed_styles-responsive-image-test-modulenarrow-1x-sizes-image-styles-thumbnail'); - $this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][2x][image_style]', ''); $this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][2x][image_mapping_type]', '_none'); // Check the mapping for multipliers 1x and 2x for the wide breakpoint. - $this->assertFieldByName('keyed_styles[responsive_image_test_module.wide][1x][image_style]', 'large'); + $this->assertFieldByName('keyed_styles[responsive_image_test_module.wide][1x][image_mapping]', 'large'); $this->assertFieldByName('keyed_styles[responsive_image_test_module.wide][1x][image_mapping_type]', 'image_style'); - $this->assertFieldByName('keyed_styles[responsive_image_test_module.wide][2x][image_style]', ''); $this->assertFieldByName('keyed_styles[responsive_image_test_module.wide][2x][image_mapping_type]', '_none'); // Delete the style.