Did you know that ImageGen isn't only for Umbraco sites? That's right, you can use ImageGen with any .net 2.0 (or higher) website because it isn't tied to any specific Umbraco version.

So... does that mean I can you use the same ImageGen that I've enjoyed using with my Umbraco 4 sites with the all new, mvc-based Umbraco 5?
YES!

Disclaimer: these steps are a workaround until I get an updated version of ImageGen released that properly supports Umbraco 5's plugin architecture. When that's released you'll be able to install the package directly and not worry about this blog post. Okay? Okay.

Manual Installation

1. Download the ImageGen .zip package created for Umbraco v4
   http://our.umbraco.org/projects/website-utilities/imagegen
2. Extract the .zip file to a temporary folder
3. View the expanded files and copy the following files to your Umbraco v5.0 website
   
   • ImageGen.ashx goes in the root of your site
   • ImageGen.config goes in the root of your site
   • ImageGen.dll goes in the 'bin' folder of your site
4. Update the Web.config file in the root of your site to add the lines that have ImageGen in them:
   

    <configuration>
      <configSections>
         <section name="ImageGenConfiguration" type="ImageGen.ImageGenConfigurationHandler,ImageGen" />
      </configSections>
   
      <ImageGenConfiguration configSource="ImageGen.config" />
   </configuration>
   

5. Verify the installation by viewing http://localhost/imagegen.ashx?version
   (replacing localhost with your site's domain and/or port number)
   
   You should see a result like the following:
   
   ImageGen Professional version 2.5.7.27945
   Professional features are available for localhost
   Professional features are available for *.local
   

Razor Code for using ImageGen

You can use this same Razor code in a macro or directly in your template.

For these examples I've created two document type properties. One is an Uploader field and the other is a Media Picker. Since they behave slightly differently it's worth seeing both.

Using ImageGen with an Uploader property called uploadImage

 <p>Original image:<br />
   <img src="@Umbraco.GetMediaUrl(Model.Id, "uploadImage")" width="200" />
</p>

<p>Resized image:<br />
   <img src="/imagegen.ashx?width=200&image=@Umbraco.GetMediaUrl(Model.Id, "uploadImage")" />
</p>

Using ImageGen with a MediaPicker property called mediaImage

 <p>Original image:<br />
   <img src="@Umbraco.GetMediaUrl(DynamicModel.MediaImage, "uploadedFile")" width="200" />
</p>

<p>Resized image:<br />
   <img src="/imagegen.ashx?width=200&image=@Umbraco.GetMediaUrl(DynamicModel.MediaImage, "uploadedFile")" />
</p>

Tip: for more elaborate Razor macro inspriation, check out Warren Buckley's GitHub collection of snippets at https://gist.github.com/warrenbuckley

Remote, Cloud, and Non-Local Images

The above works perfectly for images stored locally. If your images aren't stored locally on the web server it won't work.

But... ImageGen Professional's "Remote Images" saves the day!

You just need to include the full url to the image in your call to ImageGen.ashx, and update the ImageGen.config file to whitelist your domain(s) to make it work. The ImageGen Reference Manaul explains whitelisting and remote urls.

As an added benefit, with ImageGen Professional you can turn on client-side image caching, which can greatly improve the performance of your site, especially with remote images that might have some latency in fetching.

ImageGen Professional's remote image capability works for images served from a remote website (flickr, twitter, etc.), those stored in the cloud (EC2, Amazon, etc.), saved as blobs in a database, and with all future Hive providers. With ImageGen Professional you can rock them all.

 

...and that's all there is to it!