Crop Identity Card Photos Before Upload on Webflow

We use CropGuide to crop a photo to Identity Card size before users upload photos to Webflow

First we need to install CropGuide for Webflow. Then we can set up Identity Card cropping. This will only take a couple of minutes.

If you’re unfamiliar with CropGuide you can try it out on the site

Choose the Identity Card aspect ratio

This guide uses an 99:67 crop ratio, approximating the physical proportions of an Identity Card. Confirm the requirements of the system receiving the upload before enforcing this ratio.

We can set the correct Identity Card aspect ratio in the CropGuide customer dashboard, this will make sure your customers always upload correctly sized images.

  1. Select your website in the Customer dashboard.
  2. Scroll towards the Configuration heading.
  3. Then find Crop Aspect Ratio heading just below it. A screenshot of the CropGuide dashboard showing a text input to set a custom crop aspect ratio
  4. Now we enter 99:67 as the aspect ratio, which reflects the Identity Card size in millimeters.
  5. Click Save.

Set minimum image dimensions

If you want to make sure images are of high enough quality you can optionally set the Minimum Crop Size field.

Now go to the form on your website, refresh the page so we’re sure our new settings have loaded.

Test the Identity Card upload field

When using the image upload field on your Webflow website, CropGuide will now ensure every image is cropped to match the Identity Card aspect ratio of 99:67.

Your customers can now correctly crop and rotate pictures of their Identity Card saving you time having to crop the documents manually.

Try a CropGuide demo on the site, or reach out if you have any questions.

Related content