Scale by Orientation – A Drupal Module for Smart Image Scaling

When working with galleries, content listings, or image grids, maintaining consistent visual proportions across images with different orientations can be challenging. Standard image processing effects do not always provide a consistent result without additional cropping or manual configuration.

The Image Scaling by Orientation module, developed by our team, solves this problem by automatically scaling images based on their orientation.

How does the module work?

The module introduces a new Image Style Effect that scales an image to a specified pixel size based on its longest side.

The logic is straightforward:

• Landscape images – the width is scaled to the target size.
• Portrait images – the height is scaled to the target size.
• Square images – are treated as landscape images and scaled based on their width.

This approach preserves the image's aspect ratio while ensuring that all images have a similar visual weight within galleries and grid layouts.

The module works particularly well with the Set Canvas effect provided by the Image Effects module, making it easy to create clean and consistent image layouts regardless of the original image proportions.

Configuration

To use the effect:

1. Go to Configuration → Media → Image styles.
2. Create a new image style or edit an existing one.
3. Click Add effect.
4. Select Scale by Orientation.
5. Configure the available options:

• Target dimension – the target size of the image's longest side in pixels (for example, 200 px).
• Upscale images – determines whether images smaller than the target size should be enlarged.

Examples

With Target dimension = 200 px:

(Upscaling Disabled)

If upscaling is disabled, images smaller than the target size remain unchanged.

Example:

• 50 × 25 → 50 × 25

Scaling with upscaling (Upscaling Enabled)

When upscaling is enabled, even small images are resized to the specified target dimension.

Example:

• 50 × 25 → 200 × 100

Use cases

This image effect is particularly useful for:

• image galleries,
• content listings with thumbnails,
• product grids,
• card-based components,
• any interface where images have different aspect ratios but should maintain a consistent visual appearance.

By automatically adapting the dimensions based on image orientation, the module helps create a more consistent and predictable user interface without relying on aggressive cropping.

Requirements

The module requires:

• Drupal 10 or Drupal 11,
• the Drupal core Image module.

Contributing to Drupal

The Image Scaling by Orientation module is not only a solution to a specific technical challenge but also part of our commitment to contributing to Drupal.

This article marks the beginning of a series dedicated to Drupal contribution. We'll walk through the contribution process step by step, showing how to support Drupal CMS, create modules, and help resolve issues reported on Drupal.org. Our goal is to make it easier for new members of the Drupal community to get involved and start contributing.

Stay tuned!