EWPP-4578: Render banner with responsive image styles.

openeuropa · Oct 5, 2024 · 4f50014 · 4f50014
1 parent cb410bd
commit 4f50014
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 116 deletions.
diff --git 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().
@@ -1669,62 +1670,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
@@ -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
@@ -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,