画像のサイズ変更をパーセントではなくピクセル単位で行うためのMarkdown

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

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

You can’t just specify the width though.

「いいね!」 4

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

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

This is now done and in tests-passed.

「いいね!」 10

: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

Not performant! :rofl:

「いいね!」 4

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

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

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

これについてもお願いします。

念のため復習しますが、現在の画像拡大縮小の構文(読みやすさのためにスペースを入れています)は以下の通りです。

! [ IMAGE_NAME | WIDTHxHEIGHT, SCALE_PERCENTAGE ] ( IMAGE_LOCATION )

本当に素晴らしいのは、幅または高さのどちらか一方だけを拡大縮小でき、それぞれの寸法に対して「AUTO」という単語を入力できるようにすることだと思います。

例えば、この画像の幅を150pxにしたいが、適切な解像度に合わせるために比率を計算して高さを調整したくないとします。
![very good|250x190](//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/0/3/03741c9f3eafd7fc8ccd791a6971a2c0d52783e4.jpg)

幅を150、高さをautoとして以下のように置き換えられたら嬉しいです。
![very good|150xauto](//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/0/3/03741c9f3eafd7fc8ccd791a6971a2c0d52783e4.jpg)

@Falco さんのご意見をお聞かせください。

元の提案の方が説明が少し簡単だと思います。

貼り付け:

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

次に、以下のように編集します:

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

これですでに動作しますが、説明が少し難しくなります:

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

@jord8on これはすでにすべて動作しています。これが求めている構文です:

[very good|250x190,150x]

「いいね!」 4

ああ、@sam さん、リダイレクトありがとうございます。私の理解が正しければ、現在の機能は完璧です。

私が正しく理解しているか確認してみましょう…

  • “x” は “auto” を表します
  • 数字の前に “x” を使うと幅を表します。例:x150 = "width: auto; height: 150px;"
  • 数字の後に “x” を使うと高さを表します。例:150x = "width: 150px; height: auto;"

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

これで、"width:600px; height: 200px;" のこの画像を使ってテストしてみましょう。

デフォルトの埋め込み構文は以下の通りです:

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

表示例は…

次の画像は幅 200px にスケーリングされています(高さ = x = auto):

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

表示例は:

次の画像は高さ 100px にスケーリングされています(幅 = x = auto):

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

表示例は:

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

これは見事に機能しているようです。理解できて、これを使えるようになって本当に嬉しいです!

@sam さん、迅速なご回答ありがとうございます!:raising_hands:

「いいね!」 9