thisismn/responsiveimage

Zend Framework 2 module that responsibly scales and serves images

Installation

Composer Installation

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

Load the Module

config/application.config.php, _(*1)

'modules' => array(
    'ResponsiveImage',
    'Application',
),

Configuration

Copy 'ResponsiveImage/config/responsiveimage.global.php.dist' to './config/autoload/responsiveimage.global.php'.
Copy 'ResponsiveImage/config/responsiveimage.local.php.dist' to './config/autoload/responsiveimage.local.php'., _(*2)

cp vendor/thisismn/responsiveimage/config/responsiveimage.global.php.dist ./config/autoload/responsiveimage.global.php
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)., _(*3)

Recipes

Copy 'ResponsiveImage/recipes' to './recipes'., _(*4)

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

Rename and change recipes according to your needs, see the Usage section., _(*5)

Install WURFL

http://sourceforge.net/projects/wurfl/files/WURFL/, _(*6)

Download the latest wurfl.zip, extract it and place the wurfl.xml in the directory specified by the config variable:, _(*7)

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

Example

wget http://sourceforge.net/projects/wurfl/files/WURFL/2.3.5/wurfl-2.3.5.zip/download
unzip wurfl-2.3.5.zip
cp wurfl.xml data/resource/

Usage

View

In the view call the ResponsiveRoute helper passing in the recipe name and the image source., _(*8)

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

Recipes

The JSON files in the recipes directory control how the image will appear on different devices., _(*9)

Devices detection is either mobile, tablet or desktop. If detection fails a default configuration can be used., _(*10)

{
    "mobile": {

    },
    "tablet": {

    },
    "desktop": {

    },
    "default": {

    }
}

Scale

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., _(*11)

"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., _(*12)

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

Art Direction

Sometimes a different crop or zoom of the image is desirable for narrow widths., _(*13)

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., _(*14)

Adding width and height properties in to the artDirection property allows the image to be zoomed before the crop is taken., _(*15)

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

Quality

The quality parameter ranges from 1 - worse to 95 - best and alters the JPEG compression., _(*16)

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

Dependencies

• phpThumb - https://github.com/JamesHeinrich/phpThumb
• WURFL PHP API - https://github.com/mimmi20/Wurfl
• WURFL - http://sourceforge.net/projects/wurfl/files/WURFL

For performance it is recommended that the following are also installed: * ImageMagick - http://www.imagemagick.org, _(*17)