How do you put custom markup in a sitecore sc field?

Question

I need to add some custom markup for the sc:Image field to enchance SEO. This markup is not a property of the field, so from codebehind, I tried something like this:

slideImage.Attributes.Add("ControlType", "C4Image");
slideImage.Attributes.Add("rel", relString);

But this isn't working, and I see nothing in the rendered output. Is there any way to do this?

Answer 1

You need to use the "Parameters" property for setting extra properties on both the and control.

You can to it like this :

<sc:FieldRenderer ID="PageImage" runat="server" FieldName="ContentImage" Parameters="ControlType=C4Image&rel=relString" />
<sc:Image ID="SCPageImage" runat="server" Field="ContentImage" Parameters="ControlType=C4Image&rel=relString" />

That will be rendered like this :

<img width="1232" height="637" controltype="C4Image" rel="relString" alt="" src="~/media/Images/DEMO backgrounds/background2.ashx">

Answer 2

You can create you own class inheriting from the Sitecore.Web.UI.WebControls.Image and override it like this:

namespace My.Assembly.Namespace
{
    public class MyImage : Sitecore.Web.UI.WebControls.Image
    {
        public virtual string RelAttribute { get; set; }

        protected override void PopulateParameters(Sitecore.Collections.SafeDictionary<string> parameters)
        {
            base.PopulateParameters(parameters);
            if (!String.IsNullOrEmpty(RelAttribute))
            {
                parameters.Add("rel", RelAttribute);
            }
        }
    }
}

And then register the namespace and use the MyImage class:

<%@ Register tagPrefix="my" namespace="My.Assembly.Namespace" assembly="My.Assembly" %>

<my:MyImage runat="server" RelAttribute="reltest" Field="logo"/>

You can use all the standard attributes from sc:Image on the my:MyImage as well. The code will generate img tag with rel <img rel="reltest" src="logo.jpg" ... />.

You can easily extend the code above to support ControlType attribute as well.