From e47bf5fc2f55f28fb6455ea32d83813258fe8a9f Mon Sep 17 00:00:00 2001
From: Francisco Ribeiro <fr@franciscoribeiro.net>
Date: Tue, 1 Oct 2024 19:31:03 +0100
Subject: [PATCH 1/6] EWPP-4578: Add responsive image styles.

---
 ...nsive_image.styles.oe_theme_3_1_banner.yml | 39 ++++++++++++++
 ...nsive_image.styles.oe_theme_4_1_banner.yml | 39 ++++++++++++++
 ...nsive_image.styles.oe_theme_5_1_banner.yml | 39 ++++++++++++++
 .../oe_theme_helper.breakpoints.yml           |  9 +++-
 .../oe_theme_helper.post_update.php           | 54 +++++++++++++++++++
 5 files changed, 178 insertions(+), 2 deletions(-)
 create mode 100644 modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_3_1_banner.yml
 create mode 100644 modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_4_1_banner.yml
 create mode 100644 modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_5_1_banner.yml
 rename oe_theme.breakpoints.yml => modules/oe_theme_helper/oe_theme_helper.breakpoints.yml (74%)

diff --git a/modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_3_1_banner.yml b/modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_3_1_banner.yml
new file mode 100644
index 000000000..568fe3162
--- /dev/null
+++ b/modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_3_1_banner.yml
@@ -0,0 +1,39 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - image.style.oe_theme_extra_large_3_1_banner
+    - image.style.oe_theme_full_width_banner_3_1
+    - image.style.oe_theme_large_3_1_banner
+    - image.style.oe_theme_medium_3_1_banner
+    - image.style.oe_theme_small_3_1_banner
+id: oe_theme_3_1_banner
+label: '3:1 Banner'
+image_style_mappings:
+  -
+    image_mapping_type: image_style
+    image_mapping: oe_theme_full_width_banner_3_1
+    breakpoint_id: oe_theme.extra_large
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: oe_theme_extra_large_3_1_banner
+    breakpoint_id: oe_theme.large
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: oe_theme_large_3_1_banner
+    breakpoint_id: oe_theme.medium
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: oe_theme_medium_3_1_banner
+    breakpoint_id: oe_theme.small
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: oe_theme_small_3_1_banner
+    breakpoint_id: oe_theme.extra_small
+    multiplier: 1x
+breakpoint_group: oe_theme
+fallback_image_style: oe_theme_full_width_banner_3_1
diff --git a/modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_4_1_banner.yml b/modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_4_1_banner.yml
new file mode 100644
index 000000000..13e788125
--- /dev/null
+++ b/modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_4_1_banner.yml
@@ -0,0 +1,39 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - image.style.oe_theme_extra_large_4_1_banner
+    - image.style.oe_theme_full_width_banner_4_1
+    - image.style.oe_theme_large_4_1_banner
+    - image.style.oe_theme_medium_4_1_banner
+    - image.style.oe_theme_small_4_1_banner
+id: oe_theme_4_1_banner
+label: '4:1 Banner'
+image_style_mappings:
+  -
+    image_mapping_type: image_style
+    image_mapping: oe_theme_full_width_banner_4_1
+    breakpoint_id: oe_theme.extra_large
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: oe_theme_extra_large_4_1_banner
+    breakpoint_id: oe_theme.large
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: oe_theme_large_4_1_banner
+    breakpoint_id: oe_theme.medium
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: oe_theme_medium_4_1_banner
+    breakpoint_id: oe_theme.small
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: oe_theme_small_4_1_banner
+    breakpoint_id: oe_theme.extra_small
+    multiplier: 1x
+breakpoint_group: oe_theme
+fallback_image_style: oe_theme_full_width_banner_4_1
diff --git a/modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_5_1_banner.yml b/modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_5_1_banner.yml
new file mode 100644
index 000000000..846d03819
--- /dev/null
+++ b/modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_5_1_banner.yml
@@ -0,0 +1,39 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - image.style.oe_theme_extra_large_5_1_banner
+    - image.style.oe_theme_full_width_banner_5_1
+    - image.style.oe_theme_large_5_1_banner
+    - image.style.oe_theme_medium_5_1_banner
+    - image.style.oe_theme_small_5_1_banner
+id: oe_theme_5_1_banner
+label: '5:1 Banner'
+image_style_mappings:
+  -
+    image_mapping_type: image_style
+    image_mapping: oe_theme_full_width_banner_5_1
+    breakpoint_id: oe_theme.extra_large
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: oe_theme_extra_large_5_1_banner
+    breakpoint_id: oe_theme.large
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: oe_theme_large_5_1_banner
+    breakpoint_id: oe_theme.medium
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: oe_theme_medium_5_1_banner
+    breakpoint_id: oe_theme.small
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: oe_theme_small_5_1_banner
+    breakpoint_id: oe_theme.extra_small
+    multiplier: 1x
+breakpoint_group: oe_theme
+fallback_image_style: oe_theme_full_width_banner_5_1
diff --git a/oe_theme.breakpoints.yml b/modules/oe_theme_helper/oe_theme_helper.breakpoints.yml
similarity index 74%
rename from oe_theme.breakpoints.yml
rename to modules/oe_theme_helper/oe_theme_helper.breakpoints.yml
index fc711953f..0fcb2d0f4 100644
--- a/oe_theme.breakpoints.yml
+++ b/modules/oe_theme_helper/oe_theme_helper.breakpoints.yml
@@ -5,6 +5,7 @@ oe_theme.extra_small:
   multipliers:
     - 1x
     - 2x
+  group: oe_theme
 oe_theme.small:
   label: Small
   mediaQuery: 'all and (min-width: 480px)'
@@ -12,6 +13,7 @@ oe_theme.small:
   multipliers:
     - 1x
     - 2x
+  group: oe_theme
 oe_theme.medium:
   label: Medium
   mediaQuery: 'all and (min-width: 768px)'
@@ -19,17 +21,20 @@ oe_theme.medium:
   multipliers:
     - 1x
     - 2x
+  group: oe_theme
 oe_theme.large:
   label: Large
-  mediaQuery: 'all and (min-width: 992px)'
+  mediaQuery: 'all and (min-width: 996px)'
   weight: 2
   multipliers:
     - 1x
     - 2x
+  group: oe_theme
 oe_theme.extra_large:
   label: 'Extra large'
-  mediaQuery: 'all and (min-width: 1200px)'
+  mediaQuery: 'all and (min-width: 1140px)'
   weight: 3
   multipliers:
     - 1x
     - 2x
+  group: oe_theme
diff --git a/modules/oe_theme_helper/oe_theme_helper.post_update.php b/modules/oe_theme_helper/oe_theme_helper.post_update.php
index 8252abbdc..80ebb4e4c 100644
--- a/modules/oe_theme_helper/oe_theme_helper.post_update.php
+++ b/modules/oe_theme_helper/oe_theme_helper.post_update.php
@@ -12,6 +12,7 @@
 use Drupal\Core\Entity\Entity\EntityViewMode;
 use Drupal\block\Entity\Block;
 use Drupal\image\Entity\ImageStyle;
+use Drupal\responsive_image\Entity\ResponsiveImageStyle;
 
 /**
  * Use retina image styles on medium and small image styles.
@@ -434,3 +435,56 @@ function oe_theme_helper_post_update_40001(): void {
     $image_style->save();
   }
 }
+
+/**
+ * Create banner responsive image styles.
+ */
+function oe_theme_helper_post_update_40002(): void {
+  $banner_sizes = [
+    's' => [
+      'id' => 'oe_theme_5_1_banner',
+      'label' => '5:1 Banner',
+      'size_suffix' => '5_1',
+    ],
+    'm' => [
+      'id' => 'oe_theme_4_1_banner',
+      'label' => '4:1 Banner',
+      'size_suffix' => '4_1',
+    ],
+    'l' => [
+      'id' => 'oe_theme_3_1_banner',
+      'label' => '3:1 Banner',
+      'size_suffix' => '3_1',
+    ],
+  ];
+
+  foreach ($banner_sizes as $banner) {
+    $size_suffix = $banner['size_suffix'];
+    $image_styles_mapping = [
+      'extra_large' => "oe_theme_full_width_banner_{$size_suffix}",
+      'large' => "oe_theme_extra_large_{$size_suffix}_banner",
+      'medium' => "oe_theme_large_{$size_suffix}_banner",
+      'small' => "oe_theme_medium_{$size_suffix}_banner",
+      'extra_small' => "oe_theme_small_{$size_suffix}_banner",
+    ];
+
+    $image_style_map = [];
+    foreach ($image_styles_mapping as $key => $image_style_mapping) {
+      $image_style_map[] = [
+        'breakpoint_id' => 'oe_theme.' . $key,
+        'multiplier' => '1x',
+        'image_mapping_type' => 'image_style',
+        'image_mapping' => $image_style_mapping,
+      ];
+    }
+
+    $responsive_image_style = ResponsiveImageStyle::create([
+      'id' => $banner['id'],
+      'label' => $banner['label'],
+      'breakpoint_group' => 'oe_theme',
+      'image_style_mappings' => $image_style_map,
+      'fallback_image_style' => "oe_theme_full_width_banner_{$size_suffix}",
+    ]);
+    $responsive_image_style->save();
+  }
+}

