Allow to enter manually numbers in the with/height sliders in the cloud library

[Nazrinn]

What problem does this address?

I find it pretty frustrating to use the slider in the cloud image browser and try to obtain an exact width or height size for an image.

What is your proposed solution?

Allow a number input field to adjust the size slider values.

Will this feature require documentation? (Optional)

No.

---

Figma

[selul]

Good point, we will review it. Thanks for sharing this with us. cc: @Codeinwp/design-team

[mghenciu]

Thank you for your feedback, @Nazrinn
I think this is a very good idea.

What we can do is either find a middle ground, having both the Sliders and the Manual input:

---

or remove entirely the Sliders, and use only Manual inputs for the Size:

Let me know your thoughts, and which one you think will work the best.
Personally, I think Sliders are not needed for this case - so we can definitely use only the Manul Input fields. And this is also better from an Accessibility pov, since it's easier to switch/edit those 2 values only by using the keyboard.

cc. @JohnPixle

[Nazrinn]

First one sounds best to me. I like using sliders as have an idea of how much smaller I am making the image.

Also you know what would be great?
Have the height/width keep its number ratio (matching the image's aspect ratio), so when the width is changed, the height does too. And vice-versa. That would be a cherry on to though.

[Nazrinn]

const image = document.getElementById('myImage')
const width = image.width
const height = image.height
const aspectRatio = width / height

onWidthInputChange(newWidth) {
  image.width = newWidth
  image.height = newWidth / aspectRatio 
}

onHeightChange(newHeight) {
  image.width = newHeight;
  image.height = newHeight *  aspectRatio
}

Some dummy JS logic to update an image width/heigh based on aspect ratio.

[mghenciu]

Thank you for the prompt answer and code snippet, Nazrinn.
The suggestion with keeping the same aspect ratio make sense. Here's a potential direction:

We'll explore more this improvements when the implementation phase will start.

[selul]

Hey there,

Great insights; thank you all for your contributions. I wanted to bring one aspect into the discussion, the fact that we have the Resize dropdown, which should accommodate the preserve ratio behavior.

I.e when Fit is selected, the system resizes the image while keeping the aspect ratio to fit a given size.

I think what we can do more is allow those input numbers, but adjust the sliders when the values are changed based on the Resize behavior.

What do you think?

[mghenciu]

I think what we can do more is allow those input numbers, but adjust the sliders when the values are changed based on the Resize behavior.

This sounds good.

I assumed that the Resize option does what you mentioned, Marius.
But I am not 100% sure it works as expected. For the image below I changed the image size to Fill, without seeing any changes even in the link: https://mlymuwv4451b.i.optimole.com/cb:mP6lFbtR.lcvOhl1G/rs:fill:385:174/g:noea/id:fcea35e0d74acd407e3a80bf70f537af/https://molehq.vertisite.cloud/porsche_918_spyder_prototype_1920x1080_28267.jpg

---

Also, I am thinking if with this resize we understand we same thing as other products do. For example in Cloudinary, Imagkit and others - the idea with this is to Crop and image (of course having the option to adjust the image to be Fill or Fit).

But in our case this is more like a changing the image size, not actually cropping it.

[Nazrinn]

Also just saying that I agree with @mghenciu demo's with the checkbox saying "Maintain Aspect Ratio". This is similar to how you can resize images in Photoshop so I can imagine this would feel familiar for at least some users.

I'm not sure if fit/fill are very clear to most users. As I understand one is for maintaining the aspect ratio (resizing) and the other doesn't (cropping; from the sides toward the middle)?

[selul]

As I understand one is for maintaining the aspect ratio (resizing) and the other doesn't (cropping; from the sides toward the middle)?

Indeed.

This is similar to how you can resize images in Photoshop so I can imagine this would feel familiar for at least some users.

I agree, however, I think this will duplicate the functionality of the resize dropdown; maybe replacing the texts in the resize dropdown to make them easier to understand will solve the problem.

But I am not 100% sure it works as expected. For the image below I changed the image size to Fill, without seeing any changes even in the link:

Yes, based on your description it might be a bug here.

[mghenciu]

I suggest for now we stick to adding the Input fields, where user can add the numbers.
And also since we have this issue in the upcoming release, we can add a helper text - which should help users understand what each of those option does.

Later we can review this more, also think about integrating a Image Crop feature.

---

I'll create an issue for the mentioned bug, Marius.

[mghenciu]

I'll mark this as Ready for Dev.
Ping me if other design changes are required.