Zend Framework 2 module that responsibly scales and serves images

Installs: 60

Dependents: 0

Stars: 2

Watchers: 5

Type: module

v1.0.0 2014-06-27 10:26 UTC


Composer Installation

    "require": {
        "thisismn/responsiveimage": "1.*"

Load the Module


'modules' => array(


Copy 'ResponsiveImage/config/' to './config/autoload/'.
Copy 'ResponsiveImage/config/responsiveimage.local.php.dist' to './config/autoload/responsiveimage.local.php'.

cp vendor/thisismn/responsiveimage/config/ ./config/autoload/
cp vendor/thisismn/responsiveimage/config/responsiveimage.local.php.dist ./config/autoload/responsiveimage.local.php

Change any settings in these files according to your needs.
Ensure that the cache and persistence directories are writable and the resource directory exists (see the Install WURFL section).


Copy 'ResponsiveImage/recipes' to './recipes'.

cp -r vendor/thisismn/responsiveimage/recipes ./

Rename and change recipes according to your needs, see the Usage section.

Install WURFL

Download the latest, extract it and place the wurfl.xml in the directory specified by the config variable:

'config' => array(
        'wurfl' => array(
            'wurflFile' => 'My directory'


cp wurfl.xml data/resource/



In the view call the ResponsiveRoute helper passing in the recipe name and the image source.

<img src="<?= $this->responsiveRoute('hero', '/img/bananaman.jpg'); ?>" alt="Eric Wimp">


The JSON files in the recipes directory control how the image will appear on different devices.

Devices detection is either mobile, tablet or desktop. If detection fails a default configuration can be used.

    "mobile": {

    "tablet": {

    "desktop": {

    "default": {



Specifying width will resize the image to that width keeping the correct ratio.
Specifying height will resize the image to that height keeping the correct ratio.
If width and height are both specified the image will be scaled to the lowest value keeping the correct ratio.

"mobile": {
    "width": 200,
    "height": 300

Ignoring Ratio

If width and height are both specified and ratio is set to false the ratio will be ignored and the image zoom cropped from the centre to the specified size.

"mobile": {
    "width": 200,
    "height": 200,
    "ratio": false

Art Direction

Sometimes a different crop or zoom of the image is desirable for narrow widths.

Along with a width and height specifying the artDirection property and an x and y position will crop the image using the X and Y as a centre point.
This will be relative to the size of the original image.

Adding width and height properties in to the artDirection property allows the image to be zoomed before the crop is taken.

"mobile": {
    "width": 50,
    "height": 50,
    "artDirection": {
        "x": 202,
        "y": 109,
        "width": 400,
        "height": 300


The quality parameter ranges from 1 - worse to 95 - best and alters the JPEG compression.

"tablet": {
    "width": 500,
    "height": 700,
    "quality": 75


For performance it is recommended that the following are also installed: