Unsplash gallery for Filament. Search and pick any image from Unsplash.com, specify which size to use.
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
Just add the UnsplashPickerAction
to your FileUpload Field.
use Mansoor\UnsplashPicker\Actions\UnsplashPickerAction;
Forms\Components\FileUpload::make('featured_image')
->image()
->hintAction(UnsplashPickerAction::make())
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())
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()
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)
)
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)
)
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"
composer test
Please 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.