In any reasonable sized EPiServer installation its not uncommon that there are a lot of page types available when creating a new page. Often there are a bewildering array of page names/descriptions so I wanted to give editors a visual reference on the content they are creating. I decided to create a simple enhancement to the standard "Create New" screen in EPiServer which would allow users to see an image of the page before they create it.
This would achieved with a thumbnail next to the name and description as shown below:
On clicking the image a larger preview window would appear which would allow users to create a new page from there:
The first thing we need to do is override the default "create new" functionality. Please see my other blog post about customising the EPiServer UI on how to achieve this. Now we have a editable copy of the create new page that we can amend to add the enhancement we want.
Now we need to add a thumbnail and preview URL for each page type. This is achieved by a simple trick, add two properties to the page called "SysThumbNailURL" and "SysPreviewURL" of type String (<=255). Don't show them in edit mode and give them a default value of the URL to the appropriate thumbnail or preview images for the page type. This allows us to access the default value as if it were meta data for the page type. An example showing "SysThumbNailURL" is shown below:
Amend the create new pages as follows (EPiServer 6), which:
- Adds the preview column
- Gets the preview and thumbnail URLs
Make config changes to the episerver.config (EPiServer CMS 6) or web.config (EPiServer CMS 5) file as follows:
You will also need to add a reference to the EPiServer.UI assembly in your project.
Viola our solution is built and out editors have nice visual references to the content that they are going to be creating.
I allowed myself three hours to build this solution so there is a lot that could be done with it so I’d be interested to hear if anyone takes things further! My ideas so far are:
- Automatically generate a thumbnail and preview image
- Use the DDS to store the page type meta data instead of a non edit mode page property
- Allow users to select thumbnails directly from the file manager
Note: I had to tweak the thickbox.js file included in the package below as there is a bug in the version publically available.