Skip to content

Commit 88fdd37

Browse files
author
ankitcodes4u
committed
feat: adding a much improved media gallery field
1 parent c6126c4 commit 88fdd37

12 files changed

Lines changed: 2446 additions & 1 deletion

File tree

‎docs/MediaGallery.md‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
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+
- `lightbox(bool)` - Explicitly enable/disable lightbox functionality
66+
- `orderable()` - Enable drag & drop reordering (disabled by default)
67+
68+
### Upload Configuration
69+
- `collection(string)` - Set media collection name
70+
- `maxFiles(int)` - Maximum number of uploadable files
71+
- `maxFileSize(int)` - Maximum file size in KB
72+
- `acceptedFileTypes(array)` - Allowed file MIME types
73+
- `allowFileUploads()` - Enable file upload button (disabled by default)
74+
- `allowUrlUploads()` - Enable URL upload button (disabled by default)
75+
- `allowUploads()` - Enable both file and URL upload buttons
76+
- `single()` - Single file mode
77+
- `multiple()` - Multiple file mode (default)
78+
79+
## Actions Available
80+
81+
The MediaGallery provides these built-in actions:
82+
83+
- **Upload**: File upload with drag & drop interface
84+
- **URL Upload**: Add images from external URLs
85+
- **Edit**: Edit image details and metadata
86+
- **Delete**: Remove images with confirmation
87+
- **Set Cover**: Mark image as cover/featured
88+
- **Reorder**: Drag & drop reordering (when `orderable()` is enabled)
89+
90+
## Examples
91+
92+
### Basic Gallery (View Only)
93+
```php
94+
MediaGallery::make('images')
95+
->collection('products')
96+
```
97+
98+
### Gallery with Uploads
99+
```php
100+
MediaGallery::make('images')
101+
->collection('gallery')
102+
->allowUploads() // Enable both upload methods
103+
->maxFiles(20)
104+
```
105+
106+
### Gallery with Preview
107+
```php
108+
MediaGallery::make('images')
109+
->collection('gallery')
110+
->allowUploads()
111+
->preview() // Enables lightbox
112+
->columns(3)
113+
->thumbnailHeight(180)
114+
```
115+
116+
### Orderable Gallery
117+
```php
118+
MediaGallery::make('images')
119+
->collection('portfolio')
120+
->allowUploads()
121+
->orderable() // Enables drag & drop
122+
->columns(5)
123+
->maxFiles(50)
124+
```
125+
126+
### File Upload Only
127+
```php
128+
MediaGallery::make('images')
129+
->collection('secure-documents')
130+
->allowFileUploads() // Only file uploads
131+
->maxFiles(10)
132+
```
133+
134+
### URL Upload Only
135+
```php
136+
MediaGallery::make('images')
137+
->collection('external-media')
138+
->allowUrlUploads() // Only URL uploads
139+
->columns(6)
140+
```
141+
142+
### Complete Configuration
143+
```php
144+
MediaGallery::make('images')
145+
->collection('products')
146+
->allowUploads() // Enable both upload methods
147+
->maxFiles(20)
148+
->columns(4)
149+
->thumbnailHeight(180)
150+
->preview() // Enable lightbox
151+
->orderable() // Enable reordering
152+
->acceptedFileTypes(['image/jpeg', 'image/png'])
153+
```
154+
155+
### Dynamic Configuration
156+
```php
157+
MediaGallery::make('images')
158+
->collection(fn () => $this->record?->category . '-images')
159+
->maxFiles(fn () => $this->record?->isPremium() ? 50 : 10)
160+
->columns(fn () => $this->getColumnCount())
161+
```
162+
163+
## Default Behaviors
164+
165+
- **Upload Buttons**: Disabled by default (use `->allowUploads()`, `->allowFileUploads()`, or `->allowUrlUploads()`)
166+
- **Lightbox**: Disabled by default (use `->preview()` to enable)
167+
- **Drag & Drop**: Disabled by default (use `->orderable()` to enable)
168+
- **Grid Columns**: 4 columns by default
169+
- **File Types**: Images only (jpeg, png, gif, webp)
170+
171+
## Requirements
172+
173+
- Spatie Media Library package
174+
- Model must implement `HasMedia` interface
175+
- Images are stored in configured media collections

