Add powerful image resizing, cropping and manipulation support to your EPiServer website

Posted on January 19, 2013 by Frederik Vig in ASP.NET, EPiServer

I’ve used this module in several of my projects, both EPiServer and standard ASP.NET applications. Image Resizer is open source and contains the core module with a bunch of plugins on top that add extra features, you can also purchase, for a very reasonable fee, additional plugins with even more support. Personally I’ve used many of the performance and cloud plugins with great success.

Installation

All the plugins, including the core, are available through NuGet. You can easily add it to your project by either using the NuGet dialog or using the command: Install-Package ImageResizer. Note that this will only install the core module, note the configuration needed. There’s also a NuGet package with the configuration that we need (which sets up the interception module for us).

Install-Package ImageResizer.MVCWebConfig.

Since EPiServer 7 is using both web forms and MVC we need the MVC version, for regular web forms project you can use: Install-Package ImageResizer.WebConfig.

If you look in web.config you’ll see some additional entries there. The one we care about is this Http Module:

<add name="ImageResizingModule" type="ImageResizer.InterceptModule" />

And that’s everything needed to install Image Resizer! If you open up your site again you can now test that it’s installed properly by adding ?width=100 to the end of the URL for an image. Eg: /PageFiles/48/AlloyMeetBanner.png?width=100. Note that if you’re testing this using the Alloy demo site for EPiServer 7, you’ll have to fix the configuration a bit, since they’re doing some weird stuff in this release of the demo templates to the configuration files.

If you experience any problems, or just want to verify that Image Resizer is setup correctly, you can also visit the following URL: /resizer.debug. See the documentation for more information.

I’ve personally used this in a lot of different projects, from small to large web sites. I also know this module is used by many people running small and large websites (10 000 websites so far). The key is to configure and use the correct plugins. For large websites for instance I use the performance and cloud bundles, for all websites I always turn on disk cache (note that these plugins require a commercial license).

Install-Package ImageResizer.Plugins.DiskCache

<resizer>
    <plugins>
      ...
      <add name="DiskCache" />
    </plugins>
  </resizer>

I encourage you to read the documentation to see what’s possible and some good examples. Here’s also a short summary over querystrings that it supports: quality, format, thumbnail, maxwidth, maxheight, width, height, w, h, scale, stretch, crop, cropxunits, cropyunits, page, bgcolor, rotate, flip, sourceFlip, sFlip, sRotate, borderWidth, borderColor, paddingWidth, paddingColor, ignoreicc, frame, useresizingpipeline, cache, process, margin, anchor, dpi, mode, zoom.

If you’re curious how the interception module works: InterceptModule action-by-action.

Security

For the paranoid of us we can also restrict what commands are supported by URL, using presets.

<resizer>
    <plugins>
      ...
      <add name="Presets" />
    </plugins>
    <presets onlyAllowPresets="true">
      <preset name="thumb" settings="width=100;height=100" />
    </presets>
  </resizer>

onlyAllowPresets means that all other querystrings are ignored. /PageFiles/48/AlloyMeetBanner.png?width=100 will no longer work, but /PageFiles/48/AlloyMeetBanner.png?preset=thumb works just fine.

Related Posts: