How To Quickly Create Content Icons In Episerver

One of my biggest pet peeves when using any system is the lack of attention to the details.  I mean as anyone who works on projects knows, time pressures mean that shortcuts might be taken in order to hit a deadline. A commonly overlooked task in the editor is the failure to define content icons for pages and block.  In case you have no idea what I'm talking about, content icons are the little images that get displayed to the content editor when they try to create a new block or page. episerver_no_content_icon I have definitely been guilty of forgetting to do this before launch as the deadlines loom.  It's easy to worry how much time it might take, what should the icon look like, how I am going to build one with no design skills and the main one... I don't have the time to waste on this right now! Luckily, there is a very quick and dirty solution that any developer can use to implement to generate these preview images and it takes less than 10 minutes. The answer is... to use an online text/image generation tool like Now on each build, all I do is simply write the name of the page or block into and use that as the preview icon.  If you are stuck for ideas to use, then I’d recommend using: with the following configuration: File Format: PNG Background Color: #7975BA Text Size: 45 Image Height: 300 (uncheck auto) Image Width: 300 (uncheck auto) Alignment: Centered

How To Add A Content Icon To a Page or Block

If you have forgotten how to attach a preview image to a block or page, then hopefully this code snippet will remind you:
    [ContentType(DisplayName = "Content Page")]
    public class Content PageType : PageData
As you can see from the snippet above, adding a preview image is pretty simple.  In your page type definition add the ImageUrl attribute and point it to the location in your webroot where the image will live. NOTEPreview images have to be stored outside the EpiSErver database. The attribute needs to use a constant as the parameter so out of the box you cannot make this dynamic.


If you followed the guide you should now have a preview icon that looks similiar to the image below: episerver_with_content_icon This tip seems quite obvious, but, it is overlooked a lot. Hope this helps!

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top