Gravity Forms Image Upload Comparison

Gravity Forms Image Upload Plugins – An Updated Review of File Uploaders 2022

Written by Michelle Hayes

Last updated:

Categories Gravity Forms

Tags ,

GravityView lets you display all kinds of data collected with Gravity Forms. In this article, we will look at the different Gravity Forms image uploaders and the features they offer, including image upload resizing, image upload previewing, and image upload cropping.

Check out the video review below:

Best Gravity Forms Image Upload Plugins

In 2020, Slim Image Cropper for Gravity Forms, a favorite Gravity Forms image uploader, was removed from the market by the developer. This led us on a search for the best Gravity Forms Image Upload Plugins. Luckily, 2022 has brought some new options to the table.

Slim Image Cropper for Gravity Forms offered great features like image upload resize, image upload preview, and image upload cropping. With this plugin now off the market, there are a couple of other options to consider. 

Let’s take a look at them in more detail. The primary contenders to become your new favorite Gravity Forms image uploader are:

About the Gravity Forms Image Uploader Plugin Options

PluginFree/Paid
File Upload ProAvailable as part of “Gravity Perks”, starting from $59/year
Image HopperStarting from $99/year for a single site license.

Let’s take a look at each of these plugins in a little more detail, shall we?

Gravity Forms File Upload Pro

This plugin is part of the Gravity Perks catalog from Gravity Wiz, a Gravity Forms Certified Developer. It was originally released at the end of 2020 and has had a number of enhancements since then. It makes use of the standard Gravity Forms File Upload field to add useful functionality to this field. File Upload Pro 1.1.5 was released in September 2021.

Gravity Forms File Upload Pro supports image upload resizing, image upload preview, and image upload cropping.

Image Hopper

This plugin was designed specifically as a replacement for Slim Image Cropper for Gravity Forms. Image Hopper was built by the creators of Gravity PDF, also a Gravity Forms Certified Developer. This plugin has experienced exponential growth in its feature set this year due to its integration with Pintura, the image editing engine behind Slim Image Cropper for Gravity Forms. Image Hopper 2.0 was released in September 2021.

Image Hopper supports image upload resizing, image upload preview, and image upload cropping as well as powerful image editing tools.

Let’s take a look at how each Gravity Forms image upload option performs the following features:

Front End Comparison

Here’s what it looks like when you’re uploading files on the front end:

GF File Upload Pro

Dashed outline around text that reads "Drop files here or" with button labeled "Select Files"

File Upload Pro modifies the standard File Upload field from Gravity Forms.

Image Hopper

Light gray box surrounds text that reads "Drop files here or" followed by a link that reads "Select Files"

While Image Hopper adds its own separate field.

Installing GF File Upload Pro vs. Image Hopper

Let’s take a look at how to install different Gravity Forms image upload plugins, starting with…

Installing GF File Upload Pro

To use GF File Upload Pro, install the perk on your site by going to the Forms > Perks menu in your admin bar.

The 'Perks' link underneath 'Forms' on the WordPress menu

From there, click on the Install Perks tab.

Two tabs next to one another reading 'Manage Perks' and 'Install Perks' respectively

Next, find the GP File Upload Pro perk and click Install Perk.

Now when you add a File Upload field to your form you’ll see an additional tab called Perks, which includes a checkbox to “Enable File Upload Pro.” (The options available to you on the Perks tab will depend on which Perks you have installed.)

Gravity Forms File Upload field settings

Installing Image Hopper

Install Image Hopper as you would any new plugin: download it from your account after purchase then upload it to your WordPress Plugins page.

Once it is installed, you will see a new option in the Advanced Fields of your form builder called Image Hopper.

Gravity Forms Advanced fields

Comparing Image Upload Resize Functionality

Now that you know how to install both plugins, let’s compare the functionality and capabilities of each.

Resizing Images Using GF File Upload Pro

To use GF File Upload Pro, you simply add a standard File Upload field to your form, then check the box in the Perks tab labeled “Enable File Upload Pro.”

A checkbox that read 'Enable File Upload Pro'

