First of all, for anyone reading this post, ImagePro is a great plugin! Everything works like a charm.
I have read it but I still have not find a way to resize first without pressing a button. UX wise I cannot have extra buttons to be pressed by users. So any hint how to resize before cropping by user without pressing a let me know.
Since resizing does not seem to work I have done lots of tests with various images. I have two exact same images done with ImagePro and the other with simpleimageresizer.com. The difference is noticable. ImagePro output after cropping gives an image of less quality with 147kb filesize. While the simpleimageresizer.com file size is around 25% smaller with about 112kb. The latter with higher quality settings which you can see on the picture.
Is there something extra I need to do with ImagePro to get the same quality and same smaller filesize? Our app needs lots and lots of photo’s so this is really important to us.
You can’t compare a web service that uses server processing in terms of time and memory with ImagePro that processes images client side. This is its strong point: no use of resources on the server, the work is done by the user’s browser, the image is sent to server in its final version.
If you want to use Bubble this concept is of fundamental importance
It is no coincidence that every web service that exposes APIs for manipulating images that can be integrated into a web app adopts a pay-per-use model
Bubble is based on js and js is event driven. The resizing of an image starts from a user action who must first of all choose the file to be processed.
Subsequently Resizing without user action is possible using the Reducer element. Obviously in this case you can only set max*max dimension: Reducer will reduce the image within those limits.
In any case, since ImagePro performs client-side processing, an event is then needed to trigger the upload workflow on the bubble servers.
The cropping of an image instead must necessarily be done through an action of the user who must select the area of interest of the image. There are web services that perform automatic cropping according to the most relevant areas of the photo but the results are not always optimal. It depends on the type of photo and the objects it contains.
However ImagePro is the most efficient and least expensive way to process images: you just need to adapt the programming logic and interface to your needs using the right compromises
Update, I have found out that doing the proces via mobile iPhone 12 mini returns a file size twice of that of doing it via a PC. So not only is the PC filesize half of that of mobile but also the image quality is much better. Is there something I can do/try to improve this proces when uploading and cropping via mobile?
file size is influenced by many factors: first of all by how the user does the crop (zoom level, etc).
It’s not something you can control. You can only act on the dimensions of the image (width and height): for example using a Reducer element so that the image does not exceed some predefined reasonable dimensions and defining the dimensions of the crop.
Working predominantly on a precise file size is a non-functional approach not only in Bubble but in any app development
I can only assume it is related to viewport size which is obviously different for desktop and mobile.
Not knowing in detail the development of the app I can not give you other information.
Right now, I’m looking to build a similar gallery component in my project. Been fiddling around with your plugin and I’ve been struggling to figure out how to replicate this, would you mind linking me that demo? Would love to take a look to see how you did that! Thanks!
Apologies for the confusion, it was in reference to a comment further back in the thread, where you were discussing how to build a gallery component using a repeating group where users could upload a gallery, add comments, etc. Would love to see that demo if you still have it.
hi @thethinklab.au
you can try setting view mode to 1 and drag mode to move
I don’t know if that’s exactly what you’re expecting, but it seems like a good compromise to me
@thethinklab.au
You can drag with one finger. I changed the settings of the demo app to let you try it (for a short time)
However, the best way to test is to subscribe.
Just to let you know, your demo link isn’t working anymore.
We see
This is the live version of a Bubble app!
The application gimazu-plugins-demo is on a plan that does not grant access to its live version.
If you are the owner of this app, please upgrade the app plan with Bubble to deploy your app and launch it.
Upgrade the app
Thank you so much for building such a great plugin. It works really well, except that I have some random images that won’t load. I checked in the Console and for those images I’m getting the following error.
Access to fetch at 'https://70b2ba838de3a7fc80fc15675915abad.cdn.bubble.io/f1708764511414x300556721855265400/post_1708764473718x495529003085725700_1708764496402.png' from origin 'https://rapidely.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
ImagePro-Image-Tools-initialize--ImagePro---Cropper-.js:52
GET https://70b2ba838de3a7fc80fc15675915abad.cdn.bubble.io/f1708764511414x300556721855265400/post_1708764473718x495529003085725700_1708764496402.png net::ERR_FAILED
instance.data.fn_loadImage @ ImagePro-Image-Tools-initialize--ImagePro---Cropper-.js:52
eval @ ImagePro-Image-Tools-update--ImagePro---Cropper-.js:20
(anonymous) @ run.js:263
(anonymous) @ run.js:267
run_with_error @ run.js:265
(anonymous) @ run.js:267
run_without_catching_not_ready2 @ run.js:45
(anonymous) @ run.js:267
_run_if_not_destroying @ run.js:119
(anonymous) @ run.js:119
run_me @ run.js:112
_run_scheduled @ run.js:112
(anonymous) @ run.js:112
traceSpan2 @ run.js:112
run_scheduled2 @ run.js:112
requestAnimationFrame (async)
ensure_scheduled @ run.js:112
(anonymous) @ run.js:112
invalidate @ run.js:112
invalidate @ run.js:45
set @ run.js:112
val @ run.js:112
state @ run.js:119
(anonymous) @ run.js:257
(anonymous) @ run.js:45
(anonymous) @ run.js:45
_attach_success @ run.js:45
then @ run.js:45
callback @ run.js:45
run_once2 @ run.js:112
run @ run.js:257
(anonymous) @ run.js:141
(anonymous) @ run.js:45
(anonymous) @ run.js:45
_attach_success @ run.js:45
then @ run.js:45
callback @ run.js:45
run @ run.js:141
(anonymous) @ run.js:269
(anonymous) @ run.js:45
_attach_success @ run.js:45
then @ run.js:45
run_subsequent_actions @ run.js:269
(anonymous) @ run.js:269
(anonymous) @ run.js:45
(anonymous) @ run.js:45
_attach_success @ run.js:45
then @ run.js:45
callback @ run.js:45
(anonymous) @ run.js:269
(anonymous) @ run.js:257
(anonymous) @ run.js:45
(anonymous) @ run.js:45
_attach_success @ run.js:45
then @ run.js:45
callback @ run.js:45
run_once2 @ run.js:112
run @ run.js:257
(anonymous) @ run.js:141
(anonymous) @ run.js:45
(anonymous) @ run.js:45
_attach_success @ run.js:45
then @ run.js:45
callback @ run.js:45
run @ run.js:141
(anonymous) @ run.js:269
(anonymous) @ run.js:45
_attach_success @ run.js:45
then @ run.js:45
run_subsequent_actions @ run.js:269
(anonymous) @ run.js:269
(anonymous) @ run.js:45
_attach_success @ run.js:45
then @ run.js:45
_run_workflow @ run.js:269
(anonymous) @ run.js:269
(anonymous) @ run.js:45
_attach_success @ run.js:45
then @ run.js:45
(anonymous) @ run.js:269
(anonymous) @ run.js:45
_attach_success @ run.js:45
then @ run.js:45
(anonymous) @ run.js:269
(anonymous) @ run.js:45
_attach_success @ run.js:45
then @ run.js:45
(anonymous) @ run.js:269
(anonymous) @ run.js:114
(anonymous) @ run.js:45
(anonymous) @ run.js:45
_attach_success @ run.js:45
then @ run.js:45
callback @ run.js:45
freeze_workflows @ run.js:114
run_workflows @ run.js:269
(anonymous) @ run.js:150
(anonymous) @ run.js:45
(anonymous) @ run.js:45
_attach_success @ run.js:45
then @ run.js:45
callback @ run.js:45
run_once2 @ run.js:112
(anonymous) @ run.js:150
(anonymous) @ run.js:114
(anonymous) @ run.js:45
(anonymous) @ run.js:45
_attach_success @ run.js:45
then @ run.js:45
callback @ run.js:45
freeze_workflows @ run.js:114
(anonymous) @ run.js:150
(anonymous) @ run.js:45
(anonymous) @ run.js:45
_attach_success @ run.js:45
then @ run.js:45
callback @ run.js:45
run_once2 @ run.js:112
run_element_workflow @ run.js:150
(anonymous) @ run.js:180
dispatch @ pre_run_jquery.js:2
y.handle @ pre_run_jquery.js:2
ImagePro-Image-Tools-initialize--ImagePro---Cropper-.js:52
Uncaught (in promise) TypeError: Failed to fetch
at instance.data.fn_loadImage (ImagePro-Image-Tools-initialize--ImagePro---Cropper-.js:52:33)
at eval (ImagePro-Image-Tools-update--ImagePro---Cropper-.js:20:23)
at run.js:263:629
at run.js:267:19061
at run_with_error (run.js:265:68)
at run.js:267:19009
at Object.run_without_catching_not_ready2 (run.js:45:39539)
at run.js:267:18974
at ElementInstance2._run_if_not_destroying (run.js:119:33434)
at Autorun2.fn (run.js:119:32911)
at Autorun2.run_me (run.js:112:47953)
at _run_scheduled (run.js:112:50533)
at run.js:112:50376
at traceSpan2 (run.js:112:2797)
at run_scheduled2 (run.js:112:50325)
What’s weird is that these images are not uploaded or treated any differently from any other image uploaded to my app and they are not set as private.
