Example 05
###Using server side image manipulation features Sometimes images must be resized, because of limited space, save bandwidth, the images need to be in a special form factor or special image type, etc. You can easily setup Backload. to handle this task on the fly when imagas are uploaded. Backload can also resize or crop images with parameters defined in the config file or sent in a request by the browser. In this example we define the resize options in the config file.
####Image manipulation feature example We want to set the width of the resulting image to 600 pixel and the height to 400 pixel. Dpi can be omited as 96dpi is the default. We also can omit the canvasColor attribute, because we use "ratio" as resizeMode, which uses only the bounds of the canvas as max width/height. Finally, we let the image output type as it is (default):
<images width="600" height="400" dpi="96" canvasColor="#00000000" forceImageType="none" resizeMode="ratio" />
We also want to set some options for the thumbnails. The thumbnail will have a fixed width (60 pixel) and height (40 pixel) as we use "place" as resize mode and a canvas has a fixed size. "_thumbs" will be our subfolder for thumbnails which can be omitted as it is the default. As canvax color we want black opaque (no transparency, srgb: `#00000000`). And finally the output thumbnail will always be a PNG file.
<thumbnails path="_thumbs" width="60" height="40" dpi="96" canvasColor="#00000000" resizeMode="place" imageType="image/png" />
####Conclusion
This example shows how to use some image manipulation options. Most options are self-explanatory, but resize mode's may be a bit confusing. The image below shows how original image, canvas and resize option lead to the resulting image:
####Resize modes
Code examples: Example05
Backload. (Standard version): Copyright 2013, Steffen Habermehl, License (Standard version): MIT license
Professional and Enterprise (source code) version are available under a commercial license.
Follow us on Twitter: @Backload_MVC