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.
I have definitely been guilty of forgetting to do this before launch as the deadlines loom. It's easy to worry about 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 www.cooltxt.com.
Now on each build, all I do is simply write the name of the page or block into www.cooltxt.com and use that as the preview icon. If you are stuck for ideas to use, then I’d recommend using: http://cooltext.com/Logo-Design-Fun with the following configuration:
File Format: PNG
Background Color: #7975BA
Text Size: 45
Image Height: 300 (uncheck auto)
Image Width: 300 (uncheck auto)
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:
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.
NOTE: Preview 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 similar to the image below:
This tip seems quite obvious, but, it is overlooked a lot. Hope this helps!