Imagecache

, _(*1)

Automatically generate images at the size you need them with presets, _(*2)

Works with any framework, _(*3)

How it works

Provided your images folder is images, your cache folder is cache and you have a preset called 200x200, _(*4)

When you call the url /images/cache/200x200/image.jpg and the file doesn't exist it will automatically take the file images/image.jpg, apply the preset to it, return it to the client and save it at the request's path to serve it from the webserver the next time., _(*5)

Here is the folder structure:, _(*6)

images
├── image.jpg          // Original image
└── cache
    └── 200x200
        └── image.jpg  // Generated image using the `200x200` preset

An url to a cached image is built as follows :, _(*7)

/<image folder>/<cache folder>/<preset name>/<file name>, _(*8)

Image files can be in sub-folders, for example images/avatars/me.jpg will have this url with a 40x40 preset : images/cache/40x40/avatars/me.jpg, _(*9)

Prerequisites

For it to work you need, _(*10)

PHP 5.5
Clean urls with apache url_rewrite or nginx rewrites

Installation

Preset configuration

The most important part of the module, the presets., _(*11)

They're made of a a key with an array of actions to apply., _(*12)

The key is the name of the preset you will use in the URL., _(*13)

>, _(*14)

My recommendation is to put the size of the final image in the preset name, this allows for more reusability in your presets. Because if you create a rule named for example "thumbnails" and that your layout changes the sizes of your thumbnails but only in some places, you'll soon end up with a mess with your preset names., _(*15)

Preset structure, _(*16)

'name' => [
    action,
    action ...
]

Action structure, _(*17)

['action' => 'action_name', ... options ...]

Complete list of actions and options, _(*18)

Example

'presets' => [
    '40X40' => [   // Exact size
        ['action' => 'scale_and_crop', 'width' => 40, 'height' => 40]
    ],
    'X85' => [     // Fixed height
        ['action' => 'scale', 'height' => 85]
    ],
    '60X200' => [  // Scale to fit inside
        ['action' => 'scale', 'height' => 200, 'width' => 60]
    ],
]

Retina Images

This package also helps to generate image for retina displays. there are two ways for this., _(*19)

With plugins like retina.js the page will automatically try urls with @2x just before the extension., _(*20)

When a normal image's url is /images/cache/200x200/koala.jpg it will resolve to the original file koala.jpg., _(*21)

But if you call the url /images/cache/200x200/koala@2x.jpg it will also resolve to the file koala.jpg., _(*22)

This will take the 200x200 preset and double all it's values, so if you crop your images to 200x200 pixels, it will now be a 400x400 pixels image., _(*23)

And it will save it back to images/cache/200x200/koala@2x.jpg so your apache/nginx will be able to serve it on next visit., _(*24)