Gravity Forms - Any License
Slim Image Cropper for Gravity Forms
Consolidated Update (as of 12/27/2020)
Slim Image Cropper for Gravity Forms has been discontinued by the developer. If you already own it, it still works, but an outdated file upload plugin could make your site especially vulnerable so I would recommend replacing as soon as possible.
I wrote a review of two possible replacements that include features like image preview and image resizing. Read that review on the GravityView blog.
I’ve also uncovered two plugins that can do image cropping in Gravity Forms. They are both early stage, so test them out carefully before using. The first is from Certified Gravity Forms Developer, Gravity Wiz: File Upload Pro. The second is from GravityMore: Gravity Forms Smart Uploads.
How Does it Work?
Once installed, you will see a new field in the Advanced Fields section of your form field options called “Slim”. (There is also one in the Post Fields section for the featured image.) To use this field on your form, click the Slim button or drag and drop like you would for any other field.
The field options begin with the standard Field Label and Description. Below that is where the custom settings begin. The field options have great descriptions with them, so I probably don’t need to spell out a lot, but I’ll walk through how I’ve used them.
Output image ratio – I’ve used this both as default (blank), which does not crop the image and as 1:1, which crops the image to a square. What I love about this tool is that it lets the form submitter edit the crop, repositioning or resizing the image to make sure their face is in the middle, for example.
Output image size – I recently discovered what a huge impact image size can have on page speed and this option here was a big time saver. I was collecting high resolution headshots through the form and not resizing them. My page speed had slowed to over 90 seconds to load (ideal page speed is 3 seconds)! I discovered a fantastic tool at GT Metrix that told me at what size my images were shown on my site and then I configured this field option to match that size. Resizing all the images on the page improved my page speed from 90+ seconds to 7 seconds! And I didn’t have to do any manual resizing with the help of this tool.
Minimum image size – I have left this blank (no minimum) and set a high minimum image size. If you set a minimum image size, it will not allow an upload smaller than that. If a smaller image is dropped into the upload box, an error will appear saying that the image size does not meet the minimum required size. If you would prefer a higher quality image but don’t want to require it, you can use the next option.
Image quality warning – When you would prefer a higher quality image, but don’t want to require it, enter the value of your preferred size image in this box. If a smaller image is uploaded, a warning will appear letting the form submitter know your preferred minimum size, but they will still be able to upload their smaller image.
Instant Edit Mode – This determines whether the editor opens automatically as soon as the image is dropped in the box. I have set this to yes any time that I am cropping the image. That way form submitters can instantly make adjustments to their file. If it’s okay as is, they just click confirm. If not, they use the very simple interface to reposition or resize the crop box on the image before clicking Confirm.
Maximum drop area size – This just determines how the field looks on your form. I found that I like 300,300 so that’s what I’ve used on all my forms.
Maximum file size – This defaults to the maximum file size allowed by your server. You may want to make it smaller if you don’t want images that large uploaded to your site.
Allowed image formats – Here you can set restrictions on what type of images are uploaded, allowing one or multiple formats.
JPEG compression – This allows you to further optimize images that are uploaded to your site. In addition to image size, this is another option that can improve your site speed. I’ve always wanted very high quality images when using this tool, so I’ve set it to 100 or left it at default.
Force output format – This allows you to automatically convert all images uploaded to either JPEG or PNG format. I have not used this option.
Slim Image Cropper in Action
Here is a GIF showing the Slim Image Cropper in action. This is on a form with a 1:1 ratio (square) crop is set. As you can see, the interface is very intuitive and works very easily. Once the crop is complete, just click Confirm at the bottom to finalize the crop and return to complete the rest of the form.
- I had a question when I was first setting this up and received a prompt and helpful response from the developer.
- This is compatible with GravityView, so you can upload images to display in your Views.
- Using the standard Slim field in your form does not save the image to your Media Library. However, there is a Gravity Perk from Gravity Wiz that can take care of that for you. The Gravity Wiz fantastic support team was so helpful in making this work when I reached out.