Setting icons for content types

When creating new types instances, such as pages or blocks, we get a lot of help from the CMS UI identifying which type we want.

But, to offer better experience to the editors, it would be much nice that these types could be present with an image.

Episerver recomend 120×90 dimention for each icon, but if you give different it will be fit to that.

Episerver has an attribute named ImageUrlAttribute . Create a derived type that has a default constructor that sets the path to a default image file:

public class StartPageImageUrlAttribute : ImageUrlAttribute
{
  public StartPageImageUrlAttribute() : base("/static/contenticons/StartPage.png")
  {  }

  public StartPageImageUrlAttribute(string path) : base(path)
  {  }
}

Apply this attribute to your content type classes to show a default icon:

[ContentType(DisplayName = "Start Page", GUID = "BD710683-6F9D-4DA5-A2DC-5CFEF74723A8", Description = "Site start page", GroupName = PagesGroups.Content)]
    [StartPageImageUrl]
    public class StartPage : StandardPage
    {
    }

Or you can add the attribute ImageUrl to the class:

[ContentType(DisplayName = "Standard Page", GUID = "1D1A9C91-3F47-4ACE-90E2-06CBDFABC81A", Description = "Non specific page. Base page for all page content.", GroupName = PagesGroups.Content)]
    [ImageUrl("/static/contenticons/StandardPage.png")]
    public class StandardPage : BasePageData
    {
        [CultureSpecific]
        [Display(Name = "Blocks", GroupName = SystemTabNames.Content, Order = 1000)]
        public virtual ContentArea Blocks { get; set; }
    }

After add the images to the site, you can have the fancy icons on each type: