Media · Gutenberg
Image Filter block for WordPress
Upload an image and apply real-time CSS filter adjustments — brightness, contrast, saturation, hue, blur, sepia, grayscale, and more. Choose from presets or build a custom look. Optionally expose live filter sliders to visitors.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Upload an image and apply real-time CSS filter adjustments — brightness, contrast, saturation, hue, blur, sepia, grayscale, and more. Choose from presets or build a custom look. Optionally expose live filter sliders to visitors.
Inspector panels on this block: Image, Filter Preset, Custom Filter Sliders, Layout, Overlay, Frontend Controls. Those titles come from index.js, not from a shared template.
Behavior controls: “Quick Preset” options: None (Custom), Vivid, Dramatic, Vintage, Noir; “Object Fit” options: Cover, Contain, Fill, Original; “Show Interactive Sliders” (Let visitors adjust the filter sliders on the front end).
Where to find it
Gutenberg inserter → Media → search “Image Filter” (block name `blockenberg/image-filter` in block.json). Style it in the sidebar after insert.
How to use Image Filter block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Image Filter”, insert it. Category: Media.
- Configure inspector controls that exist on this block. Open Image. Set “Alt Text”, “Caption”, “Quick Preset”, “Brightness (%)”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Alt Text | Text field in the inspector. Saved as `imageAlt`. |
| Caption | Multiline text field in the inspector. Saved as `caption`. |
| Quick Preset | Select control; the chosen value is saved on the block. Options: None (Custom); Vivid; Dramatic; Vintage; Noir; Warm Glow; Cool Ice; Faded; Cinema; Matte. |
| Brightness (%) | Numeric range control in the inspector. Range 0–300. block.json default: 100. Saved as `brightness`. |
| Contrast (%) | Numeric range control in the inspector. Range 0–300. block.json default: 100. Saved as `contrast`. |
| Saturation (%) | Numeric range control in the inspector. Range 0–400. block.json default: 100. Saved as `saturation`. |
| Hue Rotate (°) | Numeric range control in the inspector. Range -180–180. block.json default: 0. Saved as `hueRotate`. |
| Blur (px) | Numeric range control in the inspector. Range 0–20. block.json default: 0. Saved as `blur`. |
| Sepia (%) | Numeric range control in the inspector. Range 0–100. block.json default: 0. Saved as `sepia`. |
| Grayscale (%) | Numeric range control in the inspector. Range 0–100. block.json default: 0. Saved as `grayscale`. |
| Invert (%) | Numeric range control in the inspector. Range 0–100. block.json default: 0. Saved as `invert`. |
| Opacity (%) | Numeric range control in the inspector. Range 0–100. block.json default: 100. Saved as `opacity`. |
| Max Width (0 = full) | Numeric range control in the inspector. Range 0–1600. block.json default: 0. Saved as `maxWidth`. |
| Image Height (0 = auto) | Numeric range control in the inspector. Range 0–1000. block.json default: 0. Saved as `imageHeight`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 12. Saved as `borderRadius`. |
| Object Fit | Select control; the chosen value is saved on the block. Options: Cover; Contain; Fill; Original. block.json default: cover. Saved as `objectFit`. |
| Blend Mode | Select control; the chosen value is saved on the block. block.json default: normal. Saved as `blendMode`. |
| Transition (ms) | Numeric range control in the inspector. Range 0–2000. block.json default: 300. Saved as `transitionMs`. |
| Overlay Opacity (%) | Numeric range control in the inspector. Range 0–100. block.json default: 0. Saved as `overlayOpacity`. |
| Show Interactive Sliders | On/off toggle in the inspector. Let visitors adjust the filter sliders on the front end. Off by default. Saved as `showControls`. |
| Show Reset Button | On/off toggle in the inspector. On by default. Saved as `showReset`. |
| Show Preset Selector | On/off toggle in the inspector. On by default. Saved as `showPresets`. |
| Overlay Color | Color control in the inspector. Saved as `overlayColor`. |
| Caption Color | Color control in the inspector. block.json default: #555555. Saved as `captionColor`. |
| Caption Background | Color control in the inspector. Saved as `captionBg`. |
| Border Color | Color control in the inspector. Saved as `borderColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Upload an image and apply real-time CSS filter adjustments — brightness, contrast, saturation, hue, blur, sepia, grayscale, and more. Choose from presets or build a custom look. Optionally expose live filter sliders to visitors — that is the job of Image Filter, not a generic content block.
- Use it when you need the editor control labeled “Alt Text”, which exists on this block’s inspector.
- It matches pages about image, filter, photo.
- Inserter grouping: video, animation, and rich media sections.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Image Filter block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Image Filter”. It sits under Media. After insert, open Image and set “Alt Text”, “Caption”, “Quick Preset”, “Brightness (%)”.
What makes Image Filter different from other Blockenberg blocks?
Upload an image and apply real-time CSS filter adjustments — brightness, contrast, saturation, hue, blur, sepia, grayscale, and more. Choose from presets or build a custom look. Optionally expose live filter sliders to visitors. Inspector labels on this block include “Alt Text”, “Caption”, “Quick Preset”, “Brightness (%)”.
Is the Image Filter Gutenberg block free?
Yes. Image Filter ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Image Filter to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Image, Filter Preset, Custom Filter Sliders, Layout).
Related media blocks
Photo Card
A styled media card with a prominent photo, category tag, title, excerpt, and meta information.
Filter Gallery
Image grid with category filter buttons. Clicking a tag shows/hides matching items with animation.
Hotspot Image
Image with interactive hotspot pins that reveal tooltips on hover or click.
Image Accordion
Expandable image panels that stretch open on hover or click — ideal for showcasing portfolios, services, or locations.
Image Box
A clickable image card with overlay title, hover effects, and a link.
Image Collage
Creative overlapping image composition with up to 5 images, custom rotations, positions, frames and a floating overlay card. Perfect for hero and about sections.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Image Filter from the Gutenberg inserter.