Need before image upload event on panel for image client side resize

I’m trying to create new custom field that enable image client side resize. But the issue is to accessing file element before dropzone upload.

If i achive to access file element, i can resize image with javascript.

Is there any event before dropzone upload?

2 Likes

Any update on this? …

Hmm. I’ve gone through the plugin repository and it doesn’t look like it saw the light of day, at least not publicly. Try yourself, the list is here. Maybe theres something that does what you are after.

Easy enough to resize images in the templates though, I am not sure how useful a resizer is in the panel.

Usually I just use image shrink on upload which prevents massive images from digital cameras ending up on a website. If an image is above a set size on upload, it scales it down to that size. From there you can resize stuff in your templates and optionally combine with focus crop to get a good part of the image. The danger with letting people resize images via the panel is that someone might accidentally resize a hero banners image far to low and you end up with a pixelated mess on the website. :slight_smile:

@thewebprojects: No, there is no pre-upload event to hook into in Kirby 2. But the good news is: Kirby will have a bright future.

Thanks for the replies. My main interest in client side image resizing has to do with saving server resources and performance. The resizing would be automatically done client side, then uploaded.

I’ve got my eye on the K3 progress. It does indeed look exciting.

If you would move the initial resizing to the client side, why exactly would you need a pre-upload hook for? All logic for deciding if a resize would be needed should be client-side too then?

@thewebprojects Well, if it suits your project and budget, you could farm out these tasks to a third party like Imgix or Cloudinary. Getkirby.com uses Imgix and there is a plugin for it. Have a search through the forum, there a few threads around doing.

Hi @bvdputte, admittedly I don’t know exactly what’s necessary to get client side image resizing in Kirby but it seems logical that some pre-upload hook would be needed.

This article explains what I’m after (just to clear up any potential misunderstanding).

As I see it, it goes like this: client-side ‘library’ detects if image you’ld like to upload fits the validation size. If it does, it gets uploaded. If it doesn’t, the image gets resized via HTML5, JS and Canvas wizardry according your preset. When this succeeds, the image gets uploaded. Kirby has not really something to do with this, as the resizing always happens in the browser.

I would validate the uploaded image again via Kirby though; in case something went wrong on the client side and you’ld expect the image to be resized.