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.