Sitecore Field Renderer - add markup inside render

Question

As part of an SEO enhancement project, I've been tasked with adding the following property inside the markup for the image that the field renderer is generating on the page:

itemprop="contentURL" - before the closing tag.

<sc:FieldRenderer ID='FieldRenderer_MainImage' Runat='server' FieldName='Homepage Image'
    CssClass="_image" Parameters="w=150" itemprop="contentURL" />

When I tried to place this inside the Field Renderer, or add it as a "parameter" - it doesn't work.

Is there another way to do this, without having to create a control file and generate the output in the code-behind?

Answer 1

Couldn't this be done by extending the RenderField pipeline? You could potentially decompile (using Reflector or ILSpy) the GetImageFieldValue and add your own logic to adjust the output from the ImageRenderer?

Reference Sitecore.Pipelines.RenderField.GetImageFieldValue.

Answer 2

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">

Note: This works in 6.5 and 6.6 - not sure which version is being used in this question.

Answer 3

You may want to try using the <sc:image /> tag. If you add a custom parameter there, it's added as an attribute to the img tag.

In your case the tag will look like this:

<sc:image runat="server" field="Homepage Image" width="150" itemprop="contentURL" class="_image" />

Answer 4

In cases where "Parameters" doesn't work or trying to create a Custom control, and instead of wrapping the control in a classed div like this:

<div class="my-class">
     <sc:FieldRenderer runat="server" />
</div>

You can use this:

<sc:FieldRenderer Before="<div class='my-class'>" After="</div>" runat="server" />

Notice the Single quotes in the class declaration of the div above.

This keeps it a little cleaner and in context with the Sitecore control instead of a Web Developer adding an external div that might later lose its context if changes occur.

I recommend saving yourself some trouble and using the MVC version of Sitecore though, now, (when starting new Sitecore projects), as you can very simply add a class to it like so: How can I get Sitecore Field Renderer to use a css class for an image

Answer 5

You actually cannot do this on a FieldRenderer. You're options are:

1. Extend the FieldRenderer with the ability to do this (this will likely require a high level of effort)
2. Use a regular .NET control and bind the data from the Sitecore item via the C# code-behind.

Answer 6

using mvc, I found this was easier than extending the FieldRender, should be reusable, but will have to test a bit more. WIP.

var image = "<span class=\"rightImage\">" + FieldRenderer.Render(contentBlock, "Image", "mw=300") + "</span>";
            var text = FieldRenderer.Render(contentBlock, "Text");
            model.Text = FieldRendererHelper.InjectIntoRenderer(text, image, "<p>");

  public static HtmlString InjectIntoRenderer(string parentField, string injectField, string injectTag)
    {
        return new HtmlString(parentField.Insert(parentField.IndexOf(injectTag, StringComparison.InvariantCulture) + injectTag.Length, injectField));
    }