How to give Sitecore sublayouts and renderings custom thumbnails

Where possible, it's nice to configure Sitecore in a way that makes it easier for the content authors to use the system. One such way is to provide custom thumbnails for any sublayouts or renderings (instead of the standard blue rectangle). The main benefit here is that it helps content authors to distinguish between the many sublayouts or renderings available and also gives them a preview of what it looks like.An example of how it would look is shown below:



As you can see the PageBody rendering has a custom image, which illustrates what the page would look like. To set this up in Sitecore you need to:

1. Create an image to use on a given sublayout/rendering and upload it to the media library
2. Navigate to the sublayout/rendering item in the content tree
3. Ensure Standard Fields are enabled (under View on the ribbon)
4. Under the Appearance section of the sublayout/rendering properties you will see a field called Thumbnail, select the image uploaded at step 1
5. That's it, the custom thumbnail is setup