‎resources/dist/media-gallery.css‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
[x-cloak] {
2+
display: none !important;
3+
}
4+
5+
.eclipse-media-gallery [draggable="true"] {
6+
cursor: move;
7+
}
8+
9+
.eclipse-media-gallery [draggable="true"]:active {
10+
cursor: grabbing;
11+
}
12+
13+
.eclipse-image-lightbox-overlay {
14+
position: fixed;
15+
top: 0;
16+
left: 0;
17+
right: 0;
18+
bottom: 0;
19+
z-index: 9999!important;
20+
background-color: rgba(0, 0, 0, 0.95);
21+
display: flex;
22+
align-items: center;
23+
justify-content: center;
24+
padding: 20px;
25+
}
26+
27+
.eclipse-image-lightbox-container {
28+
position: relative;
29+
max-width: 90vw;
30+
max-height: 90vh;
31+
display: flex;
32+
align-items: center;
33+
justify-content: center;
34+
z-index: 9999999999 !important;
35+
}
36+
37+
.eclipse-image-lightbox-close {
38+
position: absolute;
39+
top: -50px;
40+
right: 0;
41+
color: white;
42+
background: none;
43+
border: none;
44+
cursor: pointer;
45+
padding: 10px;
46+
opacity: 0.8;
47+
transition: opacity 0.2s;
48+
}
49+
50+
.eclipse-image-lightbox-close:hover {
51+
opacity: 1;
52+
}
53+
54+
.eclipse-image-lightbox-close svg {
55+
width: 32px;
56+
height: 32px;
57+
}
58+
59+
.eclipse-image-lightbox-image-wrapper {
60+
position: relative;
61+
display: flex;
62+
align-items: center;
63+
justify-content: center;
64+
background-color: #1f2937;
65+
border-radius: 8px;
66+
overflow: hidden;
67+
max-width: 90vw;
68+
max-height: 85vh;
69+
}
70+
71+
.eclipse-image-lightbox-image {
72+
max-width: 100%;
73+
max-height: 85vh;
74+
width: auto;
75+
height: auto;
76+
object-fit: contain;
77+
display: block;
78+
}
79+
80+
.eclipse-image-lightbox-nav {
81+
position: absolute;
82+
top: 50%;
83+
transform: translateY(-50%);
84+
background-color: rgba(255, 255, 255, 0.1);
85+
color: white;
86+
border: none;
87+
border-radius: 50%;
88+
width: 48px;
89+
height: 48px;
90+
display: flex;
91+
align-items: center;
92+
justify-content: center;
93+
cursor: pointer;
94+
transition: background-color 0.2s;
95+
}
96+
97+
.eclipse-image-lightbox-nav:hover {
98+
background-color: rgba(255, 255, 255, 0.2);
99+
}
100+
101+
.eclipse-image-lightbox-nav.prev {
102+
left: -60px;
103+
}
104+
105+
.eclipse-image-lightbox-nav.next {
106+
right: -60px;
107+
}
108+
109+
.eclipse-image-lightbox-nav svg {
110+
width: 24px;
111+
height: 24px;
112+
}
113+
114+
.eclipse-image-lightbox-info {
115+
position: absolute;
116+
bottom: 0;
117+
left: 0;
118+
right: 0;
119+
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
120+
padding: 24px;
121+
color: white;
122+
border-radius: 0 0 8px 8px;
123+
}
124+
125+
.eclipse-image-lightbox-title {
126+
font-size: 18px;
127+
font-weight: 600;
128+
margin: 0 0 8px 0;
129+
}
130+
131+
.eclipse-image-lightbox-description {
132+
font-size: 14px;
133+
opacity: 0.9;
134+
margin: 0;
135+
line-height: 1.5;
136+
}
137+
138+
.eclipse-image-card-container {
139+
background-color: #f3f4f6;
140+
cursor: pointer;
141+
display: flex;
142+
align-items: center;
143+
justify-content: center;
144+
overflow: hidden;
145+
}
146+
147+
.eclipse-image-card-img {
148+
max-width: 100%;
149+
max-height: 100%;
150+
width: auto;
151+
height: auto;
152+
object-fit: contain;
153+
}

0 commit comments

Comments
 (0)