# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://anticode.gitbook.io/templates/plugins/bubble-image-filters-plugin.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.