Cropping generated images manually to a fixed aspect ratio

  • Hello,

    I would like to add image cropping to the Gutenberg block I’m developing.
    So I would upload an image and then crop separate images each with their own aspect ratio. I can’t rely on the automated cropping as it won’t always pick the best part of the image in each case.

    I would envisage defining a number of images (probably 4) complete with aspect ratio using add_image_size(). Then, crop the uploaded image to create the images previously defined. The cropping box should fix the aspect ratio for each image as defined.

    I have used a plugin ‘manual image crop’:
    (https://www.ads-software.com/plugins/manual-image-crop/)
    which does exactly this but it hasn’t been updated for 5 years.

    Obviously, I would prefer to stick to well-supported plugin that will hopefully be around for a while.

    If anyone knows of such a plugin or has any tips or ideas I’d be really grateful.

    Best Regards,

    Steve

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi Steve,

    Could you not incorporate a cropping JS library into your block? Something like Cropper JS

    Tony.

    Thread Starter Steve

    (@bugdens)

    Hi Tony,

    Thank you for your reply and suggestion.

    I was hoping for a plugin that I can just configure as that would be a lot less work.
    I’m assuming that this is a pretty common requirement so I don’t want to reinvent the wheel.

    Best Regards,

    Steve

    Thread Starter Steve

    (@bugdens)

    Hi,

    So I found a plugin which allows me upload an image and then crop separate images each with their own aspect ratio:
    https://www.ads-software.com/plugins/crop-thumbnails/

    It was very easy to use and the documentation even has some sample code which worked without issue.

    Now I have to work out how to access the cropped images via a Gutenberg block, I will post that here when I discover how to do it.

    Steve

    • This reply was modified 3 years, 10 months ago by Steve.
    Thread Starter Steve

    (@bugdens)

    Hi,

    To answer my own question, I discovered that I can access the image url from the image parameter, i.e.

    function onSelectImage(newImage) {
    console.log(newImage.sizes.medium.url);
    }

    I still couldn’t access my custom sized image, I found that it needs to be added using image_size_names_choose filter, there’s an explanation of how to do this here:
    https://javascriptforwp.com/forums/topic/getting-specific-image-size-from-mediaupload-component/

    Best Regards,

    Steve

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Cropping generated images manually to a fixed aspect ratio’ is closed to new replies.