# Elementor et un CDN d’images : configurer les URL sans tout casser > Activer Cloudflare ou Bunny CDN sur un site Elementor existant fait parfois planter le chargement des vignettes dans l'éditeur. Voici la configuration qui évite la casse. - Auteur : Clément Hadrot - Publié le : 2021-04-29 - Mis à jour le : 2021-04-29 - Catégorie : Elementor - URL : https://wpmoderne.dev.wordpress-developpement.fr/elementor/elementor-cdn-images-configurer-urls/ ## L’essentiel - Elementor stocke des URL d'images absolues dans ses données JSON, pas des chemins relatifs - Un CDN qui réécrit les URL après coup peut casser les vignettes visibles dans l'éditeur - Régénérer les fichiers CSS d'Elementor après tout changement d'URL évite les incohérences Une agence a activé Bunny CDN sur un site client existant pour soulager la bande passante, en suivant un tutoriel générique qui réécrit les URL des médias au niveau du serveur. Le site public a continué de fonctionner sans problème visible, mais l'éditeur Elementor, lui, a commencé à afficher des vignettes cassées pour une partie des images déjà utilisées dans les widgets. Comprendre pourquoi demande de revenir sur la façon dont Elementor stocke ses données d'image. Contrairement à l'éditeur de blocs natif de WordPress qui référence généralement une image par son identifiant d'attachement et régénère l'URL à l'affichage, Elementor enregistre à la fois l'identifiant et l'URL complète de l'image au moment où elle est insérée dans un widget. Cette URL complète reste figée dans les données JSON du widget tant qu'elle n'est pas explicitement régénérée. ## Pourquoi le CDN casse les vignettes dans l'éditeur Un CDN d'images fonctionne généralement en réécrivant l'URL du domaine principal vers un sous-domaine ou un domaine dédié, soit via une règle serveur, soit via un plugin qui filtre les URL à l'affichage. Cette réécriture s'applique correctement au rendu du site pour le visiteur final, car WordPress régénère dynamiquement les URL de médias à chaque affichage de page. Mais les URL déjà enregistrées en dur dans les données Elementor, au moment de l'insertion initiale de l'image, ne passent pas par ce filtre au moment de l'édition : l'éditeur tente de charger l'ancienne URL, qui peut ne plus correspondre au chemin réel une fois le CDN activé. > L'essentiel à retenir : Elementor stocke des URL d'images absolues dans ses données JSON, pas des chemins relatifs ; Un CDN qui réécrit les URL après coup peut casser les vignettes visibles dans l'éditeur ; Régénérer les fichiers CSS d'Elementor après tout changement d'URL évite les incohérences ## La configuration qui évite le problème 1. Avant d'activer le CDN, vérifier dans les réglages d'Elementor (Elementor > Réglages > Avancé) l'URL de base configurée pour les assets 2. Configurer le plugin CDN pour n'appliquer la réécriture qu'au moment du rendu final de la page, jamais dans le contexte d'administration ou d'édition (la plupart des plugins CDN sérieux proposent une option d'exclusion pour `/wp-admin/`) 3. Vérifier que l'option d'exclusion couvre bien les requêtes AJAX d'Elementor, qui transitent aussi par `admin-ajax.php` 4. Une fois le CDN actif, régénérer les fichiers CSS d'Elementor depuis Elementor > Outils > Régénérer les fichiers CSS pour purger les références mises en cache 5. Vider également le cache de tout plugin de cache de page tiers actif sur le site ### Le cas des plugins qui réécrivent en base de données Certains outils de migration vers un CDN proposent de réécrire directement les URL stockées en base de données plutôt que de les filtrer à la volée. Cette approche est plus risquée avec Elementor : une recherche-remplacement en base qui ne prend pas en compte le format sérialisé des données JSON d'Elementor peut corrompre la structure du widget entier, pas seulement l'URL de l'image. Il est impératif d'utiliser un outil de recherche-remplacement conscient de la sérialisation, comme WP-CLI avec la commande `wp search-replace`, qui gère correctement ce format. ``` wp search-replace 'https://exemple.fr/wp-content/uploads' \ 'https://cdn.exemple.fr/wp-content/uploads' \ --all-tables --precise ``` ## Vérifier après coup Après toute opération de ce type, il est recommandé d'ouvrir plusieurs pages construites avec Elementor en mode édition pour vérifier que les vignettes s'affichent normalement, en particulier les pages les plus anciennes du site qui contiennent souvent des images insérées avant l'activation du CDN. Un contrôle visuel rapide suffit généralement à repérer une éventuelle casse avant qu'un client ne la signale. - Toujours tester la configuration CDN sur un environnement de staging avant la mise en production - Conserver une sauvegarde de la base de données avant toute opération de recherche-remplacement - Vérifier que le CDN sert bien les formats WebP si le site les utilise, certains CDN d'images appliquent leur propre conversion qui peut entrer en conflit > Un CDN d'images doit rester invisible pour l'éditeur Elementor : s'il modifie le comportement de l'admin, c'est le signe qu'une règle d'exclusion manque quelque part dans sa configuration. ## En résumé L'incident sur ce projet s'est résolu en ajoutant une règle d'exclusion pour le contexte d'administration dans la configuration de Bunny CDN, complétée par une régénération des fichiers CSS Elementor. Le point à retenir pour tout futur projet : configurer systématiquement l'exclusion de l'admin avant d'activer un CDN sur un site Elementor existant, plutôt que de corriger après coup les vignettes cassées signalées par le client.