Markdown pour redimensionner une image en px, pas en pourcentage

Quick image resizing and markdown image dimensions talked about the new “Ninja :crossed_swords: feature” to add ,25% for image scaling.

That’s great, if you know the percentage that results in the px you want, and if you have consistently sized or few embedded images.

It’s not so great if you have a number of images of somewhat varying original size and you want them all to scale to (for instance) 250px width.

Changing a number of such images from markdown to HTML markup is also painful.

Any chance this Ninja feature could be enhanced to accept % or px specifications for the scaling?

1 « J'aime »

That is already supported:

![very good|25x19](//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/0/3/03741c9f3eafd7fc8ccd791a6971a2c0d52783e4.jpg)

produces

very good

while

![very good|250x190](//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/0/3/03741c9f3eafd7fc8ccd791a6971a2c0d52783e4.jpg)

produces

very good

7 « J'aime »

You can’t just specify the width though.

4 « J'aime »

I had misunderstood the meaning of the |250x190]. I thought that was meant to convey the size of the original, not that it was meant as a scaling.

(Is there one place to look to find documentation of all Markdown-for-Discourse?)

But yes, my wish here is to specify the width to scale to, and have the height be scaled proportionally.

3 « J'aime »

I am pretty warm to adding support for:

|250x] and |x190] in fact I like this little bit of ninja so much that I will get the change slotted. @pmusaraj can you add this support?

14 « J'aime »

This is now done and in tests-passed.

10 « J'aime »

:thinking: I am having a bit of trouble with this…

![image|100x](upload://dHF5P9JKjZN0gahVLRQmDIEqo8C.jpeg)
image|100x

![image|x100](upload://dHF5P9JKjZN0gahVLRQmDIEqo8C.jpeg)
image|x100

1 « J'aime »

Not performant! :rofl:

4 « J'aime »

Hmm, this is set up to respond to this syntax ![image|354x356,100x](upload://dHF5P9JKjZN0gahVLRQmDIEqo8C.jpeg) works:

image

I kept this consistent with percentage scaling, which responds to [image|300x100,50%].

1 « J'aime »

The percentage scaling ninja markup no longer makes mental sense to me.

[image|300x100,50%] says “show this image (actual size unknown), at 300px by 100px, but wait, scale that by 50%, so show it at 150px by 50px”.

I really don’t understand the point of this kind of notation – because you can just set the pixel sizing however you want it, so why not do the 50% scaling in the first place?

I do not want to specify one display size followed by a second display size, and cannot imagine why anyone would. I just want to say “show this image (of unknown original size) at 150px width, with proportionally scaled height” or “show this image (of unknown original size) at 150px height, with proportionally scaled width”.

2 « J'aime »

the same question i want to ,just tell picture ,it is 200px width ,and skip height

Je souhaiterais cela également.

Pour récapituler, la syntaxe actuelle pour redimensionner les images (avec des espaces pour la lisibilité) ressemble à ceci :

! [ NOM_DE_L_IMAGE | LARGEURxHAUTEUR, POURCENTAGE_D_ECHELLE ] ( EMPLACEMENT_DE_L_IMAGE )

Je pense qu’il serait vraiment formidable si nous pouvions redimensionner UNIQUEMENT la LARGEUR OU la HAUTEUR, et entrer le mot AUTO pour la dimension respective.

Par exemple, disons que je veux que cette image fasse 150 px de large, mais que je ne veux pas calculer le ratio pour ajuster la hauteur à la résolution appropriée…
![très bien|250x190](//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/0/3/03741c9f3eafd7fc8ccd791a6971a2c0d52783e4.jpg)

J’aimerais beaucoup si nous pouvions remplacer la LARGEUR par 150 et la HAUTEUR par auto comme suit…
![très bien|150xauto](//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/0/3/03741c9f3eafd7fc8ccd791a6971a2c0d52783e4.jpg)

Qu’en pensez-vous @Falco ?

Je pense toujours que la proposition d’origine est un peu plus facile à expliquer.

Coller :

![image|494x500](upload://jRgaIl6YH5la4m5rkLnkJIa6XYV.jpeg) 

Ensuite, éditer pour :

![image|100x](upload://jRgaIl6YH5la4m5rkLnkJIa6XYV.jpeg) 

Cela fonctionne maintenant selon cela, mais c’est un peu plus difficile à expliquer :

![image|494x500,100x](upload://jRgaIl6YH5la4m5rkLnkJIa6XYV.jpeg) 

@jord8on tout cela fonctionne déjà, voici la syntaxe que tu recherches :

[très bien|250x190,150x]

4 « J'aime »

Ahhhhh @sam, merci pour la redirection. La fonctionnalité actuelle est PARFAITE, si j’ai bien compris maintenant.

Voyons si j’ai tout saisi…

  • « x » représente « auto »
  • si j’utilise « x » avant un nombre, cela représente la largeur. Par exemple : x150 = "width: auto; height: 150px;"
  • si j’utilise « x » après un nombre, cela représente la hauteur. Par exemple : 150x = "width: 150px; height: auto;"

––––––––––––––––––––––––––––––––––––

Testons cela avec cette image qui a pour dimensions "width:600px; height: 200px;".

La syntaxe d’intégration par défaut est :

![we love discourse|600x200](upload://gvBLukUHTZLicvbieEMWVlBj9OK.png)

ce qui donne…

L’image suivante a été mise à l’échelle pour une largeur de 200 px (hauteur = x = auto) :

![we love discourse|600x200,200x](upload://gvBLukUHTZLicvbieEMWVlBj9OK.png)

ce qui donne :

L’image suivante a été mise à l’échelle pour une hauteur de 100 px (largeur = x = auto) :

![we love discourse|600x200,x100](upload://gvBLukUHTZLicvbieEMWVlBj9OK.png)

ce qui donne :

––––––––––––––––––––––––––––––––––––

Cela semble fonctionner à merveille. Je suis ravi de comprendre et de pouvoir maintenant l’utiliser !

Merci @sam pour ta réponse rapide ! :raising_hands:

9 « J'aime »