From 3fdb84e32f91887244ed0bd1286befc0a130830a Mon Sep 17 00:00:00 2001
From: Francisco Ribeiro <fr@franciscoribeiro.net>
Date: Wed, 2 Oct 2024 13:19:00 +0100
Subject: [PATCH 2/6] EWPP-4578: Render banner with responsive image styles.

---
 oe_theme.theme                                | 89 +++++++++--------
 .../patterns/banners/banner.ui_patterns.yml   | 18 ++--
 .../patterns/banners/pattern-banner.html.twig | 20 +---
 .../Kernel/Paragraphs/MediaParagraphsTest.php | 96 +++++++++++--------
 4 files changed, 107 insertions(+), 116 deletions(-)

diff --git a/oe_theme.theme b/oe_theme.theme
index 65cf58993..32f03391f 100644
--- a/oe_theme.theme
+++ b/oe_theme.theme
@@ -35,6 +35,7 @@ use Drupal\oe_theme\ValueObject\FileValueObject;
 use Drupal\oe_theme\ValueObject\GalleryItemValueObject;
 use Drupal\oe_theme\ValueObject\ImageValueObject;
 use Drupal\oe_theme_helper\EuropeanUnionLanguages;
+use Drupal\responsive_image\Entity\ResponsiveImageStyle;
 
 /**
  * Implements hook_form_FORM_ID_alter().
@@ -1674,62 +1675,58 @@ function oe_theme_preprocess_paragraph__oe_banner(array &$variables): void {
     return;
   }
 
-  // Load needed images styles based on banner size.
-  $image_style_storage = \Drupal::entityTypeManager()->getStorage('image_style');
-  if ($variables['size'] === 's') {
-    $full_width = $image_style_storage->load('oe_theme_full_width_banner_5_1');
-    $extra_large = $image_style_storage->load('oe_theme_extra_large_5_1_banner');
-    $large = $image_style_storage->load('oe_theme_large_5_1_banner');
-    $medium = $image_style_storage->load('oe_theme_medium_5_1_banner');
-    $small = $image_style_storage->load('oe_theme_small_5_1_banner');
-  }
-  if ($variables['size'] === 'm') {
-    $full_width = $image_style_storage->load('oe_theme_full_width_banner_4_1');
-    $extra_large = $image_style_storage->load('oe_theme_extra_large_4_1_banner');
-    $large = $image_style_storage->load('oe_theme_large_4_1_banner');
-    $medium = $image_style_storage->load('oe_theme_medium_4_1_banner');
-    $small = $image_style_storage->load('oe_theme_small_4_1_banner');
-  }
-  if ($variables['size'] === 'l') {
-    $full_width = $image_style_storage->load('oe_theme_full_width_banner_3_1');
-    $extra_large = $image_style_storage->load('oe_theme_extra_large_3_1_banner');
-    $large = $image_style_storage->load('oe_theme_large_3_1_banner');
-    $medium = $image_style_storage->load('oe_theme_medium_3_1_banner');
-    $small = $image_style_storage->load('oe_theme_small_3_1_banner');
-  }
+  $banner_type = match ($variables['size']) {
+    's' => '5_1',
+    'm' => '4_1',
+    'l' => '3_1',
+  };
 
+  $responsive_image = _oe_theme_load_from_responsive_image_style_id("oe_theme_{$banner_type}_banner", $uri);
+  $variables['sources'] = $responsive_image['sources'];
   $values = [
-    'src' => $full_width->buildUrl($uri),
+    'src' => $responsive_image['fallback'],
     'alt' => $source->getMetadata($media, 'thumbnail_alt_value') ?? '',
     'name' => $media->getName(),
   ];
   $variables['image'] = ImageValueObject::fromArray($values);
-  $variables['sources'] = [
-    [
-      'src' => $small->buildUrl($uri),
-      'size' => 's',
-    ],
-    [
-      'src' => $medium->buildUrl($uri),
-      'size' => 'm',
-    ],
-    [
-      'src' => $large->buildUrl($uri),
-      'size' => 'l',
-    ],
-    [
-      'src' => $extra_large->buildUrl($uri),
-      'size' => 'xl',
-    ],
-    [
-      'src' => $full_width->buildUrl($uri),
-      'size' => 'full_width',
-    ],
-  ];
 
   $cacheability->applyTo($variables);
 }
 
+/**
+ * Get responsive image style srcset and fallback url.
+ *
+ * Based on template_preprocess_responsive_image.
+ *
+ * @param string $responsive_image_style_id
+ *   The responsive image id.
+ * @param string $uri
+ *   The image uri.
+ *
+ * @return array
+ *   Returns sources and fallback url.
+ */
+function _oe_theme_load_from_responsive_image_style_id($responsive_image_style_id, $uri) {
+  $responsive_image_style = ResponsiveImageStyle::load($responsive_image_style_id);
+  $resp_image = [];
+  $breakpoints = array_reverse(\Drupal::service('breakpoint.manager')->getBreakpointsByGroup($responsive_image_style->getBreakpointGroup()));
+  foreach ($responsive_image_style->getKeyedImageStyleMappings() as $breakpoint_id => $multipliers) {
+    if (isset($breakpoints[$breakpoint_id])) {
+      $responsive_image = _responsive_image_build_source_attributes(['uri' => $uri], $breakpoints[$breakpoint_id], $multipliers);
+      $responsive_image_array = $responsive_image->toArray();
+      $resp_image['sources'][] = [
+        'src' => $responsive_image_array['srcset'],
+        'media' => $responsive_image_array['media'] ?? '',
+      ];
+    }
+  }
+
+  // Add fallback style.
+  $resp_image['fallback'] = _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $uri);
+
+  return $resp_image;
+}
+
 /**
  * Implements hook_theme_suggestions_HOOK_alter().
  */
diff --git a/templates/patterns/banners/banner.ui_patterns.yml b/templates/patterns/banners/banner.ui_patterns.yml
index bb4a35cf8..66ded778f 100755
--- a/templates/patterns/banners/banner.ui_patterns.yml
+++ b/templates/patterns/banners/banner.ui_patterns.yml
@@ -72,16 +72,16 @@ banner:
       label: "Image sources"
       description: "Array containing different sized image for each banner size."
       preview:
-        - src: "https://loremflickr.com/480/160/arch"
-          size: "s"
-        - src: "https://loremflickr.com/768/256/dog"
-          size: "m"
-        - src: "https://loremflickr.com/996/332/paris"
-          size: "l"
-        - src: "https://loremflickr.com/1140/380/brazil"
-          size: "xl"
         - src: "https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
-          size: "full_width"
+          media: '(min-width: 1140px)'
+        - src: "https://loremflickr.com/1140/380/brazil"
+          media: '(min-width: 996px)'
+        - src: "https://loremflickr.com/996/332/paris"
+          media: '(min-width: 768px)'
+        - src: "https://loremflickr.com/768/256/dog"
+          media: '(min-width: 480px)'
+        - src: "https://loremflickr.com/480/160/arch"
+          media: ''
     size:
       type: "text"
       label: "Size"
diff --git a/templates/patterns/banners/pattern-banner.html.twig b/templates/patterns/banners/pattern-banner.html.twig
index 0c34713e2..991dfc824 100755
--- a/templates/patterns/banners/pattern-banner.html.twig
+++ b/templates/patterns/banners/pattern-banner.html.twig
@@ -79,25 +79,7 @@
   } %}
 {% endif %}
 {% if sources is not empty and sources is iterable %}
