Image Filters

Details

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

Categories

Containers Media Technical Productivity Blog Visual Elements

Types

Element Action

Links

Service Link:

https://www.rapidevelopers.com

Instructions

After installing this plugin you have access to two elements:
- Filter

1. Go to Settings->General of your app and expose the option to add id attributes to html elements
2. Drag the "Filter" element onto your page.
3. Add an image to your page and enter an ID attribute in the element inspector of your image
4. 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

1. 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.
2. Choose which filter should be applied using the dropdown in the element inspector.
3. Specify the strength of the effect for the filter you choose. The values in the other field will be ignored.
4. Go to workflows-> when page is loaded-> Apply Filter