|
| 1 | +# MediaGallery Form Field |
| 2 | + |
| 3 | +A powerful image gallery form field for Filament with drag & drop reordering, multiple upload options, and preview features. |
| 4 | + |
| 5 | +## Basic Usage |
| 6 | + |
| 7 | +```php |
| 8 | +use Eclipse\Common\Filament\Forms\Components\MediaGallery; |
| 9 | + |
| 10 | +MediaGallery::make('images') |
| 11 | + ->collection('gallery') |
| 12 | + ->required() |
| 13 | +``` |
| 14 | + |
| 15 | +## Collection Configuration |
| 16 | + |
| 17 | +```php |
| 18 | +MediaGallery::make('images') |
| 19 | + ->collection('product-gallery') // Media collection name |
| 20 | + ->collection(fn () => 'dynamic-' . $this->category) // Dynamic collection |
| 21 | +``` |
| 22 | + |
| 23 | +## Upload Options |
| 24 | + |
| 25 | +```php |
| 26 | +MediaGallery::make('images') |
| 27 | + ->maxFiles(10) // Maximum number of files |
| 28 | + ->maxFileSize(2048) // Max size in KB |
| 29 | + ->acceptedFileTypes(['image/jpeg', 'image/png', 'image/webp']) |
| 30 | + ->allowUploads() // Enable both upload methods |
| 31 | + ->single() // Single file mode |
| 32 | + ->multiple() // Multiple files (default) |
| 33 | +``` |
| 34 | + |
| 35 | +## Preview & Layout |
| 36 | + |
| 37 | +```php |
| 38 | +MediaGallery::make('images') |
| 39 | + ->columns(6) // Number of columns (default: 4) |
| 40 | + ->thumbnailHeight(200) // Thumbnail height in pixels (default: 150) |
| 41 | + ->preview() // Enable lightbox preview (disabled by default) |
| 42 | + ->orderable() // Enable drag & drop reordering (disabled by default) |
| 43 | +``` |
| 44 | + |
| 45 | +### Responsive Columns |
| 46 | + |
| 47 | +```php |
| 48 | +MediaGallery::make('images') |
| 49 | + ->columns([ |
| 50 | + 'default' => 2, |
| 51 | + 'sm' => 3, |
| 52 | + 'lg' => 4, |
| 53 | + 'xl' => 6 |
| 54 | + ]) |
| 55 | +``` |
| 56 | + |
| 57 | +## Methods Available |
| 58 | + |
| 59 | +### Layout Control |
| 60 | +- `columns(int|array)` - Set number of grid columns or responsive column configuration (default: 4) |
| 61 | +- `thumbnailHeight(int)` - Set thumbnail image height in pixels (default: 150) |
| 62 | + |
| 63 | +### Interactive Features |
| 64 | +- `preview()` - Enable lightbox modal for image preview (disabled by default) |
| 65 | +- `orderable()` - Enable drag & drop reordering (disabled by default) |
| 66 | + |
| 67 | +### Upload Configuration |
| 68 | +- `collection(string)` - Set media collection name |
| 69 | +- `maxFiles(int)` - Maximum number of uploadable files |
| 70 | +- `maxFileSize(int)` - Maximum file size in KB |
| 71 | +- `acceptedFileTypes(array)` - Allowed file MIME types |
| 72 | +- `allowFileUploads()` - Enable file upload button (disabled by default) |
| 73 | +- `allowUrlUploads()` - Enable URL upload button (disabled by default) |
| 74 | +- `allowUploads()` - Enable both file and URL upload buttons |
| 75 | +- `single()` - Single file mode |
| 76 | +- `multiple()` - Multiple file mode (default) |
| 77 | + |
| 78 | +## Actions Available |
| 79 | + |
| 80 | +The MediaGallery provides these built-in actions: |
| 81 | + |
| 82 | +- **Upload**: File upload with drag & drop interface |
| 83 | +- **URL Upload**: Add images from external URLs |
| 84 | +- **Edit**: Edit image details and metadata |
| 85 | +- **Delete**: Remove images with confirmation |
| 86 | +- **Set Cover**: Mark image as cover/featured |
| 87 | +- **Reorder**: Drag & drop reordering (when `orderable()` is enabled) |
| 88 | + |
| 89 | +## Examples |
| 90 | + |
| 91 | +### Basic Gallery (View Only) |
| 92 | +```php |
| 93 | +MediaGallery::make('images') |
| 94 | + ->collection('products') |
| 95 | +``` |
| 96 | + |
| 97 | +### Gallery with Uploads |
| 98 | +```php |
| 99 | +MediaGallery::make('images') |
| 100 | + ->collection('gallery') |
| 101 | + ->allowUploads() // Enable both upload methods |
| 102 | + ->maxFiles(20) |
| 103 | +``` |
| 104 | + |
| 105 | +### Gallery with Preview |
| 106 | +```php |
| 107 | +MediaGallery::make('images') |
| 108 | + ->collection('gallery') |
| 109 | + ->allowUploads() |
| 110 | + ->preview() // Enables lightbox |
| 111 | + ->columns(3) |
| 112 | + ->thumbnailHeight(180) |
| 113 | +``` |
| 114 | + |
| 115 | +### Orderable Gallery |
| 116 | +```php |
| 117 | +MediaGallery::make('images') |
| 118 | + ->collection('portfolio') |
| 119 | + ->allowUploads() |
| 120 | + ->orderable() // Enables drag & drop |
| 121 | + ->columns(5) |
| 122 | + ->maxFiles(50) |
| 123 | +``` |
| 124 | + |
| 125 | +### File Upload Only |
| 126 | +```php |
| 127 | +MediaGallery::make('images') |
| 128 | + ->collection('secure-documents') |
| 129 | + ->allowFileUploads() // Only file uploads |
| 130 | + ->maxFiles(10) |
| 131 | +``` |
| 132 | + |
| 133 | +### URL Upload Only |
| 134 | +```php |
| 135 | +MediaGallery::make('images') |
| 136 | + ->collection('external-media') |
| 137 | + ->allowUrlUploads() // Only URL uploads |
| 138 | + ->columns(6) |
| 139 | +``` |
| 140 | + |
| 141 | +### Complete Configuration |
| 142 | +```php |
| 143 | +MediaGallery::make('images') |
| 144 | + ->collection('products') |
| 145 | + ->allowUploads() // Enable both upload methods |
| 146 | + ->maxFiles(20) |
| 147 | + ->columns(4) |
| 148 | + ->thumbnailHeight(180) |
| 149 | + ->preview() // Enable lightbox |
| 150 | + ->orderable() // Enable reordering |
| 151 | + ->acceptedFileTypes(['image/jpeg', 'image/png']) |
| 152 | +``` |
| 153 | + |
| 154 | +### Dynamic Configuration |
| 155 | +```php |
| 156 | +MediaGallery::make('images') |
| 157 | + ->collection(fn () => $this->record?->category . '-images') |
| 158 | + ->maxFiles(fn () => $this->record?->isPremium() ? 50 : 10) |
| 159 | + ->columns(fn () => $this->getColumnCount()) |
| 160 | +``` |
| 161 | + |
| 162 | +## Default Behaviors |
| 163 | + |
| 164 | +- **Upload Buttons**: Disabled by default (use `->allowUploads()`, `->allowFileUploads()`, or `->allowUrlUploads()`) |
| 165 | +- **Lightbox**: Disabled by default (use `->preview()` to enable) |
| 166 | +- **Drag & Drop**: Disabled by default (use `->orderable()` to enable) |
| 167 | +- **Grid Columns**: 4 columns by default |
| 168 | +- **File Types**: Images only (jpeg, png, gif, webp) |
| 169 | + |
| 170 | +## Requirements |
| 171 | + |
| 172 | +- Spatie Media Library package |
| 173 | +- Model must implement `HasMedia` interface |
| 174 | +- Images are stored in configured media collections |
0 commit comments