Download the PHP package outerweb/image-library without Composer

Image Library

A powerful Laravel package for managing images with responsive breakpoints, automatic optimization, and contextual configurations. Store and link images to your models with advanced features like automatic WebP generation, responsive image versions, and flexible image contexts.

⚠️ Caution: V3 is a complete rewrite of the package and logic. Please take a look at the upgrade guide before upgrading from v2.x to v3.x.

Table of Contents

• Requirements
• Installation
• Core concepts
  • SourceImages
  • Images
  • ImageContexts
  • Breakpoints
• Configuration
  • The config file
  • Javascript
  • Defining ImageContexts
  • Custom Breakpoints
• Usage
  • Uploading an image
  • Attaching an image to your model
  • Using your model image(s)
  • Rendering images
• Upgrading
• Changelog
• License

Requirements

This package uses spatie/image for image manipulations, so it requires the GD or Imagick PHP extension.

Installation

You can install the package via composer:

Run the install command to publish the migrations, config file, and service provider:

This will:

• Publish the configuration file to config/image-library.php
• Copy and register the ImageLibraryServiceProvider in your application
• Publish the database migrations
• Optionally run the migrations

Core concepts

SourceImages

SourceImages are the original images uploaded to the system. They are not directly linked to any model. They are meant for internal use in this package.

Images

Images are the link between a SourceImage and your Model(s). The Image has a BelongsTo relationship to the SourceImage and a MorphTo relationship to your Model.

You can see these as an instance of the uploaded images in a specific use case. You can define the use case using the context attribute on the Image model.

ImageContexts

ImageContexts allow you to define a configuration for images used in a specific way. Examples include "profile_picture", "thumbnail", "gallery_entry", "hero", etc.

They are fully customizable and should be defined in the ImageServiceProvider or in a custom service provider.

Images get generated based on the defined ImageContext when the Image model gets created or updated. This is based on the image_context_hash that is stored per Image. It is a hashed version of the whole configuration so that changes in the context will trigger regeneration of the images.

WebP versions

This package also generates WebP versions of images for better performance in modern browsers. You can configure whether to generate WebP versions globally in the config file or per ImageContext.

Responsive versions

The package supports generating multiple responsive versions of images based on defined breakpoints. You can configure the sizes and aspect ratios for each breakpoint in the ImageContext, ensuring optimal display across different devices.

Each breakpoint can have a minimum and maximum width defined in the context. This allows the package to generate only necessary image sizes based on your design requirements.

Breakpoints

Breakpoints define responsive screen sizes for image optimization. The package uses a Breakpoint enum that follows Tailwind CSS conventions, allowing you to specify different image configurations for various screen sizes.

Available breakpoints:

• Breakpoint::Small ('sm'): 640px and up - Mobile devices in landscape, small tablets
• Breakpoint::Medium ('md'): 768px and up - Tablets in portrait mode
• Breakpoint::Large ('lg'): 1024px and up - Tablets in landscape, small desktops
• Breakpoint::ExtraLarge ('xl'): 1280px and up - Desktop screens
• Breakpoint::DoubleExtraLarge ('2xl'): 1536px and up - Large desktop screens

You can use these breakpoints to define different aspect ratios, sizes, crop positions, and effects for different screen sizes, ensuring optimal image display across all devices.

Note: If the default breakpoints don't match your design system, you can create custom breakpoints. See Custom Breakpoints in the Configuration section.

If you don't need responsive images, you can disable breakpoints globally in the config file or per ImageContext.

Configuration

The config file

The config file allows you to customize various aspects of the image library. Some key configuration options include:

• defaults.disk: The default filesystem disk for storing images if not specified during upload
• use_breakpoints: Enable or disable responsive breakpoints globally
• generate.webp: Automatically generate WebP versions of images if not specified in the image context
• generate.responsive_versions: Generate multiple sizes for responsive images if not specified in the image context
• defaults.crop_position: Default crop position for image transformations if not specified in the image context
• models: Customize the Eloquent models used by the package to easily extend functionality
• enums: Customize the enums used by the package to easily extend functionality
• spatie_image.driver: Choose between 'gd' or 'imagick' for image manipulations

Javascript

The package includes a JavaScript component that automatically sets the sizes attribute on picture elements rendered by the package. This ensures that the browser selects the most appropriate image size based on the actual display size of the image.

To include the script, add the following Blade component to the <head> section of your layout:

Defining ImageContexts

ImageContexts are defined in your application's ImageLibraryServiceProvider that gets published during installation. This provider extends the base service provider and allows you to define contexts in the imageContexts() method:

Configuration Methods

