Customize the preview images | laravel-medialibrary-pro | Spatie

 SPATIE

laravel-medialibrary-pro
========================

spatie.be/open-source

  [Docs](https://spatie.be/docs)  [Laravel-medialibrary-pro](https://spatie.be/docs/laravel-medialibrary-pro/v6)  Advanced  Customize the preview images

 Version   v6

 Other versions for crawler [v6](https://spatie.be/docs/laravel-medialibrary-pro/v6)

- [ Introduction ](https://spatie.be/docs/laravel-medialibrary-pro/v6/introduction)
- [ Requirements ](https://spatie.be/docs/laravel-medialibrary-pro/v6/requirements)
- [ License ](https://spatie.be/docs/laravel-medialibrary-pro/v6/license)
- [ Getting help ](https://spatie.be/docs/laravel-medialibrary-pro/v6/getting-help)
- [ Upgrading ](https://spatie.be/docs/laravel-medialibrary-pro/v6/upgrading)
- [ About us ](https://spatie.be/docs/laravel-medialibrary-pro/v6/about-us)
- [ ](https://spatie.be/docs/laravel-medialibrary-pro/v6/demo-application)

Blade
-----

- [ Installation ](https://spatie.be/docs/laravel-medialibrary-pro/v6/blade/installation)
- [ Usage ](https://spatie.be/docs/laravel-medialibrary-pro/v6/blade/usage)

Livewire
--------

- [ Installation ](https://spatie.be/docs/laravel-medialibrary-pro/v6/livewire/installation)
- [ Attachments ](https://spatie.be/docs/laravel-medialibrary-pro/v6/livewire/attachments)
- [ Collection ](https://spatie.be/docs/laravel-medialibrary-pro/v6/livewire/collection)
- [ Uploading to S3 ](https://spatie.be/docs/laravel-medialibrary-pro/v6/livewire/uploading-to-s3)

React
-----

- [ Installation ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/installation)
- [ Usage ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/usage)
- [ Available props ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/available-props)
- [ Inertia ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/inertia)
- [ Next.js ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/nextjs)
- [ Translations ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/translations)
- [ Vapor support ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/vapor)
- [ Creating custom components ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/creating-custom-components)

Vue.js
------

- [ Installation ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/installation)
- [ Usage ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/usage)
- [ Available props ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/available-props)
- [ Inertia ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/inertia)
- [ Translations ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/translations)
- [ Vapor support ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/vapor)
- [ Creating custom components ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/creating-custom-components)

Security
--------

- [ Authorisation ](https://spatie.be/docs/laravel-medialibrary-pro/v6/security/authorisation)
- [ Configure allowed mime types ](https://spatie.be/docs/laravel-medialibrary-pro/v6/security/allowed-mime-types)
- [ Rate limiting ](https://spatie.be/docs/laravel-medialibrary-pro/v6/security/rate-limiting)

Advanced
--------

- [ Customizing CSS ](https://spatie.be/docs/laravel-medialibrary-pro/v6/advanced/customizing)
- [ Customize the preview images ](https://spatie.be/docs/laravel-medialibrary-pro/v6/advanced/custom-preview-images)
- [ Customize the upload URL ](https://spatie.be/docs/laravel-medialibrary-pro/v6/advanced/customiz-upload-url)
- [ Usage in a frontend repository ](https://spatie.be/docs/laravel-medialibrary-pro/v6/advanced/usage-in-a-frontend-repository)

Legacy
------

- [ Livewire 2 ](https://spatie.be/docs/laravel-medialibrary-pro/v6/legacy/livewire-2)
- [ Laravel Mix ](https://spatie.be/docs/laravel-medialibrary-pro/v6/legacy/laravel-mix)

 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.