Html Image Helper for Umbraco and MVC

MVC Html Helpers are a great way to reduce coding times and cut down on html repetition. These helpers come in especially useful when you are creating your own custom razor views for Umbraco. In this article I am going to show you how to create your own MVC Html Image Helper for Umbraco.

The first thing to do is create a new folder in your website solution to hold the Helper extensions e.g.:-

The next task is to create a new class for your helpers - I have called mine HTMLHelpers. Next comes the code:-

using System;
using System.Web;
using System.Web.Mvc;
using Umbraco.Web.Models;
 
namespace Website
{
    /// <summary>
    /// Site HTML Helpers
    /// </summary>
    public static class MyHelpers
    {
        /// <summary>
        /// Create Umbraco Image Tag
        /// </summary>
        /// <param name="htmlHelper">Html Helper</param>
        /// <param name="umbracoMedia">Umbraco Media</param>
        /// <returns>Umbraco Image</returns>
        public static MvcHtmlString UmbracoImage(this HtmlHelper htmlHelper, DynamicPublishedContent umbracoMedia)
        {
            return UmbracoImage(htmlHelper, umbracoMedia, null, null, null);
        }
 
        /// <summary>
        /// Create Umbraco Image Tag
        /// </summary>
        /// <param name="htmlHelper">Html Helper</param>
        /// <param name="umbracoMedia">Umbraco Media</param>
        /// <returns>Umbraco Image</returns>
        public static MvcHtmlString UmbracoImage(this HtmlHelper htmlHelper, DynamicPublishedContent umbracoMedia, string className)
        {
            return UmbracoImage(htmlHelper, umbracoMedia, className, null, null);
        }
 
        /// <summary>
        /// Create Umbraco Image Tag
        /// </summary>
        /// <param name="htmlHelper">Html Helper</param>
        /// <param name="umbracoMedia">Umbraco Media</param>
        /// <returns>Umbraco Image</returns>
        public static MvcHtmlString UmbracoImage(this HtmlHelper htmlHelper, DynamicPublishedContent umbracoMedia, string className, int? width, int? height)
        {
            string widthHeight = string.Empty;
 
            if (width != null && height != null)
            {
                widthHeight = string.Format(
                    "width=\"{0}px\" height=\"{1}px\"",
                    width,
                    height);
            }
 
            return MvcHtmlString.Create(
                String.Format("<img src=\"{0}\" class=\"{1}\" alt=\"{2}\" {3}/>",
                umbracoMedia.Url.ToLower(),
                className,
                umbracoMedia.NameNormalised(),
                widthHeight));
        }
    }
}

I have created three variations (overloads) of my HTML Umbraco Image Helper.

The primary method takes the Umbraco type of DynamicallyPublishedContent. I have had to use this type rather than Dynamic because you cannot use dynamic types in extension methods, so you will need to convert to this type before calling the method.

The other two overloads allow you to pass in various properties such as width, height and class name.

For the alt property of the image, you can either add this as an extra parameter in the method signature, or in my case, extend the Umbraco DynamicPublishedContent class to utilise the Umbraco Name property:

using Umbraco.Web.Models;
 
namespace Website
{
    /// <summary>
    /// Dynamic Published Content Extender
    /// </summary>
    public static class DynamicPublishedContentExtender
    {
        /// <summary>
        /// Name Normalised
        /// </summary>
        /// <param name="d">Dynamic Published Content</param>
        /// <returns>Name normalised to a string</returns>
        public static string NameNormalised(this DynamicPublishedContent d)
        {
            return d.Name.Replace(".jpg", string.Empty).Replace(".png", string.Empty).Replace("-", " ");
        }
    }
}

The last piece of the jigsaw is to use your new HTML Helper method in your MVC Razor views, for example:-

@Html.UmbracoImage((DynamicPublishedContent)Umbraco.Media(CurrentPage.profilePicture), "central-image", 200, 200)

To use the HTML Helper you will need to query Umbraco.Media for your image, cast it from a Dynamic to DynamicallyPublishedContent type, and then pass it into your Helper method. Still a bit of work to do, but much easier than creating separate html image tags for every Umbraco image!