Add an Image Cropper to your Webflow site

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

Incorporating an image cropper into your Webflow site allows customers to fine-tune their uploads directly, reducing the need for backend image adjustments. This feature enhances the upload process, ensuring images meet your design requirements with minimal effort.

Before we get started

An overview of what we need to follow the tutorial.

CropGuide enhances the default Webflow file upload field so we need a paid plan to be able to use the field.
We need to create a CropGuide account

Ready? Then let's install CropGuide

Installing CropGuide

The control panel will generate a unique script for your domain similar to the one shown below:

<script>
(function (w, d) {
    w.$cropguide = ['GFFFYQ'];
    var s = d.createElement('script');
    s.async = true;
    s.src = 'https://cdn.cropguide.io/l.js';
    d.head.append(s);
})(window, document);
</script>

Click Page: Home and select the page you want to add CropGuide to.
Click + Add element
Click </> Embed
Copy the CropGuide script for your domain to the Custom Code field.
Click Save & Close

That's it! CropGuide will now load and transform images when they're added to a file upload field on your Webflow 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 have any questions.

Learn more about CropGuide

Add an Image Cropper to your Webflow site

Before we get started

Installing CropGuide

Related content