EWPP-4578: Render carousel with responsive image styles.

openeuropa · Oct 11, 2024 · 945f949 · 945f949
1 parent 82fff4c
commit 945f949
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 82 deletions.
diff --git a/oe_theme.theme b/oe_theme.theme
@@ -1585,17 +1585,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';
   }
 
@@ -1631,7 +1634,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
@@ -2220,28 +2224,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) {
@@ -2311,30 +2298,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
@@ -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
@@ -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
@@ -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'));
       }
     }