{"id":22110869,"url":"https://github.com/webplusmultimedia/filament-json-media","last_synced_at":"2025-09-10T18:35:35.764Z","repository":{"id":224521507,"uuid":"762831623","full_name":"webplusmultimedia/filament-json-media","owner":"webplusmultimedia","description":"a media library base on json field with custom properties + Galleries on front-end","archived":false,"fork":false,"pushed_at":"2025-07-20T21:16:18.000Z","size":296,"stargazers_count":13,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-20T22:46:15.868Z","etag":null,"topics":["columns","documents","fields","filament","galery","infolists","json","media"],"latest_commit_sha":null,"homepage":"https://filamentphp.com/plugins/webplusm-json-media","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webplusmultimedia.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"Daniel RAMESAY"}},"created_at":"2024-02-24T20:10:25.000Z","updated_at":"2025-07-05T14:21:27.000Z","dependencies_parsed_at":"2024-03-26T22:26:52.344Z","dependency_job_id":"f5fd14b5-f2f0-436c-953f-15b72b561d34","html_url":"https://github.com/webplusmultimedia/filament-json-media","commit_stats":null,"previous_names":["webplusmultimedia/filament-json-media"],"tags_count":22,"template":false,"template_full_name":"filamentphp/plugin-skeleton","purl":"pkg:github/webplusmultimedia/filament-json-media","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webplusmultimedia%2Ffilament-json-media","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webplusmultimedia%2Ffilament-json-media/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webplusmultimedia%2Ffilament-json-media/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webplusmultimedia%2Ffilament-json-media/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webplusmultimedia","download_url":"https://codeload.github.com/webplusmultimedia/filament-json-media/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webplusmultimedia%2Ffilament-json-media/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266972872,"owners_count":24014593,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-25T02:00:09.625Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["columns","documents","fields","filament","galery","infolists","json","media"],"created_at":"2024-12-01T10:31:11.351Z","updated_at":"2025-09-10T18:35:35.755Z","avatar_url":"https://github.com/webplusmultimedia.png","language":"PHP","readme":"# A Gallery media (Json) for Filament\n\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/webplusm/gallery-json-media.svg?style=flat-square)](https://packagist.org/packages/webplusm/gallery-json-media)\n[![GitHub Tests Action Status](https://img.shields.io/github/actions/workflow/status/webplusmultimedia/filament-json-media/run-tests.yml?branch=main\u0026label=tests\u0026style=flat-square)](https://github.com/webplusmultimedia/filament-json-media/actions?query=workflow%3Arun-tests+branch%3Amain)\n[![Total Downloads](https://img.shields.io/packagist/dt/webplusm/gallery-json-media.svg?style=flat-square)](https://packagist.org/packages/webplusm/gallery-json-media)\n\n\n\nThis 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 ...\n\nIt is a simple and easy way to manage media in your Laravel application using Filament.\n\n[V3x doc](https://github.com/webplusmultimedia/filament-json-media/tree/3.x) =\u003e **Filament V3.x**\n\n## Features\n- **Fluent API**: A fluent API for managing media in your Laravel application.\n- **Blade Components**: Blade components for displaying media in your Laravel application.\n- **Custom Properties**: Custom properties for media, allowing you to add additional informations to your media.\n\n[![json-media.webp](https://i.postimg.cc/8Cn6Zttf/json-media.webp)](https://postimg.cc/wtLMvcK9)\n\n## Requirements\n\nV4.x =\u003e **Filament V4.x**  (^PHP 8.2 need)\n\n## Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require webplusm/gallery-json-media\n```\n\n## Configuration\nPublish the config file with:\n\n```bash\nphp artisan vendor:publish --tag=\"gallery-json-media-config\"\n```\nYou can change the driver for cropping :\n\n```php\nuse Spatie\\Image\\Enums\\ImageDriver;\nreturn [\n    ...\n    'images' =\u003e [\n        'driver' =\u003e ImageDriver::Gd, // or ImageDriver::Imagick\n    ],\n    ...\n]\n```\n\n### Translations\nYou can publish the translations :\n```bash\nphp artisan vendor:publish --tag=\"gallery-json-media-translations\"\n```\n\n### CSS configuration\n1. 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,\n2. and then add the following to your `theme.css` file:\n\n```css\n@import '../../../../vendor/webplusm/gallery-json-media/resources/css/json-media.css';\n```\n\n\nOptionally, you can publish the views using, but please if you don't know what it is, don't do it.\n\n```bash\nphp artisan vendor:publish --tag=\"gallery-json-media-views\"\n```\n## Discord\n\nFind it on [discord](https://discord.com/channels/883083792112300104/1220043851977199616)\n\n## Usage\n### Prepare your model\n```php\nuse GalleryJsonMedia\\JsonMedia\\Concerns\\InteractWithMedia;\nuse GalleryJsonMedia\\JsonMedia\\Contracts\\HasMedia;\n\nclass Page extends Model implements HasMedia\n{\n    use HasFactory;\n    use InteractWithMedia;\n    \n    protected $casts =[\n        'images' =\u003e 'array',\n        'documents' =\u003e 'array',\n    ];\n    \n    // for auto-delete media thumbnails\n    protected function getFieldsToDeleteMedia(): array {\n        return ['images','documents'];\n    }\n    ...\n    \n}\n```\n\n### In Filament Forms\n```php\nuse GalleryJsonMedia\\Form\\JsonMediaGallery;\nJsonMediaGallery::make('images')\n    -\u003edirectory('page')\n    -\u003ereorderable() \n    -\u003eacceptedFileTypes()\n    -\u003evisibility() // only public for now - NO S3\n    -\u003emaxSize(4 * 1024)\n    -\u003eminSize()\n    -\u003emaxFiles(2)\n    -\u003eminFiles(1)\n    -\u003ereplaceTitleByAlt() // If you want to show alt customProperties  against file name\n    -\u003eimage() // only images by default , u need to choose one method (image or document)\n    -\u003edocument() // only documents (eg: pdf, doc, xls,...)\n    -\u003edownloadable()\n    -\u003edeletable()\n    -\u003ewithCustomProperties(\n       customPropertiesSchema: [                                     \n            ...some form fields here\n        ],\n       editCustomPropertiesOnSlideOver: true,\n       editCustomPropertiesTitle: \"Edit customs properties\"\n    )\n    -\u003eeditableCustomProperties(bool|Closure) // if you want to enable/disable the custom properties edition ;\n```\n\n### In Filament Tables\n![table-filament-json-media.png](https://raw.githubusercontent.com/webplusmultimedia/filament-json-media/main/table-filament-json-media.png)\n```php\nuse GalleryJsonMedia\\Tables\\Columns\\JsonMediaColumn;\nJsonMediaColumn::make('images')\n    -\u003eavatars(bool|Closure)\n```\n### In Filament Infolists\n```php\nuse GalleryJsonMedia\\Infolists\\JsonMediaEntry;\nuse GalleryJsonMedia\\Infolists\\JsonDocumentsEntry;\nJsonMediaEntry::make('images')\n    -\u003eavatars()\n    -\u003ethumbHeight(100)\n    -\u003ethumbWidth(100)\n    -\u003evisible(static fn(array|null $state)=\u003e filled($state))\n\n\n// or for Documents, you can download them here \nGalleryJsonMedia\\Infolists\\JsonDocumentsEntry::make('documents')\n    -\u003ecolumns(4)\n    -\u003ecolumnSpanFull()\n```\n\n### In Blade Front-end\n```html\n\u003c!-- for media --\u003e\n@foreach($page-\u003egetMedias('images') as $media)\n    \u003cdiv style=\"display: flex;gap: .5rem\"\u003e\n        {{ $media }}\n    \u003c/div\u003e\n@endforeach\n \n\u003c!-- For documents --\u003e\n\u003cdiv\u003e\n    \u003cul\u003e\n        @foreach($page-\u003egetDocuments('documents') as $document)\n            \u003cli\u003e\n                \u003ca href=\"{{ $document-\u003egetUrl() }}\" target=\"_blank\"\u003e\n                    {{ $document-\u003egetCustomProperty('title') }}\n                \u003c/a\u003e\n            \u003c/li\u003e\n        @endforeach\n    \u003c/ul\u003e\n\u003c/div\u003e\n```\nYou can also control the entire view to render the media by passing a blade file to your view like this :\n```html\n@foreach($page-\u003egetMedias('images') as $media)\n    \u003cdiv style=\"display: flex;gap: .5rem\"\u003e\n        {{ $media-\u003ewithImageProperties( width : 200,height: 180)-\u003ewithView('page.json-media') }}\n    \u003c/div\u003e\n @endforeach\n\n\n\u003c!-- the json-media.blade.php --\u003e\n@php\n   use GalleryJsonMedia\\JsonMedia\\Media;\n   /** @var Media $media*/\n   $media\n@endphp\n\u003cfigure class=\"\" style=\"width: {{ $media-\u003ewidth }}px\"\u003e\n    \u003cimg class=\"object-cover w-full aspect-video\" loading=\"lazy\"\n         src=\"{{ $media-\u003egetCropUrl(width: $media-\u003ewidth,height: $media-\u003eheight) }}\"\n         alt=\"{{ $media-\u003egetCustomProperty('alt') }}\"\n         width=\"{{ $media-\u003ewidth }}\"\n         height=\"{{ $media-\u003eheight }}\"\n    \u003e\n\u003c/figure\u003e\n```\n\n\n## Testing\n\n```bash\ncomposer test\n```\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.\n\n## Security Vulnerabilities\n\nPlease review [our security policy](https://github.com/webplusmultimedia/filament-json-media/security/policy) on how to report security vulnerabilities.\n\n## Credits\n\n- [webplusm](https://github.com/webplusmultimedia)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","funding_links":["https://github.com/sponsors/Daniel RAMESAY"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebplusmultimedia%2Ffilament-json-media","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebplusmultimedia%2Ffilament-json-media","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebplusmultimedia%2Ffilament-json-media/lists"}