EWPP-4578: Use Banner retina images with responsive image styles.

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

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
-

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
-

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
-

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
-

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
-

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
-

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:

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
-

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
-

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:

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
-

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
-

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
-

modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_3_1_banner.yml

@@ -0,0 +1,41 @@
+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
+  module:
+    - oe_theme_helper
+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

modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_4_1_banner.yml

@@ -0,0 +1,41 @@
+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
+  module:
+    - oe_theme_helper
+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

modules/oe_theme_helper/config/install/responsive_image.styles.oe_theme_5_1_banner.yml

@@ -0,0 +1,41 @@
+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
+  module:
+    - oe_theme_helper
+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

oe_theme.breakpoints.yml → modules/oe_theme_helper/oe_theme_helper.breakpoints.yml

@@ -5,31 +5,36 @@ oe_theme.extra_small:
   multipliers:
     - 1x
     - 2x
+  group: oe_theme
 oe_theme.small:
   label: Small
   mediaQuery: 'all and (min-width: 480px)'
   weight: 0
   multipliers:
     - 1x
     - 2x
+  group: oe_theme
 oe_theme.medium:
   label: Medium
   mediaQuery: 'all and (min-width: 768px)'
   weight: 1
   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

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

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();
+  }
+}