Image resizing for users via the WYSIWYG?

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?

Comments

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

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

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

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

  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

    @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....


    K17
Sign In or Register to comment.