Bubble - Image Filters Plugin

Overview

This plugin allows you to add 7 different filters/modifications to your images. Filters include:

  • Sepia

  • Brightness

  • Contrast

  • Color

  • Grayscale

  • Saturation

  • Blur

You can either apply the effect to existing image elements using an element action, or use the "Image with Filter" element to add an image with a filter directly.

For a demo of this plugin please visit: https://anticodeplugin.bubbleapps.io/imagefilter

Instructions

After installing this plugin you have access to two elements:

  • Filter

  • Go to Settings->General of your app and expose the option to add id attributes to html elements

  • Drag the "Filter" element onto your page.

  • Add an image to your page and enter an ID attribute in the element inspector of your image

  • Trigger a filter effect within one of your workflows. You can choose one of the 7 filters and specify the strength of the effect. Enter the same element id that you used for the image you want to target in step 3.

  • Image with Filter

  • Drag the "Image with Filter" element onto your page. Upload an image or choose a dynamic image that should be used. Resize your element according to your requirements.

  • Choose which filter should be applied using the dropdown in the element inspector.

  • Specify the strength of the effect for the filter you choose. The values in the other field will be ignored.