Once you’ve checked the box to enable File Upload Pro, you will see additional options to Enable Sorting and Enable Cropping. If you check Enable Cropping, you will see additional options for image resizing.

As you’ll see in the image below, you have options to set Exact Dimensions by specifying the width and height in pixels. You can specify max and min dimensions in the same way. If Exact Dimensions or Max Dimensions are specified, the image(s) will be automatically downscaled to meet the specifications. 

You can also set an aspect ratio (e.g. 1:1 for a square image). These will be automatically cropped (if applicable) unless you choose otherwise. See the section below about image cropping for more information.

File Upload Pro settings with Enable Sorting and Enable Cropping boxes checked; boxes for width and height of Exact Dimensions, Max Dimensions, Min Dimensions are blank; Aspect Ratio boxes are blank; Require Crop is unchecked

File Upload Pro can also be used in conjunction with GF Media Library to create multiple sizes of images based on your WordPress settings. By default, the Media Library creates a few different sizes of each image uploaded. To see what sizes your site uses, hover over Settings and click Media in your WordPress Admin Menu.

The 'Media' link underneath 'Settings' in the WordPress menu

There you will see the various dimensions your site uses for your image upload resize.

Thumbnail size, Medium size, Large size

You can modify these sizes to meet your needs and add additional sizes with a little bit of code or a plugin.

When you are ready to display these on your site, you’ll be able to call on whichever of these preset sizes meets your needs (see How to Display an Uploaded Image in Gravity Forms below for more information).

Resizing Images Using Image Hopper

To use Image Hopper, add the Image Hopper field to your form from the Advanced Fields section. There you will see an option to Downscale Images. Below that you will see a checkbox labeled “Crop to dimensions.”

Image Hopper field settings

With the checkbox unchecked, the downscaling will not crop your images to your exact dimensions. Instead, it will maintain the ratio of your image, making sure that it does not exceed the dimensions you set in the Downscale Images field.

However, if you check “Crop to dimensions” the uploaded images will be cropped to the exact size you specified. With the basic license (without the Advanced Image Editor), the images will be automatically cropped for you, using the center of the image as the focal point.

With a license that includes the Advanced Image Editor (Single Site, 5 Site, or Ultimate), you will have the option to allow your users to determine where to crop the image. (See below for more on the image cropper.)

All of the images uploaded using this field will conform to the same size limits. However, you can add multiple Image Hopper fields to your form with different resize dimensions if you need different sizes.

The images uploaded using this field are not automatically saved to the Media Library but are accessible to display on your site using GravityView. Image Hopper does integrate with Gravity Perks’ Media Library, so you can use both plugins to save your image to the Media Library, just as you would do with Gravity Perks’ File Upload Pro.

Also, Image Hopper offers a Post Image field (in the Post Fields section), which does save images to the Media Library. The IH Post Image field differs in that it allows only one image to be uploaded per field.

Gravity Forms Image Upload Preview Functionality

When uploading new images, it’s always important to preview them first.

Previewing Images Using File Upload Pro

File Upload Pro offers two options for image preview functionality. By default, the image upload preview is a thumbnail-sized image.

White box with small image, followed by file name and file size, with an x on the far right of the box

When hovered over, a pencil icon appears over the image to indicate that it can be edited.

Same as above with pencil icon inside a circle superimposed on the image

Clicking on the pencil brings up a full-screen preview of the image.

Large black box with image preview in the middle, gray cancel button on the top left and purple crop button on the top right

This full-screen preview can also be shown automatically by checking the Require Crop option in the File Upload Pro field settings.

Two boxes with a colon between labeled "Aspect Ratio," below that a checked checkbox labeled "Require Crop"

Previewing Images Using Image Hopper

Image Hopper offers a clean-looking image upload preview. It includes a drag and drop interface. Once the image is dropped or selected, the preview shows a percentage as the file is uploaded. When the upload is complete, the top right corner tells you so. The x in the top right corner of the box provides a user-friendly way to remove the image if your user changes their mind before submitting.

Black box with cropped image in center; file name and size listed at top left, top right reads "upload complete; tap to undo"

