Add an Image Cropper to your Carrd site

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

Integrating an image cropper on your Carrd site enables your visitors to fine-tune their uploaded images, allowing images to fit better with your content and saving you time editing user photos on the backend.

This guide helps you set up CropGuide to enhance the existing Carrd 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 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>

With your CropGuide account created let’s log in to the Carrd admin, select your site, and open the page editor on the page where you want to use CropGuide.

Click + Add Element
Click </> Embed to add a new Embed element.
Set Type to Code.
Copy the CropGuide script for your domain to the Code field.
Set the embed Style to Body End.
Click Done

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

Installing CropGuide

Related content