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!
You can install the package via composer:
composer require swisnl/filament-backgroundsNext, publish the images if you want to use the default list:
php artisan filament-backgrounds:installAdd the plugin to your panel provider:
use Swis\Filament\Backgrounds\FilamentBackgroundsPlugin;
public function panel(Panel $panel): Panel
{
return $panel
->plugins([
FilamentBackgroundsPlugin::make(),
])
}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),
])
}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),
])
}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')
),
])
}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.
A set of low poly patterns created using Trianglify. You can find the patterns in the resources/images/triangles directory.
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!
composer testPlease see CHANGELOG for more information on what has changed recently.
Please see CONTRIBUTING for details.
Please review our security policy on how to report security vulnerabilities.
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 is a web agency from Leiden, the Netherlands. We love working with open source software.