Loading Image

A Simple HTML Helper For Umbraco's ImageGen Plugin

by Alex Vilmur 11 Jun, 2015

A Simple HTML Helper For Umbraco's Imagegen Plugin

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.



Imagegen Cropping


Umbraco Imagegen Rotating

Text Overlay

Umbraco Imagegen Text Overlay
Alex Vilmur Web Developer & Umbraco Master, Marcel Digital

Alex Vilmur

Alex Vilmur is a wizard at development and also trumpet. He once auditioned for The Mighty Mighty Bosstones, but found his passion for website development and Umbraco was too hard to leave.