How to crop from the top to desired width and height?

[martinbean]

I have recently updated from spatie/laravel-medialibrary, which changed from spatie/image version 2 to 3, and thumbnails for newly-uploaded images look awful.

The issue is around cropping. I want to crop an image from the top, fitting it to a given width and height. This was working with the following:

$this
    ->addMediaConversion('large')
    ->crop(920, 518, CropPosition::Top)
    ->format('jpg');

But it seems now images aren’t resized before cropping, so a 920×518 “window” is literally cropped from the full-sized image, rather than given me a nicely-resized thumbnail cropped to be those dimensions.

I’ve tried multiple combinations and permutations of resizing, filling, cropping, and just can’t get the result I want. The biggest issue is fit has no, “cover these dimensions” that I can then chain a crop on the end to crop from the top with no wasted space. I either get an image that’s the wrong dimensions if the image isn’t the exact aspect ratio as the desired thumbnail, or I can crop but only from the centre.

Can someone please tell me what method(s) I should be using? As I’m just getting frustrated now.

[Junaid-PK]

Use focalCropAndResize() rather than crop() or Fit::Crop:

$this
    ->addMediaConversion("large")
    ->focalCropAndResize(
        width: 920,
        height: 518,
        cropCenterX: 50,
        cropCenterY: 0,
    )
    ->format("jpg");

For this method the focal coordinates are percentages. 50, 0 means horizontally centered and anchored at the top.

It does the two operations you need as one manipulation: it first selects the largest source rectangle with the requested aspect ratio around the focal point (clamped to the image bounds), then resizes that rectangle to exactly 920×518. crop() only takes a literal pixel window, and Fit::Crop currently centers its crop.

focalCropAndResize() was added in spatie/image 3.8.5 specifically for this v2-style behavior. Media Library conversions forward manipulation methods to the underlying image driver, so it can be called directly on addMediaConversion() as above.