Markdown for image resize by px, not percent

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](upload://uycrTGYy9jrMEYoTlOwdpcki5C.jpg)

produces

while

![very good|250x190](upload://uycrTGYy9jrMEYoTlOwdpcki5C.jpg)

produces

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|x100](upload://dHF5P9JKjZN0gahVLRQmDIEqo8C.jpeg)

1개의 좋아요

Not performant! :rofl:

4개의 좋아요

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

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개의 좋아요

저도 같은 질문을 하고 싶은데, 그냥 그림만 알려주세요. 너비는 200px이고, 높이는 생략합니다.

저도 이 기능이 있으면 좋겠습니다.

다시 한번 정리하면, 현재 이미지 크기를 조정하는 문법은 다음과 같습니다 (가독성을 위해 공백을 넣었습니다).

! [ IMAGE_NAME | WIDTHxHEIGHT, SCALE_PERCENTAGE ] ( IMAGE_LOCATION )

너무나도 좋은 기능은 너비나 높이 중 하나만 조정하고, 나머지 차원에 AUTO라는 단어를 입력할 수 있다면 어떨까 싶습니다.

예를 들어, 이 이미지의 너비를 150px로 설정하되, 높이를 적절한 해상도로 조정하기 위해 비율을 계산하고 싶지 않다면…
![very good|250x190](//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/0/3/03741c9f3eafd7fc8ccd791a6971a2c0d52783e4.jpg)

아래처럼 WIDTH를 150으로, HEIGHT를 auto로 대체할 수 있다면 정말 좋겠습니다…
![very good|150xauto](//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/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"를 사용하면 너비(width)를 나타냅니다. 예: x150 = "width: auto; height: 150px;"
  • 숫자 뒤에 "x"를 사용하면 높이(height)를 나타냅니다. 예: 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개의 좋아요