Image Scale and Fill Background Effect
This module provides an image effect that scales an image to fit within specified dimensions, filling any remaining space with a background. You can choose from background styles like tiling, blurring, a dominant color, or a gradient. This is useful for displaying images with different aspect ratios without cropping.
Image Scale and Fill Background is a Drupal image effect that scales images to fit within defined dimensions while seamlessly filling the remaining space with a background style.
Features
Choose between a tiled background, a blurred image background, a dominant color fill, or a gradient effect, each offering unique visual appeal. Ideal for maintaining consistent image display ratios without sacrificing visual integrity, this module is perfect for designs where you have to display images in different aspect ratios without cropping.
This module currently only support PHP GD that comes with Drupal.
Scale to Fit: Dynamically scales original images to fit within a specified width and height.
Background Fill: Fills excess space with a choice of:
- A tiled version of the image.
- A blurred version of the image.
- The dominant color extracted from the image.
- A gradient based on the dominant color.
Customizable Options: Configurable options for blur intensity, gradient direction, and resize ratio.
Post-Installation
The image effect can be configured with the following options:
- Width and Height: Define the dimensions of the target area the image should scale to fit.
- Background Type: Choose between a tiled background, blurred background, dominant color, or gradient fill.
- Background Style: Choose how the background will be styled based on the selected background type.
- Blur Radius and Sigma: Specify the intensity and spread of the blur effect (applicable if the blurred background type is selected).
- Resize Ratio: Set the scale percentage to resize the image before applying effects to optimize performance and create the right effect you are looking for.
- Gradient Direction: Choose the direction of the gradient fill, either vertical or horizontal (if gradient background type is selected).
- Overlay Transparency: Set the transparency level for the overlay (if transparent overlay background style is selected).
Similar projects
Image Effects is the best in class modue that offer verity of effects. I want this module to be part of Image Effects one day.