Affichage d'un background noir disgracieux lors d'un zoom sur vignette

Bonjour,

aujourd'hui, j'ai ajouté plusieurs produits à ma boutique en ligne.
Par exemple, celui-ci :
www.guillenphoto.com/en/all-fine-art-pri...gnites-2099-320.html

Si vous cliquez sur une vignette pour avoir un agrandissement, vous avez l'arrière plan qui devient tout noir et la partie haute de l'image est cachée par le menu principal.

Si vous allez sur un ancien produit comme celui-ci :
www.guillenphoto.com/en/all-fine-art-pri...h-alps-2021-320.html

et que vous cliquez sur une vignette, l'agrandissement s'effectue correctement.

La différence est que dans le premier cas, la source est une image au format webp que j'ai générée en utilisant Photoshop. Cette technique me permet d'avoir des photos très réduites en poids avec une excellente qualité.

Pour le second produit, les images sont générées au format jpg.

J'ai l'impression que le problème est lié au format webp. Pourtant j'ai consulté votre documentation avant d'effectuer cette modification fonctionnelle et il est mentionné que ce format est supporté.

Je n'ai pas le temps de revenir sur la génération des anciens produits. je conserver le format jpg.

Pouvez-vous me dire ce que je dois faire pour l'agrandissement des vignettes au format webp se fasse correctement sans cet arrière-plan noir très disgracieux?

Merci par avance pour votre réponse,

Sincèrement,
A. Guillen

Bonjour Philipp,

je vous ai attaché deux copies d'écran. L'un de la photo au format webp qui s'affiche avec un arrière plan noir.

L'autre avec une photo au format jpeg qui s'affiche sans background noir. Affichage normal selon moi.

J'espère qu'elles vous aideront à comprendre l'issue.

Sincèrement,
A. Guillen

Bonjour Philipp,

Je vous remercie pour votre réponse.

vous avez raison, nous n'avons pas les mêmes effets. L'affichage des jpg se passe correctement chez moi.

Avec votre réponse, vous atteignez mes limites de compétences. Je ne suis qu'un simple utilisateur de Joomla et de Hikashop. Je ne connais pas ce dont vous me parlez.

Cependant, j'ai effectué une recherche sur ce que vous mentionnez.
Apparemment, je dois ajouter une ligne dans le plugin 'System - HTTP Headers'. Cette ligne doit être du type 'Content-Security-Policy' pour autoriser les définitions de style du type style="...".

Personnellement, dans mes deux fichiers css personnels, je n'ai pas ce genre de ligne.

Quand vous mentionnez le style randomValue, d'où vient-il? Comment puis-je le trouver? Est-ce lié à Hikashop?

Merci pour votre éclaircissement et votre aide,
Sincèrement,
A. Guillen

Bonjour Philipp,

je viens de vous enregistrer cette vidéo afin de vous montrer le fonctionnement que j'ai depuis un des ordinateurs de la société. J'ai vérifié : ils ont tous les même comportement. Je ne constate aucune différence entre les ordinateurs.
J'utilise le navigateur Chrome mais le résultat est identique avec Firefox ou Edge.

Voici le lien pour la vidéo : kdrive.guillenphoto.com/app/share/118755...81-8e48-1a9f5497726a

Voici le premier lien que j'utilise : www.guillenphoto.com/en/all-fine-art-pri...en-all-editions.html
Il s'agit de la liste de tous mes produits.

Je fais définer la liste et je sélectionne ce produit : www.guillenphoto.com/en/all-fine-art-pri...dombes-2078-324.html

Quand je clique sur la photo, elle est encadrée par un cadre blanc. Ce qui est normal. Il n'y a pas de bordure noire. C'est une photo au format jpeg.

Je reviens sur la liste.Je clique sur ce lien : www.guillenphoto.com/en/all-fine-art-pri...istere-2102-340.html
Là, la bordure noire apparait. C'est une photo au format webp.

Vous pouvez aller sur n'importe quelle autre page de mon site, vous constaterez que l'erreur n'apparait pas. L'erreur que vous m'avez signalée n'apparait que lorsque j'affiche un agrandissement d'une photo webp.

Ajout :
Je viens de faire ce test qui me fait penser que vous avez vraiment un problème avec l'affichage des images au format webp.
Par exemple, allez sur cette URL : www.guillenphoto.com/en/all-fine-art-pri...dreams-2084-320.html

Sous l'image principale, cliquez sur l'avant dernière photo vignette. C'est une image au format jpeg. Vous verrez que l'affichage se passe correctement.

