For this tutorial we’ll assume that a form with a file upload field has already been set up.
Our goal is to add image editing to this field without having to modify any existing code.
Why help your users Crop Images?
- To speed up the image upload. A lower image size results in faster uploads, improved upload stability, and less disk usage;
- To receive better user generated content. With some guidance users can crop the important parts of an image;
- To lower image upload friction. Users aren’t designers. If an image isn’t in our desired aspect ratio or bigger than the maximum file size they won’t always know how to fix that;
When we optimise images before uploading, we not only get better images, we also get more images because there’s less users that will exit our form out of frustration.
Using CropGuide to Crop Images
CropGuide helps with:
- Enforcing a crop aspect ratio;
- Requiring a minimum image size;
- Automatically scale images to a maximum size;
- Compressing images or converting image formats;
- Fixing image orientation issues;
Installation only takes a couple minutes and requires two steps:
We add the CropGuide
<script>to our webpage
CropGuide now automatically intercepts each file upload and offers an image editor to the user. We can set our image requirements in the CropGuide dashboard.
Important: Images aren’t uploaded to CropGuide, image editing happens in the browser which is great for privacy and performance.
This is what our code looks like.
<!-- The existing file input somewhere in our form --> <input type="file" /> <!-- The script tag we just added to our page --> <script defer src="https://cdn.crop.guide/loader/l.js?c=123ABC"></script>
Try out the image editor by selecting an image below. Images are edited in the browser, nothing is uploaded.
NoCode Image Cropping
CropGuide can be installed and configured without any code changes, making it perfect for use with NoCode services.
It has been tested with popular tools like Bubble, Shopify, Webflow, Weebly, Squarespace, and Carrd. It just works ™
It’s also suitable for products like WordPress. Follow this WordPress tutorial on how to add the CropGuide script tag and get image editing on your WordPress form.
If a user can upload an image on your website, you can use CropGuide to offer image cropping.
Our users can now more easily upload images, resulting in higher quality images and more images uploaded. We save time correcting image problems on the server and helping users prepare their images.
If you’re looking for a more tightly integrated image editor solution with a bigger featureset then Pintura is be a great fit.