Forum Academy Marketplace Showcase Pricing Features

Image processing using Imgix - New Plugin from Zeroqode

This amazing plugin will enable you and your users to process any images with multitude of cool effects using Imgix image processor. For example it can adjust the brightness and contrast, apply multiple color effects like blur, sepia and monochrome, add branding to your images by printing a watermark into any uploaded image, overlay text or detect faces and much more. To use this plugin you would need to sign up at https://www.imgix.com/ and obtain Imgix Webproxy Source’s Domain as well as the secure token.

When ready, simply place the plugin element on the page and set it up in the workflow. You have to link the original image in workflow to apply necessary filters and changes.

This is a quick demo: https://zeroqode-demo-03.bubbleapps.io/image_processing
and this is the plugin page: https://zeroqode.com/plugin/image-processing-using-imgix-1528885359695x507830172296151040

Thanks
Levon Terteryan
Founder @ Zeroqode & Bubblewits

zeroqode-for-web-160x120

Bubble Templates
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-code Development Services

1 Like

We just created a gif for this plugin to better demonstrate its features :slight_smile:

1 Like

Hey @levon

Would you be willing to share how one of these are constructed?
image

For some reason, this is not working (ignore that it’s not blue, I just clicked the wrong place before the screenshot):

But cropping does work when I save it to the database. So I can’t do it on the fly?
If not, how do you do it on the demo page? I see there is a hidden small image called processing image A but I still am unclear on how you process it and change the on display image

Thanks

p.s. just in case:
image

Hi @JayM ,

Thanks for reaching out.

image

This is a simple plugin action based on the Imgix API, but please note that it is different than Bubble’s native :processed with Imgix method.

The available plugin features can be found in the Plugins tab here:

And regarding the action features, they can be adjusted here:

Plugin demo page: zeroqode-demo-03 | Bubble Editor

Best regards,
Zeroqode Team

Oh ok, that’s an extra paid plugin.

Am I unable to do what I’m looking for with the built-in function? Why does it work in some cases and not in others? I am just trying to crop it to fit its image frame/group.

Hi @JayM ,

Thanks for feedback. Your setups seem to be correct if you want to crop the image to fit its group:

Or there is another way - you can set to Keep element proportions in Responsive settings:

By marking this checkbox.

Additionally, you can try to use our plugin cropping features as an alternative:

Or is it something else you are trying to achieve? Please relate a bit more on what you’re trying to accomplish so we can suggest a workaround perhaps.

Best regards,
Zeroqode Team

I am trying to fit images into a square no matter their size ratio:

So this one happens to be square and looks good:

This one does not:

Not matter the combination of run-mode rendering + responsive propotions it doesn’t come out right:
image

Now, I am trying to save the image into a Post data type for displaying later, which I am guessing is best to save the original, not any cropped version in case I change the design later. But it’s not clear to me where and how I can apply the built-in process with imgix crop to fit size where it would actually do it. Does that need to be combined with the correct render settings to work?

Hi @JayM,

Thanks for feedback. You can simply use the Bubble’s imgix implementation, but just make sure to have the right settings and everything will work fine.

Here is an example of a panoramic image with image processing but without any settings:

Just having the rendering mode as Rescale. But if you mark this feature to resize to fit the dimensions by cropping:

It will look like this afterwards:

In case you need some more help with Bubble’s features, please check some different forum threads perhaps :pray:

Best regards,
Zeroqode Team

This does not work:

Any idea why?

Hi @JayM,

Thanks for feedback. Sorry but we are no longer able to assist, unfortunately, as it is beyond our support services. We shared an example of how it should be working with simple setups. Perhaps your app has different setups that might influence on this matter. You can try to make a separate testing page with just an Image element, and apply the instructions shared above, as a workaround for debugging.

Thanks for understanding. :pray:

Best regards,
Zeroqode Team

1 Like