LiipImagineBundle

| PHPUnit | PHP-CS-Fixer | Coverage | Downloads | Release | |:----------------------:|:-----------------------:|:-----------------------:|:-----------------------:|:-----------------------:| | | | | | |

This bundle provides an image manipulation abstraction toolkit for Symfony-based projects.

Overview

• Filter Sets: Using any Symfony-supported configuration language (such as YML and XML), you can create filter set definitions that specify transformation routines. These definitions include a set of filters and post-processors, as well as other optional parameters.

• Filters: Image transformations are applied using filters. A set of build-in filters are provided by the bundle, implementing the most common transformations; examples include thumbnail, scale, crop, flip, strip, and watermark. For more advances transformations, you can easily create your own custom filters.

• Post-Processors: Modification of the resulting binary image file (created from your filters) are handled by post-processors. Examples include JPEG Optim, Moz JPEG, Opti PNG, and PNG Quant. Just like filters you can easily create your own custom post-processors.

Example

Suppose you defined a my_thumb filter set, which can be configured to perform any number of different transformations. The simplest invocation would be to pipe the path of your image to the provided imagine_filter Twig filter.

<img src="{{ asset('/relative/path/to/image.jpg') | imagine_filter('my_thumb') }}" />

Contributor Code of Conduct

This project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

Attribution

• Thanks to the many contributors who have dedicated their time and code to this project.

• The standalone PHP Imagine Library is used by this bundle for image transformations.

• This package was forked from AvalancheImagineBundle with the goal of making the code more extensible. Reference AvalancheImagineBundle#25 for additional information on the reasoning for this fork.

Setup

Installation

Using this package is similar to all Symfony bundles. The following steps must be performed

1. Download the Bundle
2. Enable the Bundle
3. Register the Routes

Detailed setup instructions can be found in the installation chapter of the documentation.

Configuration

Detailed information on all available configuration options can be found in the configuration chapter of the documentation.

Usage Primer

Generally, this bundle works by applying filter sets to images from inside a template. Your filter sets are defined within the application's configuration file (often app/config/config.yml) and are comprised of a collection of filters, post-processors, and other optional parameters.

We'll learn more about post-processors and other available parameters later, but for now lets focus on how to define a simple filter set comprised of a few filters.

Create Thumbnails

Before we get started, there is a small amount of configuration needed to ensure our data loaders and cache resolvers operate correctly. Use the following boilerplate in your configuration file.

# app/config/config.yml

liip_imagine :

    # configure resolvers
    resolvers :

        # setup the default resolver
        default :

            # use the default web path
            web_path : ~

    # your filter sets are defined here
    filter_sets :

        # use the default cache configuration
        cache : ~

With the basic configuration in place, we'll start with an example that fulfills a common use-case: creating thumbnails. Lets assume we want the resulting thumbnails to have the following transformations applied to them:

• Scale and crop the image to 120x90px.
• Add a 2px black border to the scaled image.
• Adjust the image quality to 75.

Adding onto our boilerplate from above, we need to define a filter set (which we'll name my_thumb) with two filters configured: the thumbnail and background filters.

# app/config/config.yml

liip_imagine :
    resolvers :
        default :
            web_path : ~

    filter_sets :
        cache : ~

        # the name of the "filter set"
        my_thumb :

            # adjust the image quality to 75%
            quality : 75

            # list of transformations to apply (the "filters")
            filters :

                # create a thumbnail: set size to 120x90 and use the "outbound" mode
                # to crop the image when the size ratio of the input differs
                thumbnail  : { size : [120, 90], mode : outbound }

                # create a 2px black border: center the thumbnail on a black background
                # 4px larger to create a 2px border around the final image
                background : { size : [124, 94], position : center, color : '#000000' }

You've now created a filter set called my_thumb that performs a thumbnail transformation. The thumbnail filter sizes the image to the desired width and height (in this example, 120x90px), and its mode: outbound option causes the resulting image to be cropped if the input ratio differs. The background filter results in a 2px black border by creating a black canvas 124x94px in size, and positioning the thumbnail at its center.

Note: A filter set can have any number of filters defined for it. Simple transformations may only require a single filter while complex transformations can have an unlimited number of filters defined for them.

There are a number of additional filters, but for now you can use your newly defined my_thumb filter set immediately within a template.

For Twig-based template, use:

<img src="{{ asset('/relative/path/to/image.jpg') | imagine_filter('my_thumb') }}" />

Or, for PHP-based template, use:

<img src="<?php $this['imagine']->filter('/relative/path/to/image.jpg', 'my_thumb') ?>" />

Behind the scenes, the bundle applies the filter(s) to the image on-the-fly when the first page request is served. The transformed image is then cached for subsequent requests. The final cached image path would be similar to /media/cache/my_thumb/relative/path/to/image.jpg.

Note: *Using the dev environment you might find that images are not properly rendered via the template helper. This is often caused by having intercept_redirect enabled in your application configuration. To ensure images are