Image Transcoder Addon
The image transcoder addon allows you to ready optimise and adapt images for different screens. This can be used to resize and crop images. It can also be used to overlaying text or images over another image, e.g. creating buttons on the fly or adding a play icon to a movie still.
Deployment
This addon, although supported 'out of the box' will require deployment before it can be used. It needs to be copied to your addons folder. (see Deploying a site addon
Usage
To include a transcoded image, use the imagetranscoder UI object, e.g.
<div>
<img
src="http://blog.bemoko.com/wp-content/uploads/2009/09/radio.jpg"
data-rule="100.jpeg" alt="radio"/>
</div>
Supported rules are
| Rule | Effect |
|---|---|
| nnn.jpeg | resize to nnn pixels wide |
| nnnxmmm.jpeg | resize to nnn pixels wide and mmm pixels high |
| cropn.jpeg | crop to nnn pixels wide |
| nnn-cropmmm.jpeg | resize to nnn pixels wide and then crop to mmm pixels high |
Note that jpeg is currently the only supported image output.
You can also use device capabilities to drive the transcoding rule, e.g. resize to width of device with:
<img
src="http://blog.bemoko.com/wp-content/uploads/2009/09/radio.jpg"
data-rule="${device.displayWidth}.jpeg"/>
Advanced Configuration
If your site does not extend from skin.default then in your template you'll need to explicitly import the image transcoder UI object
[#import "uiobjects/imagetranscoder/imagetranscoder.html" as imagetranscoder]