PHPackages                             swisnl/filament-backgrounds - 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. [Utility & Helpers](/categories/utility)
4. /
5. swisnl/filament-backgrounds

ActiveLibrary[Utility & Helpers](/categories/utility)

swisnl/filament-backgrounds
===========================

Beautiful backgrounds for Filament auth pages

2.0.3(2mo ago)54149.2k↓19%7[1 issues](https://github.com/swisnl/filament-backgrounds/issues)4MITPHPPHP ^8.2CI passing

Since Nov 26Pushed 1mo ago4 watchersCompare

[ Source](https://github.com/swisnl/filament-backgrounds)[ Packagist](https://packagist.org/packages/swisnl/filament-backgrounds)[ Docs](https://github.com/swisnl/filament-backgrounds)[ GitHub Sponsors](https://github.com/swisnl)[ RSS](/packages/swisnl-filament-backgrounds/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (26)Versions (13)Used By (4)

Filament backgrounds
====================

[](#filament-backgrounds)

[![Latest Version on Packagist](https://camo.githubusercontent.com/12939978d944855d99a5a8bc00cf748d1e18a4c996f2b70380ef091b98753baa/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f737769736e6c2f66696c616d656e742d6261636b67726f756e64732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/swisnl/filament-backgrounds)[![Software License](https://camo.githubusercontent.com/55c0218c8f8009f06ad4ddae837ddd05301481fcf0dff8e0ed9dadda8780713e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE.md)[![Buy us a tree](https://camo.githubusercontent.com/cec0a9b35a1c3235bdbe0d13ea8fbd866a23e30280ad6ca27078c1fd4ac1b709/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f54726565776172652d2546302539462538432542332d6c69676874677265656e2e7376673f7374796c653d666c61742d737175617265)](https://plant.treeware.earth/swisnl/filament-backgrounds)[![GitHub Tests Action Status](https://camo.githubusercontent.com/22d368292548b2ec05f75b6c398296c839b0fb4647368cd39fc68bc1e5e279fe/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f737769736e6c2f66696c616d656e742d6261636b67726f756e64732f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/swisnl/filament-backgrounds/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/0e58bca97bf566ad530f955c3f1db1ff077e10e2637283e4c5916d8aa394edd2/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f737769736e6c2f66696c616d656e742d6261636b67726f756e64732f6669782d7068702d636f64652d7374796c696e672e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/swisnl/filament-backgrounds/actions?query=workflow%3A%22Fix+PHP+Code+Styling%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/6e4e1fedd94eae59bcc4b13f2b8c4ee2584a9b292e4ca11a0f37c28f943b8548/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f737769736e6c2f66696c616d656e742d6261636b67726f756e64732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/swisnl/filament-backgrounds)[![Made by SWIS](https://camo.githubusercontent.com/ef6bdd6ab8d4f47bceb74dcf558b0915c6b419cbba320096324af0518e43091d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2546302539462539412538302d6d6164652532306279253230535749532d2532333037333741392e7376673f7374796c653d666c61742d737175617265)](https://www.swis.nl)

A [curated list of (free to use) images](https://github.com/swisnl/filament-backgrounds/tree/main/resources/images/curated-by-swis), 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!

[![Filament backgrounds screenshot](https://github.com/swisnl/filament-backgrounds/raw/main/art/screenshot.jpg)](https://github.com/swisnl/filament-backgrounds/blob/main/art/screenshot.jpg)

Version Compatibility
---------------------

[](#version-compatibility)

Plugin VersionFilament VersionPHP Version2.x4.x,5.x8.2+1.x3.x8.1+Installation
------------

[](#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
-----

[](#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

[](#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

[](#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

[](#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

[](#available-image-providers)

#### `Swis\Filament\Backgrounds\ImageProviders\CuratedBySwis`

[](#swisfilamentbackgroundsimageproviderscuratedbyswis)

Default curated set of (free to use) images from [multiple sources](#license), based on the day of the month. You can find the images in the [resources/images/curated-by-swis](https://github.com/swisnl/filament-backgrounds/tree/main/resources/images/curated-by-swis) directory.

#### `Swis\Filament\Backgrounds\ImageProviders\MyImages`

[](#swisfilamentbackgroundsimageprovidersmyimages)

[Use your own images](#use-your-own-images).

#### `Swis\Filament\Backgrounds\ImageProviders\Triangles`

[](#swisfilamentbackgroundsimageproviderstriangles)

A set of low poly patterns created using [Trianglify](https://github.com/qrohlf/trianglify). You can find the patterns in the [resources/images/triangles](https://github.com/swisnl/filament-backgrounds/tree/main/resources/images/triangles) directory.

### Writing a custom image provider

[](#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!

```