[New plugin] CropGuide Image Editor and Cropper ✂️ Works with any file upload field or plugin

What is CropGuide?

CropGuide catches images before they’re uploaded and makes sure the images are transformed to fit your requirements.

It can crop, resize, and fix image orientation, and much more. It works perfectly fine on mobile and desktop devices and adjusts to dark and bright themed websites.

CropGuide can apply transforms automatically or show a beautiful image editor to help customers upload the best image possible.

The image editing process happens in the browser, so it is secure and private.

CropGuide works with any file upload field or plugin, if your current file upload solution doesn’t support image editing, simply add CropGuide and you’re set :rocket:

Demo page - Plugin page - Product page

anim-small

Bubble plugin features

At this point the Bubble plugin is a very tiny helper plugin to make it easier to add the CropGuide script tag to the webpage.

I’m here to find out how that should change in the future :blush:

1 Like

Would you be able to add a profile picture crop as well?

@gradylam Do you mean showing a circular crop overlay like this?

Or, additionally also applying that circular mask to the output image so it is a transparent circle?

Hi @gradylam, profile picture cropping is now available in the editor.

You can now:

  1. Show a crop guide. This options shows a circle on top of the image in the user interface. This helps users see which part of their image will be visible.

  2. Apply a circular mask to the output image. This actually alters the resulting image data to render as a circle. In most situations you’d want to do this with CSS but if that’s not possible you can use this option.

Screenshot of the CropGuide admin area:

We added a quick writeup on how to set up circular profile picture cropping with CropGuide

Hi Rik, I have two image uploaders, I want to use your plugin for only one uploader, how do I do that? CropGuide window now opens on each bootloader

Hi! See the example on the following page:

You can specify which fields CropGuide should attach by adding a script tag to the page and set the fields property.

I do now realise that this might not be as easy when using the Bubble plugin for CropGuide, I’m going to see if I can add an additional configuration field tomorrow to make this easier.

Added a FIELD CONFIG input field to the plugin settings page and we’ve extended the Bubble integration docs. :point_down: