PHPackages                             devanderson/filament-media-gallery - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [File & Storage](/categories/file-storage)
4. /
5. devanderson/filament-media-gallery

ActiveLibrary[File & Storage](/categories/file-storage)

devanderson/filament-media-gallery
==================================

A comprehensive media gallery plugin for Filament with image editing, video support, and thumbnail generation.

v1.0.0(5mo ago)12MITPHPPHP ^8.2CI passing

Since Dec 10Pushed 5mo agoCompare

[ Source](https://github.com/AndersonNascimentoDosSantos/filament-media-gallery-2)[ Packagist](https://packagist.org/packages/devanderson/filament-media-gallery)[ Docs](https://github.com/devanderson/filament-media-gallery)[ GitHub Sponsors](https://github.com/devanderson)[ RSS](/packages/devanderson-filament-media-gallery/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (13)Versions (2)Used By (0)

Filament Media Gallery
======================

[](#filament-media-gallery)

[![Latest Version on Packagist](https://camo.githubusercontent.com/7bb04783e839e4f73509e6362ac814558b106db090e52e738788a32f479429fe/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f646576616e646572736f6e2f66696c616d656e742d6d656469612d67616c6c6572792e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/devanderson/filament-media-gallery)[![GitHub Tests Action Status](https://camo.githubusercontent.com/3024b1b0fff74fea06578f920adb5f75f8a66bd5f69b7996a284bf88a8520b84/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f416e646572736f6e4e617363696d656e746f446f7353616e746f732f66696c616d656e742d6d656469612d67616c6c6572792d322f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/AndersonNascimentoDosSantos/filament-media-gallery-2/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/6ec5786215917f3f41843e26a1b29bb35900bc568d51fb9e4f25872d76bca9c2/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f416e646572736f6e4e617363696d656e746f446f7353616e746f732f66696c616d656e742d6d656469612d67616c6c6572792d322f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/AndersonNascimentoDosSantos/filament-media-gallery-2/actions?query=workflow%3A%22Fix+PHP+code+styling%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/5dcf94a18dd25a0accb81dfabdd959b28602c3fca0e3e2cab38e2427ce123df4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f646576616e646572736f6e2f66696c616d656e742d6d656469612d67616c6c6572792e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/devanderson/filament-media-gallery)

A complete media gallery plugin for Filament v4 with support for image and video uploads, integrated image editor, automatic video thumbnail generation, and much more.

🌟 Features
----------

[](#-features)

- ✅ **Image Uploads** - Support for JPG, PNG, WebP, GIF
- ✅ **Video Uploads** - Support for MP4, WebM, OGG
- ✅ **Image Editor** - Integrated editor with Cropper.js
- ✅ **Video Thumbnails** - Automatic generation using FFmpeg
- ✅ **Paginated Gallery** - Intuitive and responsive interface
- ✅ **Dark Mode** - Complete support for dark mode
- ✅ **Multiple Selections** - Select one or multiple media items
- ✅ **Fully Configurable** - Customize everything via config file
- ✅ **Internationalization** - Support for multiple languages

📋 Requirements
--------------

[](#-requirements)

- PHP 8.1 or higher
- Laravel 11.0 or higher
- Filament 4.0 or higher
- FFmpeg (optional, for video thumbnails)

📦 Installation
--------------

[](#-installation)

### 1. Install via Composer

[](#1-install-via-composer)

```
composer require devanderson/filament-media-gallery
```

### 2. Publish Migrations

[](#2-publish-migrations)

```
php artisan vendor:publish --tag="filament-media-gallery-migrations"
php artisan migrate
```

### 3. Publish Configuration (Optional)

[](#3-publish-configuration-optional)

```
php artisan vendor:publish --tag="filament-media-gallery-config"
```

🚀 Basic Usage
-------------

[](#-basic-usage)

### Understanding the Component

[](#understanding-the-component)

The `GalleryMediaField` is a custom Filament form component designed to browse and select one or more media items (images or videos) from a pre-existing gallery. It stores the IDs of the selected media, which are then used to create a many-to-many relationship between your primary model and the media models (`Image`, `Video`) provided by the gallery package.

### Step 1: Add the Component to Your Form

[](#step-1-add-the-component-to-your-form)

Add `GalleryMediaField` to your Filament form schema. You must specify the `mediaType` and a name for the field that will hold the selected IDs.

```
use Devanderson\FilamentMediaGallery\Forms\Components\GalleryMediaField;

// In your Form schema
GalleryMediaField::make('videos_ids')
    ->mediaType('video')
    ->allowMultiple()
    ->columnSpanFull()
```

**Field Configuration:**

- **`make('videos_ids')`**: Defines the field name that will hold an array of selected video IDs. Use a different name like `images_ids` for images.
- **`mediaType('video')`**: Specifies the type of media to display in the gallery. Use `'image'` for images.
- **`allowMultiple()`**: Allows the user to select more than one item.

### Step 2: Create Pivot Tables

[](#step-2-create-pivot-tables)

A many-to-many relationship requires a "pivot" table to link your model with the media model. You need one pivot table for each media type you want to associate.

#### Image Pivot Table Migration

[](#image-pivot-table-migration)

```