|
|
sfImageTransformExtraPlugin - 1.0.6Image manipulation made even easier! |
|
 |
52
users
Sign-in
to change your status |
Image manipulation made even easier! Why worry about the creation of your thumbnails when you can easily configure the image formats your design desires? With sfImageTransformExtraPlugin the days of coding transforms are gone. Instead you define formats as a series of transformations provided by the awesome sfImageTransformPlugin. Instead of changing your business logic when the design requires new formats you only need to change the configuration while the application remains untouched. |
Utilising the fantastic sfImageTransformPlugin this plugin provides all means to configure any set of thumbnail formats with all possible transformations in a YAML file. All these configured settings can be applied to any kind of source image using a nice URL schema.
| Name | Status | |
|---|---|---|
Christian Schaefer |
lead | yl.laci <<ta>> refeac |
Copyright (c) 2010 Christian Schaefer
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
| Version | License | API | Released |
|---|---|---|---|
| 1.0.12stable | MIT license | 1.0.0stable | 24/11/2010 |
| 1.0.11stable | MIT license | 1.0.0stable | 22/11/2010 |
| 1.0.10stable | MIT license | 1.0.0stable | 16/08/2010 |
| 1.0.9stable | MIT license | 1.0.0stable | 22/07/2010 |
| 1.0.8stable | MIT license | 1.0.0stable | 22/07/2010 |
| 1.0.7stable | MIT license | 1.0.0stable | 21/07/2010 |
| 1.0.6stable | MIT license | 1.0.0stable | 21/07/2010 |
| 1.0.5stable | MIT license | 1.0.0stable | 24/06/2010 |
| 1.0.4stable | MIT license | 1.0.0stable | 31/05/2010 |
| 1.0.3stable | MIT license | 1.0.0stable | 18/05/2010 |
| 1.0.2stable | MIT license | 1.0.0stable | 12/05/2010 |
| 1.0.1stable | MIT license | 1.0.0stable | 28/04/2010 |
| 1.0.0stable | MIT license | 1.0.0stable | 26/04/2010 |
| 0.9.9beta | MIT license | 0.9.0beta | 13/04/2010 |
| 0.9.8beta | MIT license | 0.9.0beta | 06/04/2010 |
| 0.9.7beta | MIT license | 0.9.0beta | 31/03/2010 |
| 0.9.6beta | MIT license | 0.9.0beta | 25/03/2010 |
| 0.9.5beta | MIT license | 0.9.0beta | 24/03/2010 |
| 0.9.4beta | MIT license | 0.9.0beta | 23/03/2010 |
| 0.9.3beta | MIT license | 0.9.0beta | 21/03/2010 |
| 0.9.2beta | MIT license | 0.9.0beta | 21/03/2010 |
| 0.9.1beta | MIT license | 0.9.0beta | 14/03/2010 |
| 0.9.0beta | MIT license | 0.9.0beta | 14/03/2010 |
| Name | Channel | Version |
|---|---|---|
| sfImageTransformPlugin | pear.symfony-project.org | 1.3.0-1.4.0 |
$ php symfony --color transforms:check-caching frontend
Run this task to check if your settings allow the thumbnail caching to work properly.
>> no script name sf_no_script_name is set to true.
>> caching sf_cache is set to true.
>> route 'sf_image' exists.
>> route Route 'sf_image' points to '/thumbnails/in/some/deeper/path/'.
>> route The absolute path for this is '/path/to/your/project/web/thumbnails/in/some/deeper/path/'.
>> cache dir Path '/thumbnails/in/some/deeper/path' does not exist. Let's move one level up.
>> cache dir Path '/thumbnails/in/some/deeper' does not exist. Let's move one level up.
>> cache dir Path '/thumbnails/in/some' does not exist. Let's move one level up.
>> cache dir Path '/thumbnails/in' does not exist. Let's move one level up.
>> cache dir Path '/path/to/your/project/sfiteptask/web/thumbnails' exists.
>> cache dir Path '/path/to/your/project/sfiteptask/web/thumbnails' is a directory.
>> cache dir Path '/path/to/your/project/sfiteptask/web/thumbnails' is writable.
Please note that this check is testing priviledges for your current user account.
If your web server is running from a different user account (as it should) the result could be different.
Everything seems to be alright. If it still does not work it's probably a permissions problem.
This is a bugfix release. Remote image sources depending on their binary structure might not have been able to detect the mime type of. This was caused by getimagesize() seeking when mime information could not be read from the first chunk of data.
PLEASE NOTE! In this release there is a bugfix of the autoboxing feature which requires you to change your thumbnailing.yml if you use transformations like overlay or alphamask. In this case you have to prefix the overlay and mask parameters with "sfImage|". See http://trac.symfony-project.org/changeset/29292 for an example.
# Image manipulation made even easier - sfImageTransformExtraPlugin
On a website you ususally find lots of images and a set of formats.
For example let's say a user avatar is always 80x80 PNG while a homepage top image is always 320x140 JPG with
round corners.
As it is far too costly to prepare all these different formats by hand there are automated ways to generate them from source images uploaded by a user. One of the best tools for this in the symfony world is sfImageTransformPlugin which enables you to perform many sophisticated transformations on your images such as resizing, color manipulation, overlays and much much more. It is not only easy to use but easy to extend as well. Writing your own transformation is a bliss.
Using such an automatism means you have to write code and perform all necessary transformation - usually on upload, no matter if the generated files are ever requested. It also means that design changes that change the formats as well lead to a change of business logic rather than just templates.
This is where sfImageTransformExtraPlugin springs into action as it provides a way to configure formats with multiple transformations.
In your templates you only refer to the format by name which results in an SEO friendly image URL (a URL that you have full control over). The image itself will be generated on first request and (in production environments) written to the filesystem.
Here are some of the key features:
To get an idea what you can do you might want to check out a quick demonstration or see how it works internally.
To install the plugin for a symfony project, the usual process is to use the symfony command line:
$ php symfony plugin:install sfImageTransformExtraPlugin
Alternatively, if you don't have PEAR installed, you can download the latest package attached to this plugin's wiki page
and extract it under your project's plugins/ directory.
Activate the plugin in your ProjectConfiguration.class.php.
// /config/ProjectConfiguration.class.php
...
$this->enablePlugins(..., 'sfImageTransformPlugin', 'sfImageTransformExtraPlugin');
...
Enable the generating module in your settings.yml.
// /apps/yourapplication/config/settings.yml
all:
.settings:
enabled_modules: [ ..., sfImageTransformator ]
...
You also need to configure automatic mime detection for sfImageTransformPlugin in your applications app.yml.
// /apps/yourapplication/config/app.yml
all:
sfImageTransformPlugin:
mime_type:
auto_detect: true
library: gd_mime_type # gd_mime_type (GD), Fileinfo (PECL), MIME_Type (PEAR)
font_dir: %SF_PLUGINS_DIR%/sfImageTransformExtraPlugin/data/example-resources/fonts
...
Automatic mime detection is absolutely necessary!
Of course you can point the font_dir to your own location containing True Type Fonts.
Clear the cache to enable the autoloading to find the new classes:
$ php symfony cc
Note: The plugin requires sfImageTransformPlugin to be installed as well. The dependencies described there apply as well so please follow the [README](http://www.symfony-project.org/plugins/sfImageTransformPlugin?tab=plugin_readme "sfImageTransformPlugin README").
The default routes of the plugin expect all thumbails to be called from the relative URL /thumbnails/... So you have
to make sure, that this folder (SF_ROOT_DIR/web/thumbnails) exists and is writable to the web server.
$ mkdir SF_ROOT_DIR/web/thumbnails
$ chmod 777 SF_ROOT_DIR/web/thumbnails
The /thumbnails path is specified in your routes. If you make changes to the routes you have to make sure that the
equivalent path exists and is writable.
To ensure that the caching of your generated files works please also have a look at verifying your cache settings.
The best way to learn how you configure your format transformations is to walk through a rather complex format configuration.
Of course you can chain transformations. In fact most of the above thumbnails have two transformations applied one for resizing and another for the effect.
Let's see how it works and start with the original again. The format looks like this.
star0:
quality: 25
mime_type: image/png
transformations: ~
With the following result.
Now let's add a crop transformation to get to the correct dimensions.
star1:
quality: 25
mime_type: image/png
transformations:
- { adapter: GD, transformation: crop, param: { left: 90, top: 72, width: 120, height: 120 }}
And just to be a bit different we want to rotate.
star2:
quality: 25
mime_type: image/png
transformations:
- { adapter: GD, transformation: crop, param: { left: 90, top: 72, width: 120, height: 120 }}
- { adapter: GD, transformation: rotate, param: { angle: 20, background: '#FFFFFF' }}
The blank spots are not what we want so let's crop it again.
star3:
quality: 25
mime_type: image/png
transformations:
- { adapter: GD, transformation: crop, param: { left: 90, top: 72, width: 120, height: 120 }}
- { adapter: GD, transformation: rotate, param: { angle: 20, background: '#FFFFFF' }}
- { adapter: GD, transformation: crop, param: { left: 17, top: 17, width: 120, height: 120 }}
So we are back to the dimensions we wanted. Now we want a watermark on top of it.
star4:
quality: 25
mime_type: image/png
transformations:
- { adapter: GD, transformation: crop, param: { left: 90, top: 72, width: 120, height: 120 }}
- { adapter: GD, transformation: rotate, param: { angle: 20, background: '#FFFFFF' }}
- { adapter: GD, transformation: crop, param: { left: 17, top: 17, width: 120, height: 120 }}
- { adapter: GD, transformation: overlay, param: { overlay: sfImage|overlays/logo.png, position: center }}
Of course this is not "Web 2.0" enough yet..
star5:
quality: 25
mime_type: image/png
transformations:
- { adapter: GD, transformation: crop, param: { left: 90, top: 72, width: 120, height: 120 }}
- { adapter: GD, transformation: rotate, param: { angle: 20, background: '#FFFFFF' }}
- { adapter: GD, transformation: crop, param: { left: 17, top: 17, width: 120, height: 120 }}
- { adapter: GD, transformation: overlay, param: { overlay: sfImage|overlays/logo.png, position: center }}
- { adapter: GD, transformation: overlay, param: { overlay: sfImage|overlays/star_frame.png, position:
center }}
Now we want to get rid of the bits that stick out by applying an alpha mask.
star6:
quality: 25
mime_type: image/png
transformations:
- { adapter: GD, transformation: crop, param: { left: 90, top: 72, width: 120, height: 120 }}
- { adapter: GD, transformation: rotate, param: { angle: 20, background: '#FFFFFF' }}
- { adapter: GD, transformation: crop, param: { left: 17, top: 17, width: 120, height: 120 }}
- { adapter: GD, transformation: overlay, param: { overlay: sfImage|overlays/logo.png, position: center }}
- { adapter: GD, transformation: overlay, param: { overlay: sfImage|overlays/star_frame.png, position:
center }}
- { adapter: GD, transformation: alphaMask, param: { mask: sfImage|masks/star_mask.gif }}
Done! ;)
Please note that for overlay and alphaMask transformations you need to prefix the resource path with "sfImage|" as this automatically converts the path into an sfImage object.
sfImageTransformExtraPlugins uses custom PHP stream wrappers to map your images URLs to the real location of the source images. There are a few sources already available but of course you can easily add your own.
Your image sources lie in a directory accessible to your web server and you want to keep the filenames.
Create a route like the following in your applications routing.yml.
// /apps/yourapplication/config/routing.yml
sf_image:
class: sfImageTransformRoute
url: /thumbnails/:format/:filepath.:sf_format
param: { module: sfImageTransformator, action: index }
requirements:
format: '[\w_-]+'
filepath: '[\w/]+'
sf_format: 'gif|png|jpg'
sf_method: [ get ]
options:
image_source: File
...
You can now generate <img /> tags to these images like this.
<?php
echo image_tag(url_for('sf_image_file', array('format' => 'pixelate', 'filepath' => 'logo.png')));
// resulting in: http://localhost/thumbnails/pixelate/logo.png.jpg ?>
Please note that the prefix filepath -
/thumbnailsin the above example - is required to exist and be writable for the webserver!
When you develop on symfony chances are that uploaded image files are located in the sf_upload_dir and their
filenames are stored in the database. sfImageTransformExtraPlugin comes with two images source classes that you can use
to work with these files.
Your image sources are located in a directory accessible to your web server and you want to keep the filenames.
Create a route like the following in your applications routing.yml.
// /apps/yourapplication/config/routing.yml
sf_image:
class: sfImageTransformRoute
url: /thumbnails/:type/:format/:path/:slug-:id.:sf_format
param: { module: sfImageTransformator, action: index, attribute: file }
requirements:
format: '[\w_-]+'
path: '[\w/]+'
slug: '[\w_-]+'
id: '\d+(?:,\d+)?'
sf_format: 'gif|png|jpg'
sf_method: [ get ]
options:
image_source: Doctrine # or Propel
segment_separators: [ '/', '.', '-' ]
...
You can now generate <img /> tags to these images like this.
<?php
echo image_tag(url_for('sf_image_doctrine', array('format' => 'pixelate', 'sf_subject' => $record)));
// resulting in: http://localhost/thumbnails/News/pixelate/01/00/00/mytest-1.jpg
?>
$record in this example is either a Doctrine or Propel record.
The :path attribute is provided by the sfImageTransformExtraPlugins own route class sfImageTransformRoute. It
will take the id attribute and form a three level deep path from it.
// examples
1 => 01/00/00
37410 = 10/74/03
..
This path can ensure that you won't store more than 100 files per directory which is necessary to avoid imperformance from the filesystem.
If you plan to build a content delivery network (CDN) and run sfImageTransformExtraPlugin as a webservice your image sources will not be available locally but instead over HTTP.
Your image sources are located in a directory not accessible to your web server and you want to keep the filenames.
Create a route like the following in your applications routing.yml.
// /apps/yourapplication/config/routing.yml
sf_image:
class: sfImageTransformRoute
url: /thumbnails/sfweb/:format/:filepath.:sf_format
param: { module: sfImageTransformator, action: index, protocol: http, domain: www.symfony-project.org }
requirements:
format: '[\w_-]+'
protocol: 'http|https'
domain: '[\w-_.]+'
filepath: '[\w/-_.]+'
sf_format: 'gif|png|jpg'
sf_method: [ get ]
options:
image_source: HTTP
...
You can now generate <img /> tags to these images like this.
<?php
echo image_tag(url_for('sf_image_http', array('format' => 'pixelate', 'filepath' =>
'images/symfony-reloaded.png')));
// resulting in: http://localhost/thumbnails/sfweb/pixelate/images/symfony-reloaded.png.jpg
?>
It doesn't matter where your source images are stored and how you need to receive the filepath/URL you can easily implement a solution by following two easy steps:
When defining the URL of the new route the only thing you need to care about is the list of parameters. You have to provide all parameters that are necessary to retrieve the images location.
In the case of a Doctrine model storing the filename of a local file you need to know the model type (i.e. NewsBulletin), the ID of the object (i.e. 123) and the model attribute or field which stores the filename (i.e. file). Depending on your requirements you might need different parameters to identify the source.
You will also most certainly need a parameter for the desired format.
sf_image:
class: sfImageTransformRoute
ulr: /thumbnails/:format/:special.sf_format
param: { module: sfImageTransformator, action: index }
requirements:
format: '[\w_-]+'
sf_format: http|https
somespecialparameter: '[\w-_.]+'
sf_method: [ get ]
options:
image_source: Special
Once you defined the parameters you can implement the sfImageSource class by implementing sfImageSourceInterface and
barfoo.
If the image source files are stored on the local filesystem accessible to the webserver your need to implement
sfImageSourceLocal. For all other locations please use sfImageSourceRemote as PHP functions like stat() only
work with local files and therefor need to be faked .
class sfImageSourceSpecial extends sfImageSourceRemote implements sfImageSourceInterface
{
/**
* Returns an sfImageSource:// URL specific to the implementing stream wrapper
*
* @param array $parameters Current request parameters
* @return string sfImageSource:// URI
* @throws InvalidArgumentException
*/
public static function buildURIfromParameters(array $parameters)
{
...
}
/**
* Translates the given stream URL to the abolute path of the source image
*
* @param string $path The given stream URL
* @return string
*/
private function translatePathToFilename($path)
{
...
}
}
In most cases you only have to change/adapt the methods in the above example. That is all you have to do.
Please make sure that the base URL (in the above example /thumbnails) exists and is writable. See verifying your cache settings for details.
sfImageTransformExtraPlugin provides functionality to cache your generated images so that instead of processing the images from scratch per request they get stored on the local filesystem from where your webserver can serve them statically without even spawning a PHP process.
sfImageTransformExtraPlugin provides a symfony task to check your settings to ensure that caching is working properly.
$ ./symfony help transforms:check-caching
Usage:
symfony transforms:check-caching [--env="..."] [--route-name="..."] application
Arguments:
application The application name
Options:
--env The environment (default: prod)
--route-name The sfImageTransform routename (default: sf_image)
Description:
The transforms:check-caching task performs a series of tests on your project to verify the thumbnail caching to work.
Call it with:
php symfony transforms:check-caching application
Please read the output carefully especially if one or more checks fail.
You can also run the tests for a specific environment by providing the env option. It defaults to prod which in most cases is the only environment you want your cache to be enabled.
php symfony transforms:check-caching application --env=prod
The tasks assumes the default route name sf_image for your thumbnails. If you use a different one you can specify it with the route-name option.
php symfony transforms:check-caching application --route-name=your_thumbnail_route
Please note that the permission checks can not be reliable as they are performed with the system permissions of your current user account while your web server should run with a different user account which might have different priviledges.
Sometimes you want to remove already generated images from your filesystem i.e. if the original source image was changed.
For this there is a symfony task which takes two mandatory arguments.
$ ./symfony help transforms:remove
Usage:
symfony transforms:remove application route
Aliases: remove-thumbnails
Arguments:
application The application name
route The sf_image route that generated the image(s) you want to remove
Description:
Removes thumbnails generated by sfImageTransformExtraPlugin.
Let's take a route from the previous examples.
// /apps/yourapplication/config/routing.yml
sf_image:
class: sfImageTransformRoute
url: /thumbnails/:format/:filepath.:sf_format
param: { module: sfImageTransformator, action: index }
requirements:
format: '[\w_-]+'
filepath: '[\w/]+'
sf_format: 'gif|png|jpg'
sf_method: [ get ]
options:
image_source: File
Assuming that this route is active for your frontend application you can now do the following to remove all images generated by that route.
$ ./symfony transforms:remove frontend sf_image_file
Do you really want to delete all generated images?
y
>> files- Generated images removed.
To be more specific you can provide all attributes available for the route.
To remove only images for this route that used the default format:
$ ./symfony transforms:remove frontend sf_image_file --format=default
>> files- Generated images removed.
To remove only images for this route that are of type jpg:
$ ./symfony transforms:remove frontend sf_image_file --sf_format=jpg
>> files- Generated images removed.
Of course you can combine all available attributes. In this case to remove all jpg images that were generated using
the default format (for example if you changed the mimetype of that particular format).
$ ./symfony transforms:remove frontend sf_image_file --format=default --sf_format=jpg
>> files- Generated images removed.
t.b.d.
Here are a few examples to see what is possible.
Consider the following source image.
Here are just a few examples that were all transformed from the above image.
And of course a simple scaling:
The generation process that we designed so far works like this:
The thumbnail image is generated on the first request. All succeeding requests are coming from cache (per default the filesystem) and are served by Apache without spawning a PHP process.
Image generation is quite expansive in terms of CPU and memory usage. This is why sfsfImageTransformExtraPlugin by
default stores generated images for the production environment on the filesystem.
For this the custom cache class sfRawFileCache is used which is basically a copy of sfFileCache but does not prepend
the cached file with expire time information but instead saves only the generated image. It also maintains the real
filename and does not add a .cache suffix.
You can see the typical lifecycle of a generated image in the following Firebug screenshots.
The image is generated, saved to the filesystem and sent to the requesting browser.
The image is read directly from the filesystem without invoking a PHP process.
Apache automatically informs the browser that the image has not been modified by sending a 304 status (depending on
your Apache configuration, however the described behaviour is the default).
As you can see the time needed to deliver a generated image after the second request is drastically reduced. (The times will vary on different installations.)
The deletion of generated images use the sfCache interface and can be triggered by a task of a symfony event.
sfImageTransformExtraPlugin is fully unit tested with PHPUnit. You can run the test suite like this.
$ cd /path/to/sfImageTransformExtraPlugin
$ phpunit --tap test/sfImageTransformExtraPluginsTests.php
sfImageTransformExtraPlugin has a (quite) complete API documentation using PHPdocumentor. You can generate the API documentation like this.
$ cd /path/to/sfImageTransformExtraPlugin
$ phpdoc -o HTML:frames:DOM/phphtmllib -d . -t /path/to/where/you/want/the/apidocs/to/be/generated
