> ## Documentation Index
> Fetch the complete documentation index at: https://docs.laravelshopper.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Media

<Warning>
  This is documentation for Shopper v1, which is no longer maintained. Please refer to the [v2 docs](/v2) for the latest information.
</Warning>

The Shopper Framework supports assigning images to products, brands, collections and categories. It is an additional layer provided by the framework with the help of the [Spatie Media Library](https://spatie.be/v1/laravel-medialibrary)

We recommend organizing your images in a folder offline and keeping a backup in case you need them in the future or mistakenly alter one and wish to revert to the original. You can look at the [documentation](/configuration#update-configurations) for this purpose

## Configuration

For uploading images we are using [FilePond](https://pqina.nl/) and some custom upload component with Livewire.

### Filepond

This component is used to update media at the product level and variants for products.

<Frame caption="Filepond upload">
  <img src="https://mintcdn.com/shopperlabs-ee054f5e/jlpf_1VxeBnlQtP6/images/v1/filepond.png?fit=max&auto=format&n=jlpf_1VxeBnlQtP6&q=85&s=9e691aef724676b57bf8e6ff80cae40f" alt="filepond" width="773" height="259" data-path="images/v1/filepond.png" />
</Frame>

Filepond is used in Shopper Framework only to update images, and for that it takes as parameters the images of your model.

```blade theme={null}
<x-shopper-forms.filepond
    wire:model="files"
    multiple
    allowImagePreview
    imagePreviewMaxHeight="200"
    allowFileTypeValidation
    allowFileSizeValidation
    maxFileSize="5mb"
    :images="$images"
/>
```

`$images` are a collection of media from the Spatie Media Library.

So you have to set up the file upload in your Livewire component yourself. An example of file upload with filepond is available on Livewire you can learn more on this [link](https://www.laravel-livewire.com/screencasts/s5-integrating-with-filepond).

### Single upload

Single Upload is a reusable Livewire component created for single upload management with Livewire

<Frame caption="Single upload component">
  <img src="https://mintcdn.com/shopperlabs-ee054f5e/6wDmKBjBTMPmRNSb/images/v1/single-upload.png?fit=max&auto=format&n=6wDmKBjBTMPmRNSb&q=85&s=20dba27c35d27a910f0db8286a00872b" alt="single upload" width="421" height="250" data-path="images/v1/single-upload.png" />
</Frame>

The component used is `Shopper\Http\Livewire\Components\Forms\Uploads\Single` To add it to your page you add this component to your view.

```blade theme={null}
<livewire:shopper-forms.uploads.single />
```

Everything is done out of the box. You just add this to your Livewire component you can add a listener

```php theme={null}
namespace App\Http\Livewire;

use Livewire\Component;

class MyComponent extends Component
{
    public ?string $fileUrl = null;

    protected $listeners = [
        'shopper:fileUpdated' => 'onFileUpdate'
    ];

    public function onFileUpdate($file)
    {
        $this->fileUrl = $file;
    }

    public function store()
    {
        $model = YourModel::create([...]);

        if ($this->fileUrl) {
            $model->addMedia($this->fileUrl)
              ->toMediaCollection(config('shopper.core.storage.collection_name'));
        }
    }
}
```

<Warning>
  To apply this action on your model you have to preapre your model with the Laravel Media Library [configuration](https://spatie.be/docs/laravel-medialibrary/v10/basic-usage/preparing-your-model)
</Warning>

### Multiple upload

The component used is `Shopper\Http\Livewire\Components\Forms\Uploads\Multiple` To add it to your page you add this component to your view.

```blade theme={null}
<livewire:shopper-forms.uploads.multiple />
```

<Frame caption="Multiple upload component">
  <img src="https://mintcdn.com/shopperlabs-ee054f5e/jlpf_1VxeBnlQtP6/images/v1/multiple-upload.png?fit=max&auto=format&n=jlpf_1VxeBnlQtP6&q=85&s=dd30438448c1084214e2717a67d4e849" alt="multiple upload" width="772" height="289" data-path="images/v1/multiple-upload.png" />
</Frame>

```php theme={null}
namespace App\Http\Livewire;

use Livewire\Component;

class MyComponent extends Component
{
    public $files = [];

    protected $listeners = [
      'shopper:filesUpdated' => 'onFilesUpdated'
    ];

    public function onFilesUpdate($files)
    {
        $this->files = $files;
    }

    public function store()
    {
        $model = YourModel::create([...]);

        if (collect($this->files)->isNotEmpty()) {
            collect($this->files)->each(
              fn ($file) => $model->addMedia($file)->toMediaCollection(config('shopper.core.storage.collection_name'))
            );
        }
    }
}
```

## Media Variants

The Spatie Media library supports defining various image sizes, so-called [Conversions](https://spatie.be/docs/laravel-medialibrary/v10/converting-images/defining-conversions). The uploaded images will be then converted to the given sizes with the given parameters.

For the moment in Shopper for all the Model that's used Media Library the only conversion available is

```php theme={null}
public function registerMediaConversions(?Media $media = null): void
{
    $this->addMediaConversion('thumb200x200')
        ->fit(Manipulations::FIT_CROP, 200, 200);
}
```

But you can extend the different models to add conversions according to your needs.

## Retrieving Images

### Thumbnails

The presence of thumbnails is a very common scenario, which is why Shopper use them.

```php theme={null}
$product->getUrl('thumb200x200')
```

For more information on what's available, see [Defining conversions](https://spatie.be/docs/laravel-medialibrary/v10/converting-images/defining-conversions#content-using-multiple-conversions)

### Primary

To get an image with full url on a product, a brand or a collection

```php theme={null}
$product->getFirstMediaUrl(config('shopper.core.storage.disk_name'))
```