The Image Filters Plugin Adds Over 20 Filters, Including Vintage, Pastel Pink, and More

Kevin Batdorf released the Image Filters plugin for WordPress yesterday. It is a block that allows users to select from curated list of filters and apply it to their images.

Batdorf is the creator of one of my favorite “fun” plugins for WordPress: Wavy Divider. It allows users to create wavy and jagged divider sections between blocks. After reviewing it in February, Batdorf said to stay tuned for more fun blocks. It seems that he is keeping good on his promise. A week ago, he released Animate In View, a wrapper block that allows nested blocks to slide or fade into view on the page. The Image Filters plugin promises more of the same. However, the latest two can be used for more than just fun.

The Image Filters plugin offers a range of handy filters, and they are applicable for everything from photography portfolios to business sites. It is a tool that end-users can make of it what they will.

The plugin is straightforward to use. End-users need to only insert the Image Filters block and select an image from the media library. Then, click the “View Filters” button in the editor toolbar, which will create an overlay with all 22 image filters applied to choose from:

Popup modal in the WordPress post editor that showcases images with various filters applied over them in a grid.
Image filters overlay.

From that point, users merely need to select a filter to insert it into the content canvas.

Unlike other plugins that apply CSS filters to images, the plugin creates the filtered images on the server. It does not overwrite existing media files, so the originals are still available.

WordPress post editor.  In the content canvas, an image of plush foxes are shown with a tint over them.  In the sidebar on the right, the original image is shown.
Applying a filter on an image.

Batdorf listed several features in the plugin description that he may explore in future versions. The list included:

  • Watermarking
  • Resizing
  • Cropping
  • More filters
  • Image blending

Core WordPress already supports resizing and cropping. I am not sure how these might be expanded. However, image blending sounds like something I want to tinker with now.

My one nit-pick with the plugin is that it is a block in and of itself. I will not pretend to understand the technical hurdles of the project since I was not involved in its build. However, I would have liked to have seen it as an extension of the core image-related blocks. Currently, it is a wrapper for Image, but from a UX perspective, it would have been easier to use without the extra layer.

Technically, it is possible to use it like that. Because the Image Filters block creates images directly on the server, they are also available via the media library. Users could use the plugin’s block to build a filtered version of an image, delete the block, and use the image elsewhere.

The WordPress block system has opened a world of possibilities around media. Whether that is unique gallery patterns, the built-in duotone filters, or third-party plugins that apply masks over images, there is a little something for everyone. Many of these things existed for the classic editor, but they were often wrapped up in shortcode soup, lacking a visual preview. Or, they did not play well with other plugins because there was no standard API for developers to build from.

Some of the most exciting work that developers are doing is with media. Image Filters is yet another example.

Even with my nit-pick over the implementation, I love the experimentation. Image Filters pushes boundaries, exploring new methods of manipulating media from within the block editor. The only thing I really want is to see even more of this from the WordPress developer community.

6

6 responses to “The Image Filters Plugin Adds Over 20 Filters, Including Vintage, Pastel Pink, and More”

    • Of course, you can always filter images via any photo-editing software. For folks like you and me, plugins like this aren’t going to make sense for our uses. I don’t think I’ve ever even used the cropping tools in WP and have always stuck with GIMP or Photoshop before uploading.

      However, plugins like this often come in handy for clients and end-users who aren’t going to go through those steps for whatever reason. Having the tools they need directly in a familiar interface helps them.

  1. Hi Justin – Thank you deeply for the kind and helpful write up again, I really appreciate it.

    The plugin started out as an experiment to including Rust code compiled to WebAssembly in WordPress and it worked out quite well in that regard.

    I was originally thinking to completely ignore the core image block and build out an entirely unique and cohesive experience (which is where cropping/resizing would fit in). This was a bit of a weekend project so I ended up not doing that and just inserting the core image block as an inner block instead for now. I may stick with that approach at least for now. I agree with your notes though and will look into adding it to the core block over the weekend. With a little bit of work I should be able to set that up.

    I have a couple more ideas in the pipeline with a mix of practical and experimental (and possibly insane) so it should be a fun year. Reach out on Twitter if you ever have any inquiries. https://twitter.com/kevinbatdorf

  2. Personally, I probably wouldn’t use the filters, but the watermarking functionality under consideration sounds interesting as I sometimes upload images of high quality military aircraft models I wouldn’t want people to copy easily. In any case, as always, the more options the better, so I’m happy for those that will use the filters.

Leave a Reply to Miroslav Glavić Cancel reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: