Does anyone know how to display an image in an NVelocity template?

Question

Unfortunately, I'm stuck on 9.2 until client agrees to upgrade to 10. I have NVelocity templates working nicely as a rendering variant but would like to display an image. If I simply add the $item.Image (which is an image field) to the template it render the following HTML:

<img mediaid="{5F9CD356-544F-4F2F-8A74-1B4EBF926D35}" alt="In The Media Item" height="" width="" hspace="" vspace="">

and broken image of course.

Answer 1

One way we solved this problem while on Sitecore 8.2 was to build out own functions for use with NVelocity. The migration of these over to Scriban was not too bad either.

Start by creating a new class for the tool. Here we are going to create a function that returns the media url.

using Sitecore;
using Sitecore.Data.Fields;
using Sitecore.Data.Items;
using Sitecore.Resources.Media;
using Sitecore.StringExtensions;

namespace Scms.Foundation.Variants.NVelocityExtensions
{
    public class MediaTool
    {
        public static string GetMediaItemLink(Item item, string fieldName)
        {
            var image = (ImageField) item.Fields[fieldName];

            var mediaOptions = new MediaUrlOptions {AbsolutePath = false};
            return StringUtil.EnsurePrefix('/', MediaManager.GetMediaUrl(image.MediaItem, mediaOptions));
        }   
    }
}

Next we need to tell NVelocity to use the new tool.

using Scms.Foundation.Variants.NVelocityExtensions;
using Sitecore.XA.Foundation.Variants.Abstractions.Pipelines.GetVelocityTemplateRenderers;

namespace Scms.Foundation.Variants.Pipelines.GetVelocityTemplateRenderers
{
    public class AddTemplateRenderers : IGetTemplateRenderersPipelineProcessor
    {
        public void Process(GetTemplateRenderersPipelineArgs args)
        {
            args.Context.Put("itemFieldTool", new ItemFieldTool());
            args.Context.Put("linkTool", new LinkTool());
            args.Context.Put("mediaTool", new MediaTool());
            args.Context.Put("mapTool", new MapTool());
        }
    }
}

Add a new patch to register the template renderer.

<?xml version="1.0" encoding="utf-8" ?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <pipelines>
      <getVelocityTemplateRenderers>
        <processor type="Scms.Foundation.Variants.Pipelines.GetVelocityTemplateRenderers.AddTemplateRenderers, Scms.Foundation.Variants" />
      </getVelocityTemplateRenderers>
    </pipelines>
  </sitecore>
</configuration>

Now when you decide to use the TemplateVariant you can inject the url.

<img src="$mediaTool.GetMediaItemLink($item, "HeroImage")" />