Unverified Commit 47b22525 authored by Alex Pott's avatar Alex Pott
Browse files

Issue #2876523 by andreyjan, jhuhta, keeganstreet, rolfmeijer, jhedstrom,... 

Issue #2876523 by andreyjan, jhuhta, keeganstreet, rolfmeijer, jhedstrom, tstoeckler, larowlan, Krzysztof Domański: Breakpoint sizes input is too small

(cherry picked from commit 2f585eff496bc875ce77c13ee40378ff49f6af69)
parent 3b32db50

core/modules/responsive_image/src/ResponsiveImageStyleForm.php

+1 −1
Original line number Diff line number Diff line
@@ -157,7 +157,7 @@ public function form(array $form, FormStateInterface $form_state) { 
          ],

        ];

        $form['keyed_styles'][$breakpoint_id][$multiplier]['sizes'] = [

          '#type' => 'textfield',

          '#type' => 'textarea',

          '#title' => $this->t('Sizes'),

          '#default_value' => isset($image_style_mapping['image_mapping']['sizes']) ? $image_style_mapping['image_mapping']['sizes'] : '100vw',

          '#description' => $this->t('Enter the value for the sizes attribute, for example: %example_sizes.', ['%example_sizes' => '(min-width:700px) 700px, 100vw']),

core/modules/responsive_image/tests/src/Functional/ResponsiveImageAdminUITest.php

+3 −2
Original line number Diff line number Diff line
@@ -112,7 +112,8 @@ public function testResponsiveImageAdmin() { 
      '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.narrow][1x][image_mapping_type]' => 'sizes',

      'keyed_styles[responsive_image_test_module.narrow][1x][sizes]' => '(min-width: 700px) 700px, 100vw',

      // Ensure the Sizes field allows long values.

      'keyed_styles[responsive_image_test_module.narrow][1x][sizes]' => '(min-resolution: 192dpi) and (min-width: 170px) 386px, (min-width: 170px) 193px, (min-width: 768px) 18vw, (min-width: 480px) 30vw, 48vw',

      '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.wide][1x][image_mapping_type]' => 'image_style',
@@ -128,7 +129,7 @@ public function testResponsiveImageAdmin() { 


    // Check the mapping for multipliers 1x and 2x for the narrow breakpoint.

    $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][sizes]', '(min-resolution: 192dpi) and (min-width: 170px) 386px, (min-width: 170px) 193px, (min-width: 768px) 18vw, (min-width: 480px) 30vw, 48vw');

    $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');