Allow editing small strange-sized images with image crop in Drupal 8 and Drupal 9

The ideal thing would be to allow basic editing so that the canvas can be expanded before or while cropping— and the color or transparency of the added space can be set by a site administrator or possibly even the content editor doing the cropping.

Posted this comment (and re-opened the issue):

crop outside the image size [#2950769] |

Clarification: Cropping a 200x300 image into a 250x250 image, adding whitespace (or transparent background) above and below, would be possible with “100% of Cropper features”? If so, what can we do to help this 9.x branch get started?

Another possible implementation for this feature:

Allowing an option to have image effects that run before “Manual crop uses Xyz crop type” in image styles to also run before a person does the crop in the widget would allow for this sort of thing and much more. For this, the Set canvas or the Background image and/or the relative crop image effects could be used to add padding to the uploaded image, so the extra space is there when an editor is cropping the image.

Ironically, the closest to the best of both worlds is reached without doing the manual crop.

That is, if there is no manual crop set, steps 2 through 4 (upscaling to at least one dimension being at a larger version of the ratio, padding it out so the whole thing is a full ratio, and putting at final size) put the original image on a correctly-sized canvas with no cropping. If there is a manual crop set, steps 2 through 4 have no effect whatsoever.


  1. Manual crop uses Opportunity image crop type
  2. Scale 1120×840 (upscaling allowed)
  3. Set canvas - Exact size: 1120x840 Placement: center-center - Color: Transparent
  4. Scale and crop 700×525

The scaling larger and then scaling smaller probably isn’t necessary, and scaling to 700x525 directly (upscaling allowed) would probably be enough, with a 700x525 canvas dropped behind it.

What we’re missing here is the ability to add some extra padding first, before the editor applies a manual crop. This makes it impossible for the person cropping to produce an image like this, keeping the full width of a short and wide image, for example, by adding extra spacing to the top and bottom.