added captions & lightbox to project page

config/sync/core.entity_view_display.node.projet.full.yml

@@ -14,11 +14,12 @@ dependencies:
     - field.field.node.projet.field_portage
     - field.field.node.projet.field_projet_s_lie_s
     - field.field.node.projet.field_type_de_projet
+    - image.style.large
     - node.type.projet
   module:
     - datetime_range
     - file
-    - image
+    - image_field_caption
     - layout_builder
     - options
     - text
@@ -67,11 +68,11 @@ content:
     weight: 7
     region: content
   field_images:
-    type: image
+    type: image_caption
     label: hidden
     settings:
-      image_link: ''
+      image_style: large
-      image_style: ''
+      image_link: file
       image_loading:
         attribute: lazy
     third_party_settings: {  }

web/themes/custom/leshed/assets/js/main.js

@@ -8,6 +8,7 @@ import { hyphenateSync } from "hyphen/fr";
 import { gsap, Power1 } from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import Lenis from 'lenis';
+import 'fslightbox';
 
 gsap.registerPlugin(ScrollTrigger);
 
@@ -51,6 +52,7 @@ gsap.registerPlugin(ScrollTrigger);
       initBurgerMenu();
       initSmoothScroll();
       initColumnScrollSync();
+      initFsLightbox();
       // initVues()
     }
 
@@ -304,6 +306,17 @@ gsap.registerPlugin(ScrollTrigger);
       window.addEventListener('load', () => ScrollTrigger.refresh());
     }
 
+    function initFsLightbox(){
+      console.log('initFsLightbox');
+      // console.log(window.FsLightbox);
+      let imgs_links = document.querySelectorAll('.field_images.multiple .field-item a');
+      for (const link of imgs_links) {
+        link.setAttribute("data-fslightbox", "gallery")
+      }
+      // window.FsLightbox
+      window.refreshFsLightbox();
+    }
+
     // function initVues(){
     //   console.log('initVues');
 

web/themes/custom/leshed/assets/scss/main.scss

@@ -265,7 +265,12 @@ div.layout.layout--twocol-section--50-50{
   }
 }
 
-
+//   ____            _      _
+//  |  _ \ _ __ ___ (_) ___| |_
+//  | |_) | '__/ _ \| |/ _ \ __|
+//  |  __/| | | (_) | |  __/ |_
+//  |_|   |_|  \___// |\___|\__|
+//                |__/
 article.node-type-projet.view-mode-full{
   div.cols{
     display: flex;
@@ -309,21 +314,67 @@ article.node-type-projet.view-mode-full{
         display: flex;
         .field_images{
           flex: 1;
+          // .field-items{
+            &:after{
+              display: block;
+              position: relative;
+              content: "";
+              // border: 1px solid red;
+              width: 100%;
+              height: 100vh;
             }
-        img{
+          // }
-          max-width: 100%;
+          .field-item{
-          height: auto;
+            position: relative;
-        }
             // Empilement "cartes" : chaque image se fige au même endroit (haut) et
             // est recouverte par la suivante (l'ordre du DOM fait que la dernière
             // passe au-dessus). La 1re image ne bouge pas. Desktop uniquement.
             @media (min-width: 768px){
-          .field_images .field-item{
               position: sticky;
               top: 0;
+              // &:last-child:after{
+              //   content: "";
+              //   // position: relative;
+              //   display:block;
+              //   // blockquote.image-field-caption{
+              //   height: 100vh;
+              //   width:100%;
+              //   border: 1px solid red;
+              //   // }
+              // }
+            }
+
+            img{
+              width: 100%;
+              max-width: 100%;
+              height: auto;
+            }
+            blockquote.image-field-caption{
+              margin: 0;
+              position: absolute;
+              bottom: 0; left: 0;
+              width: 100%;
+              background-color: rgba(0,0,0,0.65);
+              color: #fff;
+              p{
+                margin: 0;
+                padding: 1em;
+                font-weight: 300;
+                font-size: 0.8em;
+              }
+              opacity: 0;
+              transition: opacity 0.3s ease-in-out;
+            }
+            &:hover{
+              blockquote.image-field-caption{
+                opacity: 1;
               }
             }
           }
+
+        }
+
+      }
     }
   }
 

web/themes/custom/leshed/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.7.2",
+        "fslightbox": "^3.7.5",
         "gsap": "^3.14.1",
         "hyphen": "^1.14.1",
         "lenis": "^1.3.26",
@@ -1583,6 +1584,12 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/fslightbox": {
+      "version": "3.7.5",
+      "resolved": "https://registry.npmjs.org/fslightbox/-/fslightbox-3.7.5.tgz",
+      "integrity": "sha512-swEUrwMOyiBhdkPf3GXj4nxARX5d8/9yfVCdxgPLl9+ZMiacUTub9O2wxLI0Y2G2jI85Qxfqpv2I24vlbx0zfg==",
+      "license": "MIT"
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",

web/themes/custom/leshed/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.7.2",
+    "fslightbox": "^3.7.5",
     "gsap": "^3.14.1",
     "hyphen": "^1.14.1",
     "lenis": "^1.3.26",