PHPackages ahmed-abdelrhman/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. [Image & Media](/categories/media) 4. / 5. ahmed-abdelrhman/filament-media-gallery ActiveLibrary[Image & Media](/categories/media) ahmed-abdelrhman/filament-media-gallery ======================================= A Filament infolist entry that renders Spatie Media Library collections with image lightbox and PDF card support. v2.0(3mo ago)15565↓34.1%1[1 issues](https://github.com/ahmedabdelrhman2003/filament-media-gallery/issues)MITBladePHP ^8.2 Since Mar 6Pushed 3mo agoCompare [ Source](https://github.com/ahmedabdelrhman2003/filament-media-gallery)[ Packagist](https://packagist.org/packages/ahmed-abdelrhman/filament-media-gallery)[ RSS](/packages/ahmed-abdelrhman-filament-media-gallery/feed)WikiDiscussions main Synced 3w ago READMEChangelogDependencies (2)Versions (6)Used By (0) Filament Media Gallery Plugin ============================= [](#filament-media-gallery-plugin) A custom Filament infolist entry that renders Spatie Media Library collections as an interactive media grid — with a fullscreen Alpine.js lightbox for images and proper PDF cards that open in a new tab. Zero external dependencies; built entirely on tools already bundled with Filament. --- Problem It Solves ----------------- [](#problem-it-solves) Out of the box, Filament's `SpatieMediaLibraryImageEntry` has two issues: 1. **Images are not clickable** — no built-in lightbox or fullscreen view. 2. **PDFs render as broken images** — Filament tries to display every media item as an ``, which shows a broken icon for PDF files with no way to open them. This package replaces that entry with a smart, type-aware gallery component. --- Requirements ------------ [](#requirements) DependencyVersionNotesLaravel10+Filament3, 4, 5Alpine.js + Tailwind bundledSpatie Media Library10+Models must use `HasMedia` + `InteractsWithMedia`PHP8.2+No additional npm packages or Composer packages required. --- Installation ------------ [](#installation) ``` composer require ahmed-abdelrhman/filament-media-gallery ``` The service provider is auto-discovered by Laravel. No manual registration needed. Optionally, publish the views to customize them: ``` php artisan vendor:publish --tag=media-gallery-views ``` Optionally, register the plugin in your Filament panel for explicit panel-level registration: ``` // app/Providers/Filament/AdminPanelProvider.php ->plugins([ \AhmedAbdelrhman\FilamentMediaGallery\FilamentMediaGalleryPlugin::make(), ]) ``` --- Usage ----- [](#usage) ### Basic usage [](#basic-usage) ``` use AhmedAbdelrhman\FilamentMediaGallery\Infolists\Components\MediaGalleryEntry; MediaGalleryEntry::make('gallery') ->collection('coach_gallery') ->label('Gallery Images') ``` ### With a fixed card size [](#with-a-fixed-card-size) ``` MediaGalleryEntry::make('certificates') ->collection('coach_certificates') ->size(300) // 300×300 px cards ->label('Certificates') ``` ### With circular cards [](#with-circular-cards) ``` MediaGalleryEntry::make('profile') ->collection('profile_picture') ->size(120) ->rounded() // rounded-full ->label('Profile Photo') ``` ### Media on a related model [](#media-on-a-related-model) Use `->fromRelation()` when the infolist is bound to a parent model but the media belongs to a child relation: ``` // Infolist record = User, but media lives on User->coachProfile (CoachProfile model) MediaGalleryEntry::make('gallery') ->collection('coach_gallery') ->fromRelation('coachProfile') ->label('Gallery Images') ``` ### Full example in a Filament Resource infolist [](#full-example-in-a-filament-resource-infolist) ``` use AhmedAbdelrhman\FilamentMediaGallery\Infolists\Components\MediaGalleryEntry; public static function infolist(Infolist $infolist): Infolist { return $infolist->schema([ Infolists\Components\Section::make('Gallery') ->schema([ MediaGalleryEntry::make('gallery') ->label('Gallery Images') ->collection('coach_gallery') ->fromRelation('coachProfile') ->visible(fn ($record) => $record->coachProfile?->getMedia( 'coach_gallery' )->isNotEmpty()), ]) ->collapsible() ->collapsed(), Infolists\Components\Section::make('Certificates') ->schema([ MediaGalleryEntry::make('certificates') ->label('Certificates') ->collection('coach_certificates') ->fromRelation('coachProfile') ->size(250) ->visible(fn ($record) => $record->coachProfile?->getMedia( 'coach_certificates' )->isNotEmpty()), ]) ->collapsible() ->collapsed(), ]); } ``` --- API Reference — `MediaGalleryEntry` ----------------------------------- [](#api-reference--mediagalleryentry) ### `::make(string $name)` [](#makestring-name) Standard Filament Entry factory. `$name` is the entry identifier (used internally by Filament). --- ### `->collection(string $collection): static` [](#-collectionstring-collection-static) **Required.** Sets the Spatie Media Library collection name to load. ParamTypeDescription`$collection``string`Must match a collection name registered in the model's `registerMediaCollections()`--- ### `->fromRelation(string $relation): static` [](#-fromrelationstring-relation-static) Load media from a related model instead of the infolist's root record. Use this when the infolist record (e.g. `User`) is not the model that owns the media collection — the media belongs to a related model (e.g. `CoachProfile` via `$user->coachProfile`). ParamTypeDescription`$relation``string`The relation method name on the infolist recordOmit this method entirely when the media belongs directly to the infolist record. --- ### `->size(int $pixels): static` [](#-sizeint-pixels-static) Set a fixed card size (width = height) in pixels. ParamTypeDefaultDescription`$pixels``int``250`Card dimension in pixelsWhen **not** called, cards use Tailwind's `aspect-square` for a responsive square. --- ### `->rounded(bool $condition = true): static` [](#-roundedbool-condition--true-static) Toggle fully rounded (circular) card corners. - `true` → applies `rounded-full` (circle for images, pill shape for PDF cards) - `false` → applies `rounded-lg` (standard rounded rectangle, this is the default) --- Blade Component — standalone usage ---------------------------------- [](#blade-component--standalone-usage) The underlying component can also be used standalone (outside of infolists), for example in custom Filament pages or Livewire components: ``` ``` ### Props [](#props) PropTypeDefaultDescription`media``Collection``collect()`Spatie Media items to display`size``int|null``null`Fixed card size in px. Null = aspect-square`rounded``bool``false`Use rounded-full instead of rounded-lg--- Lightbox Behaviour ------------------ [](#lightbox-behaviour) The lightbox is powered entirely by Alpine.js (no external libraries). InteractionEffectClick image cardOpens fullscreen lightboxClick dark backdropCloses lightboxPress `ESC`Closes lightboxClick close buttonCloses lightboxClick prev/next arrowsNavigate between images (hidden when only 1 image)Counter badgeShows `current / total` (hidden when only 1 image)**PDF files are never added to the lightbox.** They open directly in a new browser tab. --- Image Conversion Priority ------------------------- [](#image-conversion-priority) When rendering image thumbnails in the grid, the component tries conversions in this order: 1. `thumbnail` conversion (fastest, smallest) 2. `preview` conversion (medium quality) 3. Full original URL (fallback) The lightbox always loads the **full original URL** for maximum quality. To register these conversions on your model: ``` public function registerMediaConversions(?Media $media = null): void { $this->addMediaConversion('thumbnail') ->width(150)->height(150)->nonQueued(); $this->addMediaConversion('preview') ->width(400)->height(400)->nonQueued(); } ``` --- Dark Mode --------- [](#dark-mode) All colours use Tailwind's `dark:` variants. The component respects Filament's dark mode toggle automatically — no additional configuration needed. --- License ------- [](#license) MIT — see [LICENSE](LICENSE). ### Health Score 44 — FairBetter than 91% of packages Maintenance79 Regular maintenance activity Popularity27 Limited adoption so far Community9 Small or concentrated contributor base Maturity50 Maturing project, gaining track record Bus Factor1 Top contributor holds 92.3% 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 ~2 days Total 5 Last Release 103d ago Major Versions v1.0.3 → v2.02026-03-16 ### Community Maintainers ![](https://www.gravatar.com/avatar/e9d0a27126d2af84a83ab171fde49a91f21becc6699a0bd5dd943c7617584b1b?d=identicon)[ahmedabd2003](/maintainers/ahmedabd2003) --- Top Contributors [![ahmedabdelrhman-intcore](https://avatars.githubusercontent.com/u/223234826?v=4)](https://github.com/ahmedabdelrhman-intcore "ahmedabdelrhman-intcore (12 commits)")[![ahmedabdelrhman2003](https://avatars.githubusercontent.com/u/111455745?v=4)](https://github.com/ahmedabdelrhman2003 "ahmedabdelrhman2003 (1 commits)") --- Tags spatielaravelmediagallerylightboxfilament ### Embed Badge ![Health badge](/badges/ahmed-abdelrhman-filament-media-gallery/health.svg) ``` [![Health](https://phpackages.com/badges/ahmed-abdelrhman-filament-media-gallery/health.svg)](https://phpackages.com/packages/ahmed-abdelrhman-filament-media-gallery) ``` ### Alternatives [tomatophp/filament-media-manager Manage your media files using spatie media library with easy to use GUI for FilamentPHP 14849.5k3](/packages/tomatophp-filament-media-manager)[awcodes/filament-curator A media picker plugin for FilamentPHP. 436333.6k24](/packages/awcodes-filament-curator)[webplusm/gallery-json-media a filament media storing in a Json field 196.7k](/packages/webplusm-gallery-json-media)[classic-o/nova-media-library Tool and field that will let you managing files and add them to the posts 154177.4k](/packages/classic-o-nova-media-library)[al-saloul/filament-image-gallery A Filament plugin for displaying image galleries with zoom, rotate, and flip capabilities 4417.2k](/packages/al-saloul-filament-image-gallery)[tapp/filament-form-builder User facing form builder using Filament components 141.9k2](/packages/tapp-filament-form-builder) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)