Automatically generate images at the size you need them with presets
Works with any framework
How it works
Provided your images folder is
images, your cache folder is
cache and you have a preset called
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.
Here is the folder structure:
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 :
/<image folder>/<cache folder>/<preset name>/<file name>
Image files can be in sub-folders, for example
images/avatars/me.jpg will have this url with a
40x40 preset :
For it to work you need
- PHP 5.5
- Clean urls with apache url_rewrite or nginx rewrites
The most important part of the module, the presets.
They're made of a a key with an array of actions to apply.
The key is the name of the preset you will use in the URL.
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.
'name' => [ action, action ... ]
['action' => 'action_name', ... options ...]
'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] ], ]
This package also helps to generate image for retina displays. there are two ways for this.
With plugins like retina.js the page will automatically try urls with @2x just before the extension.
When a normal image's url is
/images/cache/200x200/koala.jpg it will resolve to the original file
But if you call the url
/firstname.lastname@example.org it will also resolve to the file
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.
And it will save it back to
email@example.com so your apache/nginx will be able to serve it on next visit.