tjmpromos / sortable-gallery
Provides a sortable image gallery component with a Filament admin interface.
Requires
- php: ^8.1
- filament/filament: ^3.0
- filament/forms: ^3.0
- filament/spatie-laravel-media-library-plugin: ^v3.0.47
- filament/spatie-laravel-tags-plugin: ^v3.0.47
- filament/tables: ^3.0
- illuminate/contracts: ^10.0|^11.0
- illuminate/support: ^10.0|^11.0
- livewire/livewire: ^v3.0.2
- spatie/laravel-medialibrary: ^10.12.2
- spatie/laravel-tags: ^4.5.1
Requires (Dev)
- laravel/pint: ^v1.13.1
- nunomaduro/collision: ^v7.8.1
- nunomaduro/larastan: ^v2.6.4
- orchestra/testbench: ^v8.10.1
- pestphp/pest: ^v2.18.1
- pestphp/pest-plugin-laravel: ^v2.2.0
- phpstan/extension-installer: ^1.3.1
- phpstan/phpstan-deprecation-rules: ^1.1.4
- phpstan/phpstan-phpunit: ^1.3.14
- spatie/laravel-package-tools: ^1.16.1
- spatie/laravel-ray: ^1.33.0
- tightenco/duster: ^2.4
README
Sortable Gallery for Laravel
This is a quickly installable, sortable gallery for Laravel applications. Under the hood, it utilizes Filament for managing assets. We default to using Livewire and Alpine.js for interactions and TailwindCSS for styling, but you are welcome to publish the views and change the front end to whatever you desire.
Prerequisites
Ths package uses the following packages and are required to be installed and configured before installing sortable-gallery:
Optional
These packages are not required, but are used by default for styling and interactions in the view. Feel free to roll your own styling and interactions if you wish.
Installation
Via Composer
composer require tjmpromos/sortable-gallery
Getting Started
New Applications
If you aren't currently using Filament, you'll need to run a few commands to get started. We recommend checking out Filament's documentation for installation instructions, but here are the basics just to get you started quickly.
You'll need to migrate some tables into your database to get started. To do this, simply run:
php artisan migrate
Existing Applications
If you are currently using Filament or have a media table, you may run into conflicts while migrating. To help alleviate this issue, we've provided some publishable migrations. You can export them to your database/migrations
directory by running:
php artisan vendor:publish --tag=sortable-gallery-migrations
Publishing and Editing The Config File
But first things first! You should probably publish the config file so that you can create your categories. You can do that by running:
php artisan vendor:publish --tag=sortable-gallery-config
This will create config/sortable-gallery.php
which will give you a few options such as where you store media, your tag types and the size of your preview images.
media_library
This can be any number of tag types (think of them like categories) that you wish to group your tags into. We utilize them for things like colors, product options, etc...
preview_image_size
This allows you to set the image preview size for displaying on the front end.
Add to your FilamentPHP v3 admin panel
Add the following to your FilamentPHP AdminPanelProvider.php file or the Panel provider file of your choice:
use Tjmpromos\SortableGallery\SortableGalleryPlugin; class AdminPanelProvider extends PanelProvider { ublic function panel(Panel $panel): Panel { return $panel ->default() ->id('admin') ->path('admin') //... other panel config ->plugins([ SortableGalleryPlugin::make(), ]); } }
Publishing and Editing the Livewire Component
We use BaguetteBox.js for our lightbox and tried to make the UI as non-intrusive as possible, but you are welcome to use whatever you'd like. You can publish the views and edit the resources/vendor/sortable-gallery/livewire
view to use whatever you'd like.
php artisan vendor:publish --tag=sortable-gallery-views
Testing
composer test
Changelog
Please see CHANGELOG for more information on what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security Vulnerabilities
Please review our security policy on how to report security vulnerabilities.
Credits
License
The MIT License (MIT). Please see License File for more information.