OOB publishing image field with hyperlink bug: Resolved

Couple of times SharePoint presents an odd behavior. I came across one of such behaviors recently where the publishing image field was getting rendered incorrectly when seen in the display mode. Instead of showing the image the publishing field shows the IMG tags.

Searching around the internet I found other people reporting the same issue followed by a workaround given by Stefan Gossner on his blog.

The workaround he suggested includes creating a custom field control which inherits from the RichImageField class.

After implementing the same I was able to get rid of this issue, but soon i discovered one more bug :-( . It was if you assign a hyperlink (e.g. http://www.microsoft.com) to an image, then the publishing image field also renders the hyperlink along with the image.

This occurs specifically in case when the hyperlinks include the protocol with them (http or https etc.).

After inspecting this issue I found that it was all due to the malformed anchor tag.

A well formed HTML output should be:

<span dir=""><a href="http://www.microsoft.com"><img alt="" border="0" src="/PublishingImages/ add.gif" style="BORDER: 0px solid; "></a></span>

But with the issue it was:

<span dir=""><a href="<a href="http://www.microsoft.com ">http://www.microsoft.com </a>" target="_blank"><img alt="" border="0" src="/PublishingImages/add.gif" style="BORDER: 0px solid; "></a></span>

To rectify this issue i took Steffan’s approach as the baseline and modified the code to look like this:

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Text;
using System.IO;
using System.Web;
using System.Web.UI;
using Microsoft.SharePoint.Publishing.WebControls;

namespace CustomPublishingField
{
    public class RichImageFieldControl: RichImageField
    {
         protected override void RenderFieldForDisplay(HtmlTextWriter output)
         {
             if (this.ListItemFieldValue != null)
             {
                 StringBuilder item = new StringBuilder();
                 item.Append("<span dir=''>");
                 item.Append(this.ListItemFieldValue.ToString());
                 item.Append("</span>");
                 output.Write(item.ToString());
             }
         }
    }
}

So what I did here is pretty simple. I am taking the value of the ListItemFieldvalue property of the control and wrapping it under span tags. This generates the correct html and as a result the image gets properly rendered with hyperlinks.