[BBcode] Rendre l'affichage d'images conforme à HTML

[Le Grand Duc]

Bonjour,
Je crois qu'il y a belle lurette qu'en HTML, si on omet une des deux dimensions d'une image, l'autre est calculée automatiquement de manière à afficher l'image en respectant ses proportions.
Or ce n'est pas ce qui se passe ici avec la balise



... tout se passe comme si j'avais donné également 200 px de haut :

" />

Code:

[img(200px,200px)]https://images.radio-canada.ca/q_auto,w_1250/v1/ici-info/16x9/donald-trump-president-elections-rose-garden.jpg[/img]

[img]<br /><br />Si on veut simplement afficher une image moins grande qu'à l'origine, le seul moyen de contourner le problème est de trouver l'autre dimension et la préciser également après une règle de trois. C'est long et fastidieux.<br /><br />Donc ma proposition : <strong>rendre le fonctionnement de la balise
[/img]

[Cloo]

Je vote pour... ça m'est arrivé quelques fois d'avoir à calculer cette 2ème dimension, c'est pénible

[Invité]

Pour également ! Ça nous rendrait grandement service !

[chattigre]

Bonjour
Je voterai pour la version corrigée de la suggestion
Si vous ne remplissez qu'une case, l'autre est remplie par la même valeur en mode source uniquement. Si vous utilisez le mode WYSIWYG, la 2e valeur est calculée automatiquement .
Vous avez deux options de modification de suggestion :
 - Calculer automatiquement la 2e dimension en mode source (comme en WYSIWYG)
 - N'autoriser la saisie que d'une dimension sur les deux (ce qui rejoindrait votre logique de conformité HTML il me semble)
Bonne journée

[Le Grand Duc]

Bonjour
Je voterai pour la version corrigée de la suggestion
Si vous ne remplissez qu'une case, l'autre est remplie par la même valeur en mode source uniquement. Si vous utilisez le mode WYSIWYG, la 2e valeur est calculée automatiquement .
Vous avez deux options de modification de suggestion :
 - Calculer automatiquement la 2e dimension en mode source (comme en WYSIWYG)
 - N'autoriser la saisie que d'une dimension sur les deux (ce qui rejoindrait votre logique de conformité HTML il me semble)
Bonne journée

Merci pour l'info à propos de la version WYSIWYG, je l'ignorais, je ne l'utilise jamais.

N'autoriser la saisie que d'une dimension sur les deux (ce qui rejoindrait votre logique de conformité HTML il me semble)

Pas vraiment, en HTML on peut donner les deux dimensions. Si ces dimensions ne sont pas dans le même rapport que celles de l'image, on obtient une déformation, laquelle peut être voulue.

[Pinguino]

Bonjour,

La suggestion ne représentant pas énormément de travail et s'agissant d'un comportement normal sur les navigateurs web, nous venons d'envoyer un correctif en ligne qui est disponible sur tous les forums.

Pouvez-vous tester et nous dire si cela fonctionne bien pour vous svp ?

[Cloo]

Il semble y avoir un petit problème...

Au moment où on insère le code, ceci apparaît dans la balise img:

Code:

img(400px,auto)

Mais ensuite, c'est transformé en... 0px!  Donc, on ne voit pas l'image!

Code:

[img(400px,0px)]https://www.willemsefrance.fr/Files/126284/Img/19/006547_Rosier_buisson_rouge_vif_1x800.jpg[/img]

Et quand j'édite le message et que je remets manuellement "auto", à ce moment-là, la 2ème dimension est calculée, et l'image s'affiche

Code:

[img(400px,481px)]https://www.willemsefrance.fr/Files/126284/Img/19/006547_Rosier_buisson_rouge_vif_1x800.jpg[/img]

[Le Grand Duc]

Bonjour,

La suggestion ne représentant pas énormément de travail et s'agissant d'un comportement normal sur les navigateurs web, nous venons d'envoyer un correctif en ligne qui est disponible sur tous les forums.

Pouvez-vous tester et nous dire si cela fonctionne bien pour vous svp ?  

Merci, encore un petit effort

[Pinguino]

OK le problème semble être lié à la prévisualisation car quand je publie directement sans cliquer sur "Prévisualiser", cela donne le comportement attendu. Mais quand je clique sur "Prévisualiser", "auto" est effectivement remplacé par "0px".

Le souci est identique si j'édite le message, "auto" est aussi remplacé par "0px".

L'équipe regardera demain ce qu'elle peut apporter comme correctif.

[Cloo]

Oui, en effet, j'ai prévisualisé pour vérifier avant

[Le Grand Duc]

