> For the complete documentation index, see [llms.txt](https://web-vovan.gitbook.io/rock-cms/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://web-vovan.gitbook.io/rock-cms/ispolzovanie/sozdanie-i-redaktirovanie-resursa/polya/multiple-images.md).

# Multiple Images

Для прикрепления к ресурсу изображений используется библиотека [spatie/laravel-medialibrary](https://spatie.be/docs/laravel-medialibrary/v10/introduction).

Регистрация медиа-коллекции в модели.

{% code title="app/Models/Post.php" %}

```php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;

class Post extends Model implements HasMedia
{
    use HasFactory;
    use InteractsWithMedia;

    public function registerMediaCollections(): void
    {
        // Коллекция для картинок
        $this->addMediaCollection('images');
    }
}
```

{% endcode %}

В livewire компоненте нужно подключить трейт HasMedia и добавить новое публичное свойство, которое совпадает с названием медиа-коллекции в модели.&#x20;

Для валидации поля используйте кастомное правило CollectionMedia из Rock.Cms.

{% code title="app/Http/Livewire/Admin/Posts/PostItem.php" %}

```php
<?php

namespace App\Http\Livewire\Admin\Posts;

use App\Models\Post;
use WebVovan\RockCms\Rules\CollectionMedia;
use WebVovan\RockCms\Http\Livewire\ResourceComponent;
use WebVovan\RockCms\Traits\Livewire\HasMedia;

class PostItem extends ResourceComponent
{
    use HasMedia;

    public Post $resource;

    public string $resourceClass = Post::class;

    public string $nameRouteResourceList = 'posts.list';
    public string $nameRouteResourceEdit = 'posts.edit';
    
     // Поле для картинок
    public $images;

    // Правила валидации полей
    public function rules()
    {
        return [
            'resource.title' => 'string|required',
            'resource.desc' => 'string',
            'images' => new CollectionMedia(),
        ];
    }

    /**
     * Вызывается один раз при инициализации компонента
     */
    public function init()
    {
        $this->resource->title = $this->resource->title ?? '';
        $this->resource->desc = $this->resource->desc ?? '';

        // Инициализация свойства с изображением
        $this->images = $this->resource->getMedia('images')->toArray();
    }

    /**
     * Вызывается при сохранении ресурса
     */
    public function save()
    {
        $this->resource->save();

        // Сохранение изображений
        $this->saveCollectionMedia($this->resource, $this->images, 'images');
    }

    public function render()
    {
        return view('livewire.admin.posts.post-item');
    }
}

```

{% endcode %}

Вывод поля в шаблоне:

```php
<x-rock-cms::fields.collection-image :model="$images" field="images" title="Картинки"/>
```

![](https://973475072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTEka831UoiHiDOJAdYbS%2Fuploads%2FfrI6oGtr2wiRD59E9o1w%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202022-06-06%20%D0%B2%2013.08.58.png?alt=media\&token=145711b5-5799-4717-8e80-c9a00d1b45c2)