use only one picture

ec-europa · Aug 12, 2024 · 7e3605a · 7e3605a
1 parent 822fdfd
commit 7e3605a
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 387 deletions.
diff --git a/src/implementations/twig/components/gallery/README.md b/src/implementations/twig/components/gallery/README.md
@@ -26,7 +26,7 @@ npm install --save @ecl/twig-component-gallery
   - "description" (string) (default: '')
   - "meta" (string) (default: '')
   - "icon" (object) (default: {}): object of type icon
-  - "thumbnail" (optional) (object) (default: {}) object of type Picture; uses "picture" if empty
+  - "thumbnail" (optional) (string) (default: {}) Path to the thumbnail; uses "picture" path if empty
   - "picture" (optional) (object) (default: {}) object of type Picture
   - "video" (optional) (object) (default: {})
   - "embedded_video" (optional) (object) (default: {})
@@ -64,12 +64,7 @@ npm install --save @ecl/twig-component-gallery
   sr_video_player: 'Video player',
   items: [ 
     { 
-      thumbnail: {
-        img: {
-          src: 'path/to/thumbnail.jpg', 
-          alt: 'Image 1',
-        },
-      }, 
+      thumbnail: 'path/to/thumbnail.jpg', 
       picture: {
         img: {
           src: 'path/to/image.jpg', 

diff --git a/src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap b/src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap
diff --git a/src/implementations/twig/components/gallery/gallery-item.html.twig b/src/implementations/twig/components/gallery/gallery-item.html.twig
@@ -8,7 +8,7 @@
     - "description" (string) (default: '')
     - "meta" (string) (default: '')
     - "icon" (object) (default: {}): object of type icon
-    - "thumbnail" (optional) (object) (default: {}) Object of type Picture; uses "picture" if empty
+    - "thumbnail" (optional) (string) (default: {}) Path to the thumbnail; uses "picture" path if empty
     - "picture" (optional) (object) (default: {}) Object of type Picture
     - "video" (optional) (object) (default: {})
     - "embedded_video" (optional) (object) (default: {})
@@ -34,7 +34,7 @@
 {% set _media_iframe_href = '' %}
 {% set _item = item|default({}) %}
 {% set _picture = item.picture|default({}) %}
-{% set _thumbnail = item.thumbnail|default(_picture) %}
+{% set _thumbnail = item.thumbnail|default(_picture.img is defined and _picture.img.src is defined ? _picture.img.src : '') %}
 {% set _icon_path = icon_path|default('') %}
 {% set _sr_video_label = sr_video_label|default('') %}
 {% set _sr_video_player = sr_video_player|default('') %}
@@ -86,6 +86,9 @@
     data-ecl-gallery-item
     class="ecl-gallery__item-link"
     id="{{ _id }}"
+  {%- if _thumbnail is not empty -%}
+    data-ecl-gallery-item-thumbnail="{{ _thumbnail }}"
+  {%- endif -%}
   {%- if _media_share_path is not empty -%}
     data-ecl-gallery-item-share="{{ _media_share_path }}"
   {%- endif -%}
@@ -100,7 +103,6 @@
   {% endif %}
   >
   {% if _item is not empty %}
-    {% set _image_alt = _thumbnail.img.alt|default('') %}
     <figure class="ecl-gallery__image-container">
 
     {% if _item.video is not empty or _item.embedded_video is not empty %}
@@ -127,32 +129,23 @@
     {% if _item.embedded_video is not empty %}
       {# Embedded video #}
       {% include '@ecl/picture/picture.html.twig' with {
-        picture: _thumbnail|merge({
-          img: _thumbnail.img|merge({
-            alt: _image_alt,
+        picture: _picture|merge({
+          img: _picture.img|merge({
+            src: _thumbnail,
           })
         }),
-        extra_classes: "ecl-gallery__thumbnail",
+        extra_classes: "ecl-gallery__picture",
         extra_image_classes: "ecl-gallery__image",
       } only %}
     {% elseif _item.video is not empty %}
       {# HTML video #}
       {% include '@ecl/gallery/gallery-video.html.twig' %}
     {% else %}
       {# Image #}
-      {% include '@ecl/picture/picture.html.twig' with {
-        picture: _thumbnail|merge({
-          img: _thumbnail.img|merge({
-            alt: _image_alt,
-          })
-        }),
-        extra_classes: "ecl-gallery__thumbnail",
-        extra_image_classes: "ecl-gallery__image",
-      } only %}
       {% include '@ecl/picture/picture.html.twig' with {
         picture: _picture|merge({
           img: _picture.img|merge({
-            alt: _image_alt,
+            src: _thumbnail,
           })
         }),
         extra_classes: "ecl-gallery__picture",

diff --git a/src/implementations/twig/components/gallery/gallery.html.twig b/src/implementations/twig/components/gallery/gallery.html.twig
@@ -28,7 +28,7 @@
     - "description" (string) (default: '')
     - "meta" (string) (default: '')
     - "icon" (object) (default: {}): object of type icon
-    - "thumbnail" (optional) (object) (default: {}) Object of type Picture; uses "picture" if empty
+    - "thumbnail" (optional) (string) (default: {}) Path to the thumbnail; uses "picture" path if empty
     - "picture" (optional) (object) (default: {}) Object of type Picture
     - "video" (optional) (object) (default: {})
     - "embedded_video" (optional) (object) (default: {})

diff --git a/src/implementations/vanilla/components/gallery/gallery-print.scss b/src/implementations/vanilla/components/gallery/gallery-print.scss
@@ -46,27 +46,11 @@ $gallery: null !default;
   margin: 0;
 }
 
-.ecl-gallery__thumbnail {
-  display: none;
-  height: 100%;
-
-  &:not(.ecl-gallery__slider-image) {
-    display: flex;
-    flex-grow: 1;
-  }
-
-  * {
-    object-fit: cover;
-    width: 100%;
-  }
-}
-
 .ecl-gallery__picture {
   display: flex;
   height: 100%;
 
   &:not(.ecl-gallery__slider-image) {
-    display: none;
     flex-grow: 1;
   }
 

diff --git a/src/implementations/vanilla/components/gallery/gallery.js b/src/implementations/vanilla/components/gallery/gallery.js
@@ -538,13 +538,18 @@ export class Gallery {
       // Media is an image
       const picture = queryOne('.ecl-gallery__picture', selectedItem);
       const image = queryOne('img', picture);
+
+      // Get full image path from the item
+      const fullSrc = selectedItem.href || image.getAttribute('src');
+
       if (picture) {
         image.classList.remove('ecl-gallery__image');
+        image.setAttribute('src', fullSrc);
         mediaElement = picture.cloneNode(true);
       } else {
         // backward compatibility
         mediaElement = document.createElement('img');
-        mediaElement.setAttribute('src', image.getAttribute('src'));
+        mediaElement.setAttribute('src', fullSrc);
         mediaElement.setAttribute('alt', image.getAttribute('alt'));
       }
       mediaElement.classList.add('ecl-gallery__slider-image');
@@ -638,11 +643,18 @@ export class Gallery {
     // Untrap focus
     this.focusTrap.deactivate();
 
-    // Restore css class on items
+    // Restore css class and thumbnail on items
     this.galleryItems.forEach((galleryItem) => {
       const image = queryOne('img', galleryItem);
       if (image) {
         image.classList.add('ecl-gallery__image');
+
+        const thumbnailSrc = galleryItem.getAttribute(
+          'data-ecl-gallery-item-thumbnail',
+        );
+        if (thumbnailSrc) {
+          image.setAttribute('src', thumbnailSrc);
+        }
       }
     });
 

diff --git a/src/implementations/vanilla/components/gallery/gallery.scss b/src/implementations/vanilla/components/gallery/gallery.scss
@@ -85,27 +85,11 @@ $_description-height-desktop: 108px;
   }
 }
 
-.ecl-gallery__thumbnail {
-  display: none;
-  height: 100%;
-
-  &:not(.ecl-gallery__slider-image) {
-    display: flex;
-    flex-grow: 1;
-  }
-
-  * {
-    object-fit: cover;
-    width: 100%;
-  }
-}
-
 .ecl-gallery__picture {
   display: flex;
   height: 100%;
 
   &:not(.ecl-gallery__slider-image) {
-    display: none;
     flex-grow: 1;
   }
 

diff --git a/src/specs/components/gallery/demo/data.js b/src/specs/components/gallery/demo/data.js
@@ -22,8 +22,8 @@ module.exports = {
       share_path: '/share#example-image.jpg',
     },
     {
-      // Embedded video with thumbnail (Youtube)
-      thumbnail: {
+      // Embedded video (Youtube)
+      picture: {
         img: {
           src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-external-video.jpg',
           alt: 'New digital strategy',
@@ -54,8 +54,8 @@ module.exports = {
       share_path: '/share#example-image2.jpg',
     },
     {
-      // Embedded video with thumbnail (AV Portal)
-      thumbnail: {
+      // Embedded video (AV Portal)
+      picture: {
         img: {
           src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image3.jpg',
           alt: 'Image 3',
@@ -72,8 +72,8 @@ module.exports = {
       share_path: '/share#example-image3.jpg',
     },
     {
-      // Embedded video with thumbnail (Dailymotion)
-      thumbnail: {
+      // Embedded video (Dailymotion)
+      picture: {
         img: {
           src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg',
           alt: 'Image 4',
@@ -107,7 +107,7 @@ module.exports = {
       share_path: '/share#example-image5.jpg',
     },
     {
-      // Embedded video with picture defined instead of thumbnail (Vimeo)
+      // Embedded video (Vimeo)
       picture: {
         img: {
           src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image6.jpg',
@@ -127,12 +127,8 @@ module.exports = {
     },
     {
       // Image with thumbnail
-      thumbnail: {
-        img: {
-          src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image7.jpg',
-          alt: 'Image 7',
-        },
-      },
+      thumbnail:
+        'https://inno-ecl.s3.amazonaws.com/media/examples/example-image7.jpg',
       picture: {
         img: {
           src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image11.jpg',