Customize the preview images

All Blade, Vue and React components will display previews images that are generated by the preview conversion of the TemporaryUpload model. This conversion will create a 500x500 representation of the image.

You can customize this by registering a preview manipulation. Typically, this would be done in a service provider. Here's an example where we will create 300x300 previews:

use Spatie\MediaLibraryPro\Models\TemporaryUpload;
use Spatie\MediaLibrary\Conversions\Conversion;
use Spatie\Image\Enums\Fit;

// in a service provider
TemporaryUpload::previewManipulation(function(Conversion $conversion) {
    $conversion->fit(Fit::CROP, 300, 300);
});

The components will use the preview conversion of models that have media associated to them. For example, if you have a $blogPost model, and you use the components to display the media associated to that model, the components will use preview conversion on the BlogPost model.

Make sure such a preview conversion exists for each model that handles media. We highly recommend to use nonQueued so the image is immediately available.