Drupal core image styles comes with an ample selection of image styles for basic resizing and cropping, but for more advanced image manipulation, you 100 percent need the Image Effects module. Below is an image with basic image styles and the new effects that you can add.
The Image Effects Module
https://www.drupal.org/project/image_effects
The Image effects module comes with an additional 26 effects. The effects range from resizing, colour, pixelation or Gaussian blur to overlays. It also provides advance effect such as convolutions, ImageMagick arguments, and interlace; don't worry, I have no what these advanced effect do either.
Simply put, the image effect module is a Swiss army knife of image manipulation effects; the full list of 26 effects can be found on the read me page. (https://git.drupalcode.org/project/image_effects).
I have mainly used the Image Effects module for scaling and aspect ratio; namely, resize percentage and aspect switcher. These are great image effects, which you can find out more about on my new image effects for Drupal page. (this page)
The new page is a section that uses the book module; please check it out if you have time. I plan to add most of the effects to it.
Image Effects Installation and Setting
Install
To install a module requires using composer due to dependencies that are needed.
If you are using Drupal CMS, you can search for it in the browse modules UI, and install it that way.
Settings
Image Effects comes with three settings. Most of the time, you will not need to touch these, so you can start using the effects in your image styles as soon as it is installed.
The setting are can be found on the Image Effect configuration page:
Administration > Configuration > Media > Image Effects
/admin/config/media/image_effects
The three settings are:
Color selector - With Version: 4.0.0 you only get the: HTML color - Use an HTML5 color element to select colours. This will be fine in most use-cases.
If you want a different colour picker, you can add one.
Image selector - Add a directory where your images for effects will be stored. Examples of effects where an image is used are the Mask effect or the watermark effect. Adding a dropdown with a path value makes it easier for the user, so better UX.
Font Selector - Same as images, adding the directory where the fonts are stored in the system make for better UX. An example of an effect that uses the fonts is the text image effect.
If you want specific weights for fonts, you need to use static fonts, not variable fonts.
For both images and fonts to be used in the image effects module, they need to be uploaded to the server to the directory manually/separately. Since site builders will be the ones using the image effects to set up image styles that will be applied to image or media fields, this is generally fine. For this reason, using a dropdown is just a nice small enhancement.
Adding an Effect
To add an effect, it is no different from adding an image style. Visit the Image Styles page and either select a current style or add a new image style.
Administration > Configuration > Media > Image Styles
/admin/config/media/image-styles
For more details on Image Styles and how to add effects, you can read Image Style Basics.
Summary
The Image Effect module is another one of those modules you will most likely want to add to your site if you want a broader range of image effects to add to your image styles.
Image Effect provides 26 new effects, ranging from resizing, colour, pixelation or Gaussian blur to overlays and some advanced effects. The best way to see these in action is to install the module and have a play around.
If art direction looks to having a particular style on your website, then image effect may be the way to achieve this; it allows site builders to add effects to any image field easily and for it to have a unique and consistent style applied when rendered site-wide. This means no need to for image manipulation in software such as Photoshop.
It takes a little to set up the effects, but once done, it can be used unlimited times; apply them to image fields like any other image style, and then content creators only need to upload an image and the effect will be applied automatically.
Image effects is a powerful module to help render images exactly how you want them, and for this reason, I feel it is almost a must-have module on all but the most basic websites.
If you want to learn more about how to use Drupal and website design and development, sign up for the newsletter below.
Simon