matomo

composer.json

@@ -28,6 +28,8 @@
         "drupal/geocoder": "^4.24",
         "drupal/geofield": "^1.59",
         "drupal/image_field_caption": "^2.0",
+        "drupal/imagestyleflush": "^1.0",
+        "drupal/jsonapi_image_styles": "^3.0",
         "drupal/jsonapi_views": "^1.1",
         "drupal/leaflet": "^10.2",
         "drupal/leaflet_more_maps": "^2.2",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "06879b846031f4f705cc93ea8f4f2f7d",
+    "content-hash": "6aaebccef7482e701328a3c4349f9ac6",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -5121,6 +5121,57 @@
                 "source": "https://git.drupalcode.org/project/imagemagick"
             }
         },
+        {
+            "name": "drupal/imagestyleflush",
+            "version": "1.0.0",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/imagestyleflush.git",
+                "reference": "1.0.0"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://ftp.drupal.org/files/projects/imagestyleflush-1.0.0.zip",
+                "reference": "1.0.0",
+                "shasum": "6493ae4b662131f291bbd02b7dcf46f27475ff8c"
+            },
+            "require": {
+                "drupal/core": "^9 || ^10"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "drupal": {
+                    "version": "1.0.0",
+                    "datestamp": "1730107375",
+                    "security-coverage": {
+                        "status": "covered",
+                        "message": "Covered by Drupal's security advisory policy"
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "dcimorra",
+                    "homepage": "https://www.drupal.org/user/3623423"
+                },
+                {
+                    "name": "hargobind",
+                    "homepage": "https://www.drupal.org/user/216765"
+                },
+                {
+                    "name": "to.stepan.kuzmin@gmail.com",
+                    "homepage": "https://www.drupal.org/user/858626"
+                }
+            ],
+            "homepage": "https://www.drupal.org/project/imagestyleflush",
+            "support": {
+                "source": "https://git.drupalcode.org/project/imagestyleflush"
+            }
+        },
         {
             "name": "drupal/inline_entity_form",
             "version": "1.0.0-rc17",
@@ -5634,6 +5685,71 @@
                 "source": "https://git.drupalcode.org/project/js_cookie"
             }
         },