-  {% set _sources = [] %}
-  {% for source in sources %}
-    {% set media = '' %}
-    {% if source.size == 's' %}
-      {% set media = '(max-width: 480px)' %}
-    {% elseif source.size == 'm' %}
-      {% set media = '(max-width: 768px)' %}
-    {% elseif source.size == 'l' %}
-      {% set media = '(max-width: 996px)' %}
-    {% elseif source.size == 'xl' %}
-      {% set media = '(max-width: 1140px)' %}
-    {% elseif source.size == 'full_width' %}
-      {% set media = '(min-width: 1140px)' %}
-    {% endif %}
-    {% set _sources = _sources|merge([{
-      'src': source.src,
-      'media': media,
-    }]) %}
-  {% endfor %}
+  {% set _sources = sources %}
 {% endif %}
 {% set _picture = _picture|merge({
   'sources': _sources,
diff --git a/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php b/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php
index 4bf0473a0..1bb102955 100644
--- a/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php
+++ b/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php
@@ -47,6 +47,8 @@ class MediaParagraphsTest extends ParagraphsTestBase {
     'oe_paragraphs_carousel',
     'composite_reference',
     'oe_paragraphs_av_media',
+    'breakpoint',
+    'responsive_image',
   ];
 
   /**
@@ -58,6 +60,7 @@ protected function setUp(): void {
     $this->container->get('module_handler')->loadInclude('oe_paragraphs_media_field_storage', 'install');
     oe_paragraphs_media_field_storage_install(FALSE);
     $this->installEntitySchema('media');
+
     $this->installConfig([
       'json_field',
       'media',
@@ -74,10 +77,14 @@ protected function setUp(): void {
       'oe_media_iframe',
       'oe_paragraphs_carousel',
       'oe_paragraphs_av_media',
+      'breakpoint',
+      'responsive_image',
     ]);
+
     // Call the installation hook of the Media module.
     \Drupal::moduleHandler()->loadInclude('media', 'install');
     media_install();
+
   }
 
   /**
@@ -442,6 +449,10 @@ public function testTextWithMedia(): void {
    * Test 'banner' paragraph rendering.
    */
   public function testBanner(): void {
+
+    $breakpointsByGroup = \Drupal::service('breakpoint.manager')->getBreakpointsByGroup('oe_theme');
+    $this->assertCount(5, $breakpointsByGroup);
+
     // Set image media translatable.
     $this->container->get('content_translation.manager')->setEnabled('media', 'image', TRUE);
     // Make the image field translatable.
@@ -472,7 +483,6 @@ public function testBanner(): void {
     $media->save();
     // Get english file styled URI.
     $style = ImageStyle::load('oe_theme_full_width_banner_3_1');
-    $en_file_uri = $style->buildUri($en_file->getFileUri());
 
     // Translate the media to Bulgarian.
     $media_bg = $media->addTranslation('bg', [
@@ -483,8 +493,6 @@ public function testBanner(): void {
       ],
     ]);
     $media_bg->save();
-    // Get bulgarian file styled URI.
-    $bg_file_uri = $style->buildUri($bg_file->getFileUri());
 
     $paragraph_storage = $this->container->get('entity_type.manager')->getStorage('paragraph');
     $paragraph = $paragraph_storage->create([
@@ -515,24 +523,25 @@ public function testBanner(): void {
     $this->assertCount(1, $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--l.ecl-banner--h-center.ecl-banner--v-center'));
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
+
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($en_file_uri),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($en_file->getFileUri())),
       $image_element->attr('src')
     );
     // Assert all the media sources for different breakpoints.
-    $small_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="(max-width: 480px)"]');
+    $small_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source:not([media])');
     $this->assertCount(1, $small_media);
     $this->assertStringContainsString('oe_theme_small_3_1_banner/public/example_1_en.jpeg', $small_media->attr('srcset'));
-    $medium_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="(max-width: 768px)"]');
+    $medium_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="all and (min-width: 480px)"]');
     $this->assertCount(1, $medium_media);
     $this->assertStringContainsString('oe_theme_medium_3_1_banner/public/example_1_en.jpeg', $medium_media->attr('srcset'));
-    $large_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="(max-width: 996px)"]');
+    $large_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="all and (min-width: 768px)"]');
     $this->assertCount(1, $large_media);
     $this->assertStringContainsString('oe_theme_large_3_1_banner/public/example_1_en.jpeg', $large_media->attr('srcset'));
-    $extra_large_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="(max-width: 1140px)"]');
+    $extra_large_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="all and (min-width: 996px)"]');
     $this->assertCount(1, $extra_large_media);
     $this->assertStringContainsString('oe_theme_extra_large_3_1_banner/public/example_1_en.jpeg', $extra_large_media->attr('srcset'));
-    $full_width_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="(min-width: 1140px)"]');
+    $full_width_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="all and (min-width: 1140px)"]');
     $this->assertCount(1, $full_width_media);
     $this->assertStringContainsString('oe_theme_full_width_banner_3_1/public/example_1_en.jpeg', $full_width_media->attr('srcset'));
     $this->assertStringContainsString('Alt en', $image_element->attr('alt'));
@@ -549,7 +558,7 @@ public function testBanner(): void {
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     // Bulgarian media should be rendered.
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($bg_file_uri),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($bg_file->getFileUri())),
       $image_element->attr('src')
     );
     $this->assertStringContainsString('Alt bg', $image_element->attr('alt'));
@@ -591,7 +600,7 @@ public function testBanner(): void {
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($en_file_uri),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($en_file->getFileUri())),
       $image_element->attr('src')
     );
     $this->assertEquals('Banner', trim($crawler->filter('div.ecl-banner__content div.ecl-banner__title')->text()));
@@ -608,27 +617,26 @@ public function testBanner(): void {
     $crawler = new Crawler($html);
 
     $style = ImageStyle::load('oe_theme_full_width_banner_4_1');
-    $en_file_uri_medium = $style->buildUri($en_file->getFileUri());
     $this->assertCount(1, $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--m.ecl-banner--h-center'));
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($en_file_uri_medium),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($en_file->getFileUri())),
       $image_element->attr('src')
     );
-    $small_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="(max-width: 480px)"]');
+    $small_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source:not([media])');
     $this->assertCount(1, $small_media);
     $this->assertStringContainsString('oe_theme_small_4_1_banner/public/example_1_en.jpeg', $small_media->attr('srcset'));
-    $medium_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="(max-width: 768px)"]');
+    $medium_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="all and (min-width: 480px)"]');
     $this->assertCount(1, $medium_media);
     $this->assertStringContainsString('oe_theme_medium_4_1_banner/public/example_1_en.jpeg', $medium_media->attr('srcset'));
-    $large_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="(max-width: 996px)"]');
+    $large_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="all and (min-width: 768px)"]');
     $this->assertCount(1, $large_media);
     $this->assertStringContainsString('oe_theme_large_4_1_banner/public/example_1_en.jpeg', $large_media->attr('srcset'));
-    $extra_large_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="(max-width: 1140px)"]');
+    $extra_large_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="all and (min-width: 996px)"]');
     $this->assertCount(1, $extra_large_media);
     $this->assertStringContainsString('oe_theme_extra_large_4_1_banner/public/example_1_en.jpeg', $extra_large_media->attr('srcset'));
-    $full_width_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="(min-width: 1140px)"]');
+    $full_width_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="all and (min-width: 1140px)"]');
     $this->assertCount(1, $full_width_media);
     $this->assertStringContainsString('oe_theme_full_width_banner_4_1/public/example_1_en.jpeg', $full_width_media->attr('srcset'));
     $this->assertEquals('Banner', trim($crawler->filter('div.ecl-banner__content div.ecl-banner__title')->text()));
@@ -649,7 +657,7 @@ public function testBanner(): void {
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($en_file_uri_medium),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($en_file->getFileUri())),
       $image_element->attr('src')
     );
     $this->assertEquals('Banner', trim($crawler->filter('div.ecl-banner__content div.ecl-banner__title')->text()));
@@ -666,11 +674,12 @@ public function testBanner(): void {
     $html = $this->renderParagraph($paragraph);
     $crawler = new Crawler($html);
 
+    $style = ImageStyle::load('oe_theme_full_width_banner_3_1');
     $this->assertCount(1, $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light.ecl-banner--l.ecl-banner--h-center.ecl-banner--v-center'));
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($en_file_uri),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($en_file->getFileUri())),
       $image_element->attr('src')
     );
     $this->assertEquals('Banner', trim($crawler->filter('div.ecl-banner__content div.ecl-banner__title')->text()));
@@ -690,7 +699,7 @@ public function testBanner(): void {
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($en_file_uri),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($en_file->getFileUri())),
       $image_element->attr('src')
     );
     $this->assertEquals('Banner', trim($crawler->filter('div.ecl-banner__content div.ecl-banner__title')->text()));
@@ -707,11 +716,12 @@ public function testBanner(): void {
     $html = $this->renderParagraph($paragraph);
     $crawler = new Crawler($html);
 
+    $style = ImageStyle::load('oe_theme_full_width_banner_4_1');
     $this->assertCount(1, $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light.ecl-banner--m.ecl-banner--h-center'));
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($en_file_uri_medium),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($en_file->getFileUri())),
       $image_element->attr('src')
     );
     $this->assertEquals('Banner', trim($crawler->filter('div.ecl-banner__content div.ecl-banner__title')->text()));
@@ -732,7 +742,7 @@ public function testBanner(): void {
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($en_file_uri_medium),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($en_file->getFileUri())),
       $image_element->attr('src')
     );
     $this->assertEquals('Banner', trim($crawler->filter('div.ecl-banner__content div.ecl-banner__title')->text()));