ImageContexts provide extensive configuration options for different responsive breakpoints and image processing needs:

Label

You can define a human-readable label for each context to use in your UI.

If you need localization, you can define the label using a closure:

If you need information about the ImageContext in the label, you can use the provided ImageContext instance:

Allowing multiple images

You can specify whether multiple images are allowed in this context:

Generating WebP versions

By default, WebP versions are generated based on the global config. You can override this per context:

Using breakpoints

By default, breakpoints are used based on the global config. You can override this per context:

⚠️ Caution: Make sure to call ->useBreakpoints(false) before any other methods that depend on breakpoints, such as aspectRatio(), minWidth(), maxWidth(), etc. Otherwise, you may encounter errors since those methods check if breakpoints are enabled or not.

Generating responsive versions

By default, responsive versions are generated based on the global config. You can override this per context:

Note: If you disable breakpoints for an ImageContext, responsive versions will also be disabled as these are only generated when breakpoints are used.

Aspect Ratio

The aspect ratio can be configured per Breakpoint in one of the following ways:

Minimum width

You can define the minimum width of the image used in your design per Breakpoint in one of the following ways:

Maximum width

You can define the maximum width of the image used in your design per Breakpoint in one of the following ways:

Crop Position

By default, the crop position from the config file is used. You can override this per context and per Breakpoint in one of the following ways:

Blur

You can apply a blur effect to images in this context per Breakpoint in one of the following ways:

Greyscale

You can apply a greyscale effect to images in this context per Breakpoint in one of the following ways:

Sepia

You can apply a sepia effect to images in this context per Breakpoint in one of the following ways:

Preparing your model(s)

Using the HasImages Trait

Add the HasImages trait to any Eloquent model that should support image attachments:

The trait provides:

• images(): Default polymorphic relationship returning all images
• attachImage(): Method to attach images with context validation
• Automatic context validation and image replacement for single-image contexts

Using Custom Relationships

For more control over image relationships, you can define custom morphic relationships alongside the HasImages trait. This allows you to create type-specific relationships for different image contexts.

Custom Breakpoints

If the default breakpoints don't match your design system, you can create a custom breakpoint enum. This is useful when you need different screen size thresholds or additional breakpoints.

Creating a Custom Breakpoint Enum

First, create a custom enum that implements the ConfiguresBreakpoints contract:

Configuring the Custom Breakpoint Enum

Update your config/image-library.php file to use your custom enum:

Disabling breakpoints

If you application or specific context does not require image versions per breakpoint, you can disable breakpoints:

Globally

Per ImageContext

⚠️ Caution: Make sure to call ->useBreakpoints(false) before any other methods that depend on breakpoints, such as aspectRatio(), minWidth(), maxWidth(), etc. Otherwise, you may encounter errors since those methods check if breakpoints are enabled or not.

Usage

Uploading an image

Upload images from UploadedFile instances (typically from form submissions) to create SourceImage records:

Basic Upload

Upload with Custom Attributes

What Happens During Upload

1. Automatic optimization: Images are processed using Spatie Image with your configured driver (GD/Imagick)
2. Metadata extraction: Width, height, file size, and MIME type are automatically detected and stored
3. UUID generation: A unique identifier is created for organized file storage
4. File organization: Images are stored in a structured directory: {base_path}/{uuid}/original.{extension}
5. Database record: A SourceImage model is created with all metadata

Attaching an image to your model

After uploading a SourceImage, attach it to your models using the context system:

Basic Attachment

Advanced Attachment Examples

Attaching to a custom relationship

When using custom relationships, you can still use the attachImage method. You can specify the relationship to use:

Context-Specific Behavior

The attachImage method will replace the existing image if the context is not configured to allow multiple images. This ensures that single-image contexts always have only one associated image.

Using your model image(s)

You can access your model's images through the images relationship or any custom relationships you've defined.

Rendering images

You can render images in your views using the provided view component:

This will render a picture element with the following:

• a source element per Breakpoint with responsive image urls
• a source element per Breakpoint for the WebP versions of the responsive image urls
• an img element with the default image url, alt text, and any additional attributes you provide

Make sure you added the script component to the <head> of your layout:

This script will set all sizes attributes of the picture elements automatically when:

• The page is loaded
• The viewport is resized
• The picture element is added to the viewport
• The picture element width changes

(Re)generating images

You can (re)generate images using the following artisan command:

This will (re)generate all images files for all image records in the database based on their associated ImageContext configuration.

You can also (re)generate image files for a specific image:

Or for multiple images:

Upgrading

From v2.x to v3.0

This is a major version with breaking changes. See the Upgrade guide for detailed instructions.

Changelog

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

License

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