PHPackages                             webplusm/gallery-json-media - 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. [Image & Media](/categories/media)
4. /
5. webplusm/gallery-json-media

ActiveLibrary[Image & Media](/categories/media)

webplusm/gallery-json-media
===========================

a filament media storing in a Json field

v5.0(1mo ago)196.0k↓30.8%4MITPHPPHP ^8.2|^8.3CI passing

Since Feb 26Pushed 1mo ago2 watchersCompare

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

READMEChangelog (10)Dependencies (28)Versions (41)Used By (0)

A Gallery media (Json) for Filament
===================================

[](#a-gallery-media-json-for-filament)

[![Latest Version on Packagist](https://camo.githubusercontent.com/3d058517f106aaa7cde56af14136ee33909ddd215f50a26cb9a4458031d048dc/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f776562706c75736d2f67616c6c6572792d6a736f6e2d6d656469612e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/webplusm/gallery-json-media)[![GitHub Tests Action Status](https://camo.githubusercontent.com/771d84071b9a7fd30d2d64e0fa355c1f1a060292083b432ec14813d34656cbf9/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f776562706c75736d756c74696d656469612f66696c616d656e742d6a736f6e2d6d656469612f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/webplusmultimedia/filament-json-media/actions?query=workflow%3Arun-tests+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/87f48fa8540e095569c097ce24a50cb7870c0d6a85f8edc0f655c39bb474f410/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f776562706c75736d2f67616c6c6572792d6a736f6e2d6d656469612e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/webplusm/gallery-json-media)

This package add a json field media for images/documents to filament V3.x and fluents api for front-end in Laravel to display photos and url link for documents ...

It is a simple and easy way to manage media in your Laravel application using Filament.

[V3x doc](https://github.com/webplusmultimedia/filament-json-media/tree/3.x) => **Filament V3.x**

Features
--------

[](#features)

- **Fluent API**: A fluent API for managing media in your Laravel application.
- **Blade Components**: Blade components for displaying media in your Laravel application.
- **Custom Properties**: Custom properties for media, allowing you to add additional informations to your media.

[![json-media.webp](https://camo.githubusercontent.com/77497a40b3ac53df5beda09a669b22b79ebab823f6475a3fe651dd156a7006ef/68747470733a2f2f692e706f7374696d672e63632f38436e365a7474662f6a736f6e2d6d656469612e77656270)](https://postimg.cc/wtLMvcK9)

Requirements
------------

[](#requirements)

V4.x => **Filament V4.x** (^PHP 8.2 need)

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require webplusm/gallery-json-media
```

Configuration
-------------

[](#configuration)

Publish the config file with:

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

You can change the driver for cropping :

```
use Spatie\Image\Enums\ImageDriver;
return [
    ...
    'images' => [
        'driver' => ImageDriver::Gd, // or ImageDriver::Imagick
    ],
    ...
]
```

### Translations

[](#translations)

You can publish the translations :

```
php artisan vendor:publish --tag="gallery-json-media-translations"
```

### CSS configuration

[](#css-configuration)

1. You need to [create a theme for your panel](https://filamentphp.com/docs/4.x/styling/overview#creating-a-custom-theme) if you don't have one already,
2. and then add the following to your `theme.css` file:

```
@import '../../../../vendor/webplusm/gallery-json-media/resources/css/json-media.css';
```

Optionally, you can publish the views using, but please if you don't know what it is, don't do it.

```
php artisan vendor:publish --tag="gallery-json-media-views"
```

Discord
-------

[](#discord)

Find it on [discord](https://discord.com/channels/883083792112300104/1220043851977199616)

Usage
-----

[](#usage)

### Prepare your model

[](#prepare-your-model)

```
use GalleryJsonMedia\JsonMedia\Concerns\InteractWithMedia;
use GalleryJsonMedia\JsonMedia\Contracts\HasMedia;

class Page extends Model implements HasMedia
{
    use HasFactory;
    use InteractWithMedia;

    protected $casts =[
        'images' => 'array',
        'documents' => 'array',
    ];

    // for auto-delete media thumbnails
    protected function getFieldsToDeleteMedia(): array {
        return ['images','documents'];
    }
    ...

}
```

### In Filament Forms

[](#in-filament-forms)

```
use GalleryJsonMedia\Form\JsonMediaGallery;
JsonMediaGallery::make('images')
    ->directory('page')
    ->reorderable()
    ->acceptedFileTypes()
    ->visibility() // only public for now - NO S3
    ->maxSize(4 * 1024)
    ->minSize()
    ->maxFiles(2)
    ->minFiles(1)
    ->replaceTitleByAlt() // If you want to show alt customProperties  against file name
    ->image() // only images by default , u need to choose one method (image or document)
    ->document() // only documents (eg: pdf, doc, xls,...)
    ->downloadable()
    ->deletable()
    ->withCustomProperties(
       customPropertiesSchema: [
            ...some form fields here
        ],
       editCustomPropertiesOnSlideOver: true,
       editCustomPropertiesTitle: "Edit customs properties"
    )
    ->editableCustomProperties(bool|Closure) // if you want to enable/disable the custom properties edition ;
```

### Show your media in a grid way

[](#show-your-media-in-a-grid-way)

You can now view your medias in **grid** list like this : [![img.png](img.png)](img.png)

```
use GalleryJsonMedia\Tables\Columns\JsonMediaColumn;
JsonMediaGallery::make('images')
    ...
    ->displayOnGrid()
```

### In Filament Tables

[](#in-filament-tables)

[![table-filament-json-media.png](https://raw.githubusercontent.com/webplusmultimedia/filament-json-media/main/table-filament-json-media.png)](https://raw.githubusercontent.com/webplusmultimedia/filament-json-media/main/table-filament-json-media.png)

```
use GalleryJsonMedia\Tables\Columns\JsonMediaColumn;
JsonMediaColumn::make('images')
    ->avatars(bool|Closure)
```

### In Filament Infolists

[](#in-filament-infolists)

```
use GalleryJsonMedia\Infolists\JsonMediaEntry;
use GalleryJsonMedia\Infolists\JsonDocumentsEntry;
JsonMediaEntry::make('images')
    ->avatars()
    ->thumbHeight(100)
    ->thumbWidth(100)
    ->visible(static fn(array|null $state)=> filled($state))

// or for Documents, you can download them here
GalleryJsonMedia\Infolists\JsonDocumentsEntry::make('documents')
    ->columns(4)
    ->columnSpanFull()
```

### In Blade Front-end

[](#in-blade-front-end)

```

@foreach($page->getMedias('images') as $media)

        {{ $media }}

@endforeach

        @foreach($page->getDocuments('documents') as $document)

                    {{ $document->getCustomProperty('title') }}

        @endforeach

```

You can also control the entire view to render the media by passing a blade file to your view like this :

```
@foreach($page->getMedias('images') as $media)

        {{ $media->withImageProperties( width : 200,height: 180)->withView('page.json-media') }}

 @endforeach

@php
   use GalleryJsonMedia\JsonMedia\Media;
   /** @var Media $media*/
   $media
@endphp

```

Testing
-------

[](#testing)

```
composer test
```

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.

Security Vulnerabilities
------------------------

[](#security-vulnerabilities)

Please review [our security policy](https://github.com/webplusmultimedia/filament-json-media/security/policy) on how to report security vulnerabilities.

Credits
-------

[](#credits)

- [webplusm](https://github.com/webplusmultimedia)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

54

—

FairBetter than 97% of packages

Maintenance88

Actively maintained with recent releases

Popularity33

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity68

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~19 days

Total

39

Last Release

59d ago

Major Versions

v1.2.03 → v2.0.0.02024-04-17

v2.3.0 → 3.x-dev2025-06-15

v2.3.1 → v4.0.02025-06-18

v4.3 → v5.02026-03-20

PHP version history (3 changes)v1.0.0PHP ^8.1

v4.0.0PHP ^8.2

4.x-devPHP ^8.2|^8.3

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/17431035?v=4)[Daniel RAMESAY](/maintainers/webplusmultimedia)[@webplusmultimedia](https://github.com/webplusmultimedia)

---

Top Contributors

[![webplusmultimedia](https://avatars.githubusercontent.com/u/17431035?v=4)](https://github.com/webplusmultimedia "webplusmultimedia (125 commits)")

---

Tags

columnsdocumentsfieldsfilamentgaleryinfolistsjsonmediajsonpluginlaravelmediagalleryfilament

###  Code Quality

TestsPest

Static AnalysisPHPStan

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/webplusm-gallery-json-media/health.svg)

```
[![Health](https://phpackages.com/badges/webplusm-gallery-json-media/health.svg)](https://phpackages.com/packages/webplusm-gallery-json-media)
```

###  Alternatives

[awcodes/filament-curator

A media picker plugin for FilamentPHP.

434297.7k19](/packages/awcodes-filament-curator)[bezhansalleh/filament-shield

Filament support for `spatie/laravel-permission`.

2.8k2.9M88](/packages/bezhansalleh-filament-shield)[pboivin/filament-peek

Full-screen page preview modal for Filament

253319.6k12](/packages/pboivin-filament-peek)[croustibat/filament-jobs-monitor

Background Jobs monitoring like Horizon for all drivers for FilamentPHP

254255.2k6](/packages/croustibat-filament-jobs-monitor)[tomatophp/filament-media-manager

Manage your media files using spatie media library with easy to use GUI for FilamentPHP

14543.9k3](/packages/tomatophp-filament-media-manager)[johncarter/filament-focal-point-picker

An image focal point picker for Filament Admin.

4326.5k1](/packages/johncarter-filament-focal-point-picker)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)