ImagePro Image Tools - New Plugin from Gimazu

Thanks for your response. I am creating a product (custom data type). Product has things - Front image, back image, nutrition image and so on. I want the cropped and compressed image to upload to the Bubble’s file manager and get attached to that product’s respective image thing.

Without your plugin involved, I achieve this by using the workflow Create a new data type.

Here PUP1 represents Bubble’s Picture Uploader’s value as image.

I would appreciate this with dynamic names but please wait until I can figure out how to use your plugin for my purpose

Simple!
You needs 4 elements of the suite: Loader, Reducer, Cropper and Uploader

Set the reducer settings like this (using as input image the Loader->Image loaded)

Set the Cropper settings like this (using as initial content image the Reducer->Resized Image)

Create a workflow when “Button Load Image is clicked” and choose “Browse a ImagePro - Loader” element action. (Then in the dialog box, select the Loader element)

Create a workflow when “Button Crop Image is clicked” and choose “Get Crop a ImagePro - Cropper” element action. (Then in the dialog box, select the Cropper element)

If you want to save automatically on cropping event create a workflow to intercept this event

then select Upload to Bubble a ImagePro Uploader

and set this action using as image This ImagePro-Cropper’s Cropped Image

Create a workflow to intercept Bubble upload complete event

and finally you can create workflow to create your custom type thin with Reduced and Cropped Image.

If you try to create this prototype you will see that everything happens with very good performances because every processing (with the exception of sending the file and creating the new thing) is done directly client side from the browser :wink:

2 Likes

Thanks for the detailed info. The part the drove me nuts was the fact that I was trying to use the field “Attach the file to”. Now I know that its applicable only in case I want the file to be private and attached to user.

Anyhow, my set up is a bit different and based on the demo you created. Loader → Reducer-> Popup->Cropper (in popup)- > Uploader (for each picture). Cropper’s image are set as preview.
I want the uploads to begin after user clicks “save product”. This will give users an option to change their mind before uploading to bubble.

Can I use this workflow instead?

Do you think the “only when” conditions are appropriate?

Clearly, I am not doing something correct as even after adding 3 seconds pause between each upload pics are getting loaded to file manager but not getting attached to the product

So it can’t work, not for the plugin but for incorrect event handling. Remember that Bubble uses Javascript and in javascript the events are fundamental.
When you click on Save Product you cannot have in the same workflow a remote upload and a Create Thing which refers to the upload (even if you pause for 10 minutes!).
Check my example and you will see that Create Thing is put in a specific Uploader → bubble upload is complete event, which occurs as soon as a file has been stored by Bubble so as to return the remote url.
However, it makes no sense to do two or more consecutive uploads in the same workflow.
If you need to store multiple images that need to be manipulated first, I suggest you re-engineer your app by building a sort of multi-step wizard in which to make a series of successive uploads by storing all the images (url) loaded in an image list state.
When the user presses “Save” button the workflow will contain only one Create Thing that will store the stored URLs in the appropriate fields.
This, in my opinion, is the most efficient way to do it. There are also other ways but always keep in consideration the “events” that are generated.
“Only when” conditions are not appropriate, as you are evaluating states (bubble upload pending) and not events.
The state is evaluated at a given time and the workflow does not wait for the state to become false. You can use states to manage interface conditions to show the user for example that an upload is pending. Conversely, an event is able to trigger a workflow as soon as it occurs.
Here, however, we enter the fundamentals of programming.
I hope I was helpful.
If you have other difficulties write me PM

2 Likes

Hey @gm.zumbo,

I may have found an issue with the cropper component.

In my use case, users upload avatars, they can change / crop them at any time.

When an avatar is loaded, the image url is stored in a custom state. No problem to use the Image cropper with the image url stored in this state. The user can then validate and the new / cropped avatar is stored in DB.

If a user want to crop an avatar already stored in the db, I don’t use custom state, the source image for the image cropper is the image url stored in the db. But in this case, it seems the cropper never retrieves this image…

Are you able to get it working using images stored in the db?

Many thanks!

Hi @Christophe_HK ,
There should be no difference between a url stored in a custom state and a url of an image in the db.
I tried to use as Initial image a retrieved image through a “do search for” and the Cropper loads it correctly.
To check what happens in your specific app write me in PM, if you like sharing a link to the editor so that I can take a look.
Regards