+        {
+            "name": "drupal/jsonapi_image_styles",
+            "version": "3.0.2",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/jsonapi_image_styles.git",
+                "reference": "3.0.2"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://ftp.drupal.org/files/projects/jsonapi_image_styles-3.0.2.zip",
+                "reference": "3.0.2",
+                "shasum": "63d52eb96eb4b8df241ca9b1e1fbb06707ba8a6c"
+            },
+            "require": {
+                "drupal/core": "^9 || ^10 || ^11"
+            },
+            "require-dev": {
+                "drupal/coder": "^8.3",
+                "phpcompatibility/php-compatibility": "10.x-dev"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "drupal": {
+                    "version": "3.0.2",
+                    "datestamp": "1727189318",
+                    "security-coverage": {
+                        "status": "covered",
+                        "message": "Covered by Drupal's security advisory policy"
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "Alona O'neill",
+                    "homepage": "https://www.drupal.org/u/alonaoneill"
+                },
+                {
+                    "name": "Timo Kirkkala",
+                    "homepage": "https://www.drupal.org/u/kirkkala"
+                },
+                {
+                    "name": "Jeffrey Bertoen",
+                    "homepage": "https://www.drupal.org/u/jefuri"
+                },
+                {
+                    "name": "Chrsitopher C. Wells (wells)",
+                    "homepage": "https://www.drupal.org/user/2452278",
+                    "email": "drupal.org@chris-wells.net"
+                }
+            ],
+            "description": "JSON:API Image Styles provides a means to expose image styles to JSON:API.",
+            "homepage": "https://www.drupal.org/project/jsonapi_image_styles",
+            "keywords": [
+                "Drupal"
+            ],
+            "support": {
+                "source": "https://git.drupalcode.org/project/jsonapi_image_styles",
+                "issues": "https://www.drupal.org/project/issues/jsonapi_image_styles"
+            }
+        },
         {
             "name": "drupal/jsonapi_resources",
             "version": "1.2.0",

config/sync/core.extension.yml

@@ -4,6 +4,7 @@ module:
   actions_permissions: 0
   address: 0
   admin_toolbar: 0
+  admin_toolbar_links_access_filter: 0
   advanced_text_formatter: 0
   audiofield: 0
   autocomplete_deluxe: 0
@@ -54,6 +55,7 @@ module:
   file: 0
   filter: 0
   filter_perms: 0
+  flush_single_image: 0
   footnotes: 0
   formatter_suite: 0
   geocoder: 0
@@ -67,6 +69,7 @@ module:
   image_field_caption: 0
   inline_entity_form: 0
   jsonapi: 0
+  jsonapi_image_styles: 0
   jsonapi_resources: 0
   jsonapi_views: 0
   language: 0
@@ -82,6 +85,7 @@ module:
   linkit: 0
   locale: 0
   maillog: 0
+  matomo: 0
   maxlength: 0
   media: 0
   menu_block: 0

config/sync/image.style.content_large.yml

@@ -0,0 +1,15 @@
+uuid: 51021857-f408-4a97-96ac-95916834465c
+langcode: fr
+status: true
+dependencies: {  }
+name: content_large
+label: content-large
+effects:
+  9e838862-ccce-4fff-8f63-836c9dbf3da8:
+    uuid: 9e838862-ccce-4fff-8f63-836c9dbf3da8
+    id: image_scale
+    weight: 1
+    data:
+      width: 2048
+      height: null
+      upscale: false

config/sync/image.style.content_medium.yml

@@ -0,0 +1,15 @@
+uuid: 39e71e90-a87c-43de-b679-ba663dcb1e9a
+langcode: fr
+status: true
+dependencies: {  }
+name: content_medium
+label: content-medium
+effects:
+  9430838c-1da4-412b-ade1-d6e02ab9ecd2:
+    uuid: 9430838c-1da4-412b-ade1-d6e02ab9ecd2
+    id: image_scale
+    weight: 1
+    data:
+      width: 1024
+      height: null
+      upscale: false

config/sync/image.style.content_small.yml

@@ -0,0 +1,15 @@
+uuid: f77750f4-4cb6-4cdb-9796-4acfa169105a
+langcode: fr
+status: true
+dependencies: {  }
+name: content_small
+label: content-small
+effects:
+  d2acf93c-5264-4ce5-a11c-bfaeaa7a7279:
+    uuid: d2acf93c-5264-4ce5-a11c-bfaeaa7a7279
+    id: image_scale
+    weight: 1
+    data:
+      width: 512
+      height: null
+      upscale: false

config/sync/image.style.content_x_large.yml

@@ -0,0 +1,15 @@
+uuid: fd11611a-e6eb-4843-b104-982932b90392
+langcode: fr
+status: true
+dependencies: {  }
+name: content_x_large
+label: 'content x-large'
+effects:
+  7bc2e7f9-1c41-4d60-85b3-16a795691e3e:
+    uuid: 7bc2e7f9-1c41-4d60-85b3-16a795691e3e
+    id: image_scale
+    weight: 1
+    data:
+      width: 2500
+      height: null
+      upscale: false

config/sync/jsonapi_image_styles.settings.yml

@@ -0,0 +1,12 @@
+_core:
+  default_config_hash: wOZVD8Wsf3NSSsAU36-FVkO7zaC4TgH_Buj0Up6vHYQ
+image_styles:
+  content_large: content_large
+  content_medium: content_medium
+  content_small: content_small
+  content_x_large: content_x_large
+  large: '0'
+  linkit_result_thumbnail: '0'
+  medium: '0'
+  thumbnail: '0'
+  wide: '0'

config/sync/matomo.settings.yml

@@ -0,0 +1,59 @@
+_core:
+  default_config_hash: mKwnhF-0ryfftZZP6jyqW8q9MEo9glyRkvRzSddrc0k
+site_id: '9'
+url_http: 'http://analytics.figureslibres.io/'
+url_https: 'https://analytics.figureslibres.io/'
+domain_mode: 0
+visibility:
+  request_path_mode: 0
+  request_path_pages: "/admin\r\n/admin/*\r\n/batch\r\n/node/add*\r\n/node/*/*\r\n/user/*/*"
+  user_role_mode: 0
+  user_role_roles: {  }
+  user_account_mode: 1
+track:
+  mailto: true
+  files: true
+  files_extensions: '7z|aac|arc|arj|asf|asx|avi|bin|csv|doc(x|m)?|dot(x|m)?|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt(x|m)?|pot(x|m)?|pps(x|m)?|ppam|sld(x|m)?|thmx|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls(x|m|b)?|xlt(x|m)|xlam|xml|z|zip'
+  colorbox: true
+  userid: false
+  messages: {  }
+  site_search: false
+privacy:
+  donottrack: true
+  disablecookies: false
+custom:
+  variable:
+    1:
+      slot: 1
+      name: ''
+      value: ''
+      scope: visit
+    2:
+      slot: 2
+      name: ''
+      value: ''
+      scope: visit
+    3:
+      slot: 3
+      name: ''
+      value: ''
+      scope: visit
+    4:
+      slot: 4
+      name: ''
+      value: ''
+      scope: visit
+    5:
+      slot: 5
+      name: ''
+      value: ''
+      scope: visit
+codesnippet:
+  before: ''
+  after: ''
+translation_set: false
+disable_tracking: false
+cache: false
+page_title_hierarchy: false
+page_title_hierarchy_exclude_home: true
+status_codes_disabled: {  }

config/sync/user.role.authenticated.yml

@@ -10,6 +10,7 @@ dependencies:
   module:
     - config_pages
     - filter
+    - matomo
     - media
     - rest
     - system
@@ -21,6 +22,7 @@ weight: 1
 is_admin: false
 permissions:
   - 'access content'
+  - 'opt-in or out of matomo tracking'
   - 'restful get rest_menu_item'
   - 'use text format footnote'
   - 'use text format simple'

config/sync/user.role.editor.yml

@@ -49,6 +49,7 @@ permissions:
   - 'edit any partenaire content'
   - 'edit any static content'
   - 'edit intro_gouvernance config page entity'
+  - 'edit intro_partenaire config page entity'
   - 'edit own etape content'
   - 'edit own gallerie_photo content'
   - 'edit own partenaire content'

config/sync/views.settings.yml

@@ -1,6 +1,7 @@
 _core:
   default_config_hash: RzCmzrx-T-Sy8JX5OmtGKV_V_MxRlrxRkrI9c9igTHI
-display_extenders: {  }
+display_extenders:
+  - matomo
 sql_signature: false
 ui:
   show:

web/themes/custom/caravane/assets/js/libs/leaflet.edgebuffer.js

@@ -0,0 +1,23 @@
+export default function (L) {
+    L.EdgeBuffer = {
+      previousMethods: {
+        getTiledPixelBounds: L.GridLayer.prototype._getTiledPixelBounds,
+      }
+    };
+  
+    L.GridLayer.include({
+      _getTiledPixelBounds: function (center, zoom, tileZoom) {
+        var pixelBounds = L.EdgeBuffer.previousMethods.getTiledPixelBounds.call(this, center, zoom, tileZoom);
+  
+        var edgeBufferTiles = this.options.edgeBufferTiles ?? 1;
+        if (edgeBufferTiles > 0) {
+          var pixelEdgeBuffer = L.GridLayer.prototype.getTileSize.call(this).multiplyBy(edgeBufferTiles);
+          pixelBounds = new L.Bounds(pixelBounds.min.subtract(pixelEdgeBuffer), pixelBounds.max.add(pixelEdgeBuffer));
+        }
+        return pixelBounds;
+      }
+    });
+  
+    return L;
+  }
+  

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

@@ -2,7 +2,9 @@ import { initVueContentModale } from './utils/vue-setup';
 import { processClickableElements } from './utils/process-clickable-elements';
 import { handleReactiveness, setMenuToggle, setHamburgerWhenLogged } from './utils/layout-setup';
 import { initFirstLoadRouting, handleClickableElements, handleBrowserNavigation } from './utils/handle-navigation';
-import { setupMapStore } from './utils/map-setup';
+import { setupMapStore, preloadEtapesTiles } from './utils/map-setup';
+
+import initEdgeBuffer from './libs/leaflet.edgebuffer';
 
 import '../scss/main.scss'
 
@@ -11,8 +13,8 @@ import '../scss/main.scss'
 (function ($, Drupal, drupalSettings) {
     const CaravaneTheme = function () {
         function init () {
-            console.log('DrupalSettings', drupalSettings);
+            // console.log('DrupalSettings', drupalSettings);
-
+            
             const baseUrl = window.location.protocol + "//" + window.location.host;
             const siteName = document.querySelector('#site_name').innerText;
             const { store, mapStore, router, route } = initVueContentModale();
@@ -25,7 +27,13 @@ import '../scss/main.scss'
 
             Drupal.behaviors.customLeafletInteraction = {
                 attach: function(context, settings) {
-                    $(context).on('leafletMapInit', function (e, settings, map, mapid, markers) {
+
+                    initEdgeBuffer(L);
+                    let mapSettings = settings.leaflet[Object.keys(settings.leaflet)[0]].map;                    
+                    mapSettings.layers.layer.edgeBufferTiles = 1;
+                    // mapSettings.settings.fadeAnimation = false;
+                    
+                    $(context).on('leafletMapInit', function (e, settings, map, mapid, markers) {                        
                         const {
                             etapeListLinks,
                             generalListLinks,
@@ -36,6 +44,8 @@ import '../scss/main.scss'
 
                         setupMapStore(mapStore, map, settings);
 
+                        // preloadEtapesTiles(mapStore, map);
+
                         initFirstLoadRouting(store, router, baseUrl, siteName);
 
                         handleClickableElements(clickableElements, store, router, baseUrl, siteName, mapStore);

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

@@ -18,6 +18,8 @@ export const useContentStore = defineStore('content', {
             next: {},
             vignette: {},
             parties: [],
+            liens: [],
+            pieces_jointes: [],
 
             intro: '',
             partenaires: [],
@@ -28,6 +30,7 @@ export const useContentStore = defineStore('content', {
     }),
     actions: {
         async fetchContentData(path) {
+            console.log('start fetch content');
             this.resetStore(false);
             const contentTypes = [ 'etape', 'static', 'gouvernance', 'partenaire' ];
             try {
@@ -42,6 +45,8 @@ export const useContentStore = defineStore('content', {
                         );
                     
                         if (content) {
+                            console.log('content found');
+                            
                             return {
                                 contentType: type,
                                 rawContent: content,
@@ -60,17 +65,20 @@ export const useContentStore = defineStore('content', {
                         }
                     }
                     return null;
-                };
+                };                
-
-                const { contentType, rawContent } = await findContentByPath(contentTypes, path);
                 
+                const { contentType, rawContent } = await findContentByPath(contentTypes, path);
                 this.contentType = contentType;
 
                 // console.log(`current type: ${contentType}`);
 
+                // TO DEBUG
+                const cleanContentMethod = 'original';
                 
-
+                if (this.contentType !== 'gouvernance' && this.contentType !== 'partenaire'
-                if (this.contentType !== 'gouvernance' && this.contentType !== 'partenaire') {                    
+                    && cleanContentMethod === 'original'
+                ) {
+                    console.time('etape content processing');
                     // pageTitle
                     for (let tag of rawContent.attributes.metatag) {
                         if (tag.tag === "meta") {
@@ -85,11 +93,41 @@ export const useContentStore = defineStore('content', {
                     const vignetteFetch = await this.fetchFromRelationships('field_vignette', rawContent.relationships);                    
                     if (vignetteFetch) {
                         this.content.vignette = {
-                            url: vignetteFetch.attributes.uri.url,
+                            url: {
+                                original: vignetteFetch.attributes.uri.url,
+                                small: vignetteFetch.attributes.image_style_uri.content_small,
+                                medium: vignetteFetch.attributes.image_style_uri.content_medium,
+                                large: vignetteFetch.attributes.image_style_uri.content_large,
+                            },
                             alt: rawContent.relationships.field_vignette.data.meta.alt
                         };
                     }
 
+                    // liens
+                    if (rawContent.attributes.field_liens.length) {
+                        this.content.liens = [];
+                        for (let lien of rawContent.attributes.field_liens) {
+                            this.content.liens.push({
+                                title: lien.title,
+                                url: lien.uri,
+                            });
+                        }                            
+                    }
+                    // pièces jointes
+                    if (rawContent.relationships.field_pieces_jointes.data.length) {
+                        this.content.pieces_jointes = [];
+                        for (let pieceJointe of rawContent.relationships.field_pieces_jointes.data) {
+                            if (pieceJointe.meta.display) {
+                                const uuid = pieceJointe.id;
+                                const response = await REST.get(`/jsonapi/file/file/${uuid}`);
+                                this.content.pieces_jointes.push({
+                                    title: pieceJointe.meta.description,
+                                    url: response.data.data.attributes.uri.url,
+                                });
+                            }
+                        }
+                    }
+
                     if (contentType === 'etape') {
                         // coordinates
                         this.content.coordinates = {
@@ -115,7 +153,8 @@ export const useContentStore = defineStore('content', {
                     // parties
                     const fieldParties = contentType === 'etape' ? 'field_parties' : 'field_parties_static';
                     const partiesFetch = await this.fetchFromRelationships(fieldParties, rawContent.relationships);
-
+                    console.log(this.content);
+                    console.timeEnd('etape content processing');
                     if (partiesFetch) {
                         this.content.parties = [];
                         for (let partie of partiesFetch) {
@@ -129,14 +168,47 @@ export const useContentStore = defineStore('content', {
                                     const carteSensibleFetch = await this.fetchFromRelationships('field_image_carte', partie.relationships);
                                     if (carteSensibleFetch) {
                                         partieContent.carteSensible = {
-                                            url: carteSensibleFetch.attributes.uri.url,
+                                            url: {
+                                                original: carteSensibleFetch.attributes.uri.url,
+                                                small: carteSensibleFetch.attributes.image_style_uri.content_small,
+                                                medium: carteSensibleFetch.attributes.image_style_uri.content_medium,
+                                                large: carteSensibleFetch.attributes.image_style_uri.content_large,
+                                                xlarge: carteSensibleFetch.attributes.image_style_uri.content_x_large,
+                                            },
                                             alt: partie.relationships.field_image_carte.data.meta.alt,
                                         };
                                     }
                                     break;
                                 case 'titre_texte':
+                                    console.time('get images from text original')
                                     partieContent.titre = partie.attributes.field_titre;
-                                    partieContent.texte = partie.attributes.field_texte.value;
+                                    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);
+                                            }
+                                        }
+                                    }
+                                    
+                                    
+                                    console.timeEnd('get images from text original')
                                     break;
                                 case 'chiffres_cles':
                                     const chiffresClesFetch = await this.fetchFromRelationships('field_chiffres_clefs', partie.relationships);
@@ -152,18 +224,26 @@ export const useContentStore = defineStore('content', {
                                     break;
                                 case 'diaporama':
                                     const diaporamaFetch = await this.fetchFromRelationships('field_diaporama', partie.relationships);
+                                    
                                     if (diaporamaFetch) {
                                         partieContent.diaporama = [];
                                         for (let [index, image] of diaporamaFetch.entries()) {
                                             partieContent.diaporama.push({
-                                                url: image.attributes.uri.url,
+                                                url: {
+                                                    original: image.attributes.uri.url,
+                                                    small: image.attributes.image_style_uri.content_small,
+                                                    medium: image.attributes.image_style_uri.content_medium,
+                                                    large: image.attributes.image_style_uri.content_large,
+                                                },
                                                 alt: partie.relationships.field_diaporama.data[index].meta.alt,
-                                            });
+                                            });                                           
                                         }
+                                        
                                     }
                                     break;
                                 case 'entretien':
                                     partieContent.entretien = {};
+                                    partieContent.entretien.titre = partie.attributes.field_titre;
                                     const personnesFetch = await this.fetchFromRelationships('field_personne_s', partie.relationships);
                                     const questionsReponsesFetch = await this.fetchFromRelationships('field_questions_reponses', partie.relationships);
                                     if (personnesFetch && questionsReponsesFetch) {
@@ -172,7 +252,12 @@ export const useContentStore = defineStore('content', {
                                             const portraitFetch = await this.fetchFromRelationships('field_portrait', personne.relationships);
                                             if (portraitFetch) {
                                                 partieContent.entretien.personnes.push({
-                                                    portrait: portraitFetch.attributes.uri.url,
+                                                    portrait: {
+                                                        original: portraitFetch.attributes.uri.url,
+                                                        small: portraitFetch.attributes.image_style_uri.content_small,
+                                                        medium: portraitFetch.attributes.image_style_uri.content_medium,
+                                                        large: portraitFetch.attributes.image_style_uri.content_large,
+                                                    },
                                                     alt: personne.relationships.field_portrait.data.meta.alt,
                                                     description: personne.attributes.field_description,
                                                 });
@@ -202,6 +287,153 @@ export const useContentStore = defineStore('content', {
                             this.content.parties.push(partieContent);
                         }
                     }
+                    console.log('content cleaned');
+                } else if (this.contentType !== 'gouvernance' && this.contentType !== 'partenaire'
+                    && cleanContentMethod === 'promise'
+                ) {
+
+
+
+
+                    console.time('etape content promise processing');
+
+
+                    const vignettePromise = this.fetchFromRelationships('field_vignette', rawContent.relationships);
+                    const partiesPromise = this.fetchFromRelationships('field_parties', rawContent.relationships);
+
+                    const previousEtapePromise = contentType === 'etape'? this.getRelatedEtape('previous', path) : null;
+                    const nextEtapePromise = contentType === 'etape' ? this.getRelatedEtape('next', path) : null;
+
+                    if (contentType === 'etape') {
+                        // coordinates
+                        this.content.coordinates = {
+                            lat: rawContent.attributes.field_geofield.lat,
+                            lon: rawContent.attributes.field_geofield.lon,
+                        };
+                        // adresse
+                        this.content.adresse = rawContent.attributes.field_adresse;
+                        // étape number
+                        this.content.etape_number = rawContent.attributes.field_arret_numero;
+                        // couleur
+                        this.content.couleur = rawContent.attributes.field_couleur;
+                        // dates
+                        this.content.dates = {
+                            start: this.getCleanDate(rawContent.attributes.field_dates.value),
+                            end: this.getCleanDate(rawContent.attributes.field_dates.end_value),
+                        }                        
+                    }
+
+                    // pageTitle
+                    for (let tag of rawContent.attributes.metatag) {
+                        if (tag.tag === "meta") {
+                            this.pageTitle = tag.attributes.content;
+                            break;
+                        }
+                    }
+
+                    // contentTitle
+                    this.content.contentTitle = rawContent.attributes.title;
+
+                    const [vignetteData, partiesData] = await Promise.all([vignettePromise, partiesPromise]);
+
+                    if (vignetteData) {
+                        this.content.vignette = {
+                            url: {
+                                original: vignetteData.attributes.uri.url,
+                                small: vignetteData.attributes.image_style_uri.content_small,
+                                medium: vignetteData.attributes.image_style_uri.content_medium,
+                                large: vignetteData.attributes.image_style_uri.content_large,
+                            },
+                            alt: rawContent.relationships.field_vignette.data.meta.alt
+                        };
+                    }
+
+                    if (partiesData) {
+                        const partiesPromises = partiesData.map(async (partie) => {
+                            const partieType = partie.type.replace(/^paragraph--/, "");
+                            let partieContent = { type: partieType };
+
+                            switch(partieType) {
+                                case 'carte_sensible':
+                                    const carteSensiblePromise = this.fetchFromRelationships('field_image_carte', partie.relationships);
+
+                                    const carteSensibleData = await carteSensiblePromise;
+                                    if (carteSensibleData) {
+                                        partieContent.carteSensible = {
+                                            url: {
+                                                original: carteSensibleData.attributes.uri.url,
+                                                small: carteSensibleData.attributes.image_style_uri.content_small,
+                                                medium: carteSensibleData.attributes.image_style_uri.content_medium,
+                                                large: carteSensibleData.attributes.image_style_uri.content_large,
+                                                xlarge: carteSensibleData.attributes.image_style_uri.content_x_large,
+                                            },
+                                            alt: partie.relationships.field_image_carte.data.meta.alt,
+                                        };
+                                    }
+                                    
+                                    break;
+                                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) {
+                                        const imagePromises = imgTags.map(imgTag => {
+                                            const uuidMatch = imgTag.match(uuidRegex);
+                                            if (uuidMatch && uuidMatch[1]) {
+                                                return REST.get(`/jsonapi/file/file/${uuidMatch[1]}`)
+                                                    .then(response => ({
+                                                        originalTag: imgTag,
+                                                        imageData: response.data.data
+                                                    }));
+                                            }
+                                        });
+
+                                        const images = await Promise.all(imagePromises);
+                                        images.forEach(({originalTag, imageData}) => {
+                                            const newImgTag = originalTag
+                                                .replace(/src="[^"]+"/,`src="${imageData.attributes.image_style_uri.content_medium}"`)
+                                                .replace('>',' data-large-src="' + imageData.attributes.image_style_uri.content_large + '">');
+                                            partieContent.texte = partieContent.texte.replace(originalTag, newImgTag);
+                                        });
+                                    }
+                                    break;
+                                case 'chiffres_cles':
+                                    const chiffresClesFetch = await this.fetchFromRelationships('field_chiffres_clefs', partie.relationships);
+                                    if (chiffresClesFetch) {
+                                        partieContent.chiffresCles = [];
+                                        for (let chiffre of chiffresClesFetch) {
+                                            partieContent.chiffresCles.push({
+                                                chiffre: chiffre.attributes.field_chiffre,
+                                                description: chiffre.attributes.field_description,
+                                            });
+                                        }
+                                    }
+                                    break;
+                                case 'diaporama':
+                                    break;
+                                case 'entretien':
+                                    break;
+                                case 'exergue':
+                                    break;
+                                case 'video':
+                                    break;
+                            }
+                            return partieContent;
+                        });
+
+                        this.content.parties = await Promise.all(partiesPromises);
+                    }
+
+                    // related étapes
+                    if (contentType === 'etape') await Promise.all([previousEtapePromise, nextEtapePromise]);
+
+                    console.log(this.content);
+                    console.timeEnd('etape content promise processing');
                 } else {
                     // pages gouvernance (contact) et partenaire
                     // ont plusieurs items par pages
@@ -212,7 +444,7 @@ export const useContentStore = defineStore('content', {
                         `${introContent.attributes.field_titre} ${introContent.attributes.metatag.find(tag => tag.tag === "meta")?.attributes.content}`;
 
                     this.content.contentTitle = introContent.attributes.field_titre;
-                    this.content.intro = introContent.attributes.field_intro.value;
+                    this.content.intro = introContent.attributes.field_intro?.value;
 
                     const multiItemPageArray = [];
 
@@ -226,7 +458,12 @@ export const useContentStore = defineStore('content', {
                                 weight: item.attributes.field_poid,
                                 link_url: item.attributes.field_lien.uri ,
                                 logo_alt: item.relationships.field_logo.data.meta.alt,
-                                logo_url: logoFetch.data.data.attributes.uri.url,
+                                logo_url: {
+                                    original: logoFetch.data.data.attributes.uri.url,
+                                    small: logoFetch.data.data.attributes.image_style_uri.content_small,
+                                    medium: logoFetch.data.data.attributes.image_style_uri.content_medium,
+                                    large: logoFetch.data.data.attributes.image_style_uri.content_large,
+                                },
                             });
                         }
                     } else if (this.contentType === 'gouvernance') {
@@ -240,7 +477,12 @@ export const useContentStore = defineStore('content', {
                                     prenom: personne.attributes.field_prenom,
                                     description: personne.attributes.field_description,
                                     photo_meta: personne.relationships.field_portrait.data?.meta.alt,
-                                    photo_url: portraitFetch.data.data?.attributes.uri.url,
+                                    photo_url: portraitFetch.data.data ? {
+                                        original: portraitFetch.data.data.attributes.uri.url,
+                                        small: portraitFetch.data.data.attributes.image_style_uri.content_small,
+                                        medium: portraitFetch.data.data.attributes.image_style_uri.content_medium,
+                                        large: portraitFetch.data.data.attributes.image_style_uri.content_large,
+                                    } : null
                                 });
                             }
                             multiItemPageArray.push({
@@ -253,7 +495,7 @@ export const useContentStore = defineStore('content', {
 
                     this.content[`${this.contentType}s`] = multiItemPageArray;
                     
-                    console.log(this.content);
+                    // console.log(this.content);
                 }
             } catch (error) {
                 this.error = 'Failed to fetch data';
@@ -284,7 +526,12 @@ export const useContentStore = defineStore('content', {
                                 end: this.getCleanDate(relatedEtapeData.attributes.field_dates.end_value),
                             },
                             vignette: {
-                                url: vignetteFetch.data.data.attributes.uri.url,
+                                url: {
+                                    original: vignetteFetch.data.data.attributes.uri.url,
+                                    small: vignetteFetch.data.data.attributes.image_style_uri.content_small,
+                                    medium: vignetteFetch.data.data.attributes.image_style_uri.content_medium,
+                                    large: vignetteFetch.data.data.attributes.image_style_uri.content_large,
+                                },
                                 alt: relatedEtapeData.relationships.field_vignette.data.meta.alt,
                             },
                         }
@@ -303,18 +550,61 @@ export const useContentStore = defineStore('content', {
                 }
             }
         },
+        async getRelatedEtape(direction, path) {
+            const getRelatedEtapeContent = (relatedEtapeData) => {
+                if (relatedEtapeData) {
+                    return this.fetchFromRelationships('field_vignette', relatedEtapeData.relationships)
+                        .then(vignetteFetch => {
+                            if (vignetteFetch) {
+                                this.content[direction] = {
+                                    url: relatedEtapeData.attributes.metatag.find(tag => tag.tag === "link")?.attributes.href,
+                                    couleur: relatedEtapeData.attributes.field_couleur,
+                                    title: relatedEtapeData.attributes.title,
+                                    postalCode: relatedEtapeData.attributes.field_adresse.postal_code,
+                                    dates: {
+                                        start: this.getCleanDate(relatedEtapeData.attributes.field_dates.value),
+                                        end: this.getCleanDate(relatedEtapeData.attributes.field_dates.end_value),
+                                    },
+                                    vignette: {
+                                        url: {
+                                            original: vignetteFetch.attributes.uri.url,
+                                            small: vignetteFetch.attributes.image_style_uri.content_small,
+                                            medium: vignetteFetch.attributes.image_style_uri.content_medium,
+                                            large: vignetteFetch.attributes.image_style_uri.content_large,
+                                        },
+                                        alt: relatedEtapeData.relationships.field_vignette.data.meta.alt,
+                                    },
+                                }
+                            }
+                        });
+                }
+            }
+        
+            const allEtapesPromise = REST.get('/jsonapi/views/etapes/block_1/');
+            
+            return allEtapesPromise.then(allEtapesData => {
+                for (let [index, etape] of allEtapesData.data.data.entries()) {
+                    if (etape.attributes.metatag.some(tag => 
+                        tag.tag === "link" && tag.attributes.href === path
+                    )) {
+                        const relatedEtapeIndex = direction === 'next' ? index + 1 : index - 1;
+                        return getRelatedEtapeContent(allEtapesData.data.data[relatedEtapeIndex]);
+                    }
+                }
+            });
+        },
         async fetchFromRelationships(field, relationships) {
             if (relationships[field].links) {
-              try {
                 const contentLink = relationships[field].links.related.href;
-                const contentFetch = await REST.get(contentLink);               
+                return REST.get(contentLink)
-                return contentFetch.data.data;
+                    .then(contentFetch => contentFetch.data.data)
-              } catch (error) {
+                    .catch(error => {
-                this.error = 'Failed to fetch data';
+                        this.error = 'Failed to fetch data';
-                console.error('Issue with getNodeData', error);
+                        console.error('Issue with getNodeData', error);
-              }
+                    });
             }
-        },
+            return null;
+        },        
         resetStore(forFrontDisplay) {
             this.contentType = '';
             this.pageTitle = '';

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

@@ -75,12 +75,12 @@ export const useLayoutStore = defineStore('layout', {
               menuTitle.classList.remove('open');
               menuBurger.classList.remove('open');
               menuH2.classList.remove('open');
-              setTimeout(() => {
+              if (this.isHamburgerMenuOpen) {
-                if (this.isHamburgerMenuOpen) {
+                setTimeout(() => {
-                    menuContainer.style.display = 'none';
+                  menuContainer.style.display = 'none';
-                }
+                }, 300);
-              }, 300);
+                this.isHamburgerMenuOpen = false;
-              this.isHamburgerMenuOpen = false;
+              }
             }
           });
         },

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

@@ -17,18 +17,18 @@ export const useMapStore = defineStore('mapState', {
     }),
     actions: {
         zoomToPlace(lat, long) {
-            if (useLayoutStore().isDesktop) long = long - 0.03;
+            if (useLayoutStore().isDesktop) long = long - 0.03;           
             this.map.flyTo(
               [lat, long],
               this.maxZoom,
-              { animate: this.animationsAreEnabled, animationDuration: this.animationDuration });
+              { animate: this.animationsAreEnabled, duration: this.animationDuration });
             this.currentZoom = this.maxZoom;
         },
-        resetMap() {
+        resetMap(animate = this.animationsAreEnabled, duration = this.animationDuration) {
             this.map.flyTo(
               this.defaultMapCenter,
               useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile,
-              { animate: this.animationsAreEnabled, animationDuration: this.animationDuration });
+              { animate, duration });
             this.currentZoom = useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile;
         },
         lockMap() {

web/themes/custom/caravane/assets/js/utils/handle-navigation.js

@@ -23,6 +23,8 @@ export function handleClickableElements(clickableElements, store, router, baseUr
         if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
 
         link.onclick = async function (e) {
+            console.log('click on link, route push');
+            
             router.push(href);
             if (href !== window.location.pathname) {
               pageChange(href, store, siteName, mapStore, baseUrl);
@@ -38,6 +40,7 @@ export async function handleBrowserNavigation(store, baseUrl, siteName, mapStore
 }
 
 export async function pageChange(href, store, siteName, mapStore, baseUrl) {
+  console.log('trigger page change');
   if (href === '/') {
       store.resetStore(true);
       document.title = siteName;
@@ -51,5 +54,6 @@ export async function pageChange(href, store, siteName, mapStore, baseUrl) {
   setActiveNavItem(store.contentType, href);
 
   const listeEtape = document.querySelector('#etapes-liste');
-  if (!useLayoutStore().isDesktop) useLayoutStore().collapseEtapeListe(listeEtape);
+  const animationToggle = document.querySelector('#animation-toggle');
+  if (!useLayoutStore().isDesktop) useLayoutStore().collapseEtapeListe(listeEtape, animationToggle);
 }

web/themes/custom/caravane/assets/js/utils/map-setup.js

@@ -1,4 +1,5 @@
 import { useLayoutStore } from '../stores/layout';
+import REST from '../api/rest-axios';
 
 export function setupMapStore(mapStore, map, settings) {
     mapStore.map = map;
@@ -8,4 +9,58 @@ export function setupMapStore(mapStore, map, settings) {
     mapStore.defaultZoomMobile = settings.settings.minZoom - 1;
     mapStore.map.flyTo([mapStore.defaultMapCenter.lat, mapStore.defaultMapCenter.lng], useLayoutStore().isDesktop ? mapStore.defaultZoomDesktop : mapStore.defaultZoomMobile);
     mapStore.checkReducedMotion();
-}
+}
+
+// not working
+// may or may not rework on it later
+export async function preloadEtapesTiles(mapStore, map) {
+    function waitForEvent(el, eventName) {
+        return new Promise((resolve) => {
+            el.once(eventName, resolve);
+        });
+    }
+
+    const tilesSource = map._layers.layer._url;
+
+    const response = await REST.get(`/jsonapi/node/etape/`);
+
+    const defaultZoom = useLayoutStore().isDesktop ? mapStore.defaultZoomDesktop : mapStore.defaultZoomMobile;
+
+    let tilesCached = new Set();
+
+    for (const etape of response.data.data) {
+        const etapeCoords = {
+            title: etape.attributes.title,
+            lat: etape.attributes.field_geofield.lat,
+            lng: etape.attributes.field_geofield.lon,
+        };
+        
+        for (let zoom = defaultZoom; zoom <= mapStore.maxZoom; zoom++) {            
+            map.flyTo([etapeCoords.lat, etapeCoords.lng], zoom, { animate: true, duration: 0.001 });
+            await waitForEvent(map, 'moveend zoomend');
+            
+            let allTilesCached = Object.keys(map._layers.layer._tiles).every(tile => tilesCached.has(tile));
+
+            const tileLayer = Object.values(map._layers).find(layer => layer instanceof L.TileLayer);
+
+            if (!allTilesCached && tileLayer._loading) {
+                await waitForEvent(tileLayer, 'load');
+                Object.keys(map._layers.layer._tiles).forEach(tile => {
+                    if (!tilesCached.has(tile)) {
+/*                         const tileObject = map._layers.layer._tiles[tile];
+                        let img = new Image();
+                        const url = tilesSource
+                                    .replace('{z}', tileObject.coords.z)
+                                    .replace('{x}', tileObject.coords.x)
+                                    .replace('{y}', tileObject.coords.y);
+                        img.src = url; */
+                        tilesCached.add(tile)
+                    }
+                });
+            }
+
+        }
+    }
+    // console.log(tilesCached);
+    mapStore.resetMap(false, 0);
+}

web/themes/custom/caravane/assets/js/vuejs/Modale.vue

@@ -51,11 +51,15 @@
                         v-if="contentType === 'partenaire'"
                         :content="content" />
                 </main>
+                <PiecesJointes
+                  :content="content"
+                  :couleur="content.couleur || brandColor"
+                  />
                 <ModaleFooter
-                    :contentType="contentType"
+                :contentType="contentType"
-                    :content="content"
+                :content="content"
-                    :couleur="content.couleur || brandColor"
+                :couleur="content.couleur || brandColor"
-                    />
+                />
             </div>
         </div>
     </Transition>
@@ -72,6 +76,7 @@ import ModaleHeader from './components/ModaleHeader.vue';
 import ModaleFooter from './components/ModaleFooter.vue';
 import EquipeContent from './components/EquipeContent.vue';
 import PartenairesContent from './components/PartenairesContent.vue';
+import PiecesJointes from './components/PiecesJointes.vue';
 
 import ModaleCarteSensible from './components/parties/ModaleCarteSensible.vue';
 import ModaleTitreTexte from './components/parties/ModaleTitreTexte.vue';
@@ -113,68 +118,70 @@ const handleMapMovement = () => {
     () => loading.value,
     () => {
         if (!loading.value) {
-            isModaleEtape = contentType.value === 'etape';
+          console.log('loading done');
+          isModaleEtape = contentType.value === 'etape';
 
-            // Define helper functions in variables
+          // Define helper functions in variables
-            const disableModaleTransition = () => {
+          const disableModaleTransition = () => {
-              document.documentElement.style.setProperty('margin-top', '0');
+            document.documentElement.style.setProperty('margin-top', '0');
-              document.documentElement.style.setProperty('transition', 'none');
+            document.documentElement.style.setProperty('transition', 'none');
-            }
+          }
-            const setModaleTransition = (enterDelay) => {
+          const setModaleTransition = (enterDelay) => {
-              document.documentElement.style.setProperty('--modale-enter-delay', `${enterDelay}s`);
+            document.documentElement.style.setProperty('--modale-enter-delay', `${enterDelay}s`);
-            };
+          };
 
-            const zoomToContentPlace = () => {
+          const zoomToContentPlace = () => {
-              mapState.zoomToPlace(
+            mapState.zoomToPlace(
-                content.value.coordinates.lat ? content.value.coordinates.lat : defaultMapCenter.value.lat,
+              content.value.coordinates.lat ? content.value.coordinates.lat : defaultMapCenter.value.lat,
-                content.value.coordinates.lon ? content.value.coordinates.lon : defaultMapCenter.value.lng
+              content.value.coordinates.lon ? content.value.coordinates.lon : defaultMapCenter.value.lng
-              );
+            );
-            };
+          };
 
-            if (animationsAreEnabled.value) {
+          if (animationsAreEnabled.value) {
 
-              if (isModaleEtape) {
+            if (isModaleEtape) {
-                if (!wasModaleEtape) {
+              if (!wasModaleEtape) {
-                  // national -> détail
+                // national -> détail
-                  setModaleTransition(animationDuration.value);
+                setModaleTransition(animationDuration.value);
-                  zoomToContentPlace();
-                } else {
-                  // détail -> détail
-                  setModaleTransition(animationDuration.value);
-                  zoomToContentPlace();
-                }
-              } else {
-                if (wasModaleEtape) {
-                  // détail -> national
-                  setModaleTransition(animationDuration.value);
-                  mapState.resetMap();
-                } else {
-                  // national -> national
-                  setModaleTransition(0);
-                }
-              }
-            } else {
-              if (isModaleEtape) {
                 zoomToContentPlace();
               } else {
-                mapState.resetMap();
+                // détail -> détail
+                setModaleTransition(animationDuration.value);
+                zoomToContentPlace();
+              }
+            } else {
+              if (wasModaleEtape) {
+                // détail -> national
+                setModaleTransition(animationDuration.value);
+                mapState.resetMap();
+              } else {
+                // national -> national
+                setModaleTransition(0);
               }
-              disableModaleTransition();
             }
+          } else {
+            if (isModaleEtape) {
+              zoomToContentPlace();
+            } else {
+              mapState.resetMap();
+            }
+            disableModaleTransition();
+          }
 
-            scrollTo(0, 0);
+          scrollTo(0, 0);
 
-            wasModaleEtape = isModaleEtape;
+          wasModaleEtape = isModaleEtape;
         }
     },
   );
 };
 
 onMounted(() => {
-    isModaleEtape = contentType.value === 'etape';
+  console.log('modale mounted');
-    wasModaleEtape = isModaleEtape;
+  isModaleEtape = contentType.value === 'etape';
-    handleColorChange();
+  wasModaleEtape = isModaleEtape;
-    handleMapMovement();
+  handleColorChange();
+  handleMapMovement();
 });
 </script>
 

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

@@ -3,7 +3,7 @@
     <div v-if="content.intro" class="intro">
       <p v-html="content.intro"></p>
     </div>
-    <div v-for="equipe in content.gouvernances" class="equipe-item">
+    <div v-for="equipe in [...content.gouvernances].sort((a, b) => a.weight - b.weight)" class="equipe-item">
       <div class="partie-title">
         <h3>
           <p 
@@ -12,9 +12,9 @@
           </p>
         </h3>
       </div>
-      <div v-for="personne in equipe.personnes" class="personne">
+      <div v-for="personne in equipe.personnes" class="personne" :style="personne.photo_url ? '' : { gridTemplateColumns: '0 1fr', gridGap: '0' }">
         <figure>
-          <img :src="personne.photo_url" :alt="personne.photo_alt">
+          <img  v-if="personne.photo_url" :src="personne.photo_url.small" :alt="personne.photo_alt">
         </figure>
         <div class="name"><p v-html="personne.prenom + ' ' + personne.nom"></p></div>
         <div class="description"><p v-html="personne.description" style="white-space: pre-wrap;"></p></div>

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

@@ -1,51 +1,52 @@
 <template>
   <Transition name="fade">
-    <div v-if="isOpen" class="image-viewer-wrapper">
+    <div v-if="isOpen" class="image-viewer-wrapper" @click="(e) => checkOutsideClick(e.target)">
       <div v-if="!swiperContent" class="img-modale simple-viewer">
-          <figure class="img-wrapper">
+        <figure class="img-wrapper">
-              <img :src="image.src" :alt="image.alt">
+            <img :src="image.src" :alt="image.alt">
-              <figcaption>{{ image.alt }}</figcaption>
+            <figcaption>{{ image.alt }}</figcaption>
-          </figure>
+        </figure>
-        </div>
-        <div v-else class="img-modale swiper-viewer">
-          <div class="swiper-wrapper">
-            <swiper-container
-              :slidesPerView="1"
-              :centeredSlides="true"
-              :loop="true"
-              :navigation="true"
-              :pagination="true"
-              :initialSlide="currentImgIndex"
-              :injectStyles="[`
-                .swiper-button-next, .swiper-button-prev { 
-                  color: white;
-                  top: 50%;
-                }
-                .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
-                  background: white;
-                  opacity: 0.8;
-                }
-              `]"
-            >
-              <swiper-slide v-for="media in swiperContent">
-                <figure class="popup-figure">
-                  <img :src="media.src" :alt="media.alt" class="popup-img">
-                  <figcaption>{{ media.alt }}</figcaption>
-                </figure>
-              </swiper-slide>
-            </swiper-container>
-          </div>
-        </div>
-        <button @click="close" class="close-button">
-            <div></div>
-            <div></div>
-        </button>
       </div>
-    </Transition>
+      <div v-else class="img-modale swiper-viewer">
+        <div class="swiper-wrapper">
+          <swiper-container
+            :slidesPerView="1"
+            :centeredSlides="true"
+            :loop="true"
+            :navigation="true"
+            :pagination="true"
+            :initialSlide="currentSlideIndex"
+            :injectStyles="[`
+              .swiper-button-next, .swiper-button-prev { 
+                color: white;
+                top: 50%;
+              }
+              .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
+                background: white;
+                opacity: 0.8;
+              }
+            `]"
+          >
+            <swiper-slide v-for="media in swiperContent">
+              <figure class="popup-figure">
+                <img :src="media.src" :alt="media.alt" class="popup-img">
+                <figcaption>{{ media.alt }}</figcaption>
+              </figure>
+            </swiper-slide>
+          </swiper-container>
+        </div>
+      </div>
+      <button @click="close" class="close-button">
+          <div></div>
+          <div></div>
+      </button>
+    </div>
+  </Transition>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { nextTick, ref, watch } from 'vue';
+import { useWaitForImages } from '../composables/useWaitForImages';
 const props = defineProps({
   isOpen: Boolean,
   image: {
@@ -58,28 +59,83 @@ const props = defineProps({
   }
 });
 
-const currentImgIndex = ref(0);
+const currentSlideIndex = ref(0);
 
 watch(
   () => props.isOpen,
   () => {
-  if (props.isOpen && props.swiperContent?.length) {
+    toggleElementsOver(props.isOpen);
-    for (let i = 0; i < props.swiperContent.length; i++) {
+    if (props.isOpen) {
-      const currentImgSrc = props.image.src;
+      nextTick(() => {
-      const truncatedSrc = currentImgSrc.substring(currentImgSrc.indexOf("/sites"));
+        const swiperContainer = document.querySelector('.image-viewer-wrapper');
-      if (props.swiperContent[i].src === truncatedSrc) {
+        setCaptions(swiperContainer);
-        currentImgIndex.value = i;
+      })
-        break;     
+      if (props.swiperContent?.length) {
+        checkCurrentImage();
       }
     }
   }
-})
+)
+
+function toggleElementsOver(isOpen) {
+  const header = document.querySelector('.layout-container > header');
+  const retractedList = document.querySelector('.retracted');
+  if (isOpen) {
+    header.style.opacity = 0;
+    setTimeout(() => {
+      header.style.display = 'none';
+    }, 300);
+    if (retractedList) {
+      retractedList.style.display = 'none';
+    }
+  } else {
+    header.style.display = 'block';
+    header.style.opacity = 1;
+    if (retractedList) {
+      retractedList.style.display = 'flex';
+    }
+  }
+}
+
+function checkCurrentImage() {  
+  for (let i = 0; i < props.swiperContent.length; i++) {
+      if (props.swiperContent[i].src.split('/').pop().split('?')[0] === props.image.src.split('/').pop().split('?')[0]) {
+        currentSlideIndex.value = i;
+        break;
+      }
+    }
+}
+
+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`;
+    }
+  });
+}
 
 const emit = defineEmits(['close']);
 
 const close = () => {
   emit('close');
 };
+
+function checkOutsideClick(target) { 
+  if (target.classList.contains('swiper-wrapper')
+  || target.tagName === 'SWIPER-SLIDE'
+  || target.tagName === 'FIGURE') {
+    close();
+  }
+}
 </script>
 
 <style scoped lang="scss">
@@ -108,18 +164,33 @@ const close = () => {
     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;
       }
     }
   }
@@ -133,26 +204,37 @@ const close = () => {
         swiper-slide {
           display: flex;
           justify-content: center;
-          align-items: flex-start;
+          align-items: center;
           figure {
             margin-top: 3%;
-            max-width: 60%;
+            width: 100%;
-            height: 80%;
+            height: 100%;
-            max-height: 80vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 10vw;
+            box-sizing: border-box;
             img {
-              height: -webkit-fill-available !important;
+              max-height: 100%;
               max-width: 100%;
+              width: auto !important;
+              height: auto !important;
               margin-bottom: -5px;
-              object-fit: cover;
+              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;
             }
           }
         }
+        &::part(pagination) {
+          pointer-events: none;
+        }
       }
     }
   }

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

@@ -17,7 +17,7 @@
                         <div class="date">Du {{ content.previous.dates.start.d }} {{ content.previous.dates.start.m }}<br>au {{ content.previous.dates.end.d }} {{ content.previous.dates.end.m }} {{ content.previous.dates.end.y }}</div>
                     </div>
                     <div class="vignette">
-                        <img :src="content.previous.vignette.url" :alt="content.previous.vignette.alt">
+                        <img :src="content.previous.vignette.url.small" :alt="content.previous.vignette.alt">
                     </div>
                 </div>
             </div>
@@ -33,7 +33,7 @@
                         <div class="date">Du {{ content.next.dates.start.d }} {{ content.next.dates.start.m }}<br>au {{ content.next.dates.end.d }} {{ content.next.dates.end.m }} {{ content.next.dates.end.y }}</div>
                     </div>
                     <div class="vignette">
-                        <img :src="content.next.vignette.url" :alt="content.next.vignette.alt">
+                        <img :src="content.next.vignette.url.small" :alt="content.next.vignette.alt">
                     </div>
                 </div>
             </div>

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

@@ -1,7 +1,7 @@
 <template>
     <header :class="{ 'not-etape': contentType !== 'etape' }">
         <div class="cover">
-            <img v-if="content.vignette" :src="content.vignette.url" :alt="content.vignette.alt">
+            <img v-if="content.vignette" :src="content.vignette.url.medium" :alt="content.vignette.alt">
         </div>
         <div v-if="contentType === 'etape' && content.dates" class="cartouche" :style="{ backgroundColor: couleur }">
             <p>Étape n°{{content.etape_number}}</p>

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

@@ -3,10 +3,10 @@
     <div v-if="content.intro" class="intro">
       <p v-html="content.intro"></p>
     </div>
-    <div v-for="partenaire in content.partenaires" class="partenaire">
+    <div v-for="partenaire in [...content.partenaires].sort((a, b) => a.weight - b.weight)" class="partenaire">
       <figure>
         <a :href="partenaire.link_url" target="_blank">
-          <img :src="partenaire.logo_url" :alt="partenaire.logo_alt">
+          <img :src="partenaire.logo_url.small" :alt="partenaire.logo_alt">
         </a>
       </figure>
       <div class="title"><p v-html="partenaire.title"></p></div>

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

@@ -0,0 +1,17 @@
+<template>
+    <div class="pieces-jointes">
+        <div v-for="pj in content.pieces_jointes">
+          <a class="pj-link" :href="pj.url" target="_blank" rel="noopener noreferrer" :style="{ backgroundColor: couleur }">{{ pj.title }}</a>
+        </div>
+        <div v-for="lien in content.liens">
+          <a class="lien-link" :href="lien.url" target="_blank" rel="noopener noreferrer" :style="{ backgroundColor: couleur }">{{ lien.title }}</a>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  content: Object,
+  couleur: String,
+});
+</script>

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

@@ -1,21 +1,39 @@
 <template>
     <figure class="sensible-map">
         <vue-image-zoomer
-        :regular="partie.carteSensible.url"
+        :regular="partie.carteSensible.url.large"
-        :zoom="partie.carteSensible.url"
+        :zoom="partie.carteSensible.url.xlarge"
-        :zoom-amount="3.5"
+        :zoom-amount="2.5"
         alt="Carte sensible du territoire"
         hover-message="Survolez pour zoomer dans la carte"
+        @regular-loaded="setVerticalImages()"
         />
         <figcaption class="caption">{{ partie.carteSensible.alt }}</figcaption>
     </figure>
 </template>
 
 <script setup>
+import { nextTick, onMounted } from 'vue';
 import { VueImageZoomer } from 'vue-image-zoomer';
 import 'vue-image-zoomer/dist/style.css';
 
 const props = defineProps({
     partie: Object
 });
+
+function setVerticalImages() {
+    const zoomer = document.querySelector('.sensible-map');
+    setTimeout(() => {
+        if (zoomer.offsetWidth / zoomer.offsetHeight < 1) {
+            zoomer.style.padding = '0 7vw';
+            const caption = zoomer.querySelector('figcaption');
+            caption.style.marginLeft = 0;
+        }
+    }, 100);
+}
+
+onMounted(() => {
+    const zoomer = document.querySelector('.sensible-map');
+    // console.log('mounted');
+});
 </script>

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

@@ -7,11 +7,12 @@
         :navigation="true"
         :pagination="true"
         :injectStyles="[`.swiper-button-next, .swiper-button-prev { z-index: 11; }`]"
+        @swiperresize="(e) => setupSwiper(e.target)"
     >
         <swiper-slide v-for="image in partie.diaporama" style="width: 100%">
         <figure>
             <img
-              :src="image.url"
+              :src="image.url.medium"
               :alt="image.alt"
               @click="handleImageClick">
             <figcaption class="caption">{{ image.alt }}</figcaption>
@@ -28,6 +29,7 @@
 <script setup>
 import { onMounted } from 'vue';
 import { useImageModal } from '../../composables/useImageModale';
+import { useWaitForImages } from '../../composables/useWaitForImages';
 import ImageModale from '../ImageModale.vue';
 // WebComponent
 // https://swiperjs.com/element
@@ -56,15 +58,63 @@ const handleImageClick = (event) => {
     if (isSwiper) {
       const swiperEl = img.closest('swiper-container');
       swiperEl.querySelectorAll('swiper-slide').forEach((slide) => {
-        const image = slide.querySelector('img');
+        const img = slide.querySelector('img');
-        const altText = slide.querySelector('figcaption')?.textContent || '';
+        const altText = slide.querySelector('figcaption')?.textContent || '';        
-        swiperMedia.push({ src: image.getAttribute('src'), alt: altText });
+        Object.values(props.partie.diaporama).forEach((image) => {
+          if (image.url.medium === img.src) {
+            swiperMedia.push({ src: image.url.large, alt: altText });
+          }
+        });
+
       });
     }
     openImageModale(img.src, img.alt, swiperMedia);
   }
 };
 
+function setupSwiper(swiper) {
+  centerCaptionOnVerticalImgs(swiper);
+  setVerticalImages(swiper);
+  window.addEventListener('resize', () => {
+    setTimeout(() => {
+      setVerticalImages(swiper);
+    }, 50);
+  });
+}
+
+function centerCaptionOnVerticalImgs(swiper) {
+  const slides = swiper.querySelectorAll('swiper-slide');
+  slides.forEach((slide) => {
+    const img = slide.querySelector('img');
+    const caption = slide.querySelector('figcaption');
+    if (img.naturalHeight > img.naturalWidth) {
+      caption.style.textAlign = 'center';
+    } 
+  });
+}
+
+function setVerticalImages(swiper) {
+  const slides = swiper.querySelectorAll('swiper-slide');
+  let imageHeight = 0;
+  useWaitForImages(swiper, () => {
+    
+    for (let i = 0; i < slides.length; i++) {
+      const slide = slides[i];
+      const img = slide.querySelector('img');
+      if (img.offsetHeight < img.naturalWidth) {
+        imageHeight = img.offsetHeight;
+        break;
+      }
+    }
+    slides.forEach((slide) => {
+      const img = slide.querySelector('img');
+      if (img.naturalHeight > img.naturalWidth) {
+        img.style.height = `${imageHeight}px`;
+      }
+    });
+  });
+}
+
 onMounted(() => {
   document.documentElement.style.setProperty('--etape-couleur', props.couleur);
 });
@@ -82,17 +132,7 @@ onMounted(() => {
   --swiper-navigation-size: 1.5rem;
 }
 
-swiper-slide figure:not(.popup-figure) {
-  max-height: 40vh;
-  padding-bottom: 3rem;
-}
-
-swiper-slide figure:not(.popup-figure) figcaption {
-  text-align: center;
-}
-
 swiper-slide img:not(.popup-img) { /* cf main.scss */
-  max-height: 35vh;
   cursor: pointer;
   transition: transform 0.3s ease-out;
   object-fit: contain !important;

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

@@ -1,14 +1,14 @@
 <template>
     <div class="entretien">
         <h3>
-            <p
+            <p :style="{ background: `linear-gradient(transparent 70%, ${couleur} 70%)` }">
-            :style="{ background: `linear-gradient(transparent 70%, ${couleur} 70%)` }"
+                {{ partie.entretien.titre || "Entretien" }}
-            >Entretien</p>
+            </p>
         </h3>
         <div class="personnes">
             <div v-for="personne in partie.entretien.personnes" class="personne">
                 <figure>
-                    <img :src="personne.portrait" :alt="personne.alt">
+                    <img :src="personne.portrait.small" :alt="personne.alt">
                 </figure>
                 <div class="description"><p v-html="personne.description"></p></div>
             </div>

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;

web/themes/custom/caravane/assets/js/vuejs/composables/useWaitForImages.js

@@ -0,0 +1,14 @@
+export function useWaitForImages(container, callback) {
+    const images = container.querySelectorAll('img');
+    const imagePromises = Array.from(images).map(img => {
+        return new Promise(resolve => {
+            if (img.complete) {
+                resolve();
+            } else {
+                img.onload = img.onerror = resolve;
+            }
+        });
+    });
+
+    Promise.all(imagePromises).then(callback);
+}

web/themes/custom/caravane/assets/pictograms/arrow_forward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>

web/themes/custom/caravane/assets/pictograms/download.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>

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

@@ -53,6 +53,7 @@ body{
   .layout-container {
     > header {
       z-index: 2;
+      transition: opacity 0.3s ease-in-out;
       > div {
         padding: $body-margin-y $body-margin-x 0 $body-margin-x;
         display: grid;
@@ -301,6 +302,7 @@ body{
               top: 0;
               width: 100vw;
               .leaflet-container {
+                background-color: $main-color-light;
                 .leaflet-popup {
                   display: none;
                 }
@@ -384,33 +386,33 @@ body{
                   border: none;
                   width: 100%;
                   > div {
-                    max-height: 15vh;
                     overflow: hidden;
                     display: grid;
-                    grid-template-columns: minmax(10px, 12.5vw) 12.5vw;
+                    grid-template-columns: 1fr 1fr;
                     grid-template-rows: 1.5fr 0.5fr;
                     transform: translateY(-60%);
                     background-color: white;
                     opacity: 0;
                     transition: opacity 0.3s ease-out;
                     > div:first-of-type {
+                      line-height: 1.2;
                       grid-column: 1 / span 1;
                       grid-row: 1 / span 1;
                       font-family: 'Joost', sans-serif;
                       font-size: $m-font-size-mobile;
-/*                       display: flex;
+                      display: flex;
-                      flex-direction: column;
-                      justify-content: center;
-                      align-items: center;
- */
                       padding-top: 10px;
                       padding-left: 20px;
                       padding-right: 20px;
                       text-wrap: wrap;
+                      width: 100%;
+                      box-sizing: border-box;
                       @media screen and (min-width: $desktop-min-width) {
                         font-size: $m-font-size-desktop;
                       }
                       > a {
+                        width: 100%;
+                        align-self: center;
                         display: inline-block;
                         text-align: center;
                         font-weight: bold;
@@ -425,7 +427,9 @@ body{
                       grid-column: 1 / span 1;
                       grid-row: 2 / span 1;
                       text-align: center;
-                      padding: 10px 0;
+                      padding: 10px 0 20px 0;
+                      width: 100%;
+                      box-sizing: border-box;
                       > time {
                         font-size: $sm-font-size-mobile;
                         font-family: 'Marianne', sans-serif;
@@ -435,27 +439,27 @@ body{
                         }
                       }
                     }
-                    > div:nth-of-type(3) {
+                    > div:nth-of-type(3),
+                    > div:nth-of-type(3) > a {
+                      max-height: 20vh;
                       width: 100%;
                       height: 100%;
-                      display: block;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
                       padding: 0;
                       grid-column: 2 / span 1;
                       grid-row: 1 / span 2;
                       overflow: hidden;
-                      > a {
+                      > img,
-                        display: block;
+                      > a > img {
-                        width: 100%;
-                        height: 100%;
                         padding: 0;
-                        > img {
+                        height: auto;
-                          padding: 0;
+                        width: 100%;
-                          height: 100%;
+                        object-fit: cover;
-                          width: auto;
+                        margin: 0;
-                          object-fit: cover;
+                        display: block;
-                          margin: 0;
+                        min-height: 100%;
-                          display: block;
-                        }
                       }
                     }
                   }
@@ -931,6 +935,7 @@ body{
                       width: 100%;
                       display: inline-block;
                       > .sensible-map {
+                        box-sizing: border-box;
                         margin: 0;
                         width: calc(100% + $modale-x-padding);
                         margin-left: calc(($modale-x-padding / 2) * -1);
@@ -1081,6 +1086,7 @@ body{
                             width: 100%;
                           }
                           > figcaption {
+                            line-height: 1.5;
                             padding-bottom: 2rem;
                           }
                         }
@@ -1102,26 +1108,29 @@ body{
                     > #partenaires {
                       margin-top: 3vh;
                       > div.intro {
-                        margin-bottom: 6vh;
+                        margin-bottom: 4vh;
                         @media screen and (min-width: $desktop-min-width) {
                         }
                       }
                       > div.equipe-item {
                         @media screen and (min-width: $desktop-min-width) {
-                          margin-bottom: 7vh;
+                          margin-bottom: 5vh;
                         }
                         > .partie-title {
-                          margin-bottom: 3vh;
+                          margin-bottom: 1.5vh;
                         }
                       }
                       > div.equipe-item > div.personne,
                       > div.partenaire {
                         display: grid;
-                        grid-template-columns: 0.4fr 1fr;
+                        grid-template-columns: 0.3fr 1fr;
-                        column-gap: 3rem;
+                        column-gap: 2rem;
                         grid-template-rows: auto;
                         justify-items: start;
-                        margin-bottom: 6vh;
+                        margin-bottom: 3vh;
+                        @media screen and (min-width: $desktop-min-width) {
+                          grid-template-columns: 0.3fr 1fr;
+                        }
                         > figure {
                           grid-column: 1;
                           grid-row: 1 / span 2;
@@ -1168,12 +1177,71 @@ body{
                       }
                     }
                   }
+                  > .pieces-jointes {
+                    z-index: 1;
+                    position: relative;
+                    padding: 0 $modale-x-padding;
+                    box-sizing: border-box;
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap: 1.8rem 1rem;
+                    justify-content: space-between;
+                    padding-bottom: 3rem;
+                    > div {
+                      padding-top: 5px;
+                      > a {
+                        background-color: white;
+                        padding: 0.8rem 1rem;
+                        padding-left: 1.2rem;
+                        border-radius: 10rem;
+                        text-decoration: none;
+                        color: $main-color;
+                        display: flex;
+                        transition: transform 0.2s ease-in-out;
+                        transform: translateY(0px);
+                        &:hover {
+                          transform: translateY(-4px);
+                        }
+                      }
+                      > a.pj-link {
+                        &::after {
+                          mask: url('/themes/custom/caravane/assets/pictograms/download.svg') no-repeat center;
+                          content: '';
+                          mask-size: contain;
+                          background-color: $main-color;
+                          display: inline-block;
+                          width: 1rem;
+                          height: 1rem;
+                          margin-top: 0.3rem;
+                          margin-left: 0.5rem;
+                        }
+                      }
+                      > a.lien-link {
+                        &::after {
+                          mask: url('/themes/custom/caravane/assets/pictograms/arrow_forward.svg') no-repeat center;
+                          content: '';
+                          mask-size: contain;
+                          background-color: $main-color;
+                          display: inline-block;
+                          width: 1rem;
+                          height: 1rem;
+                          margin-top: 0.3rem;
+                          margin-left: 0.5rem;
+                        }
+                      }
+                    }
+                  }
                   > footer {
+                    z-index: 0;
                     .pattern-bottom {
                       mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
                       height: $modale-bottom-padding;
                       position: absolute;
                       bottom: 0;
+                      width: 100%;
+                      background-image: url(/themes/custom/caravane/assets/imgs/motif-caravane-invert-tile.png);
+                      background-size: 300px;
+                      background-size: repeat;
                     }
                     .related-etape-links {
                       position: absolute;

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

@@ -1350,9 +1350,9 @@
       }
     },
     "node_modules/swiper": {
-      "version": "11.1.14",
+      "version": "11.2.1",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.14.tgz",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.1.tgz",
-      "integrity": "sha512-VbQLQXC04io6AoAjIUWuZwW4MSYozkcP9KjLdrsG/00Q/yiwvhz9RQyt0nHXV10hi9NVnDNy1/wv7Dzq1lkOCQ==",
+      "integrity": "sha512-62G69+iQRIfUqTmJkWpZDcX891Ra8O9050ckt1/JI2H+0483g+gq0m7gINecDqMtDh2zt5dK+uzBRxGhGOOvQA==",
       "funding": [
         {
           "type": "patreon",
@@ -1472,9 +1472,9 @@
       }
     },
     "node_modules/vue-image-zoomer": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/vue-image-zoomer/-/vue-image-zoomer-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/vue-image-zoomer/-/vue-image-zoomer-2.4.4.tgz",
-      "integrity": "sha512-n0icSuYf51MgNakZ331j4pShIpgzVjSd25leVtiiMWEgwjNshDgAkvggfvj0slTD/CEqjNXuijZAN55me6CEWw==",
+      "integrity": "sha512-hCDgBEitR/8m4/yDcgTWi5elR40Si2TATaYcpSh0395NpQ1LoHCFXizeXxp2MoYHzO3BpO3T4Q8+SNco/UITlg==",
       "license": "MIT",
       "dependencies": {
         "vue": "^3.2.25"

web/themes/custom/caravane/templates/views-view-field--block-2--popup-map.html.twig

@@ -32,7 +32,7 @@
                     </div>
                 {% endif %} 
             {% else %}
-                {% if content != '' %}
+                {% if content|render|striptags|trim is not empty or content|render matches '/<img/' %}
                     <div class="separated-content">{{ content|trim }}</div>
                 {% endif %} 
             {% endif %}