Je vous ai attaché une copie d'écran.

Bonjour Philipp,

je vous remercie pour votre réponse et votre aide.

Je viens de vous créer un site de test qui est une copie du site de production. J'ai vidé toutes les tables. Il est opérationnel.
Je vous ai envoyé un message avec toutes les informations dont vous avez besoin.

J'espère que vous allez trouver une solution à ce problème qui n'est pas bloquant mais qui ne donnent pas la meilleure image de mes produits.

Sincèrement,
A. Guillen

Bonjour Philipp,

je vous remercie d'avoir pris le temps d'analyser ma réponse.

Je n'ai pas très bien compris votre réponse :

- mon problème provient des photos au format webp. Vous évoquez le format jpg ou jpeg. je n'ai pas de problème avec ce format.

- ensuite vous évoquez le plugin qui gère la popup. j'utilise l'extension EngageBox. Je l'ai désactivée. Le problème est toujours présent.

- vous évoquez aussi entre paranthèses le template. Il a été créé avec Template Creator. J'ai mis comme template par défaut Cassiopea. Le problème est toujours présent.

Vous pouvez tester sur cette page : gpfa99.guillenphoto.com/en/all-fine-art-...dreams-2084-320.html

Comme je ne comprends pas bien votre réponse, pourriezè-vous m'apporter quelques éclaircissements et me dire qui je dois contacter. Je dois avouer que je suis perdu.

Sur la page tout est désactivé. Il ne reste plus que des éléments de Hikashop.

Sincèrement,
A. Guille

Bonjour Philipp,

ce matin, j'ai eu une idée.

Les fichiers au format webp que j'ai utilisés ont été générés pae Photoshop. J'obtiens une image vraiment très légère qui se charge très rapidement. Peut être que ce format n'est pas exploitable par la fonction qui affiche le zoom de la photo.

Si vous le souhaitez, je peux vous envoyer quelques photos pour que vous fassiez des tests sur un site chez vous.

Si vous ne trouvez pas de solution, tant pis, je vais générer des JPG comme avant. Je réinjecterai mon fichier .csv.

Dites moi si vous voulez que je vous envoie 5 ou 6 fichiers webp générés par Photoshop.

Sincèrement,
A. Guillen

Bonjour Philipp,

je vous remercie pour votre message.

Votre solution d'utiliser Fancybox fonctionne parfaitement. De plus, personnellement, je trouve que c'est beaucoup plus beau, plus moderne.
Cette présentation est bien adaptée à mes produits. Elle est plus classe que la précédente.

Finalement, c'était bien lié à Hikashop même d'une manière indirecte. Ouf! Vous y êtes arrivé. Merci beaucoup pour votre patience et votre aide.

J'espère que la solution vous avez trouvée aidera d'autres personnes qui rencontrent peut être le même problème.

Je vais pouvoir continuer de générer des images au format Webp en utilisant Photoshop car la taille des images générées est vraiment intéressante.

La journée commence bien.

Sincèrement,
A. Guillen

Bonjour Philipp,

après avoir paramétré dans la configuration, cette option Fancybox, je me suis posé la question suivante : pourquoi conservez-vous deux options? Alors que l'une n'est plus maintenue et qu'elle est peut être obsolète pour certains nouveaux formats.

J'ai effectué quelques tests car la réponse est importante pour moi.
Je pense avoir trouvé une raison.
Si vous prenez cette page, www.guillenphoto.com/en/all-fine-art-pri...-ocean-2101-322.html
et que vous agrandissez l'image, vous verrez que les vignettes se répètent à l'infini.

Cela peut sembler étrange mais c'est moins génant que mon autre problème. L'affichage est beau et assez classe. Je ne pense pas qu'une de mes clients y voit quelque chose à redire.

Ce problème avec Fancybox explique peut être pourquoi vous conservez shadowbox.

Sincèrement,
A. Guillen

Bonjour Philipp,

je vous remercie de vous intéresser à ce problème mineur.

Merci aussi pour l'éclaircissement concernant Shadowbox.

Voicl les répondes à vos questions :
- Tous les produits avec une image unique ont ce problème.
- Tous mes produits ont des variantes.

Sincèrement,
A. Guillen

Bonjour Philipp,

merci pour votre réponse.

Je n'ai pas bien compris. Je vais vous donner des éléments précis.
Si vous allez sur ce produit : www.guillenphoto.com/fr/les-photos-d-art...re-sud-2111-343.html

il y a une seule photo :