Add an Image Cropper to your Bubble site

Add an image cropper to your Bubble site and set image requirements like crop aspect ratio and image target size. Use CropGuide and receive better images.

Integrating an image cropper into your Bubble app lets users adjust their photos before uploading, minimizing the need for you to tweak images later.

This guide helps you set up CropGuide to enhance the existing Bubble file upload field with image cropping functionality.

Installing CropGuide

To get started we first need to create a CropGuide account

The control panel will generate a unique id for your domain: ABCDEF

With your CropGuide account created log in to Bubble.

Open the CropGuide Plugin page
Click “Install in an application”
Select the app you want to add CropGuide to
On the plugin settings page copy your unique id to the API KEY field.

That’s it, CropGuide now loads on your Bubble pages.

Test it out by opening a page with a file input and selecting an image.

Load CropGuide on specific file input elements only

To limit CropGuide to only a subset of file input elements we can set the FIELD CONFIG text box to a field configuration.

Before we do this it’s handy to be able to assign ID’s to our design elements.

Navigate to Settings and then General. Scroll to the General appearance section.
Now put a checkmark in: “Expose the option to add an ID attribute to HTML elements”
Goto Design and select a file upload field. Scroll to the end of the element Appearance tab.
Type a name in the “ID Attribute” field, for example: “my-field”

Now to limit CropGuide to this field, copy paste the code below to the “FIELD CONFIG” field on the plugin configuration page. Note that we’ve prefixed the ID field with a “#” symbol.

window.$cropguide = window.$cropguide || {
    fields: ['#my-field'],
};

That's it! CropGuide will now load and transform images when they're added to a file upload field on your Bubble page.

You can adjust the behavior of CropGuide in the control panel for your domain, or you can set custom instructions per field.

Please feel free to reach out to us if you any questions.

Learn more about CropGuide

Add an Image Cropper to your Bubble site

Installing CropGuide

Load CropGuide on specific file input elements only

Related content