I am using the Croppie plugin to crop images. Currently the maximum Zoom out I am able to do is until the Viewport reaches either Width or Height. I would like to Zoom out further and fill the blank space with White (or transparent)
For e.g. My crop should look something like this with white space on top and bottom.
And not like this
Is there any way we can do this? I have created a page in Open app to depict this. Please help
Hey @anshuk 
Welcome to the Forum! Can you use the “rescale” run-mode rendering option on the image to accomplish that effect? This way Users would upload an image of any size and the width is set to the width of the image element. White space is added on the top and bottom if the image’s height is less than the element height.
Here’s an example:
Hi @fayewatson, appreciate you helping out. Checked the PictureUploader and Image elements. I don’t see a run mode rendering option. See image below
Also, my objective is to be able to save the cropped output on S3, so that I can use it outside Bubble (for creating FB ads). Not sure if PictureUploader / Image will be able to give me that. Let me know if I missed something.
No problem! And ah, got it; my screenshots were for displaying images within an app (The run-mode rendering option/dropdown appears after you set the dynamic data of an image element). I’m not sure how to save with the white space itself, but it might be possible!
@mishav do you have any suggestions?
@anshuk Yes the library has an option for this.
I’ve updated the plugin to v0.6.0 to allow you to use this option “Enforce Boundary”, although I don’t have time to test it on all the various browsers. Please report back with your results.
@mishav, Thank you for your help here. However, I am unable to see the option of “Enforce Boundary”. I have updated the plugin to v0.6.0. See the image below. Is there something I have missed here?
If its not showing (underneath instance timestamp), you may need to refresh or reopen the app editor to pick up the change.
@mishav, it works. This is exactly what I needed, appreciate your help here.
One more question though - Let’s say I need to crop images to 1200 * 1200 pixels to be used in Facebook carousel ads. My current understanding is that for this to happen I need to create a Viewpoint of width and height 1200 pixels. Now when I do this it covers the entire page and even goes beyond.
How can I solve this?
Yes good point, there is a feature in the library that can do this, setting the size of the output to be either the viewport, the original picture size, or a specific width/height.
It makes sense to use this setting, I’ll add it to the Croppie plugin soon : )
