Problème d’affichage d’images

Un site utilisant WordPress

Problème d’affichage d’images

Avec la migration de mon blog, la montée de version du logiciel Wordpres, divers essais plus ou moins judicieux, changement de thème et j’en passe et des meilleurs, je me retrouve avec un problème sérieux et pour le moment non solutionné :

L’affichage de certaines images ne se fait plus correctement !

Fig1. Défaut d’affichage des images avec WordPress

On se retrouve avec un emplacement réservé aux dimensions souhaités mais… pas d’image pour autant !
Pour rappel, j’ai ajouté des images avec le champs « taille personnalisée » lors de la rédaction de mes artciles. Ils datent un peu…

Je pense que le principal problème via de là : au moment de la rédaction de mes articles, l’utilisation de la fonction « taille personnalisée » mais je devais aussi certainement avoir un thème ou un plugin qui me permettait de générer des tailles personnalisées avec des fichiers attenants.

WordPress, par défaut, génère 3 tailles (thumbnails) pour optimiser les images. Donc pour une seule photo, vous avez aussi 3 autres copies de tailles différentes dans votre dossier de stockage.
La fonction « taille personnalisée » ne redimensionne aucun fichier. Non, c’est simplement une instruction au navigateur internet pour afficher une photo à une taille personnalisée de votre choix.
Je ne vais pas vous faire de cours magistral mais vous montrer comment détecter le problème.
Ensuite nous verrons s’il est possible de rectifier le problème…

Je tiens déjà remercier le travail fait par cette page (?) pour m’avoir aidé à trouver l’origine de mon problème.
J’ai mis en cause tellement de possibilités : version de PHP, extension de PHP, CHMOD, cache navigateur et thèmes…

Le soucis c’est que l’affichage et la gestion des images (et miniatures) n’est pas tout à fait la même entre l’affiche public (front-office) et celui du back-office (lors de la rédaction des articles) si bien que la détection de l’erreur est compliquée.

Donc je pars du postal suivant : mon image ne s’affiche pas côté visiteur.
Sur la page en question, je fais un clic droit sur l’image ainsi absente pour en vérifier sont chemin, son URL. C’est là que je me rends compte que le fichier est belle est bien absent !

Certes la mise aux dimension est bien inscrite toujours à coté de l’image dans le code HTML mais l’adresse est fausse car la référence est faite une version de l’image déjà « générée » par le passé mais incompatible avec le nouveau thème.
Les anciens fichiers auto-générés (thumbnails) aillant été perdu, le fichier correspondant est absent et forcément, on ne voit rien.

Fig2. Affichages des informations sur l’image

Dans mon exemple, l’URL de l’image est :

http://test.julien-moreau.fr/wp-content/uploads/2018/11/FireShot-Screen-Capture-003-Download-Raspbian-for-Raspberry-Pi-www_raspberrypi_org-188x112.png

La dernière partie de l’URL est en fait une inscription de la taille personnalisée de l’époque !!! OUI voilà le problème. Le nom du fichier est belle est bien erroné !
par contre, si on regarde dans le Fig.2 on voit qu’à la suite de l’URL il y a bien l’instruction pour afficher correctement le fichier à la bonne taille. Sauf que le fichier… il n’existe pas !

La solution !

Je n’ai pas trouvé de moyen automatique malheureusement.
Ce qui fonctionne c’est d’éditer l’article, de modifier la photo en question mais juste le fait d’ouvrir le panneau d’édition de l’image puis de cliquer sur le bouton bleu en bas à droite « Mise à jour » suffit ! Pas plus. Enregistrer bien sûre votre article pour appliquer la modification.

Si vous avez beaucoup d’images dans votre articles, le mieux c’est de récupérer le code HTML pour rechercher avec votre éditeur de texte (Notepad++) toutes les occurrences « .jpg » et si elles sont précédés d’une notion de dimensions, supprimer cette partie.
Ce n’est pas drôle mais ça récupère votre contenu !

La solution MIRACLE !!

Ouiiiiiiiii j’ai fini par trouver le moyen de passer en revu l’intégralité du contenu de mon blog pour contrôler tous les liens et les liens internes avec les images compris !
J’ai utilisé l’extension :
https://fr.wordpress.org/plugins/broken-link-checker/
Cerise sur le gâteau, on peut éditer directement la mauvaise adresse donc ça devient facile sans avoir besoin de tripatouiller dans le code etc.

Retrouver et éditer des liens facilement.

Tags: , , , , , , , , , ,

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *