Publishing Images are shown in encoded Html/text instead of showing the image - temporary solution

We came across a random issue lately where a publishing image (RichImageField) does not render correctly in display mode : it shows the IMG tag in Html encoded format rather than the actual image.

 

We had this issue with both the OOB RollupImage as well as custom columns using the RichImageField; however we cannot determine what the parameters that makes this bug appear and disappear randomly.  We ended up creating a workaround similar to another issue with the RichImageField documented by Stefan Gossner at this Url : How To: overcome glitches with the standard field controls shipped with MOSS 2007.

 

using System;

using System.Collections.Generic;

using System.Text;

using System.IO;

using System.Web;

using System.Web.UI;

 

using Microsoft.SharePoint.Publishing.WebControls;

 

namespace Customer.SharePoint.WebControls

{

    public class WorkaroundRichImageField : RichImageField

    {

        protected override void RenderFieldForDisplay(System.Web.UI.HtmlTextWriter output)

        {

            TextWriter textWriter = new StringWriter();

            base.RenderFieldForDisplay(new HtmlTextWriter(textWriter));

            string fieldHtml = HttpUtility.HtmlDecode(textWriter.ToString());

            output.Write(fieldHtml);

        }

    }

}

 

You simply need to add that library in the GAC or the BIN and import it in your Page Layouts that uses RichImageField.  Drag & Drop the OOB controls to have all the parameters and change their definition to use your class instead of the OOB one and it'll fix the problem.

 

Maxime

Comments

• Anonymous
  October 02, 2007
  PingBack from http://www.artofbam.com/wordpress/?p=4683

• Anonymous
  December 09, 2008
  Bug: Publishing Image aka RichImageField

• Anonymous
  March 26, 2009
  I tried changing <PublishingWebControls:RichImageField /> (attributes left out for brevity) to <PublishingWebControls:WorkaroundRichImageField /> Yet I get a parser error. What else do I need to do to get it to render correctly.

• Anonymous
  March 26, 2009
  The prefix (PublishingWebControls) of your tag will have to be the one defined in the definition at the top of your page. That definition makes a reference to your namespace and specifies a prefix so that you can then make an instance of a class for that namespace in an ASP.NET control. Did you define your Customer.SharePoint.WebControls namespace at the top of your page with a prefix of PublishingWebControls?

• Anonymous
  April 28, 2009
  Hyperlink shows up along wi Thanks for the solution Maxime, it helped us to get around this bug. But while implementing the same we encountered a strange issue. 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.). We inspected this issue and found that it was all due to the malformed anchor tag The HTML output for an ideal case 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> So to correct the same, we took the value for this filed from the ListItemFieldValue property of the control that gave us the correct html we wanted and appended the span tags with this value.

• Anonymous
  April 28, 2009
  Good point, I hadn't tried with those parameters.  It's an odd default output.  Anyhow, yes, you can either take the custom control "front" or you probably could use an ASP.NET Control Adapter which would be "less intrusive", easier to apply everywhere, and also to maintain.

• Anonymous
  May 28, 2009
  I figured out the root cause of the rendering problem with the original. Your custom site column created through a feature must include the following attributes: RichText="TRUE" RichTextMode="FullHtml" The problem you face is this: If you are already using your custom site column in a pages library, changes may not propagate. You will need to modify the SchemaXml property on the SPField object to include those attributes. For Example: <Field ID="{1AB2D149-5651-46c4-8133-4E7952998700}" Type="Image" Name="Page Image 2" SourceID="http://schemas.microsoft.com/sharepoint/v3" DisplayName="Page Image 2" StaticName="Page Image 2" Group="CPChem - Page Layout Columns" Required="FALSE" Sealed="TRUE" /> should be changed to ID="{1AB2D149-5651-46c4-8133-4E7952998700}" Type="Image" Name="Page Image 2" SourceID="http://schemas.microsoft.com/sharepoint/v3" DisplayName="Page Image 2" StaticName="Page Image 2" Group="CPChem - Page Layout Columns" Required="FALSE" RichText="TRUE"   RichTextMode="FullHtml" Sealed="TRUE" />

• Anonymous
  May 29, 2009
  Good catch.  I remember using that parameter for RichHtml fields. Thanks for the improved information.  If you are stuck with already deployed fields (as it was my case when I had the issue back in 2007), you will also be stuck to use a control to change the output. If you haven't deployed, you can do it right to start with. Thanks, Maxime

• Anonymous
  November 09, 2009
  Thanks for this very essential blog. It saved me a lot of work. For those of you who are still not sure how to use this in your code, here is what you need to do: Step 1: Copy the code from this blog into your SharePoint solution package. Change the namespace to match your local namespace. Step 2: Register your assembly at the top of you page layout(s). Example: <%@ Register TagPrefix="YourPrefix" Namespace="YourNamespace" Assembly="YourAssembly, Version=1.0.0.0, Culture=neutral, PublicKeyToken=YourToken"%> Step 3: Change the existing <PublishingWebControls:RichHtmlField../> tags with your new tags. Example: Replace <PublishingWebControls:RichHtmlField id="RichHtmlFieldId1" FieldName="PageImage1" runat="server"/> tags in your pagelayout(s) with <YourPrefixTag:WorkaroundRichImageField id="RichHtmlFieldId1" FieldName="PageImage1" runat="server"/>. Step 4: Deploy. Make sure your SharePoint package is targeted to deploy assemblies to the GAC.