ImageGen is a powerful plugin that allows you to manipulate the images on the templates of Umbraco pages. From the project's website:

With more than 30 options, ImageGen can create hundreds of thousands of variations to meet virtually any need. ImageGen is easy to install and use on your website. ImageGen creates extremely high-quality images quickly. And ImageGen’s advanced caching means images are served immediately for fast and responsive websites.

Using the Plugin

Using the plugin is as simple as passing a string to the imagegen.ashx:

Although it’s simple, this approach can be error prone. In a project where a developer is changing these values from picture to picture, it can be easy to mistype something in the string. Lets see how we can simplify this process by adding an extension method to the default Umbraco helper to create this string for us.

Creating the Helper

Create a new class in the root of your project at “Helpers/UmbracoHelpers.cs” and replace its contents with this:

Then go to the file Views/Web.config and add the new assembly to the namespaces section so that the helper is available to all of the views in the project.

Now you can start using the new helper to generate the Url string on your behalf! Just pass the id of the Umbraco media content (or the path to the image) into the helper as the first argument, and add an anonymous object with all of the options you'd like to use on the image as the second argument. The list of options are found in the ImageGen documentation here.

Examples

Cropping

 
    
     

Rotating

   

Text Overlay

 
   
    

Don't have the ImageGen plugin in your Umbraco installation? Download it here.