Introduction
The ElendevImageBundle provide simple image manipulation directly in Twig.
The template designer specify the image properties (size, rotation, grey scale or colored, …) and a corresponding image file is generated and saved in a cache directory. Every further call of same image with same properties returns the previously cached file.
This bundle is still under development but is already used in some of my projects.
The ElendevImageBundle is open source (under Apache 2 licence) and is available on GitHub.
Installation
You can download the bundle directly from GitHub or you can use Composer. The package is on packagist and the package name is elendev/image-bundle.
ElendevImageBundle configuration
The ElendevImageBundle’s configuration (in config.xml) is quite simple and is visible below :
1 2 3 4 | elendev_image: cache_dir: 'path_to_cache_directory' source_dir: 'path_to_image_dir' cache_url: 'url/to/cache/dir' |
I actually don’t know a better way to get the cache_url with the cache_dir information.
The source_dir don’t need to be on a public directory, the original image will be copied from the source_dir directory to the cache_dir directory if necessary.
ImageBundle with Twig
A simple example of ImageBundle usage in twig :
1 | <img src="{{image('source')}}" alt="" /> |
The image function is provided by the ImageBundle. It return an ImageProxy instance for given image. The ImageProxy instance provide some methods allowing designer to manipulate images. For instance, an image can be resized :
1 | <img src="{{image('source').resize(200, 200)}}" alt="" /> |
It can also be greyscalled :
1 | <img src="{{image('source').greyScale()}}" alt="" /> |
All operations can be combined. If you want a rotated greyscalled image you can do it like this :
1 | <img src="{{image('source').rotate(180).greyScale()}}" alt="" /> |
The operation order has no importances, the two images below are refering the same file :
1 | <img src="{{image('source').resize(150, 150).greyScale()}}" alt="" /> |
1 | <img src="{{image('source').greyScale().resize(150, 150)}}" alt="" /> |
Multi image manipulation library support
The ImageProxy class delegates the image manipulation to an ImageManager implementation. I’ve made a GDImageManager using the GD library for image manipulation. Every ImageManager‘s method corresponds to a specific image manipulation available in Twig.
The ImageManager interface is visible here :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | interface ImageManager { /** * Return the current image resource */ public function getImage(Image $image); /** * Return the image size * @return array($width, $height) */ public function getImageSize(Image $image); /** * Resize the imate * return this */ public function resize($resource, $width, $height); /** * Do a rotation * Return this */ public function rotate($resource, $degrees, $bgcolor); /** * Convert to greyscale * Return this */ public function greyScale($resource); /** * Save the given resource to the destination file */ public function save($resource, $destination); } |
Conclusion
The ElendevImageBundle is still under development but the actual ElendevImageBundle is already used on some of my projects. It’s an easy way to manage image (particulary image resizing) regardless of new image files storage or specific image size management.
4 comments
2 pings
Skip to comment form ↓
Some
January 24, 2012 at 00:03 (UTC 1) Link to this comment
elendev_image:
cache_dir: ‘path_to_cache_directory’
source_dir: ‘path_to_image_dir’
cache_url: ‘url/to/cache/dir’
man, what i should specify there ? /cache or %kernel.root_dir%/../web/cache or just cache?
BlackCharly
January 24, 2012 at 08:13 (UTC 1) Link to this comment
Hello,
You need to specify the full path of the cache directory. In my case I use %kernel.root_dir%/../web/cache.
Xander
November 6, 2012 at 10:15 (UTC 1) Link to this comment
Hello BlackCharly,
Thank you for this bundle! It looks great, however I can’t get it to work.
The output of: {{ image(‘source’).resize(40, 40) }} is: nothing.
Can you steer me in the right direction of a solution?
Thanks,
Xander
BlackCharly
November 6, 2012 at 11:06 (UTC 1) Link to this comment
Hello,
Maybe the ‘source’ image is not targeted or not correctly generated.
What kind of image are you using (png, jpeg, …) ?
Did you configure correctly the ElendevImageBundle with cache_dir/source_dir/… ?
Cheers
Image management bundle for Symfony 2 / Twig » BlackCharly's developments
January 13, 2012 at 09:28 (UTC 1) Link to this comment
[...] ElendevImageBundle [...]
Moving to GitHub » BlackCharly's developments
October 1, 2012 at 14:52 (UTC 1) Link to this comment
[...] ElendevImageBundle [...]