OK le problème semble être lié à la prévisualisation car quand je publie directement sans cliquer sur "Prévisualiser", cela donne le comportement attendu. Mais quand je clique sur "Prévisualiser", "auto" est effectivement remplacé par "0px".

Le souci est identique si j'édite le message, "auto" est aussi remplacé par "0px".

L'équipe regardera demain ce qu'elle peut apporter comme correctif.

Ça doit pas être grand chose.

[Shawny4e]

Perso, je voudrais que ce résolution d'image ajustable serait également au personnalisation de thèmes. Ça m'embête d'être obligée de resize à chaque images pour que ça fit. Mais ton idée est superbe!

[Pinguino]

Bonjour,

Concernant la suggestion initiale, nous referrons un essai la semaine prochaine

[Pinguino]

Bonjour,

Une nouvelle version de ce correctif est en ligne depuis quelques minutes. Pouvez-vous tester et nous dire si cela fonctionne pour vous svp ? Attention de bien vider vos données de navigation car il est possible qu'il y ait du cache.

[Cloo]

Test



Ça ne semble pas fonctionner encore... j'essaie de mettre cette image, avec une largeur de 200:
https://www.gardeningknowhow.com/wp-content/uploads/2013/08/echeveria.jpg

Edit: ça fonctionne ici (et encore la 1ère prévisualisation ne fonctionnait pas, mais la 2ème oui), mais pas sur mon forum:
https://accrosjardin.forumactif.com/t8837-test-image#220109

Le code est celui-ci:

Code:

[img(200px,0px)]https://www.gardeningknowhow.com/wp-content/uploads/2013/08/echeveria.jpg[/img]

Serait-ce parce que vos modifications sont dans un template que j'ai  modifié?

[Cloo]

J'ai la même chose sur mon forum test, et c'est là que je fais mes essais maintenant.

Quand je mets cette image:
https://www.gardeningknowhow.com/wp-content/uploads/2013/08/echeveria.jpg

avec 200 comme largeur, j'obtiens ceci, dans le code, mais aussi ce qui s'affiche dans le message:

Code:

[img(200px,auto)]https://www.gardeningknowhow.com/wp-content/uploads/2013/08/echeveria.jpg[/img]

Quand on prévisualise, le "auto" se transforme en "0px" et c'est là que j'obtiens l'image déformée.

Voir ici, 1er et 2ème message:
https://accrosjardintest.forumactif.com/t33-essai-taille-image#50

[Pinguino]

Bonjour,

Vous avez du recevoir quelques notifications de nouvelles réponses dans ce sujet, j'ai fait des tests dans ce sujet. La plupart des problèmes viennent d'une erreur dans le code apparemment car il y a un espace en trop entre la virgule et auto :

Code:

[img(200px, auto)]

Nous venons de corriger ce point, pouvez-vous retester svp ? Aussi, pensez à tester avec l'option de redimensionnement activée et désactivée dans le PA svp (dans le PA > Général > Messages et emails > Configuration > Redimensionnement des images) afin de nous remonter d'éventuels soucis avec ces 2 configurations.

Voici le test avec une image dont je spécifie uniquement la largeur (1) ou la hauteur (2) :

[Cloo]

Je crois que tu as mis le doigt sur le bobo, Pinguino... l'activation du redimensionnement des images!

Sur mon forum test, je viens de le désactiver, et le simple rafraîchissement de la page affiche correctement les images
Voir ici
https://accrosjardintest.forumactif.com/t33-essai-taille-image
(il s'agit exactement du même lien mis hier, où tu as pu voir les images déformées... mais aujourd'hui avec le redimensionnement désactivé)

[Le Grand Duc]

Bon, je vois qu'on avance.
Mais je me demande pourquoi on se donne la peine de calculer la dimension manquante, ça implique qu'il faut aller lire l'image, trouver ses deux dimensions, etc...
Bon OK, si on précise les deux dimensions dans la balise HTML, ça peut faciliter le travail du navigateur et la rapidité de la mise en page, mais il faudrait le faire pour toutes les images, et on ne le fait pas pour celles dont on ne précise aucune dimension, soit dans la grande majorité des cas.
Pourquoi ne pas laisser vide la dimension manquante tout simplement et laisser HTML et le navigateur faire leur job ?

[Pinguino]

Bon, je vois qu'on avance.
Mais je me demande pourquoi on se donne la peine de calculer la dimension manquante, ça implique qu'il faut aller lire l'image, trouver ses deux dimensions, etc...
Bon OK, si on précise les deux dimensions dans la balise HTML, ça peut faciliter le travail du navigateur et la rapidité de la mise en page, mais il faudrait le faire pour toutes les images, et on ne le fait pas pour celles dont on ne précise aucune dimension, soit dans la grande majorité des cas.
Pourquoi ne pas laisser vide la dimension manquante tout simplement et laisser HTML et le navigateur faire leur job ?

