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.

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:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Routing;

using umbraco.NodeFactory;

using Umbraco.Core.Models;

using Umbraco.Web;

namespace MarcelDigital.Umbraco.Helpers

{

public static class UmbracoHelpers

{

/// <summary>

/// Creates the url from the media id to run an image through the image gen plugin

/// </summary>

/// <param name="helper"></param>

/// <param name="imageId">Umbraco media id of the image</param>

/// <param name="options">Options to pass to the image gen plugin</param>

/// <returns></returns>

public static String ImageGenUrl(this UmbracoHelper helper, int imageId,

object options) {

string imageUrl = helper.Media(imageId).Url;

return helper.ImageGenUrl(imageUrl, options);

}

/// <summary>

/// Creates the url to run an image through the image gen plugin

/// </summary>

/// <param name="helper"></param>

/// <param name="imageUrl">Url to the image that needs to be proccessed</param>

/// <param name="options">Options to pass to the image gen plugin</param>

/// <returns></returns>

public static String ImageGenUrl(this UmbracoHelper helper, string imageUrl,

object options) {

var baseUrl = "/imagegen.ashx?";

var optionsDictionary = new RouteValueDictionary(options);

optionsDictionary.Add("image", HttpUtility.UrlEncode(imageUrl));

return baseUrl + String.Join("&", optionsDictionary.Select(o => String.Concat(o.Key, "=", o.Value)).ToList());

}

}

}

view raw UmbracoHelpers.cs hosted with ❤ by GitHub

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.

<system.web.webPages.razor>

<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />

<pages pageBaseType="System.Web.Mvc.WebViewPage">

<namespaces>

...

<add namespace="MarcelDigital.Umbraco.Helpers" />

</namespaces>

</pages>

</system.web.webPages.razor>

view raw Web.config hosted with ❤ by GitHub

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.

<img src='@Umbraco.ImageGenUrl(Model.Content.GetPropertyValue<int>("image"), new { width = 580, height = 270, crop = "resize" })'

alt="Image"/>

view raw ImageGenRazorExample.cshtml hosted with ❤ by GitHub

Examples

Cropping

<img src='@Umbraco.ImageGenUrl(Model.Content.GetPropertyValue<int>("image"), new { width = 200, height = 270, crop = "resize" })'

alt="Image" />

view raw HelperExampleCrop.cshtml hosted with ❤ by GitHub

Rotating

<img src='@Umbraco.ImageGenUrl(Model.Content.GetPropertyValue<int>("image"), new { rotate = 30 })'

alt="Image" />

view raw HelperExampleRotate.cshtml hosted with ❤ by GitHub

Text Overlay

<img src='@Umbraco.ImageGenUrl(Model.Content.GetPropertyValue<int>("image"), new { text = "Marcel%20Digital", fontcolor = "aqua", align = "center" })'

alt="Image" />

view raw HelperExampleOverlay.cshtml hosted with ❤ by GitHub

11 Jun 2015

Umbraco

About the author

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 made it too hard to leave.