optimisations images

web/themes/custom/caravane/assets/js/stores/content.js

@@ -148,6 +148,30 @@ export const useContentStore = defineStore('content', {
                                 case 'titre_texte':
                                     partieContent.titre = partie.attributes.field_titre;
                                     partieContent.texte = partie.attributes.field_texte.value;                                    
+
+                                    // get the resized images from the text
+                                    const imgRegex = /<img[^>]+>/g;
+                                    const uuidRegex = /data-entity-uuid="([^"]+)"/;
+
+                                    const imgTags = partieContent.texte.match(imgRegex);
+
+                                    if (imgTags) {
+                                        for (const imgTag of imgTags) {
+                                            const uuidMatch = imgTag.match(uuidRegex);
+                                            if (uuidMatch && uuidMatch[1]) {
+                                                const uuid = uuidMatch[1];
+
+                                                const response = await REST.get(`/jsonapi/file/file/${uuid}`);
+                                                const imagesFetch = response.data.data;
+
+                                                const newImgTag = imgTag
+                                                    .replace(/src="[^"]+"/,`src="${imagesFetch.attributes.image_style_uri.content_medium}"`)
+                                                    .replace('>',' data-large-src="' + imagesFetch.attributes.image_style_uri.content_large + '">');
+                                                partieContent.texte = partieContent.texte.replace(imgTag, newImgTag);
+                                            }
+                                        }
+                                    }                                    
+                                    
                                     break;
                                 case 'chiffres_cles':
                                     const chiffresClesFetch = await this.fetchFromRelationships('field_chiffres_clefs', partie.relationships);

web/themes/custom/caravane/assets/js/vuejs/components/ImageModale.vue

@@ -15,7 +15,7 @@
             :loop="true"
             :navigation="true"
             :pagination="true"
-              :initialSlide="currentImgIndex"
+            :initialSlide="currentSlideIndex"
             :injectStyles="[`
               .swiper-button-next, .swiper-button-prev { 
                 color: white;
@@ -26,7 +26,6 @@
                 opacity: 0.8;
               }
             `]"
-              @swiperresize="(e) => setCaptions(e.target)"
           >
             <swiper-slide v-for="media in swiperContent">
               <figure class="popup-figure">
@@ -46,7 +45,7 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { nextTick, ref, watch } from 'vue';
 import { useWaitForImages } from '../composables/useWaitForImages';
 const props = defineProps({
   isOpen: Boolean,
@@ -60,16 +59,22 @@ const props = defineProps({
   }
 });
 
-const currentImgIndex = ref(0);
+const currentSlideIndex = ref(0);
 
 watch(
   () => props.isOpen,
   () => {
     toggleElementsOver(props.isOpen);
-    if (props.isOpen && props.swiperContent?.length) {
+    if (props.isOpen) {
+      nextTick(() => {
+        const swiperContainer = document.querySelector('.image-viewer-wrapper');
+        setCaptions(swiperContainer);
+      })
+      if (props.swiperContent?.length) {
         checkCurrentImage();
       }
     }
+  }
 )
 
 function toggleElementsOver(isOpen) {
@@ -93,11 +98,9 @@ function toggleElementsOver(isOpen) {
 }
 
 function checkCurrentImage() {  
-    // CHECK IF IMAGES ARE THE SAME WITH ALT
-    // IS NOT A GREAT SOLUTION
   for (let i = 0; i < props.swiperContent.length; i++) {
-      if (props.swiperContent[i].alt === props.image.alt) {
+      if (props.swiperContent[i].src.split('/').pop().split('?')[0] === props.image.src.split('/').pop().split('?')[0]) {
-        currentImgIndex.value = i;
+        currentSlideIndex.value = i;
         break;
       }
     }
@@ -106,11 +109,17 @@ function checkCurrentImage() {
 function setCaptions(container) {  
   useWaitForImages(container, () => {
     const slides = container.querySelectorAll('swiper-slide');
+    if (slides.length) {
       slides.forEach((slide) => {
         const img = slide.querySelector('img');
         const caption = slide.querySelector('figcaption');
         caption.style.width = `${img.offsetWidth}px`;
       });
+    } else {
+      const img = container.querySelector('img');
+      const caption = container.querySelector('figcaption');
+      caption.style.width = `${img.offsetWidth}px`;
+    }
   });
 }
 
@@ -155,18 +164,33 @@ function checkOutsideClick(target) {
     align-items: center;
   }
   > .simple-viewer {
-    > .img-wrapper {
+    display: flex;
-      max-width: 60%;
+    justify-content: center;
+    align-items: center;
+    > figure.img-wrapper {
+      margin-top: 3%;
+      width: 100%;
+      height: 100%;
       display: flex;
       flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 10vw;
+      box-sizing: border-box;
       > img {
-        width: 100%;
+        max-height: 100%;
+        max-width: 100%;
+        width: auto !important;
+        height: auto !important;
+        margin-bottom: -5px;
+        object-fit: contain !important;
       }
       > figcaption {
         margin: 0;
         background-color: white;
         font-size: 0.8rem; /* cf main.scss */
         padding: 0.5rem 1.5rem;
+        box-sizing: border-box;
       }
     }
   }

web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleTitreTexte.vue

@@ -12,6 +12,7 @@
         ref="partieContent"
         class="partie-content"
         v-alt
+        v-setVerticalImgs
         :style="{ '--couleur': couleur }"
         @click="handleImageClick">
     </div>
@@ -48,6 +49,18 @@ const vAlt = {
   }
 };
 
+const vSetVerticalImgs = {
+    mounted : (el) => {
+        const images = el.querySelectorAll('img');
+        images.forEach((img) => {
+            if (img.offsetHeight > img.offsetWidth) {
+                img.style.padding = '0 7vw';
+                img.nextElementSibling.style.padding = '0 7vw';
+            }
+        });
+    }
+}
+
 const partieContent = ref(null);
 
 onMounted(() => {
@@ -96,7 +109,7 @@ const {
 const handleImageClick = (event) => {
   const img = event.target;
   if (img.tagName === 'IMG') {
-    openImageModale(img.src, img.alt);
+    openImageModale(img.dataset.largeSrc, img.alt);
   }
 };
 </script>
@@ -131,6 +144,7 @@ const handleImageClick = (event) => {
 
 .partie-content {
     img {
+        box-sizing: border-box;
         margin-top: 2rem;
         cursor: pointer;
         transition: transform 0.3s ease-out;