Templates Plugins Courses

Any Image compressor Plugin for Bubble

Hello

I got the problem about set up Any Image compressor Plugin for Bubble.

I try to upload the image and preview, but it doesn’t work.
Is there any mistake?
Let me know how to resolve this.


Thanks

Hello @Masumi,
Thanks for reaching out!

Can you please share more details about your setup? Have you tried to copy from our Demo or you were applying your own logic? If you can provide a couple of screenshots or a video, it will help me to get a full picture of your issue.

Looking forward to your reply. :slightly_smiling_face:

Best,
Gulce

Hello @Gulce
Thank you for your response.

Yes, I copied setup from your Demo.
But, Your Demo and actual app is not equal.
So, I tried to resolve the logic from your Demo and reproduce on my app.

I set up below.
For upload the image and preview.

  1. set the ‘IMGCompressor-Uploader A’ ‘IMGCompressor-Preview A’ 'IMGCompressor-CompressedImage A’on the page.
  2. set the below.
    ‘IMGCompressor-Preview A’ : images ‘IMGCompressor-Uploader A’s files’.
    ‘IMGCompressor-CompressedImage A’ : ‘???’
    3.set the below on workflow.
    when ‘IMGCompressor-Uploader A Change’ : ‘get files IMGCompressor-Uploader A’
    Button compress is clicked ‘compress IMGCompressor-CompressedImage A’

In this set, preview is showed.
But, the compress image is now shown.
Let me know how to proceed.

Thank you.

Hello @Masumi,

I suppose it might be about the custom states, so please make sure you have created the custom states correctly. Here is an example from our demo:

In case the issue still persists, please add our support@zeroqode.com email as a collaborator of your app (disregard the warning, our email can be added to the collaborator list even if your app is on the Free plan). And please let me know the page name where the issue is found.

This will allow us to identify any possible cause much faster.

Thanks!

Hello, @Gulce

Thank you for your reply.
I invite the e-mail as a collaborator.
Please check my page ‘photo_compress’

Thank you.

@Masumi Thank you for providing access.

I’ve checked your app and here is the result:

The first problem was with the “compressed_return” custom state which was not created. Here:

Also, the compress button was not working properly due to the lack of file transfers provided using “do when condition is true” actions.

Please check our test page (testzeroqode) and use it as a reference.

In case you have any other questions, please let me know. :slightly_smiling_face:

Best,
Gulce

Thank you @Gulce !

I pore through the Demo, but I have some question.

In this Demo, element ‘IMGCompressor-Compressed’ shows 'IMGCompressor-Compressed’s compressed return’.

But, in the workflow, there is no action about ‘IMGCompressor-Compressed’s compressed return’, but other set states.

So,
For showing compressed image(with the element ‘IMGCompressor-CompressedImage A’), how should I set?(Preview is showing now.)

Thank you.

Hi @Masumi,
You’re always welcome!

In order to show the compressed image, you need to set the actions I mentioned above. As for the “compressed_return” custom state, this is for you to preview the compressed image in the plugin element, that’s why there is no action as ‘IMGCompressor-Compressed’s compressed return’. We trigger this with “do when condition is true” events.

I have created a test page (testzeroqode) in your app in accordance with your use case. Here:

So, please take a look at our test page in your app and let me know how it’s going.

Hope it helps. :slightly_smiling_face:

Hello, @Gulce

Thank you for your quick response and I’m sorry asking you again and again.
Little by little, I understand the logic of this app.

Another question, when I want to create(or update to add) the compressed images, how should I do?
I tried to create the compressed image DB, but it doesn’t work.

Thank you.

Always happy to help :slightly_smiling_face: @Masumi

As I understand, you want to save the compressed image to the database.

If yes, you need to create a new field in your database where you will save the compressed image.
And, in order to save the image, you need to use the “create new thing” action in the “Do when IMGCompressor-Compressed’s compressed: count > 0” event.