@@ -842,12 +852,13 @@ public function testBanner(): void {
     $html = $this->renderParagraph($paragraph);
     $crawler = new Crawler($html);
 
+    $style = ImageStyle::load('oe_theme_full_width_banner_3_1');
     $this->assertCount(1, $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light.ecl-banner--l.ecl-banner--h-center.ecl-banner--full-width'));
 
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($en_file_uri),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($en_file->getFileUri())),
       $image_element->attr('src')
     );
     $this->assertEquals('Banner', trim($crawler->filter('div.ecl-banner__content div.ecl-banner__title')->text()));
@@ -864,6 +875,7 @@ public function testBanner(): void {
     $paragraph->save();
     $html = $this->renderParagraph($paragraph);
     $crawler = new Crawler($html);
+    $style = ImageStyle::load('oe_theme_full_width_banner_4_1');
 
     $this->assertCount(0, $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light.ecl-banner--m.ecl-banner--h-center.ecl-banner--full-width'));
     $this->assertCount(1, $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light.ecl-banner--m'));
@@ -871,7 +883,7 @@ public function testBanner(): void {
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($en_file_uri_medium),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($en_file->getFileUri())),
       $image_element->attr('src')
     );
     $this->assertEquals('Banner', trim($crawler->filter('div.ecl-banner__content div.ecl-banner__title')->text()));
@@ -888,7 +900,7 @@ public function testBanner(): void {
       'status' => 1,
     ]);
     $media->save();
-    $av_portal_file_uri = $style->buildUri('avportal://P-038924/00-15.jpg');
+    $av_portal_file_url = 'avportal://P-038924/00-15.jpg';
 
     $paragraph->get('field_oe_media')->setValue([
       'target_id' => $media->id(),
@@ -907,7 +919,7 @@ public function testBanner(): void {
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($av_portal_file_uri),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($av_portal_file_url)),
       $image_element->attr('src')
     );
   }
@@ -1030,26 +1042,26 @@ public function testCarousel(): void {
     $en_file_1->save();
     // Get first english file styled URI.
     $style = ImageStyle::load('oe_theme_full_width_banner_3_1');
-    $en_file_1_uri = $style->buildUri($en_file_1->getFileUri());
+    $en_file_1_url = $style->buildUrl($en_file_1->getFileUri());
 
     $en_file_2 = $this->container->get('file.repository')->writeData(file_get_contents($this->container->get('extension.list.theme')->getPath('oe_theme') . '/tests/fixtures/example_1.jpeg'), 'public://example_2_en.jpeg');
     $en_file_2->setPermanent();
     $en_file_2->save();
-    // Get second english file styled URI.
-    $en_file_2_uri = $style->buildUri($en_file_2->getFileUri());
+    // Get second english file styled URL.
+    $en_file_2_url = $style->buildUrl($en_file_2->getFileUri());
 
     // Create Bulgarian files.
     $bg_file_1 = $this->container->get('file.repository')->writeData(file_get_contents($this->container->get('extension.list.theme')->getPath('oe_theme') . '/tests/fixtures/example_1.jpeg'), 'public://example_1_bg.jpeg');
     $bg_file_1->setPermanent();
     $bg_file_1->save();
-    // Get first bulgarian file styled URI.
-    $bg_file_1_uri = $style->buildUri($bg_file_1->getFileUri());
+    // Get first bulgarian file styled URL.
+    $bg_file_1_url = $style->buildUrl($bg_file_1->getFileUri());
 
     $bg_file_2 = $this->container->get('file.repository')->writeData(file_get_contents($this->container->get('extension.list.theme')->getPath('oe_theme') . '/tests/fixtures/example_1.jpeg'), 'public://example_2_bg.jpeg');
     $bg_file_2->setPermanent();
     $bg_file_2->save();
-    // Get second bulgarian file styled URI.
-    $bg_file_2_uri = $style->buildUri($bg_file_2->getFileUri());
+    // Get second bulgarian file styled URL.
+    $bg_file_2_url = $style->buildUrl($bg_file_2->getFileUri());
 
     // Create a couple of media items with Bulgarian translation.
     $media_storage = $this->container->get('entity_type.manager')
@@ -1133,7 +1145,7 @@ public function testCarousel(): void {
       'items' => [
         [
           'title' => 'Item 1',
-          'image' => $this->container->get('file_url_generator')->generateAbsoluteString($en_file_1_uri),
+          'image' => $this->container->get('file_url_generator')->transformRelative($en_file_1_url),
           'image_alt' => 'First image alt en',
           'sources' => [
             'small' => 'oe_theme_small_3_1_banner/public/example_1_en.jpeg',
@@ -1149,7 +1161,7 @@ public function testCarousel(): void {
           'description' => 'Item description 2',
           'url' => 'http://www.example.com/',
           'url_text' => 'CTA 2',
-          'image' => $this->container->get('file_url_generator')->generateAbsoluteString($en_file_2_uri),
+          'image' => $this->container->get('file_url_generator')->transformRelative($en_file_2_url),
           'sources' => [
             'small' => 'oe_theme_small_3_1_banner/public/example_2_en.jpeg',
             'medium' => 'oe_theme_medium_3_1_banner/public/example_2_en.jpeg',
@@ -1161,7 +1173,7 @@ public function testCarousel(): void {
         ],
         [
           'title' => 'Item 3',
-          'image' => $this->container->get('file_url_generator')->generateAbsoluteString($en_file_1_uri),
+          'image' => $this->container->get('file_url_generator')->transformRelative($en_file_1_url),
           'image_alt' => 'First image alt en',
           'sources' => [
             'small' => 'oe_theme_small_3_1_banner/public/example_1_en.jpeg',
@@ -1177,7 +1189,7 @@ public function testCarousel(): void {
           'description' => 'Item description 4',
           'url' => '/',
           'url_text' => 'CTA 4',
-          'image' => $this->container->get('file_url_generator')->generateAbsoluteString($en_file_2_uri),
+          'image' => $this->container->get('file_url_generator')->transformRelative($en_file_2_url),
           'sources' => [
             'small' => 'oe_theme_small_3_1_banner/public/example_2_en.jpeg',
             'medium' => 'oe_theme_medium_3_1_banner/public/example_2_en.jpeg',
@@ -1198,7 +1210,7 @@ public function testCarousel(): void {
     $carousel_size = $crawler->filter('section.ecl-banner--l');
     $this->assertCount(4, $carousel_size);
     $expected_values['items'][0]['title'] = 'BG Item 1';
-    $expected_values['items'][0]['image'] = $this->container->get('file_url_generator')->generateAbsoluteString($bg_file_1_uri);
+    $expected_values['items'][0]['image'] = $this->container->get('file_url_generator')->transformRelative($bg_file_1_url);
     $expected_values['items'][0]['image_alt'] = 'First image alt bg';
     $expected_values['items'][0]['sources'] = [
       'small' => 'oe_theme_small_3_1_banner/public/example_1_bg.jpeg',
@@ -1210,7 +1222,7 @@ public function testCarousel(): void {
     $expected_values['items'][1]['title'] = 'BG Item 2';
     $expected_values['items'][1]['description'] = 'BG Item description 2';
     $expected_values['items'][1]['url_text'] = 'BG CTA 2';
-    $expected_values['items'][1]['image'] = $this->container->get('file_url_generator')->generateAbsoluteString($bg_file_2_uri);
+    $expected_values['items'][1]['image'] = $this->container->get('file_url_generator')->transformRelative($bg_file_2_url);
     $expected_values['items'][1]['sources'] = [
       'small' => 'oe_theme_small_3_1_banner/public/example_2_bg.jpeg',
       'medium' => 'oe_theme_medium_3_1_banner/public/example_2_bg.jpeg',
@@ -1219,7 +1231,7 @@ public function testCarousel(): void {
       'full_width' => 'oe_theme_full_width_banner_3_1/public/example_2_bg.jpeg',
     ];
     $expected_values['items'][2]['title'] = 'BG Item 3';
-    $expected_values['items'][2]['image'] = $this->container->get('file_url_generator')->generateAbsoluteString($bg_file_1_uri);
+    $expected_values['items'][2]['image'] = $this->container->get('file_url_generator')->transformRelative($bg_file_1_url);
     $expected_values['items'][2]['image_alt'] = 'First image alt bg';
     $expected_values['items'][2]['sources'] = [
       'small' => 'oe_theme_small_3_1_banner/public/example_1_bg.jpeg',
@@ -1232,7 +1244,7 @@ public function testCarousel(): void {
     $expected_values['items'][3]['description'] = 'BG Item description 4';
     $expected_values['items'][3]['url'] = 'http://www.example.com/';
     $expected_values['items'][3]['url_text'] = 'BG CTA 4';
-    $expected_values['items'][3]['image'] = $this->container->get('file_url_generator')->generateAbsoluteString($bg_file_2_uri);
+    $expected_values['items'][3]['image'] = $this->container->get('file_url_generator')->transformRelative($bg_file_2_url);
     $expected_values['items'][3]['sources'] = [
       'small' => 'oe_theme_small_3_1_banner/public/example_2_bg.jpeg',
       'medium' => 'oe_theme_medium_3_1_banner/public/example_2_bg.jpeg',

From 94e8adff2e142c0144890715634c4082eb734b37 Mon Sep 17 00:00:00 2001
From: Francisco Ribeiro <fr@franciscoribeiro.net>
Date: Tue, 1 Oct 2024 19:34:15 +0100
Subject: [PATCH 3/6] EWPP-4578: Render carousel with responsive image styles.

---
 oe_theme.theme                                | 67 +++++--------------
 .../carousel/carousel.ui_patterns.yml         | 18 ++---
 .../carousel/pattern-carousel.html.twig       | 20 +-----
 .../src/PatternAssertions/CarouselAssert.php  | 10 +--
 4 files changed, 33 insertions(+), 82 deletions(-)

diff --git a/oe_theme.theme b/oe_theme.theme
index 32f03391f..0a21c3bc3 100644
--- a/oe_theme.theme
+++ b/oe_theme.theme
@@ -1590,17 +1590,20 @@ function oe_theme_preprocess_paragraph__oe_banner(array &$variables): void {
     $url = $link->getUrl();
     $variables['url'] = $url;
     $variables['label'] = $link->get('title')->getValue();
-    $variables['external_link'] = \Drupal::service('oe_theme_helper.external_links')->isExternalLink($url);
+    $variables['external_link'] = \Drupal::service('oe_theme_helper.external_links')
+      ->isExternalLink($url);
   }
 
   $variables['full_width'] = (bool) $paragraph->get('field_oe_banner_full_width')->value;
 
   // Extract the first character of the size field value.
-  if ($paragraph->hasField('field_oe_banner_size') && !$paragraph->get('field_oe_banner_size')->isEmpty()) {
+  if ($paragraph->hasField('field_oe_banner_size') && !$paragraph->get('field_oe_banner_size')
+    ->isEmpty()) {
     $variables['size'] = substr($paragraph->get('field_oe_banner_size')->value, 0, 1);
   }
   // Get the alignment value.
-  if ($paragraph->hasField('field_oe_banner_alignment') && !$paragraph->get('field_oe_banner_alignment')->isEmpty()) {
+  if ($paragraph->hasField('field_oe_banner_alignment') && !$paragraph->get('field_oe_banner_alignment')
+    ->isEmpty()) {
     $variables['centered'] = $paragraph->get('field_oe_banner_alignment')->value === 'centered';
   }
 
@@ -1636,7 +1639,8 @@ function oe_theme_preprocess_paragraph__oe_banner(array &$variables): void {
   }
 
   // Retrieve the correct translation to display.
-  $media = \Drupal::service('entity.repository')->getTranslationFromContext($media, $paragraph->language()->getId());
+  $media = \Drupal::service('entity.repository')
+    ->getTranslationFromContext($media, $paragraph->language()->getId());
 
   // Caches are handled by the formatter usually. Since we are not rendering
   // the original render arrays, we need to propagate our caches to the
@@ -2235,28 +2239,11 @@ function oe_theme_preprocess_paragraph__oe_carousel(array &$variables): void {
     $variables['size'] = substr($paragraph->get('field_oe_carousel_size')->value, 0, 1);
   }
   // Load needed images styles based on carousel size.
-  $image_style_storage = \Drupal::entityTypeManager()->getStorage('image_style');
-  if ($variables['size'] === 's') {
-    $full_width = $image_style_storage->load('oe_theme_full_width_banner_5_1');
-    $extra_large = $image_style_storage->load('oe_theme_extra_large_5_1_banner');
-    $large = $image_style_storage->load('oe_theme_large_5_1_banner');
-    $medium = $image_style_storage->load('oe_theme_medium_5_1_banner');
-    $small = $image_style_storage->load('oe_theme_small_5_1_banner');
-  }
-  if ($variables['size'] === 'm') {
-    $full_width = $image_style_storage->load('oe_theme_full_width_banner_4_1');
-    $extra_large = $image_style_storage->load('oe_theme_extra_large_4_1_banner');
-    $large = $image_style_storage->load('oe_theme_large_4_1_banner');
-    $medium = $image_style_storage->load('oe_theme_medium_4_1_banner');
-    $small = $image_style_storage->load('oe_theme_small_4_1_banner');
-  }
-  if ($variables['size'] === 'l') {
-    $full_width = $image_style_storage->load('oe_theme_full_width_banner_3_1');
-    $extra_large = $image_style_storage->load('oe_theme_extra_large_3_1_banner');
-    $large = $image_style_storage->load('oe_theme_large_3_1_banner');
-    $medium = $image_style_storage->load('oe_theme_medium_3_1_banner');
-    $small = $image_style_storage->load('oe_theme_small_3_1_banner');
-  }
+  $banner_type = match ($variables['size']) {
+    's' => '5_1',
+    'm' => '4_1',
+    'l' => '3_1',
+  };
 
   /** @var \Drupal\paragraphs\Entity\Paragraph $sub_paragraph */
   foreach ($paragraph->get('field_oe_carousel_items')->referencedEntities() as $sub_paragraph) {
@@ -2326,30 +2313,12 @@ function oe_theme_preprocess_paragraph__oe_carousel(array &$variables): void {
       $cacheability->applyTo($variables);
       continue;
     }
-    $item['image'] = $full_width->buildUrl($uri);
+
+    $responsive_image = _oe_theme_load_from_responsive_image_style_id("oe_theme_{$banner_type}_banner", $uri);
+    $item['image'] = $responsive_image['fallback'];
     $item['image_alt'] = $source->getMetadata($media, 'thumbnail_alt_value') ?? '';
-    $item['sources'] = [
-      [
-        'src' => $small->buildUrl($uri),
-        'size' => 's',
-      ],
-      [
-        'src' => $medium->buildUrl($uri),
-        'size' => 'm',
-      ],
-      [
-        'src' => $large->buildUrl($uri),
-        'size' => 'l',
-      ],
-      [
-        'src' => $extra_large->buildUrl($uri),
-        'size' => 'xl',
-      ],
-      [
-        'src' => $full_width->buildUrl($uri),
-        'size' => 'full_width',
-      ],
-    ];
+    $item['sources'] = $responsive_image['sources'];
+
     $variables['items'][] = $item;
     $cacheability->applyTo($variables);
   }
diff --git a/templates/patterns/carousel/carousel.ui_patterns.yml b/templates/patterns/carousel/carousel.ui_patterns.yml
index c524ff33a..ca0166737 100644
--- a/templates/patterns/carousel/carousel.ui_patterns.yml
+++ b/templates/patterns/carousel/carousel.ui_patterns.yml
@@ -14,16 +14,16 @@ carousel:
           image: "https://picsum.photos/seed/picsum/600/300"
           image_alt: "alternative text"
           sources:
-            - src: "https://loremflickr.com/480/160/arch"
-              size: "s"
-            - src: "https://loremflickr.com/768/256/dog"
-              size: "m"
-            - src: "https://loremflickr.com/996/332/paris"
-              size: "l"
-            - src: "https://loremflickr.com/1140/380/brazil"
-              size: "xl"
             - src: "https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
-              size: "full_width"
+              media: '(min-width: 1140px)'
+            - src: "https://loremflickr.com/1140/380/brazil"
+              media: '(min-width: 996px)'
+            - src: "https://loremflickr.com/996/332/paris"
+              media: '(min-width: 768px)'
+            - src: "https://loremflickr.com/768/256/dog"
+              media: '(min-width: 480px)'
+            - src: "https://loremflickr.com/480/160/arch"
+              media: ""
           variant: "text-box"
           centered: false
           credit: "© Copyright first item"
diff --git a/templates/patterns/carousel/pattern-carousel.html.twig b/templates/patterns/carousel/pattern-carousel.html.twig
index 0f8ffb9b3..74ac135a8 100644
--- a/templates/patterns/carousel/pattern-carousel.html.twig
+++ b/templates/patterns/carousel/pattern-carousel.html.twig
@@ -27,25 +27,7 @@
     } %}
   {% endif %}
   {% if item.sources is not empty and item.sources is iterable %}
-    {% set _sources = [] %}
-    {% for source in item.sources %}
-      {% set media = '' %}
-      {% if source.size == 's' %}
-        {% set media = '(max-width: 480px)' %}
-      {% elseif source.size == 'm' %}
-        {% set media = '(max-width: 768px)' %}
-      {% elseif source.size == 'l' %}
-        {% set media = '(max-width: 996px)' %}
-      {% elseif source.size == 'xl' %}
-        {% set media = '(max-width: 1140px)' %}
-      {% elseif source.size == 'full_width' %}
-        {% set media = '(min-width: 1140px)' %}
-      {% endif %}
-      {% set _sources = _sources|merge([{
-        'src': source.src,
-        'media': media,
-      }]) %}
-    {% endfor %}
+    {% set _sources = item.sources %}
   {% endif %}
   {% set _picture = _picture|merge({
     'sources': _sources,
diff --git a/tests/src/PatternAssertions/CarouselAssert.php b/tests/src/PatternAssertions/CarouselAssert.php
index 07dbe8a93..72fea47bb 100644
--- a/tests/src/PatternAssertions/CarouselAssert.php
+++ b/tests/src/PatternAssertions/CarouselAssert.php
@@ -96,15 +96,15 @@ protected function assertItems(array $expected_items, Crawler $crawler): void {
         $this->assertElementNotExists('picture source', $item);
       }
       else {
-        $small_media = $item->filter('picture source[media="(max-width: 480px)"]');
+        $small_media = $item->filter('picture source:not([media])');
         $this->assertStringContainsString($expected_item['sources']['small'], $small_media->attr('srcset'));
-        $medium_media = $item->filter('picture source[media="(max-width: 768px)"]');
+        $medium_media = $item->filter('picture source[media="all and (min-width: 480px)"]');
         $this->assertStringContainsString($expected_item['sources']['medium'], $medium_media->attr('srcset'));
-        $large_media = $item->filter('picture source[media="(max-width: 996px)"]');
+        $large_media = $item->filter('picture source[media="all and (min-width: 768px)"]');
         $this->assertStringContainsString($expected_item['sources']['large'], $large_media->attr('srcset'));
-        $extra_large_media = $item->filter('picture source[media="(max-width: 1140px)"]');
+        $extra_large_media = $item->filter('picture source[media="all and (min-width: 996px)"]');
         $this->assertStringContainsString($expected_item['sources']['extra_large'], $extra_large_media->attr('srcset'));
-        $full_width_media = $item->filter('picture source[media="(min-width: 1140px)"]');
+        $full_width_media = $item->filter('picture source[media="all and (min-width: 1140px)"]');
         $this->assertStringContainsString($expected_item['sources']['full_width'], $full_width_media->attr('srcset'));
       }
     }

From 25d63c78cd066a0838bb8869d2f9829270547256 Mon Sep 17 00:00:00 2001
From: Francisco Ribeiro <fr@franciscoribeiro.net>
Date: Sat, 5 Oct 2024 18:17:29 +0100
Subject: [PATCH 4/6] EWPP-4578: Fix banner and carousel kernel tests
 rendering.

---
 tests/src/Kernel/fixtures/rendering.yml | 52 ++++++++++++-------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml
index af614d88d..a37c79872 100644
--- a/tests/src/Kernel/fixtures/rendering.yml
+++ b/tests/src/Kernel/fixtures/rendering.yml
@@ -345,16 +345,16 @@
         src: "http://via.placeholder.com/150x150"
         alt: "alternative text"
       sources:
-        - src: "https://loremflickr.com/480/480/arch"
-          size: "s"
-        - src: "https://picsum.photos/seed/picsum/768/768"
-          size: "m"
-        - src: "https://picsum.photos/seed/picsum/996/996"
-          size: "l"
-        - src: "https://loremflickr.com/1140/380/brazil"
-          size: "xl"
         - src: "https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
-          size: "full_width"
+          media: "(min-width: 1140px)"
+        - src: "https://loremflickr.com/1140/380/brazil"
+          media: "(min-width: 996px)"
+        - src: "https://picsum.photos/seed/picsum/996/996"
+          media: "(min-width: 768px)"
+        - src: "https://picsum.photos/seed/picsum/768/768"
+          media: "(min-width: 480px)"
+        - src: "https://loremflickr.com/480/480/arch"
+          media: ""
       centered: true
       full_width: true
       credit: "© Copyright or credit"
@@ -366,10 +366,10 @@
       'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
       'picture.ecl-picture.ecl-banner__picture img.ecl-banner__image[src="http://via.placeholder.com/150x150"][alt="alternative text"]': 1
       'picture source': 5
-      'picture source[srcset="https://loremflickr.com/480/480/arch"][media="(max-width: 480px)"]': 1
-      'picture source[srcset="https://picsum.photos/seed/picsum/768/768"][media="(max-width: 768px)"]': 1
-      'picture source[srcset="https://picsum.photos/seed/picsum/996/996"][media="(max-width: 996px)"]': 1
-      'picture source[srcset="https://loremflickr.com/1140/380/brazil"][media="(max-width: 1140px)"]': 1
+      'picture source[srcset="https://loremflickr.com/480/480/arch"]:not([media])': 1
+      'picture source[srcset="https://picsum.photos/seed/picsum/768/768"][media="(min-width: 480px)"]': 1
+      'picture source[srcset="https://picsum.photos/seed/picsum/996/996"][media="(min-width: 768px)"]': 1
+      'picture source[srcset="https://loremflickr.com/1140/380/brazil"][media="(min-width: 996px)"]': 1
       'picture source[srcset="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"][media="(min-width: 1140px)"]': 1
       'footer.ecl-banner__credit div.ecl-container': 1
       'video': 0
@@ -4813,16 +4813,16 @@
           url_text: "CTA 1"
           image: "https://picsum.photos/seed/picsum/600/300"
           sources:
-            - src: "https://loremflickr.com/480/480/arch"
-              size: "s"
-            - src: "https://picsum.photos/seed/picsum/768/768"
-              size: "m"
-            - src: "https://picsum.photos/seed/picsum/996/996"
-              size: "l"
-            - src: "https://loremflickr.com/1140/380/brazil"
-              size: "xl"
             - src: "https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
-              size: "full_width"
+              media: "(min-width: 1140px)"
+            - src: "https://loremflickr.com/1140/380/brazil"
+              media: "(min-width: 996px)"
+            - src: "https://picsum.photos/seed/picsum/996/996"
+              media: "(min-width: 768px)"
+            - src: "https://picsum.photos/seed/picsum/768/768"
+              media: "(min-width: 480px)"
+            - src: "https://loremflickr.com/480/480/arch"
+              size: ""
           variant: "text-box"
           centered: false
           credit: "© Copyright first item"
@@ -4877,10 +4877,10 @@
       div.ecl-carousel__controls: 1
       section.ecl-banner--text-box.ecl-banner--m.ecl-banner--h-center picture.ecl-picture.ecl-banner__picture img.ecl-banner__image[src="https://picsum.photos/seed/picsum/600/300"]: 1
       section.ecl-banner--text-box.ecl-banner--m.ecl-banner--h-center picture source: 5
-      'section.ecl-banner--text-box.ecl-banner--m.ecl-banner--h-center picture source[srcset="https://loremflickr.com/480/480/arch"][media="(max-width: 480px)"]': 1
-      'section.ecl-banner--text-box.ecl-banner--m.ecl-banner--h-center picture source[srcset="https://picsum.photos/seed/picsum/768/768"][media="(max-width: 768px)"]': 1
-      'section.ecl-banner--text-box.ecl-banner--m.ecl-banner--h-center picture source[srcset="https://picsum.photos/seed/picsum/996/996"][media="(max-width: 996px)"]': 1
-      'section.ecl-banner--text-box.ecl-banner--m.ecl-banner--h-center picture source[srcset="https://loremflickr.com/1140/380/brazil"][media="(max-width: 1140px)"]': 1
+      'section.ecl-banner--text-box.ecl-banner--m.ecl-banner--h-center picture source[srcset="https://loremflickr.com/480/480/arch"]:not([media])': 1
+      'section.ecl-banner--text-box.ecl-banner--m.ecl-banner--h-center picture source[srcset="https://picsum.photos/seed/picsum/768/768"][media="(min-width: 480px)"]': 1
+      'section.ecl-banner--text-box.ecl-banner--m.ecl-banner--h-center picture source[srcset="https://picsum.photos/seed/picsum/996/996"][media="(min-width: 768px)"]': 1
+      'section.ecl-banner--text-box.ecl-banner--m.ecl-banner--h-center picture source[srcset="https://loremflickr.com/1140/380/brazil"][media="(min-width: 996px)"]': 1
       'section.ecl-banner--text-box.ecl-banner--m.ecl-banner--h-center picture source[srcset="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"][media="(min-width: 1140px)"]': 1
       section.ecl-banner--text-box.ecl-banner--m:not(.ecl-banner--h-center) picture.ecl-picture.ecl-banner__picture img.ecl-banner__image[src="https://picsum.photos/seed/picsum/600/300"]: 1
       section.ecl-banner--text-overlay.ecl-banner--m:not(.ecl-banner--h-center) picture.ecl-picture.ecl-banner__picture img.ecl-banner__image[src="https://picsum.photos/seed/picsum/600/300"]: 1

From 3368e3c2136de98755aec9632e20a02918223e7a Mon Sep 17 00:00:00 2001
From: Francisco Ribeiro <fr@franciscoribeiro.net>
Date: Tue, 8 Oct 2024 09:19:13 +0100
Subject: [PATCH 5/6] EWPP-4578: Fix banner and carousel kernel tests
 rendering.

---
 oe_theme.theme                                      | 10 +++++-----
 tests/src/Kernel/Paragraphs/MediaParagraphsTest.php |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/oe_theme.theme b/oe_theme.theme
index 0a21c3bc3..b4ebcd15f 100644
--- a/oe_theme.theme
+++ b/oe_theme.theme
@@ -1710,15 +1710,15 @@ function oe_theme_preprocess_paragraph__oe_banner(array &$variables): void {
  * @return array
  *   Returns sources and fallback url.
  */
-function _oe_theme_load_from_responsive_image_style_id($responsive_image_style_id, $uri) {
+function _oe_theme_load_from_responsive_image_style_id(string $responsive_image_style_id, string $uri):array {
   $responsive_image_style = ResponsiveImageStyle::load($responsive_image_style_id);
-  $resp_image = [];
+  $responsive_image_generator = [];
   $breakpoints = array_reverse(\Drupal::service('breakpoint.manager')->getBreakpointsByGroup($responsive_image_style->getBreakpointGroup()));
   foreach ($responsive_image_style->getKeyedImageStyleMappings() as $breakpoint_id => $multipliers) {
     if (isset($breakpoints[$breakpoint_id])) {
       $responsive_image = _responsive_image_build_source_attributes(['uri' => $uri], $breakpoints[$breakpoint_id], $multipliers);
       $responsive_image_array = $responsive_image->toArray();
-      $resp_image['sources'][] = [
+      $responsive_image_generator['sources'][] = [
         'src' => $responsive_image_array['srcset'],
         'media' => $responsive_image_array['media'] ?? '',
       ];
@@ -1726,9 +1726,9 @@ function _oe_theme_load_from_responsive_image_style_id($responsive_image_style_i
   }
 
   // Add fallback style.
-  $resp_image['fallback'] = _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $uri);
+  $responsive_image_generator['fallback'] = _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $uri);
 
-  return $resp_image;
+  return $responsive_image_generator;
 }
 
 /**
diff --git a/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php b/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php
index 1bb102955..ce47efe5d 100644
--- a/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php
+++ b/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php
@@ -450,8 +450,8 @@ public function testTextWithMedia(): void {
    */
   public function testBanner(): void {
 
-    $breakpointsByGroup = \Drupal::service('breakpoint.manager')->getBreakpointsByGroup('oe_theme');
-    $this->assertCount(5, $breakpointsByGroup);
+    $breakpoints_by_group = \Drupal::service('breakpoint.manager')->getBreakpointsByGroup('oe_theme');
+    $this->assertCount(5, $breakpoints_by_group);
 
     // Set image media translatable.
     $this->container->get('content_translation.manager')->setEnabled('media', 'image', TRUE);

From af622f54ab1b99d986a5af775c1b21fe80dbf172 Mon Sep 17 00:00:00 2001
From: Francisco Ribeiro <fr@franciscoribeiro.net>
Date: Mon, 14 Oct 2024 10:23:33 +0100
Subject: [PATCH 6/6] EWPP-4578: Update config_devel for theme_helper.

---
 ...ntity_view_mode.node.oe_compact_teaser.yml |  1 +
 ....style.oe_theme_extra_large_3_1_banner.yml |  1 -
 ....style.oe_theme_extra_large_4_1_banner.yml |  1 -
 ....style.oe_theme_extra_large_5_1_banner.yml |  1 -
 .../image.style.oe_theme_large_3_1_banner.yml |  1 -
 .../image.style.oe_theme_large_4_1_banner.yml |  1 -
 .../image.style.oe_theme_large_5_1_banner.yml |  1 -
 ...image.style.oe_theme_medium_2x_no_crop.yml |  4 +-
 ...image.style.oe_theme_medium_3_1_banner.yml |  1 -
 ...image.style.oe_theme_medium_4_1_banner.yml |  1 -
 .../image.style.oe_theme_small_2x_no_crop.yml |  4 +-
 .../image.style.oe_theme_small_3_1_banner.yml |  1 -
 .../image.style.oe_theme_small_4_1_banner.yml |  1 -
 .../image.style.oe_theme_small_5_1_banner.yml |  1 -
 ...nsive_image.styles.oe_theme_3_1_banner.yml |  2 +
 ...nsive_image.styles.oe_theme_4_1_banner.yml |  2 +
 ...nsive_image.styles.oe_theme_5_1_banner.yml |  2 +
 .../oe_theme_helper/oe_theme_helper.info.yml  | 40 ++++++++++++++-----
 18 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/modules/oe_theme_helper/config/install/core.entity_view_mode.node.oe_compact_teaser.yml b/modules/oe_theme_helper/config/install/core.entity_view_mode.node.oe_compact_teaser.yml
index 59448815b..fab36e213 100644
--- a/modules/oe_theme_helper/config/install/core.entity_view_mode.node.oe_compact_teaser.yml
+++ b/modules/oe_theme_helper/config/install/core.entity_view_mode.node.oe_compact_teaser.yml
@@ -5,5 +5,6 @@ dependencies:
     - node
 id: node.oe_compact_teaser
 label: 'OpenEuropa: Compact teaser'
+description: ''
 targetEntityType: node
 cache: true
diff --git a/modules/oe_theme_helper/config/install/image.style.oe_theme_extra_large_3_1_banner.yml b/modules/oe_theme_helper/config/install/image.style.oe_theme_extra_large_3_1_banner.yml
index 47788ff1e..65fcfb900 100644
--- a/modules/oe_theme_helper/config/install/image.style.oe_theme_extra_large_3_1_banner.yml
+++ b/modules/oe_theme_helper/config/install/image.style.oe_theme_extra_large_3_1_banner.yml
@@ -12,4 +12,3 @@ effects:
       width: 1140
       height: 380
       anchor: center-center
-
diff --git a/modules/oe_theme_helper/config/install/image.style.oe_theme_extra_large_4_1_banner.yml b/modules/oe_theme_helper/config/install/image.style.oe_theme_extra_large_4_1_banner.yml
index 3e1ad6cd7..f754f7fc1 100644
--- a/modules/oe_theme_helper/config/install/image.style.oe_theme_extra_large_4_1_banner.yml
+++ b/modules/oe_theme_helper/config/install/image.style.oe_theme_extra_large_4_1_banner.yml
@@ -12,4 +12,3 @@ effects:
       width: 1140
       height: 285
       anchor: center-center
-
diff --git a/modules/oe_theme_helper/config/install/image.style.oe_theme_extra_large_5_1_banner.yml b/modules/oe_theme_helper/config/install/image.style.oe_theme_extra_large_5_1_banner.yml
index 5fa911c30..18896476b 100644
--- a/modules/oe_theme_helper/config/install/image.style.oe_theme_extra_large_5_1_banner.yml
+++ b/modules/oe_theme_helper/config/install/image.style.oe_theme_extra_large_5_1_banner.yml
@@ -12,4 +12,3 @@ effects:
       width: 1140
       height: 228
       anchor: center-center
-
diff --git a/modules/oe_theme_helper/config/install/image.style.oe_theme_large_3_1_banner.yml b/modules/oe_theme_helper/config/install/image.style.oe_theme_large_3_1_banner.yml
index 08d3e935b..cb6325c53 100644
--- a/modules/oe_theme_helper/config/install/image.style.oe_theme_large_3_1_banner.yml
+++ b/modules/oe_theme_helper/config/install/image.style.oe_theme_large_3_1_banner.yml
@@ -12,4 +12,3 @@ effects:
       width: 996
       height: 332
       anchor: center-center
-
diff --git a/modules/oe_theme_helper/config/install/image.style.oe_theme_large_4_1_banner.yml b/modules/oe_theme_helper/config/install/image.style.oe_theme_large_4_1_banner.yml
index ff3373a98..15c284508 100644
--- a/modules/oe_theme_helper/config/install/image.style.oe_theme_large_4_1_banner.yml
+++ b/modules/oe_theme_helper/config/install/image.style.oe_theme_large_4_1_banner.yml
@@ -12,4 +12,3 @@ effects:
       width: 996
       height: 249
       anchor: center-center
-
diff --git a/modules/oe_theme_helper/config/install/image.style.oe_theme_large_5_1_banner.yml b/modules/oe_theme_helper/config/install/image.style.oe_theme_large_5_1_banner.yml
index 8f48c9bc8..c03849e35 100644
--- a/modules/oe_theme_helper/config/install/image.style.oe_theme_large_5_1_banner.yml
+++ b/modules/oe_theme_helper/config/install/image.style.oe_theme_large_5_1_banner.yml
@@ -12,4 +12,3 @@ effects:
       width: 996
       height: 199
       anchor: center-center
-
diff --git a/modules/oe_theme_helper/config/install/image.style.oe_theme_medium_2x_no_crop.yml b/modules/oe_theme_helper/config/install/image.style.oe_theme_medium_2x_no_crop.yml
index 528eda88d..8206e4d78 100644
--- a/modules/oe_theme_helper/config/install/image.style.oe_theme_medium_2x_no_crop.yml
+++ b/modules/oe_theme_helper/config/install/image.style.oe_theme_medium_2x_no_crop.yml
@@ -1,6 +1,8 @@
 langcode: en
 status: true
-dependencies: {  }
+dependencies:
+  module:
+    - oe_theme_helper
 name: oe_theme_medium_2x_no_crop
 label: 'Medium 2x (no crop)'
 effects:
diff --git a/modules/oe_theme_helper/config/install/image.style.oe_theme_medium_3_1_banner.yml b/modules/oe_theme_helper/config/install/image.style.oe_theme_medium_3_1_banner.yml
index cef74d011..7d613fa14 100644
--- a/modules/oe_theme_helper/config/install/image.style.oe_theme_medium_3_1_banner.yml
+++ b/modules/oe_theme_helper/config/install/image.style.oe_theme_medium_3_1_banner.yml
@@ -12,4 +12,3 @@ effects:
       width: 768
       height: 256
       anchor: center-center
-
diff --git a/modules/oe_theme_helper/config/install/image.style.oe_theme_medium_4_1_banner.yml b/modules/oe_theme_helper/config/install/image.style.oe_theme_medium_4_1_banner.yml
index 6da120818..a82e8ccdb 100644
--- a/modules/oe_theme_helper/config/install/image.style.oe_theme_medium_4_1_banner.yml
+++ b/modules/oe_theme_helper/config/install/image.style.oe_theme_medium_4_1_banner.yml
@@ -12,4 +12,3 @@ effects:
       width: 768
       height: 192
       anchor: center-center
-
diff --git a/modules/oe_theme_helper/config/install/image.style.oe_theme_small_2x_no_crop.yml b/modules/oe_theme_helper/config/install/image.style.oe_theme_small_2x_no_crop.yml
index ef33d922a..ae9807f69 100644
--- a/modules/oe_theme_helper/config/install/image.style.oe_theme_small_2x_no_crop.yml
+++ b/modules/oe_theme_helper/config/install/image.style.oe_theme_small_2x_no_crop.yml
@@ -1,6 +1,8 @@
 langcode: en
 status: true
-dependencies: {  }
+dependencies:
+  module:
+    - oe_theme_helper
 name: oe_theme_small_2x_no_crop
 label: 'Small 2x (no crop)'
 effects:
diff --git a/modules/oe_theme_helper/config/install/image.style.oe_theme_small_3_1_banner.yml b/modules/oe_theme_helper/config/install/image.style.oe_theme_small_3_1_banner.yml
index 10689d82d..3df6bf2fd 100644
--- a/modules/oe_theme_helper/config/install/image.style.oe_theme_small_3_1_banner.yml
+++ b/modules/oe_theme_helper/config/install/image.style.oe_theme_small_3_1_banner.yml
@@ -12,4 +12,3 @@ effects:
       width: 480
       height: 160
       anchor: center-center
-
diff --git a/modules/oe_theme_helper/config/install/image.style.oe_theme_small_4_1_banner.yml b/modules/oe_theme_helper/config/install/image.style.oe_theme_small_4_1_banner.yml
index 61ec92f6e..9f1073855 100644
--- a/modules/oe_theme_helper/config/install/image.style.oe_theme_small_4_1_banner.yml
+++ b/modules/oe_theme_helper/config/install/image.style.oe_theme_small_4_1_banner.yml
@@ -12,4 +12,3 @@ effects:
       width: 480
       height: 120
       anchor: center-center
-
diff --git a/modules/oe_theme_helper/config/install/image.style.oe_theme_small_5_1_banner.yml b/modules/oe_theme_helper/config/install/image.style.oe_theme_small_5_1_banner.yml
index 02e015d11..33e2f70d5 100644
--- a/modules/oe_theme_helper/config/install/image.style.oe_theme_small_5_1_banner.yml
+++ b/modules/oe_theme_helper/config/install/image.style.oe_theme_small_5_1_banner.yml
@@ -12,4 +12,3 @@ effects:
       width: 480
       height: 96
       anchor: center-center
-
diff --git a/modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_3_1_banner.yml b/modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_3_1_banner.yml
index 568fe3162..00413c2b5 100644
--- a/modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_3_1_banner.yml
+++ b/modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_3_1_banner.yml
@@ -7,6 +7,8 @@ dependencies:
     - image.style.oe_theme_large_3_1_banner
     - image.style.oe_theme_medium_3_1_banner
     - image.style.oe_theme_small_3_1_banner
+  module:
+    - oe_theme_helper
 id: oe_theme_3_1_banner
 label: '3:1 Banner'
 image_style_mappings:
diff --git a/modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_4_1_banner.yml b/modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_4_1_banner.yml
index 13e788125..975bfe5ca 100644
--- a/modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_4_1_banner.yml
+++ b/modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_4_1_banner.yml
@@ -7,6 +7,8 @@ dependencies:
     - image.style.oe_theme_large_4_1_banner
     - image.style.oe_theme_medium_4_1_banner
     - image.style.oe_theme_small_4_1_banner
+  module:
+    - oe_theme_helper
 id: oe_theme_4_1_banner
 label: '4:1 Banner'
 image_style_mappings:
diff --git a/modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_5_1_banner.yml b/modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_5_1_banner.yml
index 846d03819..1871c5e31 100644
--- a/modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_5_1_banner.yml
+++ b/modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_5_1_banner.yml
@@ -7,6 +7,8 @@ dependencies:
     - image.style.oe_theme_large_5_1_banner
     - image.style.oe_theme_medium_5_1_banner
     - image.style.oe_theme_small_5_1_banner
+  module:
+    - oe_theme_helper
 id: oe_theme_5_1_banner
 label: '5:1 Banner'
 image_style_mappings:
diff --git a/modules/oe_theme_helper/oe_theme_helper.info.yml b/modules/oe_theme_helper/oe_theme_helper.info.yml
index 98ea5d105..09d230c64 100644
--- a/modules/oe_theme_helper/oe_theme_helper.info.yml
+++ b/modules/oe_theme_helper/oe_theme_helper.info.yml
@@ -17,12 +17,34 @@ dependencies:
 
 config_devel:
   install:
-    - image.style.oe_theme_list_item
-    - image.style.oe_theme_list_item_featured
-    - image.style.oe_theme_list_item_2x
-    - image.style.oe_theme_list_item_featured_2x
-    - image.style.oe_theme_medium_2x_no_crop
-    - image.style.oe_theme_medium_no_crop
-    - image.style.oe_theme_small_2x_no_crop
-    - image.style.oe_theme_small_no_crop
-    - responsive_image.styles.oe_theme_main_content
+  - core.entity_view_mode.node.oe_compact_teaser
+  - image.style.oe_theme_extra_large_3_1_banner
+  - image.style.oe_theme_extra_large_4_1_banner
+  - image.style.oe_theme_extra_large_5_1_banner
+  - image.style.oe_theme_full_width
+  - image.style.oe_theme_full_width_banner_3_1
+  - image.style.oe_theme_full_width_banner_4_1
+  - image.style.oe_theme_full_width_banner_5_1
+  - image.style.oe_theme_large_3_1_banner
+  - image.style.oe_theme_large_4_1_banner
+  - image.style.oe_theme_large_5_1_banner
+  - image.style.oe_theme_list_item
+  - image.style.oe_theme_list_item_2x
+  - image.style.oe_theme_list_item_featured
+  - image.style.oe_theme_list_item_featured_2x
+  - image.style.oe_theme_medium_2x_no_crop
+  - image.style.oe_theme_medium_3_1_banner
+  - image.style.oe_theme_medium_4_1_banner
+  - image.style.oe_theme_medium_5_1_banner
+  - image.style.oe_theme_medium_no_crop
+  - image.style.oe_theme_ratio_3_2_medium
+  - image.style.oe_theme_small_2x_no_crop
+  - image.style.oe_theme_small_3_1_banner
+  - image.style.oe_theme_small_4_1_banner
+  - image.style.oe_theme_small_5_1_banner
+  - image.style.oe_theme_small_no_crop
+  - oe_theme_helper.internal_domains
+  - responsive_image.styles.oe_theme_3_1_banner
+  - responsive_image.styles.oe_theme_4_1_banner
+  - responsive_image.styles.oe_theme_5_1_banner
+  - responsive_image.styles.oe_theme_main_content