Symfony2 Resize Images with LiipImagineBundle

LiipImagineBundle is a great tool for working with images in an website. You are probably used to save several image versions when the user uploads one, each version to be used in different parts of the layout. For example a small thumbnail version, a medium version and a larger one for the full view.

With LiipImagineBundle you don’t need to worry about this anymore. All you have to to is install the bundle, define the versions you need and use the imagine_filter in the Twig templates. For example, to show a 50×50 thumbnail version in a template all you have to do is this:

<img src="{{ asset(image.webPath)| imagine_filter('thumb_50x50') }}" alt="" />

The LiipImagineBundle will create and save the thumbnail for you so the next time you access it, the thumbnail will be available from a special cache folder.

Installation

To install the bundle add in your deps file:

[Imagine]
    git=http://github.com/avalanche123/Imagine.git
    target=imagine
    version=v0.2.0

[LiipImagineBundle]
    git=http://github.com/liip/LiipImagineBundle.git
    target=bundles/Liip/ImagineBundle

Next, update your vendors by running:

bin/vendors install

Add the following to app/autoload.php file:

$loader->registerNamespaces(array(
    // ...

    'Imagine'   => __DIR__.'/../vendor/imagine/lib',
    'Liip'      => __DIR__.'/../vendor/bundles',
));

Enable the bundle in the app/AppKernel.php file:

public function registerBundles()
{
    $bundles = array(
        // ...

        new Liip\ImagineBundle\LiipImagineBundle(),
    );
}

Finally, add the following to your routing file:

# app/config/routing.yml
# ...

_imagine:
    resource: .
    type: imagine

Basic Usage

First, you have to define your filters to be used. Let’s say you need a 50×50 pixels thumbnail. Open the app/config/config.yml file and add the following to it:

# app/config/config.yml
# ...

liip_imagine:
    filter_sets:
        thumb_50x50:
            quality: 75
            filters:
                thumbnail: { size: [50, 50], mode: outbound, allow_upscale: true }

Now the filter will be available in your Twig templates:

<img src="{{ asset(image.webPath)| imagine_filter('thumb_50x50') }}" alt="" />

You can also use the filter in the controller:

$imagemanagerResponse = $this->container
    ->get('liip_imagine.controller')
    ->filterAction($this->getRequest(), $image->getWebPath(), 'thumb_50x50');

/*
You have to repeat this if the thumbnail is just created because the response will first return the image not redirect to it as it does when it already exists in the cache
This is probably a bug that will get fixed in a future version of the bundle
*/
$imagemanagerResponse = $this->container
    ->get('liip_imagine.controller')
    ->filterAction($this->getRequest(), $image->getWebPath(), 'thumb_50x50');

$imagePath = $imagemanagerResponse->headers->get('location');

Read more details about this bundle in the official documentation.

One thought on “Symfony2 Resize Images with LiipImagineBundle”

  1. Thanks Thanks and 1 billion thanks!!

    I’ve gone crazy asking why it doesn’t work from the controlle till I find your post talking about the bug and that the service call should be double.

    Thanks! You’ve saved my day!

Leave a Reply

Your email address will not be published. Required fields are marked *