I’m happy to present my first plugin, a powerful image manipulation and utilities elements suite for Bubble!
ImagePro Image Tools Suite includes:
Loader - Allows the user to select local images and makes them available to other elements
Cropper - Crops images through a visual interface
Reducer - Resizes images with a highly efficient algorithm
Filters & Effects - Manipulates an image by applying filters and effects
Watermarker - Applies a watermark (text or image)
Palette - Grabs the image color palette and dominant color
Color Inverter - Generates inverted (opposite) version of the given color
Uploader - Uploads result image to Bubble or custom remote server
Downloader - Downloads result image
Bonus pack element (in Input Forms section)
Slider - A customizable input slider with more appropriate event management for image manipulation than Bubble’s Input Slider
All manipulations (and custom remote server uploads) are client-side (they use user browser) to avoid overloading the Bubble server app with unnecessary tasks.
The elements have also been designed to be used in cascade with each other: for example you can use the Loader output as the Reducer input (using the Reducer before each subsequent manipulation is always a good rule), and the Reducer output as Cropper’s input.
For live demo and details please visit the plugin page here: Plugin page Demo page
This page uses only Bubble standard elements and ImagePro Image Tools elements.
@MarkusBoostedApp
The aspect ratio of the crop box can be fixed (numeric value freely settable) or free.
The demo shows only few ratio values for simplicity. I have updated the app with more options.
I could easily implement min crop width / height with the next version. In any case, the current version returns the width & height of the cropped image to allow you to control and consequently decide which actions to take.
Hi @abdul!
The suite includes 10 elements each of which with many possible settings. As per your request I created a new demo so that you can see the editor as well clicking on the “view editor” link. Since the demo was created as a real app (to allow users to enjoy many features) the elements of the plugin are in hidden groups and popups by default. I therefore recommend that you make these elements visible through the editor’s elements tree.
Definitively the best image reducer & cropper, including a powerful suite of tools.
CONGRATS !
@boston85719 : if I’m correct you were looking for a efficient image cropping tool. Give a try to this one, for me it’s the best one. A paid plugin but not so expensive considering the powerful suite of tools.
Hi @myflappd,
I am working on your request, if the test gives a positive result I will release an update with this new feature in a few hours!
Thank you
@Christophe_HK ,
thank you very much for your compliments.
I try to create plugins that meet my needs when building an app for myself or my clients.
So I built the suite with all those elements that, in my opinion, can solve most of the client-side image manipulation problems.
What you wrote repays me for the great effort I spent
Best regards
What’s absolutely fabulous with this plugin is that all elements can work together, amazing and really powerful. This plugin saves a lot of time!
Moreover, the size reduction algorithm is very efficient. Great job!
I don’t understand your request Are you referring to how to save the image bubble uploaded url in a custom data type?
In this case you have an event and an element status available. Upon occurrence of element → “bubble upload is complete” you can build a workflow in which create or update thing using element → “Uploaded image” status. And you can use an image type field in your custom data type.
