Download the PHP package outerweb/filament-image-library without Composer

Filament Image Library

This Filament plugin provides an integration for the outerweb/image-library package.

⚠️ Caution: V3 uses the image-library: ^3.0 which is a complete rewrite of the package. Please make sure to follow the migration steps if you are upgrading from v2 to v3.

Table of Contents

• Installation
• Configuration
• Usage
• Changelog
• License

Installation

You can install the package via composer:

Be sure to follow the README of the outerweb/image-library package to set up the package correctly.

Add the plugin to your panel:

Add the following to your custom theme css file to ensure proper styling of the image library components:

Configuration

Access control

You can manage access to the Image Library page by providing a Closure to the canAccess method:

Navigation group

You can set a navigation group for the Image Library page by using the navigationGroup method:

Navigation icon

You can set a custom navigation icon for the Image Library page by using the navigationIcon method:

Navigation sort

You can set the navigation sort order for the Image Library page by using the navigationSort method:

Disks

You can specify which filesystems disks the Image Library should use and display by using the disks method:

You can provide an associative array to customize the labels of the disks:

Restricting allowed upload file size

You can restrict the maximum allowed upload file size (in kilobytes) globally by using the minUploadFileSize and maxUploadFileSize methods:

Usage

Be sure to follow the README of the outerweb/image-library package to set up the package correctly.

Forms

You can use the ImagePicker form component to allow users to:

• select images from the Image Library
• upload new images to the Image Library
• remove selected images
• edit image details
• crop the image

The name of the form field (images in the example above) needs to correspond to the relationship name on your model that defines the relation to the images.

Note: The imageContext() method is required. More about it below.

Image context(s)

The image library requires each use of an image to be assigned to an image context. This allows you to define different image processing rules for different use cases. More about image contexts can be found in the outerweb/image-library documentation.

You can assign a single image context like this:

If you want to allow users to select/upload images for multiple image contexts, you can provide an array of contexts like this:

All selected images will be stored for each defined context. The modal to edit/crop images will render a tab for each context.

Modifying the query used to fetch images

You can modify the query that is used to fetch images from the Image Library by providing a Closure to the modifyQueryUsing method:

Disable sorting

By default, the ImagePicker component allows users to sort the selected images via drag & drop. You can disable this functionality like this:

Working with custom properties

If you would like the user to be able to edit custom properties of the selected images, you can define them like this:

This will render the defined fields in the edit modal of each selected image. They will automatically be saved to the custom_properties column of the image.

Validation

You can add validation rules to the ImagePicker component like any other Filament form component:

You can also use the minItems and maxItems methods to restrict the number of selected images:

Note that the maxItems method will be overridden if the context only allows a single image.

Infolists

You can use the ImageEntry infolist entry to display the selected images in an infolist:

The name of the form field (images in the example above) needs to correspond to the relationship name on your model that defines the relation to the images.

Modifying the query used to fetch images

You can modify the query that is used to fetch images from the Image Library by providing a Closure to the modifyQueryUsing method:

Changelog

Please see CHANGELOG for more information on what has changed recently.

License

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