I was fortunate enough to attended the EPiServer Partner Summit 2010 and met some great people and saw some inspiring presentations. One session in particular that got my mind thinking was the codemania session. I'd recently blogged about Enchancing the Create New screen in EPiServer. One of the bigger issues with the solution was that we were using properties to store the path to the preview and thumbnail images and that the thumbnail/preview images themselves had to be manually created. I thought it would be great to automatically generate the images using the most recently published pages of each type as a reference. It turns out that codemania provided all the answers…

So how could this be achieved with code from the codemania session? Enter Johan Olofsson's LINQ 2 PageQuery  and Allan Thræn's plugable outputformat providers. Both of these tools can be used to achieve the functionality I described.

Plugging it all together is remarkably easy. Using the work previously done for enhancing the create new screen as a base we simply:

  • Query the most recent version of each page (using LINQ 2 PageQuery)
  • Look up the friendly URL (using the EPiServer API)
  • Generate a thumbnail and preview URL (using outputformat provider)

This means that EPiServer itself is generating the thumbnail and there is no administration overhead and no unnecessary properties in the EPiServer database. Here it is in action:

Implementation

Edit the GetPreviewLink method in NewPage.aspx.cs:

protected string GetPreviewLink(int pageTypeID, string pageDescription, string createLink)
{
 
    string thumbURL = string.Empty;
    string previewURL = string.Empty;
 
    //Get the most recent page of the published type (not the most efficient way of doing this...)
    var myQuery = new PageQuery(PageReference.StartPage, "en");
    PageData pageResult = (from page in myQuery
                      where page.PageTypeID == pageTypeID
                      orderby page.StartPublish descending
                      select page).Take(1).ToList().FirstOrDefault();
 
    if (pageResult != null)
    {
        //Get the friendly URL and work out the thumbnail and preview URLs
        UrlBuilder friendlyUrl = new UrlBuilder(pageResult.LinkURL);
        Global.UrlRewriteProvider.ConvertToExternal(friendlyUrl, pageResult.PageLink, Encoding.UTF8);
        friendlyUrl.Host = EPiServer.Configuration.Settings.Instance.SiteUrl.Host;
 
        //Append on the formats for the thumbnail and preview
        thumbURL = friendlyUrl.ToString() + "?outputformat=png&width=100";
        previewURL = friendlyUrl.ToString() + "?outputformat=png";
    }
 
    if (thumbURL != string.Empty && previewURL != string.Empty)
    {
        return string.Format("<a href=\"{0}\" title=\"{1}\" class=\"thickbox\" rel=\"gallery\"><img src=\"{2}\" alt=\"Template preview\"/></a>",
                    previewURL + "&unique=" + HttpUtility.UrlEncode(Guid.NewGuid().ToString()),
                    createLink + " - " + pageDescription,
                    thumbURL);
    }
    else
    {
        return string.Empty;
    }
}

Tweak the tickbox.js as follows (note the addition of a check for the outputformat=png in the url):

...
 
        var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;
        var urlType = baseURL.toLowerCase().match(urlString);
        if (urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp' || url.toLowerCase().indexOf('outputformat=png') > 0) {//code to show images
 
            TB_PrevCaption = "";
 
...

Conclusion

This post was written as little bit of fun following the EPIServer Partner Summit 2010 and the "Codemania" session. I really hope that EPiServer start to officially support the LINQ 2 PageQuery as its a long asked for and useful feature. Allan's work also looks interesting and has some useful possibilities.

When it comes to this solution there are of course more enhancements such as:

  • Cache the thumbnail and preview images (I have not profiled how performant the outputformat providers are)
  • Add a property to a page to mark it as the "reference" version to be used to the thumbail, instead of the most recent published version

However this is very much a proof of concept and not really intended for a production environment. With that in mind please read the disclaimer below!

Disclaimer

This was only a quick update using experimental tools/code shown at the EPiServer Partner Summit 2010. So this is released as is, you use it at your own risk. If your server catches on fire as a result of this then I wont be running toward it with a fire extinguisher.

Comments

Recommendations for you