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 للبعد المقابل.

على سبيل المثال: لنفترض أنني أريد أن يكون هذا الصورة بعرض 150 بكسل، لكنني لا أريد حساب النسبة لضبط الارتفاع إلى الدقة المناسبة…

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

سأكون سعيدًا جدًا إذا أمكننا استبدال WIDTH بـ 150 و HEIGHT بـ 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 هذا يعمل بالفعل، وهذا هو التركيب النحوي الذي تبحث عنه:

[ممتاز جدًا|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)

والذي يبدو كالتالي…

تم تغيير حجم الصورة التالية لتصبح بعرض 200 بكسل (الارتفاع = x = auto):

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

والذي يبدو كالتالي:

تم تغيير حجم الصورة التالية لتصبح بارتفاع 100 بكسل (العرض = x = auto):

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

والذي يبدو كالتالي:

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

يبدو أن هذا يعمل بشكل رائع. سعيد جدًا بفهم الأمر، والآن أصبح بإمكاني استخدامه!

شكرًا لك يا @sam على الرد السريع! :raising_hands:

9 إعجابات