[RÉGLÉ] Images affichées tête en bas

[olivier834]

Bonjour à tous. Je constate sur mon site ibiltzaile.fr (3.9.11) que certaines images récemment insérées s'affichent correctement sur mon PC mais apparaissent sur iPad la tête en bas (que ce soit avec Safari ou Firefox) voir pj..
Cela ne m'était jamais arrivé. Serait-ce dû à la mise à jour 3.9.11? Avez-vous constaté ce phénomène? Merci d'avance.

[woluweb]

Bonjour,
Ce n'est clairement pas lié à la màj de Joomla
Par contre, ça ressemble à une ligne de CSS (style) qui "retourne" (flip en anglais) l'image.

Si vous indiquez l'url de la page concernée, on pourra vous aider plus facilement...

[RobertG]

Bonjour,

Je viens de regarder le site sous Chrome et sous Firefox, et pour l'article correspondant à l'image ci-dessus, je la vois bien à l'endroit, que ce soit dans le blog ou dans l'article seul.

[daneel]

Bonjour,

Cela provient de l'image prise avec la rotation automatique du Samsung SM-A530F (pensez à désactiver avant de prendre la photo),
les données EXIF agissant comme des propriétés de l'image détectées ou non pas les navigateurs ou système.

L'image seule s'affiche à l'envers car dans Firefox, elle s'affiche avec : "image-orientation: from-image;".

mais on peut annuler cette rotation en ajoutant à la css de votre template :

img {image-orientation: none !important;}

[RobertG]

Curieux que ça se soit affiché dans le bon sens (je parle de l'article, l'image seule en effet s'affiche à l'envers) sur l'écran de mon PC, et à l'envers sur d'autres écrans ! Qu'est-ce qui expliquerait que sur certains, l'orientation de l'image soit utilisée, comme dans l'exemple ci-dessus, et pas sur d'autres ?

[daneel]

Curieux que ça se soit affiché dans le bon sens (je parle de l'article, l'image seule en effet s'affiche à l'envers) sur l'écran de mon PC, et à l'envers sur d'autres écrans ! Qu'est-ce qui expliquerait que sur certains, l'orientation de l'image soit utilisée, comme dans l'exemple ci-dessus, et pas sur d'autres ?

par défaut, l'analyse de l'orientation est faite d'après les données EXIF de l'image...

http://prntscr.com/oupiur

Comme tu peux le voir avec l'extraction des données : http://metapicz.com/#landing?imgsrc=...nce%2FErlo.jpg
L'image a été prise à l'envers avec un téléphone A5 et la rotation automatique a été indiqué par le téléphone dans les données exif intégré à la photo (ORIENTATION : Rotate 180° ).

Le plus simple, c'est de supprimer ces données exif et de corriger l'orientation avec un logiciel comme xnview.
Ce qu'il faut savoir, c'est que l'on peut également indiquer la position géolocalisée, bref des informations que l'on n'a pas envie de retrouver sur le net...

Et pour la prochaine fois, desactiver la rotation automatique sur le téléphone, ce sera beaucoup plus simple pour incorporer les images

[RobertG]

Je suis d'accord, mais comme je l'ai dit, c'est que je ne comprends pas pourquoi mon navigateur affiche l'image à l'endroit dans l'article (et à l'envers seule), alors qu'elle est à l'envers sur la copie d'écran du premier message d'Olivier.

[daneel]

oui Robert, c'est du à l'usage partiel de l'orientation sur ios (donc avec safari sur sa tablette ipad ), tout comme l'app firefox sur ios.

Comme c'est indiqué dans la photo (dans les données exif),
ces deux navigateurs appliquent donc la rotation contrairement aux autres navigateurs qui n'ont pas encore intégrés cette fonctionnalité.

https://caniuse.com/#feat=css-image-orientation

[RobertG]

OK, merci Yann !

[jfque]

Pour info, le gestionnaire de media de JCE (traitement de texte) supprime les infos EXIF lors du chargement de nouvelles images. Ça permet d'éviter ce genre de souci (et aussi d'éviter d'avoir certaines infos non souhaitées sur le web, en plus de réduire un peu la taille du fichier).
Une alternative est d'utiliser un logiciel (gratuit) comme ImageOptim pour réduire la taille du fichier et éliminer les données EXIF.

[olivier834]

Merci à vous tous pour ces propos de spécialistes experts et pour votre aide. Pour information, je constate sur PC Win 10 qu'une photo prise avec le même appareil apparaît à l'endroit, mais à l'envers si on clique sur l'image pour l'agrandir; vous pouvez le constater avec ce lien :

https://www.ibiltzaile.fr/index.php/5-actualite/13419-sens-de-la-photo

[daneel]

Pour information, je constate sur PC Win 10 qu'une photo prise avec le même appareil apparaît à l'endroit, mais à l'envers si on clique sur l'image pour l'agrandir

oui, la propriété css qui utilise les données exif n'est pas active (sur firefox) dans la page mais elle est active quand on clique sur l'image seule, stocké sur le pc ou que l'on essaye de visualiser sur ios. Cette lecture de cette donnée "orientation" en css est assez récente, ce qui fait que cela n'est pas adopté sur tous les navigateurs ou géré partiellement. De plus, tu n'as aucun contrôle pour corriger le problème quand tu affiche l'image seule (donc pas de css personnalisée).

La propriété exif que l'on peut extraire de la photo indique une orientation à 180°, il faut supprimer cette information de la photo comme l'indique jfque.
Les logiciels et astuces ne manquent pas, il suffit de taper "supprimer données EXIF" pour trouver bon nombre de tutoriels et logiciels
jfque Merci pour l'astuce sur JCE !

En résumé, utilise jce ou edite les photos avec un logiciel qui enleve les données exif puis reinjecte sur ton site, le problème sera vite réglé.

[olivier834]

Pour info, le gestionnaire de media de JCE (traitement de texte) supprime les infos EXIF lors du chargement de nouvelles images. Ça permet d'éviter ce genre de souci (et aussi d'éviter d'avoir certaines infos non souhaitées sur le web, en plus de réduire un peu la taille du fichier).
Une alternative est d'utiliser un logiciel (gratuit) comme ImageOptim pour réduire la taille du fichier et éliminer les données EXIF.

Merci jfqe pour cette précision, mais où dois-je intervenir dans JCE pour que ces données EXIF soient effacées. Dans le cas de mes photos à l'envers, les images ont été chargées via JCE...

[jfque]

C'est un paramètre dans les profils : dans "Editor parameters", section "Filesystem" > Image editing. c'est la première entrée de la liste : Remove image EXIF data. Le réglage par défaut (dans le profil par défaut de JCE) est "NON" (je pense pour des raisons de rétro-compatibilité). C'est pour cela que les données n'ont pas été modifiées.
Sur mes sites, j'utilise en général un profil "sur mesure" (que j'importe) et dans lequel ce réglage est sur "Oui".

A noter : le fait de changer de Non > Oui va avoir de l'effet sur les prochaines images chargées. Pour modifier les existantes, il faut les re-charger. Une alternative est de télécharger tout le dossier "images" en local, de passer les images dans ImageOptim, puis de recharger (par FTP) le dossier "images" sur le serveur.

[olivier834]

jfque, c'est parfaitement clair. Merci pour ces explications. Et encore merci à tous