Here is a short video showing the action needed for this: Loom | Free Screen & Video Recording Software

In case you meant anything else, let me know.

Best,
Gulce

Hello, @Gulce !!

Thank you for your great support!
This is so helpful for me!

The case that user upload images manually is resolved.
But, when the image of database can be compressed?
For example, Field ‘image non-compressed’ can be compressed and saved as filed ‘image compressed’.
This means that I want to compress the image not through the ‘image uploader’.

Thank you.

Hi @Masumi
Sorry for the late reply. :pray:t2:

I would like to ask you to share a bit more details about your question to help me better understand your goal and be able to provide proper feedback on it. :slightly_smiling_face:

Hope to hear from you soon!

Hello @Gulce

The case users in my apps upload the image is resolved.
But, I want to compress existing image in DB.

In my apps, many images occupy the most of the app DB.
So, I want to try compress the existing image and increase extra memory of bubble app.

Thank you.

Hi @Masumi,
Thanks for your reply. :pray:t2:

In order to compress images from the database, you can add a button to the Repeating Group containing images. Thus, this button will trigger the action required to compress the image.

Please check this video for a better understanding: Loom | Free Screen & Video Recording Software | Loom

Hope it helps. :slightly_smiling_face:

Best,
Gulce

Hello @Gulce

Thank you for your reply.
I try to compress images of DB and it is success.
But, I don’t understand how to update the database file.
Maybe, ‘make change the database’ command is needed.
I tried it, but it doesn’t work.(Please check the screenshot below)

Let me know how to resolve this.

Thank you.

@Masumi I’m glad it helped. :slightly_smiling_face:

In order to “make changes to a thing” you will first need to select “Do a search for”, and then specify the thing that you are searching for, namely “photos”. Please see the screenshot below:

Summary

Have a nice day!

Thank you for your reply @Gulce !

In your app, you set the database like below.
existing image : images
compressed image : compressed image

But, in the workflow, the app does’t have the step for updating database.
And it should be add ‘make changes database’ command.
So, here is a question.
In ‘make changes to db’ command, what should be set for ''compressed image" ?
(‘compressed image’ = ???)
I think (compressed image = IMGgompressor- compressedimageB’s compressed:first item), but it doesn’t work.

Thank you.

Hi @Masumi

Please allow me to check this with the developer team and revert with feedback at the nearest time. It can take some time due to the weekend.

Thank you for understanding. :pray:t2:

@Masumi Thank you so much for your patience. :pray:t2:

I’ve consulted with the dev team and tried to recreate your use case once again. So, please let me explain how to update the compressed image in the database.

First of all, please create a new custom state which will be “number”. It’s needed for set state action when we compress the image.

Summary

When the compress button is clicked, you need to set state of the page and use the compress image from the URL action, which will contain the current cell’s photo’s URL.

Summary


Second of all, create a separate event which will be Do when IMGCompressor-Compressed’s compressed_from_url:count > 0. In this event, we need to add the necessary action to draw the compressed image. And then we can use "Make changes to Photo" action to update the compressed image in the database. Please check the screenshot below to see the correct setup for these actions:

Summary


Also, here is a short video for a better understanding: Loom | Free Screen & Video Recording Software | Loom

Please try to replicate this setup on your side and let me know how it’s going.

Have a nice day. :slightly_smiling_face:

Hello @Gulce

Thank you for your great support.
I try your advice and updating database is working.
But, when I try to preview the image in ‘Modify an existing database entry’, original photo shows the image, but compressed image doesn’t show nothing preview.
(pushing the ‘see’ command each photo)


Original photo shows correctly.(URL:https://s3.amazonaws.com/appforest_uf/…)

Compress photo doesn’t show anything in preview.(URL:data:image/png;base64,iVBORw0KGgoA…)

Why is this happened and can I avoid this?
I think the bast way is compressed photo is saved to ‘s3’ database.

Thank you.