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.
Copy link