• Installation
• Usage
• Specifying Disk and Directory
• Specifying Image Size
• Specifying Per Page
• Enable/Disable Square Mode
• Customization
• Testing
• Changelog
• Contributing
• Security Vulnerabilities
• Credits
• License

Unsplash gallery for Filament. Search and pick any image from Unsplash.com, specify which size to use.

#Installation

You can install the package via composer:

composer require mansoor/filament-unsplash-picker

Add your Unsplash Client ID to your .env file

UNSPLASH_CLIENT_ID=your-unsplash-client-id-goes-here

Note: Package includes a queueable job to clear/delete unused files after 24 hours. Make sure to set your queue connection to any async driver. This Job is only dispatched when QUEUE_CONNECTION is not set to sync

QUEUE_CONNECTION=database

#Usage

Just add the UnsplashPickerAction to your FileUpload Field.

use Mansoor\UnsplashPicker\Actions\UnsplashPickerAction;
 
Forms\Components\FileUpload::make('featured_image')
    ->image()
    ->hintAction(UnsplashPickerAction::make())

#Specifying Disk and Directory

If you have specified the directory and disk to your FileUpload field, it will respect the configuration and upload to the correct path.

use Mansoor\UnsplashPicker\Actions\UnsplashPickerAction;
 
Forms\Components\FileUpload::make('featured_image')
    ->image()
    ->disk('public')
    ->directory('posts/featured-images')
    ->hintAction(UnsplashPickerAction::make())

#Specifying Image Size

You can specify which image size to use.

use Mansoor\UnsplashPicker\Actions\UnsplashPickerAction;
 
Forms\Components\FileUpload::make('featured_image')
    ->image()
    ->hintAction(UnsplashPickerAction::make()->regular())

Available sizes:

• ->raw()
• ->full()
• ->regular()
• ->small()
• ->thumbnail()

#Specifying Per Page

You can specify how many image results should show on a single page.

Update per_page option in .env

'per_page' => env('UNSPLASH_PICKER_PER_PAGE', 20),

You can also set different per page option for each UnsplashPickerAction by appending ->perPage() method

Forms\Components\FileUpload::make('featured_image')
    ->image()
    ->hintAction(
        UnsplashPickerAction::make()
            ->thumbnail()
            ->perPage(20)
    )

#Enable/Disable Square Mode

You can choose to dispaly images in square which uses aspect-square class from Tailwind CSS or disable it to display images in original height.

Update use_square_display option in .env to apply this setting globally.

'use_square_display' => env('UNSPLASH_PICKER_USE_SQUARE_DISPLAY', true),

Or, You can disable this setting for each UnsplashPickerAction by appending ->useSquareDisplay(false) method

Forms\Components\FileUpload::make('featured_image')
    ->image()
    ->hintAction(
        UnsplashPickerAction::make()
            ->thumbnail()
            ->perPage(20)
            ->useSquareDisplay(false)
    )

#Customization

The UnsplashPickerAction is simple Filament Form Action and you append all the available methods. The Image picker component is a livewire component, you can extend and override the methods.

Here is a very cool example that shows how to get other data for selected unsplash image:

use Filament\Forms\Components\Actions\Action;
use Livewire\Component;
use Filament\Forms\Components\FileUpload;
use Filament\Forms\Set;
use Illuminate\Support\Arr;
 
UnsplashPickerAction::make()
    ->regular()
    ->action(function (Action $action, $arguments, Component $livewire, FileUpload $component, Set $set) {
        $action->uploadImage($arguments, $livewire, $component);
 
        $creatorName = Arr::get($arguments, 'user.name');
 
        $altText = Arr::get($arguments, 'alt_description');
        $creditText = "Photo by {$creatorName}, from unsplash.com";
        $creditUrl = Arr::get($arguments, 'user.links.html');
 
        $set('featured_image_alt', $altText);
        $set('featured_image_credit.text', $creditText);
        $set('featured_image_credit.url', $creditUrl);
    })

You dont need to but you can publish the config file with:

php artisan vendor:publish --tag="filament-unsplash-picker-config"

This is the contents of the published config file:

return [
    'unsplash_client_id' => env('UNSPLASH_CLIENT_ID'),
    'per_page' => env('UNSPLASH_PICKER_PER_PAGE', 20),
];

Optionally, you can publish the views using

php artisan vendor:publish --tag="filament-unsplash-picker-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

• Mansoor Ahmed
• All Contributors

#License

The MIT License (MIT). Please see License File for more information.