TallTed
(Ted Thibodeau Jr)
February 6, 2019, 5:00pm
1
Quick image resizing and markdown image dimensions talked about the new “Ninja 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 Like
Falco
(Falco)
February 6, 2019, 5:36pm
2
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
while
![very good|250x190](//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/0/3/03741c9f3eafd7fc8ccd791a6971a2c0d52783e4.jpg)
produces
7 Likes
zogstrip
(Régis Hanol)
February 6, 2019, 5:41pm
3
You can’t just specify the width though.
4 Likes
TallTed
(Ted Thibodeau Jr)
February 6, 2019, 6:04pm
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 Likes
sam
(Sam Saffron)
February 6, 2019, 11:27pm
5
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 Likes
pmusaraj
(Penar Musaraj)
February 8, 2019, 1:40pm
7
This is now done and in tests-passed
.
10 Likes
sam
(Sam Saffron)
February 21, 2019, 4:40am
9
I am having a bit of trouble with this…
![image|100x](upload://dHF5P9JKjZN0gahVLRQmDIEqo8C.jpeg)
![image|x100](upload://dHF5P9JKjZN0gahVLRQmDIEqo8C.jpeg)
1 Like
pmusaraj
(Penar Musaraj)
February 21, 2019, 1:42pm
13
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 Like
TallTed
(Ted Thibodeau Jr)
February 21, 2019, 4:26pm
14
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 Likes
snsnjsn
(Jianwei Li)
October 26, 2019, 6:34am
15
the same question i want to ,just tell picture ,it is 200px width ,and skip height
jord8on
(Jordan)
February 6, 2020, 1:09am
16
I would like this as well.
Just to recap, it looks like the current syntax to scale images (with spaces for readability)
! [ IMAGE_NAME | WIDTHxHEIGHT, SCALE_PERCENTAGE ] ( IMAGE_LOCATION )
I think what would be really great is if we could scale ONLY the width OR the height, and input the word AUTO for the respective dimension.
e.g. Let’s say I wanted this image to be 150px wide but I don’t want to calculate the ratio to adjust the height to the proper resolution…
![very good|250x190](//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/0/3/03741c9f3eafd7fc8ccd791a6971a2c0d52783e4.jpg)
I’d love it if we could replace the WIDTH with 150
and the HEIGHT with auto
as follows…
![very good|150xauto](//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/0/3/03741c9f3eafd7fc8ccd791a6971a2c0d52783e4.jpg)
Thoughts @Falco ?
sam
(Sam Saffron)
February 6, 2020, 1:19am
17
I still think the original proposal is a bit easier to explain.
Paste:
![image|494x500](upload://jRgaIl6YH5la4m5rkLnkJIa6XYV.jpeg)
Then edit to:
![image|100x](upload://jRgaIl6YH5la4m5rkLnkJIa6XYV.jpeg)
It does work now per this, but a bit harder to explain:
![image|494x500,100x](upload://jRgaIl6YH5la4m5rkLnkJIa6XYV.jpeg)
@jord8on this already all works, this is the syntax you are after:
[very good|250x190,150x]
4 Likes
jord8on
(Jordan)
February 6, 2020, 2:31am
18
Ahhhhh @sam , thank you for the redirection. The current functionality is PERFECT, if I’m understanding correctly now.
Let’s see if I’ve got this right…
“x” represents “auto”
if I use “x” before number it will represent width. e.g. x150
= "width: auto; height: 150px;"
if I use “x” after a number it will represent height. e.g. 150x
= "width: 150px; height: auto;"
––––––––––––––––––––––––––––––––––––
Let’s test that out with this image that is "width:600px; height: 200px;"
The default embed syntax is:
![we love discourse|600x200](upload://gvBLukUHTZLicvbieEMWVlBj9OK.png)
which looks like…
The following image has been scaled to a width of 200px (height = x = auto):
![we love discourse|600x200,200x](upload://gvBLukUHTZLicvbieEMWVlBj9OK.png)
which looks like:
The following image has been scaled to a height of 100px (width = x = auto):
![we love discourse|600x200,x100](upload://gvBLukUHTZLicvbieEMWVlBj9OK.png)
which looks like:
––––––––––––––––––––––––––––––––––––
That seems to be working like a charm. So glad to understand, and now be able to use this!
Thanks @sam for the quick response!
9 Likes