[Update]
I also tried to modify the image in the db used as Initial image by the Cropper through a separate workflow, and the Cropper automatically updated the displayed image correctly. I can’t reproduce your issue.
I always remain at your disposal in PM

Hi @gm.zumbo ,

I’ve found the root cause of the cropper issue, and it’s incredible…

I’m using the Microsoft Edge browser on my laptop, and since yesterday I received a notification about an available update. This morning, I updated Edge and since : no more issue with the cropper element.

I really don’t understand why it was working fine before the “Edge update notification”, no more while the notification was there, and again fine now the browser has been updated ! :smiley:
No matter : my problem is now fixed and your plugin is awesome !

Thanks for your valuable post.

Hello @gm.zumbo ,

Any plan to support multiple image upload / resize with this plugin ?

This plugin works really well, and it’s fast, it’s perfect. Nevertheless, I offer my users the possibility to upload several images to create galleries, but uploading the images one by one is not really efficient. So f there’s any plan to manage several images at a time, it would be awesome, I would use only this plugin to manage my use cases (1 image vs several images) !

Hi @Christophe_HK,
this plugin was designed for image manipulation and requires saving one image at a time for several reasons:

  1. bulk operations involving files are very slow in Bubble and can create difficult situations
  2. a large number of images in the client side memory can make the browser very slow
  3. the plugin allows a cascade manipulation and some elements (such as the Cropper) require user interaction, not very compatible with bulk operations.

In my apps I prefer to create interfaces that allow the user to “compose” a gallery by displaying its “progress” in order to have control over every single element (which allows for example to delete files individually if the user decides to use a different image).
Having said that, it seems to me that you only need to resize (with Reducer element?) the images and upload them, if you explain to me how you imagine the functioning of your gallery, maybe I can help you.
Structurally modifying a complex code like that of the suite requires an important commitment so I need to understand better

Many thanks for your feedback @gm.zumbo, and it’s crystal clear, the objective is not to degrade the processing of your plugin which is, once again, great.

I plan to make my users creating or modifying their images galleries :

  • first, they upload their images, or new images if they are updating their gallery. At this time, I do need upload + size reduction.
    When loaded, the users can add caption to each image (optional)
    When the images + caption are okay, they validate all the changes and the new gallery is created in DB (or updated, in case of modification).

But no worry. I guess I can use the Image compression plugin by ezcode to upload and compress multiple images. Then I should be able to use your plugin to crop these images, and upload them in db. Should be okay!

@Christophe_HK

screen-recording

this is my approach to your problem using only Bubble standard code and ImagePro Plugin Loader + Reducer in Repeating Group (with Toolbox free plugin used only to create an incremental list of items). The demo works with single uploads.
If you are interested I can share the demo in PM

1 Like

Great post. Thanks for sharing this post.

Hey @gm.zumbo,

Sorry for the late reply…

I’ve taken a similar approach as I don’t want to loose the benefits of the plugin. So I do ‘t provide my users with bulks of images, they upload them one by one. And using the image pro loader + reducer components, it’ s fast.

More over this approach is coherent with the fact that my users can provide captions with their images. So this operation will take time.

@Christophe_HK,
I received a mail message for your new post but I can’t find your post! Problem solved?

Yes, solved, sorry!
I had an issue with the slider element when used in a pop-up with a data type. The slider didn’t kept its value. I have changed the app design and removed the data type of the pop-up, the slider now takes its value from DB using a custom states, and it works like a charm.

Quite strange, but now it works!

Great Plugin thanks a lot!

I have a quick question: Is there any way to change the color of the “checkered” space around the image? I would like to give it a solid color.

An even nicer solution (design) IMO would be like Instagram is doing: The frame is fixed and you just pull around & zoom the image.

Thanks in advance.
Manuel

@maze, regarding the first question you can use a little trick.
Insert an HTML element before the Cropper element and write this code.

<style>
.cropper-bg {
  background-image:none;
  background-color: coral;
}
</style>

obviously as background color you can enter the color you prefer (HEX code).

As for the second suggestion, I could technically try to develop these features but I have to understand well what impact it could have in responsive interfaces.
In Instagram the problem does not arise because the image format is fixed.

Gimazu

1 Like