Backgrounds

• Version Compatibility
• Installation
• Usage
  • Hide attribution
  • Remember
  • Use your own images
  • Available image providers
    • Swis\Filament\Backgrounds\ImageProviders\CuratedBySwis
    • Swis\Filament\Backgrounds\ImageProviders\MyImages
    • Swis\Filament\Backgrounds\ImageProviders\Triangles
  • Writing a custom image provider
• Testing
• Changelog
• Contributing
• Security Vulnerabilities
• Credits
• License
• SWIS ❤️ Open Source

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!

#Version Compatibility

#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\ImageProviders\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\ImageProviders\MyImages

Use your own images.

#Swis\Filament\Backgrounds\ImageProviders\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

• Jasper Zonneveld
• All Contributors

#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:

• Flickr
• Pexels
• PxHere
• Unsplash

#SWIS ❤️ Open Source

SWIS is a web agency from Leiden, the Netherlands. We love working with open source software.