gtlitch's avatar

Spatie Laravel Media Library. How to CROP an image conversion

I am using the excellent Laravel Media Library from Spatie.

When an image is uploaded to my website it is stored using Laravel Media Library from Spatie. I have a conversion registered on the model and this works well to automatically create a cropped version of the uploaded image whilst also keeping the original image in its original state.

My question is how to allow my users to update this media conversion with their own manually applied crop. I have an edit page where the user can user cropper.js to make a crop of the image. This page then sends coordinates to the server. It sends a width, height, x and y to my image controller.

How can I update the media conversion with this new crop? Is this even the right way to use Laravel Media Library or am I fighting against the intended operation/logic behind 'Conversions'. It seems logical to me that I should be able to allow my users to control/edit image conversions whilst keeping the original image intact.

Thanks in advance to anyone that can offer advice on this.

0 likes
4 replies
hupp's avatar

@gtlitch Spatie Laravel Media Library is a great package to work with Media.

Here you can try this code to achieve that functionality

// Get the media item
$media = $model->getMedia('images')->first();

// Add the crop manipulation to the image
$media->addManipulation('crop', 300, 300, 50, 50);

// Perform the image conversion
$media->performConversions();

You can also use all these methods in changing too.

gtlitch's avatar

Hi Hupp, Thanks so much for taking a look and your encouragement to continue using Media Lib. Ive tried what you sugest and am getting an error...

Call to undefined method Spatie\MediaLibrary\MediaCollections\Models\Media::addManipulation()

Am I being really dumb... Whats going wrong here??? If I dd() by $media I get:

Spatie\MediaLibrary\MediaCollections\Models\Media {#1506 ▼ // app/Http/Controllers/User/GalleryController.php:114 #connection: "mysql" #table: "media" #primaryKey: "id" #keyType: "int" +incrementing: true #with: [] #withCount: [] +preventsLazyLoading: false #perPage: 15 +exists: true +wasRecentlyCreated: false #escapeWhenCastingToString: false #attributes: array:18 [▶] #original: array:18 [▶] #changes: [] #casts: array:4 [▶] #classCastCache: [] #attributeCastCache: [] #dateFormat: null #appends: array:2 [▶] #dispatchesEvents: [] #observables: [] #relations: [] #touches: [] +timestamps: true #hidden: [] #visible: [] #fillable: [] #guarded: [] }

Which looks right??? I will dive into the source and see if I can find the addManipulation() method.

Thanks for your help.

G

gtlitch's avatar

Hi Hupp,

I now have some almost working code!

$mediaItems = $listing->getMedia('gallery'); $mediaItems[0]->manipulations = [ 'main' => [ 'width' => 100, 'height' => 100, ], ];

// This should cause the 'main' conversion to be regenerated??? $mediaItems[0]->save(); $listing->save();

This example code causes no errors or exceptions and it successfully updates the manipulations field in the media table in the database but it doesn’t amend/alter the image conversion or responsive images? Is there a further step I am missing? Apologies for reaching out to you for help but I am getting desperate to get this working!

Thanks in advance if anyone can help.

Kind regards,

George

hmreumann's avatar

@gtlitch I noticed I had to add the performOnCollection method in the registerMediaConversions of the corresponding model in order to apply the custom manipulations:

public function registerMediaConversions(Media $media = null): void
{
$this->addMediaConversion('main')->...other_manipulations...->performOnCollection('gallery');
}

Please or to participate in this conversation.