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:

3 thoughts on “Setting icons for content types

Leave a Reply to Jeroen Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: