johncarter / filament-focal-point-picker
An image focal point picker for Filament Admin.
Fund package maintenance!
johncarter
Installs: 11 395
Dependents: 2
Suggesters: 0
Security: 0
Stars: 41
Watchers: 2
Forks: 8
Open Issues: 0
Language:Blade
Requires
- php: ^8.2
- filament/filament: ^3.0
- illuminate/contracts: ^8.0|^9.0|^10.0|^11.0
- spatie/laravel-package-tools: ^1.9.2
Requires (Dev)
- nunomaduro/collision: ^8.0
- phpunit/phpunit: ^10.0
- spatie/laravel-ray: ^1.26
README
A custom field for Filament Admin. The field allows you to save a position on an image to act as its focal point, or focus. This can be used with the CSS object-position
property to crop images on different aspect ratios.
The field returns a string
with 2 percentages: distance from left, distance from top. e.g. "17% 54%"
.
See this video for a demo: https://vimeo.com/690530672
Installation
You can install the package via composer:
composer require johncarter/filament-focal-point-picker
Optionally, you can publish the views using
php artisan vendor:publish --tag="filament-focal-point-picker-views"
Usage
FileUpload::make('my_image_field')->maxFiles(1), FocalPointPicker::make('focal_point') ->default('10% 25%') // default: "50% 50%" ->imageField('my_image_field') // Or, return an image url from a closure on the image() method // ->image(function() { // return 'https://www.example.com/images/image1.jpg' // })
Then in your blade template:
<div class="aspect-w-16 aspect-h-5"> <img src="{{ $myPageData['image'] }}" class="object-cover w-full h-full" style="object-position: {{ $myPageData['focal_point'] }}" /> </div>
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
License
The MIT License (MIT). Please see License File for more information.