Gravity Forms Image Cropper Functionality

Image Cropping in File Upload Pro

File Upload Pro presents the option to enable image cropping. With cropping enabled, users will always have the option to crop the image by clicking on the pencil icon that appears when they hover over the image preview. You can also force them to crop the image by checking the box next to Require Crop. 

File Upload Pro settings with Enable File Upload Pro, Enable Sorting, Enable Cropping, and Require Crop all checked; remaining boxes are blank

This is what the cropper looks like with a 1:1 ratio set.

Large black box with image preview in the middle surrounded by a square cropping box, gray cancel button on the top left and purple crop button on the top right

Image Cropping in Image Hopper

With any license that includes the Advanced Image Editor (Single Site, 5 Site, or Ultimate), you will have the option to allow users to crop their images. You can set the image editor to automatically open on upload, or users can choose to edit the image by clicking on the pencil icon that appears at the bottom of their image.

Black box with image in center, pencil icon in black circle appears on top of image in the bottom center

The Advanced Image Editor also includes a number of other settings and gives you the option to choose which to include and which to exclude from the menu of options available to your users.

Features include crop, rotate, flip, resize, 13 filter options, fine tuning options like brightness and contrast, and markup tools like draw and circle

How to Display an Uploaded Image in Gravity Forms

The best way to display your images on the front end is by using GravityView. The GravityView plugin enables you to create “Views” that allow you to display your form entries on the front end of your website.

Each of these plugins works a little differently to display an uploaded image in Gravity Forms using GravityView.

Displaying File Upload Pro or Image Hopper Images on the Front End

File Upload Pro

Using File Upload Pro to display an uploaded image in Gravity Forms, you’ll simply choose the File Upload field from your form when creating your View.

File Upload Pro field in GravityView

Once added, you can click the gear icon and adjust the settings as needed.

Image Hopper

Displaying images in GravityView with Image Hopper works much the same as displaying images uploaded with File Upload Pro. Simply select the Image Hopper field when creating your View.

Image Hopper field in GravityView

Once added, you can click the gear icon and adjust the settings as needed.

Displaying Images Uploaded Using GF Media Library

To take advantage of the resized images with GF Media Library, you’ll add a Custom Content field to your View. Use the merge tag selector to choose the merge tag for your image upload field.

Once the merge tag is inserted in your field, you can add the merge tag modifier of the size you would like to display. Here are a few options using the merge tag {Image:4} – replace this with your merge tag:

  • {Image:4:thumbnail}
  • {Image:4:medium}
  • {Image:4:large}

You can identify what sizes these terms equate to by going to Settings and then Media in the Admin Menu as described above.

This is what it will look like in your Edit View screen:

Text reads "{Image:4:thumbnail}" in Custom Content box

Gravity Forms Image Upload Plugins: Summing Up

💡 Pro tip: To learn more about Gravity Forms, read How to Use Gravity Forms: The Ultimate Guide

Depending on your needs, there are a couple of good alternatives to Slim Image Cropper available for Gravity Forms.

Gravity Forms File Upload Pro attaches to the standard file upload field in Gravity Forms. On its own, it offers options to resize and crop multiple images as well as to preview them as they are uploaded.

Connected to Gravity Forms Media Library, it makes use of the resizing feature of the WordPress Media Library. Each image submitted will be available in multiple sizes, which can be tweaked in your WordPress Settings to meet your needs. 

Image Hopper was designed as a replacement for Slim Image Cropper. In the basic license, you’ll find image preview and image resizing features as well as basic image cropping features. With the Advanced Image Editor, a robust toolset of image editing features is available.

This plugin can also integrate with the Gravity Forms Media Library, allowing you to resize images to multiple sizes as described above. 

And finally, if you want to display your images on the front end, you can use GravityView – our flagship add-on for Gravity Forms that lets you display form entries on your website in a variety of layouts.

Image Credit: Purple Flowers Photo by Kseniia Ilinykh on Unsplash

Join Our Newsletter!📧🙌

✔️ New blog posts straight to your inbox

✔️ Be the first to hear about new updates and releases