processwire
Client side image resize and max width problem
Short description of the issue
If a maximum width is defined for an image field and the resize mode is set to "Use client-side resize when possible" and a portrait image is uploaded in this field, the maximum width is applied to the height even though the swap min/max option for portrait images is deactivated. This does not happen in server-side resize mode.
Expected behavior
The maximum width should also be applied to the width of portrait format images if swap min/max has not been explicitly activated.
Actual behavior
The maximum width is applied to the height for portrait format images, but only in mode "client-side resize"
Optional: Screenshots/Links that demonstrate the issue
Setup/Environment
- ProcessWire version: 3.0.229
@FlipZoomMedia Client side resize requires both a max width and max height. If only one is provided, then the fallback behavior is to use it for both dimensions. See notes in your screenshot above for the setting "How to resize to max dimensions":
When using client-side resize, please specify both max width and max height in the fields above, or max megapixels in the field below.
@ryancramerdesign Yes, but I cannot define a maximum height, as this should and can be variable depending on the portrait format. In this scenario, it is only important that the maximum width is not exceeded and always has an exact width. No matter whether portrait or landscape format. Why does this work in server-side-resize but not in client-side?
@FlipZoomMedia I don't know why it requires both max width and height together. It came from a JS library which I adapted to use in PW, but I don't understand the math behind it. The code was clear that both max width and max height were to be provided, so that's why it's echoed in the field settings. For your case, couldn't you just specify a really large max height like 4000 pixels or something? That should have the same effect as no max height? Another option would be just to use server side resize, which I don't think requires both max width and height at the same time.
@ryancramerdesign The workaround with an absurdly high max-height value works. Thanks for the food for thought. But couldn't this be done automatically on the PW side? If no height is specified, but a width is, then set the empty value to 99999 and vice versa?
In this setup, server-side mode sometimes reaches its limits in terms of available resources on a shared system. Around 200 images are uploaded at once, some of which have a resolution of 4000 to 8000 pixels wide. The RAM reaches its limits with this quantity and size.
Yes, the customer has instructions to reduce the images to the maximum width before uploading them, but we both know what customers are like. That's why I want to reduce the maximum width on the client side before the images are processed further on the server side (watermarks etc.).
Maybe it could be done automatically? I'm not really sure. I'm terrible at image resizing math, so I don't even attempt it, and instead rely upon existing libraries (like in this case) and the expertise of @horst-n (for PHP image stuff). When the code tells me it requires both max width and height then I just work with it as it instructs, but it's certainly possible that it could be worked around or modified to work the way you mentioned.
Hey @ryancramerdesign the only ideas I got, by simply had a quick read here in the issue, is: Do we already know the original image sizes BEFORE upload or client-resize starts? If yes, we for example, can calculate the exact real needed height for portraits, in a setup like @FlipZoomMedia had. Otherwise, without knowing the exact original image sizes, it seems, the workaround with 99999 height is a way. So, as you already said, I only have expertise with PHP image stuff, so not knowing what that JS lib needs or how it works. :-/
Thanks @horst-n, I don't know for certain whether the original sizes are known before upload or not, but I'd have to imagine so, otherwise I think it wouldn't attempt resize. 99999 height sounds simplest to me. :)