Bonsoir,

Je pense que vous avez sauté quelques messages du sujet. Nous parlons bien d'ajouter une image en renseignant soit une largeur, soit une hauteur tout en l'affichant au bon ratio. Du coup, je ne comprends pas le dernier message.

Il semble rester un bug (donc un comportement non voulu) quand les redimensionnements sont activés via le PA.

[Cloo]

@Pinguino... je crois que Le Grand Duc ne connaissait pas l'existence de ce paramètre de redimensionnement automatique

Activé sur notre forum... c'est important pour nous, nous sommes un forum où beaucoup de photos de jardin et de plantes sont publiées, et beaucoup ne sont même pas conscients de la taille des photos prises avec leur téléphone cellulaire (bien trop grandes!), et rechigneraient de passer par la case réduction de la photo, et ne sauraient même pas comment faire.

[Le Grand Duc]

Je pense que vous avez sauté quelques messages du sujet. Nous parlons bien d'ajouter une image en renseignant soit une largeur, soit une hauteur tout en l'affichant au bon ratio.

Je n'ai rien manqué du tout, en fait, je suis passionné par le sujet  
Ce que je veux dire, c'est que pour afficher le bon rapport, je ne vois pas le besoin pendant l'édition de mettre temporairement « auto » dans la balise IMG BBcode, ensuite d'aller chercher l'image, calculer la dimension manquante pour la précisez dans la balise IMG HTML. Ça complique tout le processus pour rien.
Laissez juste la dimension manquante vide, pour être complètement conforme à HTML et le navigateur se débrouillera avec...    ... et il ne se trompera pas lui

[Le Grand Duc]

@Pinguino... je crois que Le Grand Duc ne connaissait pas l'existence de ce paramètre de redimensionnement automatique

En effet, j'ignorais son existence, mais mon point est précisé plus haut. Le processus actuel est compliqué pour rien et devrait être indépendant du redimensionnement automatique s'il y a.

[Le Grand Duc]

... Pour être plus précis, je connaissais la dimension limite, mais je ne savais pas qu'on pouvait la désactiver.
De toute façon je ne vois pas comment ça peut intervenir dans notre affaire, normalement ça se fait par une déclaration max-width et/ou max-height dans un style, on n'a pas besoin de calculer aucune dimension

[Pinguino]

... Pour être plus précis, je connaissais la dimension limite, mais je ne savais pas qu'on pouvait la désactiver.
De toute façon je ne vois pas comment ça peut intervenir dans notre affaire, normalement ça se fait par une déclaration max-width et/ou max-height dans un style, on n'a pas besoin de calculer aucune dimension

Justement, il faut que l'équipe se penche sur ce bug pour comprendre pourquoi il a lieu. Nous ne pensions pas non plus que ces dimensions limites auraient un impact sur la dimension non renseignée lors de l'ajout

[Cloo]

Bonjour,

Y a-t-il du développement au sujet de cette suggestion? Il ne manquait pas grand-chose pour que ça fonctionne... ce serait bien utile

Merci!

[Luzz]

Bonjour,

Un correctif concernant ce problème vient d'être envoyé en ligne

Cordialement

[Cloo]

Ça semble fonctionner, merci!

Essai ici --> https://accrosjardin.forumactif.com/t8837-test-image#230965

Quand on insère l'image, la dimension non indiquée est remplacée par "auto", et ensuite, après visualisation, elle est remplacée par sa valeur réelle

[chattigre]

Bonjour,
Merci pour ce développement !

Par contre, pourquoi la dimension non définie est-elle remplacée par 0px après prévisualisation ou à l'édition ? Cependant, l'attribut dans le code source du sujet est bien width/height : auto et pas 0px...

En revanche, il y a un petit souci (pas nouveau) avec les images sur la version mobile ^^
La règle suivante :

Code:

.post-content img.loaded, .post-content img.loading, .post-content img.error {
   height: auto;
}

Est inactivée dès lors que des attributs height / width sont présents sur l'image ^^
Moralité, bah, c'est très moche

Ici, la première image n'a pas de dimensions spécifiées, la 2e si (les deux dimensions)

Bidouillage perso déconseillé...:

Du coup, je vous remonte ce souci en espérant que vous trouverez quelque chose de plus fiable que mon bricolage

Bonne soirée

[Le Grand Duc]

Ah ! Super. Merci pour cette amélioration.