Category Archives: Template Foundation

Mar 02 2011
Leave a comment
EPiServer, Template Foundation

Summary of resize image in EPiServer Template Foundation

I’m working on my first ETF project, and sadly I’m not that overwhelmed but that’s another story.

This story is about using the resize image function, I didn’t find a good blog post on how to use this, except how to activate the functionality:

I didn’t setup this project but as you can read on Ted’s blog about Creating a new website using Template Foundation you’re supposed to add the following to web.config:

<configuration>
<configSections>
<section name=”DynamicImageProcessor” type=”TemplateFoundation.Handlers.DynamicImageProcessor.ProcessorConfig” />
</configSections>
<DynamicImageProcessor>
<Cache CacheDirectory=”C:\Temp\dynamicimageprocessor-test” Enabled=”true” />
</DynamicImageProcessor>
</configuration>

You’re also supposed to add these handlers on the paths you want to activate:

<add name=”png” verb=”GET,HEAD” path=”*.png” type=”TemplateFoundation.Handlers.DynamicImageProcessor.Processor” />
<add name=”jpg” verb=”GET,HEAD” path=”*.jpg” type=”TemplateFoundation.Handlers.DynamicImageProcessor.Processor” />
<add name=”gif” verb=”GET,HEAD” path=”*.gif” type=”TemplateFoundation.Handlers.DynamicImageProcessor.Processor” />

In my example I want to be able to modify images uploaded to the PageFiles directory, Therefore my configuration will look like this;

<location path=”PageFiles”>
<system.webServer>
<handlers>
<add name=”webresources” path=”WebResource.axd” verb=”GET” type=”System.Web.Handlers.AssemblyResourceLoader” />
<!– Dynamic Image Processor –>
<add name=”png” verb=”GET,HEAD” path=”*.png” type=”TemplateFoundation.Handlers.DynamicImageProcessor.Processor” />
<add name=”jpg” verb=”GET,HEAD” path=”*.jpg” type=”TemplateFoundation.Handlers.DynamicImageProcessor.Processor” />
<add name=”gif” verb=”GET,HEAD” path=”*.gif” type=”TemplateFoundation.Handlers.DynamicImageProcessor.Processor” />
<!– End of Dynamic Image Processor–>
<add name=”wildcard” path=”*” verb=”*” type=”EPiServer.Web.StaticFileHandler, EPiServer” />
</handlers>
</system.webServer>
<staticFile expirationTime=”-1.0:0:0″ />
</location>

I know that already, how do I use this?

To fetch a resized image, all I need to do is to browse to the file and add some parameters:

http://myproject/PageFiles/4474/328.jpg?w=107&ch=76

This combination of w and ch means that the size will be shrunk to 107 px width, but cropped to 76 px height.

Other parameters you can add are:

integers:
w: resized width, the image will be resized to fit this width (can be replaced with “width”)
h: resized height, the image will be resized to fit this height (can be replaced with “height”)
cw: cropped width, the image will be cropped to fit this width
ch: cropped height, the image will be cropped to fit this height
ox: offset x position on cropping, default is center of image
oy: offset y position on cropping, default is center of image

booleans:
r: keep aspect ratio
up: the image may be resized to larger than original image

I hope this post gave you some help on how to change the sizes in a Template Foundation web site.

/Alf

:<section name="DynamicImageProcessor" type="TemplateFoundation.Handlers.DynamicImageProcessor.ProcessorConfig" /