About two weeks ago the Slim Image Cropper for Gravity Forms plugin was discontinued by its author. This was a really useful plugin that allowed images to be optimized in the browser before being uploaded to the server. This meant faster uploads, less disk space usage, and less bandwidth needed. A win-win for everyone involved.
As this was the recommended plugin for displaying images in Gravity PDF, the software being discontinued was problematic. After reaching out to the original author of Slim to get the full story (they no longer had the time to maintain the software) we came to the conclusion that we’d have to roll up our sleeves and write a bigger, better replacement.
10-days later and a lot of caffeine Image Hopper was born:
Image Hopper isn’t an 100% drop-in-replacement for Slim at this stage (a Post Image field isn’t currently available, nor is image editing features like cropping and rotating). But it does a number of things much better than Slim, including:
The ability to upload multiple images in a single Image Hopper field (Slim only allowed one image per Slim field)
Deep integration with the Gravity Forms ecosystem, including support for popular add-ons like Gravity PDF, GravityView, Gravity Flow, Gravity Perks Nested Forms, and the WooCommerce Gravity Forms add-on
Accessibility at its core. The uploader is fully keyboard and screenreader accessible
Intuitive Settings. Slim allowed you to control every setting imaginable, without much thought to the user having to do the configuring. Image Hopper takes convention over configuration approach and uses sane defaults, only surfacing the most important settings.
If you switch from Slim to Image Hopper we polyfill your Slim fields so that:
You can still view the Slim/Slim Post fields in your admin area without hindrance
The Slim fields are hidden/disabled from end users filling out your form
This ensures you don’t have any data loss, or data you cannot access, when you make the switch.
This is just phase 1 of Image Hopper. An extremely advanced Image Editor feature is coming in the near future, powered by the advanced DokaJS editor.
Thanks, Joshua! It was a whirlwind ride getting this launched in a timely manner, yet still ensuring the overall quality wasn’t effected. Really happy to have phase 1 completed
Quick update: advanced image editing features like cropping, rotating, flipping, image filters, colour correction, markup tools, and resizing is going to land in January.
What will the mobile experience be like? Similar to the desktop video you uploaded? Will the submit button be disabled while the images are uploading? And can the images be compressed to satisfy google page speed score for serving optimized image sizes on gravity view pages?
The mobile experience is amazing! Head over to the Doka site and click the Live Demo button on your mobile to test it out for yourself.
Yes, Image Hopper functions the same as the native multi File Upload field in that regard. An alert will be shown to the end user if they try and submit before the image(s) have been uploaded. This will work the exact same with the image editor module.
We’ll have to run more tests to see if it passes Google’s Page Speed test for optimized images, but the software does allow you to automatically compress the images in the browser before upload, so will be a significant improvement over displaying non-optimized images in GravityView.
My only concern is being able to go full width via foobox on a desktop but also be able to use a smaller size on mobile without google telling me it takes 35 seconds for the page to load because the images aren’t properly sized.
I suppose gf media library by gravity wiz could be used in conjunction with the new image uploader. Would be nice to have just one solution. That’s my only request. You’ve done a fantastic job with this one.
My first thought is getting these Image Hopper images saved in the media library and then serving the media library image in GravityView - using WP native image output (with srcset attributes) - would be the way to resolve this.
This functionality is already on our roadmap and part of out phase 3 rollout (the image editor is phase 2)
The optional image editor for Image Hopper allowing cropping, resizing, annotating, colour adjustment, or photo filters all in a beautiful UX on both desktop, tablet, and mobile. Individually toggle on editing features on a per Hopper basis for even greater control.
We’ve only really looked at the cropping and rotating capabilities in this review, but there is much more available in this plugin. If you have extensive image editing needs for your Gravity Form, then this is the plugin for you – Built With Gravity
Now the editing features have been launched for Image Hopper, we wanted to replace the preview video with something that’ll really shows off what it can do.
Our marketing guru Dan Tabifranca cut together this superb bit of vision. Take a look:
Thanks! It’s a big step up on the video marketing front, that’s for sure.
My next update on Image Hopper should be to announce some sort of Post and Media Library integrations, which is our focus in February. Watch this space
