SmartBuilder > Help Documentation > Actions

Apply a filter

This block can be used to programmatically apply a filter to an object.

To apply a filter to an object:

  1. Select the Advanced > Effects category then drag the apply filter block onto your action canvas.
    apply filter block
  2. Select the object onto which you want to apply a blend, for example, an image object.
  3. Scroll to the bottom of the action fly-out panel for that object and select the teal block that is used to reference the object itself.
    image object reference action block
  4. Snap the object reference block into the apply filter block, and snap that into your when / do block. In this example, the filter will be applied when the page loads.
    apply filter mode to image object action blocks

Note To adjust the strength of the filter, use a config block. In the example below, the middle image is using the default blur setting of 5 pixels, whereas the image on the right is using a setting of 10 pixels, as specified in the config block.


blur filter applied with varations

When you select a different filter from the dropdown list, the default value is shown in the purple value block. For example, the default value for blur is 5 (pixels), whereas the default value for brightness is 150 (percent).

Filters

View examples of filters in action here:

https://www.w3schools.com/cssref/css3_pr_filter.asp

Blur
A blur is a visual effect that makes the edges of the object appear fuzzy or out of focus.

Brightness
Adjusts the brightness of the image. Brightness refers to the overall lightness or darkness of the image.

0% will make the image completely black.
150% is default and will brighten the image by 50%.

Contrast
Adjusts the contrast of the image. Contrast is the difference in brightness between light and dark areas of an image.

Grayscale
This filter will discard the color information in the object you indicate and make it appear as Grayscale. Grayscale images are composed exclusively of shades of gray.

Invert
Color inversion is when every color is flipped to its opposite on the color wheel. In black and white photos, light areas become dark and dark areas become light. In a color photo, blue becomes orange, green becomes magenta, and so on.

Opacity
Each time this filter is applied it will reduce the opacity of the indicated object by half.

Sepia
Converts the image to sepia. Sepia is a photograph in warm shades of brown.

None
Applying this will return the object to its original state.