How To Let Users Crop Images Before Uploading
When a website asks us to upload a photo, there’s usually some caveats. The photo might have to be a square, a wide banner, or below a certain file size to allow upload.
Asking visitors to prepare the image themselves adds friction. They have to leave the form, find an editing tool, work out the right dimensions, and then return to try the upload again (if they return at all).
CropGuide makes that step part of the existing upload form instead.
Keep The Upload Form You Already Have
CropGuide works with the file inputs already on your website.
It doesn’t replace the form, change where file uploads go, or require a new upload backend. We add it to the page and keep using the upload process we already have.
Once loaded, CropGuide automatically intercepts images selected in existing file upload fields.
Now:
- A visitor chooses an image in the existing form.
- CropGuide opens the image editor before the upload starts.
- The visitor adjusts the crop.
- CropGuide returns the corrected image to the existing field.
- The form uploads it as usual.
The image editing is fully private because it happens in the visitor’s browser. The image doesn’t go through CropGuide servers.
A Concrete Example: Square Profile Photos
Image running a member directory with a profile photo field.
Without an editor, one member might upload a tall portrait while another uploads a wide group photo. We can display both in square frames, but faces may be cut off and our directory will look inconsistent.
With CropGuide, we can set the required crop aspect ratio to square. When a member selects a photo, they see and can adjust this square crop before it is uploaded. They can position their face inside the frame and confirm the result.
The form itself hasn’t changed. The profile photo still arrives at the same upload destination, but it now has the shape we asked for.
The same approach works for product photos, property listings, team headshots, cover images, and other forms where the final image needs predictable dimensions. We cover the setup in more detail in how to require square photos in an upload form.
Add CropGuide To The Website
First, we create a CropGuide account. Then we set the image requirements for our website in the CropGuide dashboard.
We then copy the provided script (it includes your unique key) to the website header right before </head>. It looks like this:
<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>Our installation instructions show the general setup. We also have integration guides for website builders and services including Shopify, Squarespace, Webflow, Wix, and WordPress.
When the script is in place, we can test the existing file upload field.
When an image file is selected or dropped CropGuide will do its thing.
- A portrait photo from a phone
- A wide landscape image
- An image close to the minimum required size
- A large image that needs resizing
All these images are now modified based on the requirements set in the CropGuide dashboard.
If you want to see the image editor in action you can try the live demo.
No Change To The Upload Process
We don’t have to rebuild an upload form just to let visitors crop their images.
By adding the CropGuide script, we can keep the current form and backend in place and optimise images before they’re uploaded. If this sounds like a problem you’re trying to solve, you can start with the installation guide and test it on an existing file upload field.
