Image resizing for users via the WYSIWYG?

joren

Hello, we're trying to figure out a way to reduce bandwidth usage as we have a lot of users that upload very high resolutions images to their posts. We noticed that there is no resizing being done. So, if they upload a 4k image for example, even though the picture in the post looks like it's only 700px or so wide, it's actually still serving the 4k resolution version to the browser.

I didn't see any plugins that add any additional compression/resizing to images, has anyone implemented something like this? Or do people just typically end up using the Imgur plugin in order to save on bandwidth?

joren

Is this the wrong subforum for this kind of post maybe?

vrijvlinder

You could try this configuration, put it inside the config.php file

$Configuration['Garden']['UploadImage']['Quality']='50';

R_J

@joren said:
Is this the wrong subforum for this kind of post maybe?

No, it's just that it would need (advanced?) JavaScript skills to do so. I assume you are using the Advanced Editor. Look at this line: https://github.com/vanilla/vanilla/blob/release/2.5a/plugins/editor/js/editor.js#L1029-L1031

There is a check if the files size is above a file limit (configurable, I guess it is 1MB). Later on the upload is denied when the file is too large.

Instead of that there should be a check if this file is an image and if yes, it must be resized down to a configurable maximum size.

I don't think you could hook somehow into this process so you would have to change the code around lines 1056 - 1082
By now it follows this logic

if (validSize && validFile && !fileAlreadyExists) {
    // here is the upload logic
} else {
    // File dropped is not allowed!
    // Create and show error message
}

It must look like that:

if (
    !validFile ||
    fileAlreadyExists ||
    (!validSize && extension not in (jpg, png etc.))
) {
    // File dropped is not allowed!
    // Create and show error message
} else {
    if (!validSize) {
        // reduce image size
    }
    // here is the upload logic
}

You "only" need to find out how to reduce this file....

Lorenzo_Prn

https://open.vanillaforums.com/discussion/comment/251108#Comment_251108

This helps a lot to reduce the image size in kb, without compromise on the quality (but doesn't works very nice on PNG maybe) but px remains the same, a 4k pic isn't scaled to 460*340, they remain 4600*3600

Lorenzo_Prn

Definitely, it doesn't work on PNG's, it has increased the size in kb from 665 to 1848

charrondev

@Lorenzo @joren

The next open source release will have the ability specify maximum image dimensions which should help immensely with this. https://docs.vanillaforums.com/help/releases/2019-005/#image-upload-limits

These limits apply to images uploaded through Rich Editor, Advanced Editor, & the API.

R_J

https://open.vanillaforums.com/discussion/comment/256630#Comment_256630

Having a nice upload script which allows basic operations would be veeery nice, e.g

https://fengyuanchen.github.io/cropperjs/

https://www.imagerjs.com/

https://foliotek.github.io/Croppie/

pinchies

On my vanilla server, I decided against patching the core vanilla code to prevent things getting broken during updates. Instead, I created a php script to scan my uploads folder, and then resize any JPEG images that had a filesize of more than 1.2 bits per pixel. I decided not to resize image dimensions as I was satisfied with the reduction in file size.

I then used the CRON script scheduler in CPanel to run this script every half an hour, so that future uploads will be compressed.

You can see what I did here: https://github.com/pinchies/VanillaCompressImages/

Aolee

https://open.vanillaforums.com/discussion/comment/256630#Comment_256630

Hi Guys, this is awesome stuff, but sorry for my eyes are playing tricks on me, can't seem to find these in the Settings.

R_J

https://open.vanillaforums.com/discussion/comment/258489#Comment_258489

You can find that in the posting settings /vanilla/settings/posting "Enable Upload Limit" must be enabled before the two other boxes appear

Aolee

I don't have them :) its ok i ended up using mogrify and have setup a cron to resize the images greater than 1mb

Thanks.

R_J

In your conf/config-defaults.php files should be a section with the settings:

// ImageUpload
$Configuration['ImageUpload']['Limits']['Enabled'] = false;
$Configuration['ImageUpload']['Limits']['Width'] = '1000';
$Configuration['ImageUpload']['Limits']['Height'] = '1400';

Copy that block and paste it into the /conf/config.php where you can change it as you want to.