swisnl / filament-backgrounds
Beautiful backgrounds for Filament auth pages
Fund package maintenance!
swisnl
Installs: 38 666
Dependents: 2
Suggesters: 0
Security: 0
Stars: 33
Watchers: 5
Forks: 4
Open Issues: 1
Requires
- php: ^8.1
- filament/filament: ^3.0.100
- illuminate/contracts: ^10.21|^11.0
- spatie/laravel-package-tools: ^1.15.0
Requires (Dev)
- laravel/pint: ^1.13
- nunomaduro/collision: ^7.10|^8.1
- nunomaduro/larastan: ^2.6
- orchestra/testbench: ^8.15|^9.0
- pestphp/pest: ^2.25
- pestphp/pest-plugin-arch: ^2.4
- pestphp/pest-plugin-laravel: ^2.2
- phpstan/extension-installer: ^1.3
- phpstan/phpstan-deprecation-rules: ^1.1
- phpstan/phpstan-phpunit: ^1.3
README
A curated list of (free to use) images, to give your Filament auth pages a unique look. Rather use your own images? No problem, you can also use your own images. Or go wild and create your own image provider based on the weather, time of day, or whatever you can think of!
Installation
You can install the package via composer:
composer require swisnl/filament-backgrounds
Next, publish the images if you want to use the default list:
php artisan filament-backgrounds:install
Usage
Add the plugin to your panel provider:
use Swis\Filament\Backgrounds\FilamentBackgroundsPlugin; public function panel(Panel $panel): Panel { return $panel ->plugins([ FilamentBackgroundsPlugin::make(), ]) }
Hide attribution
You can disable attribution by passing false
to the showAttribution
method on the plugin. Please note that this is not recommended, and sometimes prohibited, as the photographers deserve credit for their work, or the license requires you to show the attribution!
use Swis\Filament\Backgrounds\FilamentBackgroundsPlugin; public function panel(Panel $panel): Panel { return $panel ->plugins([ FilamentBackgroundsPlugin::make() ->showAttribution(false), ]) }
Remember
You can specify a cache time in seconds using the remember
method on the plugin. This is especially useful if you use an image provider that uses an API or other external source, so you don't hit the API on every request!
use Swis\Filament\Backgrounds\FilamentBackgroundsPlugin; public function panel(Panel $panel): Panel { return $panel ->plugins([ FilamentBackgroundsPlugin::make() ->remember(900), ]) }
Use your own images
You can use your own images by passing an instance of MyImages
to the imageProvider
method on the plugin. This provider allows you to specify a directory (inside your public directory) where your images are stored. The images will be randomly picked from this directory.
use Swis\Filament\Backgrounds\FilamentBackgroundsPlugin; use Swis\Filament\Backgrounds\ImageProviders\MyImages; public function panel(Panel $panel): Panel { return $panel ->plugins([ FilamentBackgroundsPlugin::make() ->imageProvider( MyImages::make() ->directory('images/backgrounds') ), ]) }
Available image providers
Swis\Filament\Backgrounds\Images\CuratedBySwis
Default curated set of (free to use) images from multiple sources, based on the day of the month. You can find the images in the resources/images/curated-by-swis directory.
Swis\Filament\Backgrounds\Images\MyImages
Swis\Filament\Backgrounds\Images\Triangles
A set of low poly patterns created using Trianglify. You can find the patterns in the resources/images/triangles directory.
Writing a custom image provider
To create your own image provider, you need to implement the ProvidesImages
interface. This interface has one method, getImage
, which should return an Image
object. The image object takes two arguments, the first is the CSS background-image
property, the second is the attribution text. The image will be directly used as background-image in CSS, so it should include url()
, which allows you to even use gradients or other fancy stuff!
<?php use Swis\Filament\Backgrounds\Contracts\ProvidesImages; use Swis\Filament\Backgrounds\Image; class MyImageProvider implements ProvidesImages { public static function make(): static { return app(static::class); } public function getImage(): Image { return new Image( 'url("[link to photo]")', 'Photo by ...' ); } }
N.B. Make sure you cache the result if you use an API or other external sources, so you don't hit the API on every request!
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.
All images included in this package are free to use for commercial and noncommercial purposes and come from multiple sources:
SWIS ❤️ Open Source
SWIS is a web agency from Leiden, the Netherlands. We love working with open source software.