node projet diapo et lightbox

web/themes/custom/quartiers_de_demain/dist/assets/bundle.js

@@ -562,7 +562,7 @@ $(document).ready(function(){
 
 //////////////// start lightbox galerie image page site////////////////////////
 // Sélection des images à ouvrir dans la lightbox
-let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
+let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger, .paragraph--type--projet-diapo .lightbox-trigger');
 let currentIndex;
 
 // Création de la lightbox
@@ -732,7 +732,6 @@ if (elementsToWrap.length > 0) {
 
 
 ////////////////////  start div infos actualité  ////////////////////////
-
 $(document).ready(function () {
   // Vérifier si .layout-container A l'ID #page-node (et non un élément enfant)
   if ($(".layout-container").attr("id") === "page-node") {
@@ -758,11 +757,9 @@ $(document).ready(function () {
       });
   }
 });
-
 ////////////////////  end div infos actualité  ////////////////////////
 
 //////////////////////////////////////////////////////////////////
-
 document.addEventListener("DOMContentLoaded", function() {
 // Sélectionner les éléments à déplacer
 const documentsField = document.querySelector(".field_field_documents");
@@ -819,9 +816,9 @@ function moveLanguageSwitcher() {
 moveLanguageSwitcher();
 window.addEventListener("resize", moveLanguageSwitcher);
 });
-
 /////////////////// end langswitcher position responsive///////////////////////////////////////////////////////////
 
+
 /////////////// start class à view-rows-ressources ////////
 $(document).ready(function () {
   $(".view-rows-wrapper").each(function () {
@@ -923,8 +920,6 @@ $(document).ready(function () {
   }
   
 });
-
-
 ///////////////////  end voir plus...  ressources ////////////////////
 
 
@@ -983,96 +978,9 @@ $(document).ready(function () {
     })
   }
 });
-
-
 ///////////////////  end voir plus...  actualite dans /actualites & /home ////////////////////
 
 
-//////////////////////////////////////////
-
-
-// /////////// Start script ressources ////////////////////////////////
-
-// document.addEventListener("DOMContentLoaded", () => {
-//     const view = document.querySelector(".view");
-//     const elements = Array.from(view.children);
-
-//     let newView = document.createElement("div");
-//     newView.classList.add("view");
-
-//     let group = null;
-//     let groupContent = null;
-
-//     elements.forEach((el) => {
-//         if (el.tagName === "H3") {
-//             if (group) {
-//                 newView.appendChild(group);
-//             }
-
-//             group = document.createElement("div");
-//             group.classList.add("group");
-
-//             groupContent = document.createElement("div");
-//             groupContent.classList.add("group-content");
-
-//             groupContent.appendChild(el);
-//             group.appendChild(groupContent);
-//         } else if (el.classList.contains("views-row")) {
-//             groupContent.appendChild(el);
-//         }
-//     });
-
-//     if (group) {
-//         newView.appendChild(group);
-//     }
-
-//     view.replaceWith(newView);
-
-//     // Ajouter un bouton "Voir plus" dans chaque groupe
-//     document.querySelectorAll(".group").forEach((group) => {
-//         const rows = group.querySelectorAll(".views-row");
-//         const button = document.createElement("button");
-//         button.classList.add("toggle-btn");
-//         button.textContent = "Voir plus de";
-
-//         rows.forEach((row, index) => {
-//             if (index >= 3) {
-//                 row.classList.add("hidden");
-//                 row.style.maxHeight = "0";
-//                 row.style.opacity = "0";
-//             }
-//         });
-
-//         button.addEventListener("click", () => {
-//             const isExpanded = button.textContent === "Voir moins de";
-//             const hiddenRows = group.querySelectorAll(".views-row.hidden");
-
-//             if (isExpanded) {
-//                 // Cacher les lignes avec un délai pour l'effet de transition
-//                 hiddenRows.forEach((row) => {
-//                     row.style.maxHeight = "0";
-//                     row.style.opacity = "0";
-//                     setTimeout(() => row.classList.add("hidden"), 500); // Délai pour la transition
-//                 });
-//             } else {
-//                 // Afficher les lignes
-//                 hiddenRows.forEach((row) => {
-//                     row.classList.remove("hidden");
-//                     row.style.maxHeight = row.scrollHeight + "px";
-//                     row.style.opacity = "1";
-//                 });
-//             }
-
-//             button.textContent = isExpanded ? "Voir plus de" : "Voir moins de";
-//         });
-
-//         group.appendChild(button);
-//     });
-// });
-
-
-// /////////// end script ressources ////////////////////////////////
-
 
 
 

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -4242,6 +4242,32 @@ body {
   font-family: "gilroy-light";
   font-size: 0.6rem;
 }
+.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties_projet .paragraph--type--projet-diapo .field_field_images_projet {
+  display: flex !important;
+  flex-direction: row !important;
+  gap: 20px;
+  flex-wrap: wrap;
+  margin-bottom: 2rem;
+}
+@media (max-width: 500px) {
+  .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties_projet .paragraph--type--projet-diapo .field_field_images_projet {
+    flex-direction: column !important;
+  }
+}
+.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties_projet .paragraph--type--projet-diapo .field_field_images_projet .cadre-img-zoom img {
+  object-fit: cover;
+  width: 220px;
+  height: 145px;
+}
+.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties_projet .paragraph--type--projet-diapo .field_field_images_projet .image-field-caption {
+  margin: 0;
+  max-width: 200px;
+}
+.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties_projet .paragraph--type--projet-diapo .field_field_images_projet .image-field-caption p {
+  margin-top: 0;
+  font-size: 0.5rem;
+  font-family: "gilroy-light";
+}
 .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_documents,
 .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_liens {
   width: fit-content;

web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js

@@ -504,7 +504,7 @@ $(document).ready(function(){
 
 //////////////// start lightbox galerie image page site////////////////////////
 // Sélection des images à ouvrir dans la lightbox
-let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
+let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger, .paragraph--type--projet-diapo .lightbox-trigger');
 let currentIndex;
 
 // Création de la lightbox
@@ -674,7 +674,6 @@ if (elementsToWrap.length > 0) {
 
 
 ////////////////////  start div infos actualité  ////////////////////////
-
 $(document).ready(function () {
   // Vérifier si .layout-container A l'ID #page-node (et non un élément enfant)
   if ($(".layout-container").attr("id") === "page-node") {
@@ -700,11 +699,9 @@ $(document).ready(function () {
       });
   }
 });
-
 ////////////////////  end div infos actualité  ////////////////////////
 
 //////////////////////////////////////////////////////////////////
-
 document.addEventListener("DOMContentLoaded", function() {
 // Sélectionner les éléments à déplacer
 const documentsField = document.querySelector(".field_field_documents");
@@ -761,9 +758,9 @@ function moveLanguageSwitcher() {
 moveLanguageSwitcher();
 window.addEventListener("resize", moveLanguageSwitcher);
 });
-
 /////////////////// end langswitcher position responsive///////////////////////////////////////////////////////////
 
+
 /////////////// start class à view-rows-ressources ////////
 $(document).ready(function () {
   $(".view-rows-wrapper").each(function () {
@@ -865,8 +862,6 @@ $(document).ready(function () {
   }
   
 });
-
-
 ///////////////////  end voir plus...  ressources ////////////////////
 
 
@@ -925,96 +920,9 @@ $(document).ready(function () {
     })
   }
 });
-
-
 ///////////////////  end voir plus...  actualite dans /actualites & /home ////////////////////
 
 
-//////////////////////////////////////////
-
-
-// /////////// Start script ressources ////////////////////////////////
-
-// document.addEventListener("DOMContentLoaded", () => {
-//     const view = document.querySelector(".view");
-//     const elements = Array.from(view.children);
-
-//     let newView = document.createElement("div");
-//     newView.classList.add("view");
-
-//     let group = null;
-//     let groupContent = null;
-
-//     elements.forEach((el) => {
-//         if (el.tagName === "H3") {
-//             if (group) {
-//                 newView.appendChild(group);
-//             }
-
-//             group = document.createElement("div");
-//             group.classList.add("group");
-
-//             groupContent = document.createElement("div");
-//             groupContent.classList.add("group-content");
-
-//             groupContent.appendChild(el);
-//             group.appendChild(groupContent);
-//         } else if (el.classList.contains("views-row")) {
-//             groupContent.appendChild(el);
-//         }
-//     });
-
-//     if (group) {
-//         newView.appendChild(group);
-//     }
-
-//     view.replaceWith(newView);
-
-//     // Ajouter un bouton "Voir plus" dans chaque groupe
-//     document.querySelectorAll(".group").forEach((group) => {
-//         const rows = group.querySelectorAll(".views-row");
-//         const button = document.createElement("button");
-//         button.classList.add("toggle-btn");
-//         button.textContent = "Voir plus de";
-
-//         rows.forEach((row, index) => {
-//             if (index >= 3) {
-//                 row.classList.add("hidden");
-//                 row.style.maxHeight = "0";
-//                 row.style.opacity = "0";
-//             }
-//         });
-
-//         button.addEventListener("click", () => {
-//             const isExpanded = button.textContent === "Voir moins de";
-//             const hiddenRows = group.querySelectorAll(".views-row.hidden");
-
-//             if (isExpanded) {
-//                 // Cacher les lignes avec un délai pour l'effet de transition
-//                 hiddenRows.forEach((row) => {
-//                     row.style.maxHeight = "0";
-//                     row.style.opacity = "0";
-//                     setTimeout(() => row.classList.add("hidden"), 500); // Délai pour la transition
-//                 });
-//             } else {
-//                 // Afficher les lignes
-//                 hiddenRows.forEach((row) => {
-//                     row.classList.remove("hidden");
-//                     row.style.maxHeight = row.scrollHeight + "px";
-//                     row.style.opacity = "1";
-//                 });
-//             }
-
-//             button.textContent = isExpanded ? "Voir plus de" : "Voir moins de";
-//         });
-
-//         group.appendChild(button);
-//     });
-// });
-
-
-// /////////// end script ressources ////////////////////////////////
-
 
 
 

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-projet.scss

@@ -144,7 +144,32 @@
                     }
                     .paragraph--type--projet-diapo{
                         .field_field_images_projet{
-
+                            display: flex !important;
+                            flex-direction: row !important;
+                            // justify-content: space-between;
+                            gap: 20px;
+                            flex-wrap: wrap;
+                            margin-bottom: 2rem;
+                            @media(max-width: 500px){
+                                flex-direction: column !important;
+                            }
+                            .cadre-img-zoom{
+                            //    margin: auto;
+                                img{
+                                    object-fit: cover;
+                                    width: 220px;
+                                    height: 145px;
+                                }
+                            }
+                            .image-field-caption{
+                                margin: 0;
+                                max-width: 200px;
+                                p{
+                                    margin-top: 0;
+                                    font-size: 0.5rem;
+                                    font-family: 'gilroy-light';
+                                }
+                            } 
                         }
                     }
                 }

web/themes/custom/quartiers_de_demain/templates/field--paragraph--projet-diapo.html.twig

@@ -0,0 +1,84 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set title_classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+{%
+  set ancre_href = '#paragraph-id--' ~ paragraph.id()
+%}
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes }}>
+      {% for item in items %}
+        <div{{ item.attributes }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <div{{ attributes }}>{{ item.content }}</div>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes }}>
+    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
+    {% if multiple %}
+      <div class='diaporama'>
+    {% endif %}
+    {% for item in items %}
+      <div{{ item.attributes }}>{{ item.content }}</div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+    <div id="lightbox" class="lightbox">
+      <span class="close">&times;</span>
+      <img class="lightbox-content" id="lightbox-img">
+      <a class="prev" id="prev"><img src="/themes/custom/quartiers_de_demain/dist/assets/img/prev.svg" alt="Précédent"></a>
+      <a class="next" id="next"><img src="/themes/custom/quartiers_de_demain/dist/assets/img/next.svg" alt="Suivant"></a>
+    </div>
+  </div>
+{% endif %}