5

I have a requirement where I need to display the image height and width tags on images. This is also a performance ranking factor for Google Lighthouse. By default, this is set to false in Glassmapper as follows:

        //
    // Summary:
    //     Renders an image allowing simple page editor support
    //
    // Parameters:
    //   model:
    //     The model that contains the image field
    //
    //   field:
    //     A lambda expression to the image field, should be of type Glass.Mapper.Sc.Fields.Image
    //
    //   parameters:
    //     Image parameters, e.g. width, height
    //
    //   isEditable:
    //     Indicates if the field should be editable
    //
    //   outputHeightWidth:
    //     Indicates if the height and width attributes should be outputted when rendering
    //     the image
    //
    // Type parameters:
    //   T:
    //     The model type
    public virtual HtmlString RenderImage<T>(T model, Expression<Func<T, object>> field, object parameters = null, bool isEditable = false, bool outputHeightWidth = false)
    {
        return new HtmlString(GlassHtml.RenderImage(model, field, parameters, isEditable, outputHeightWidth));
    }

While I can add the following to each of my image renderings, I would prefer to default this to true for all images so none get missed (we have a lot of image renderings across so many pages and need to maximize our SEO):

@Html.Glass().RenderImage(panel.GlassItem, x => x.My_Image, isEditable: true, outputHeightWidth: true )

I have a foundational project for Glassmapper, but am unsure where and how is the best place to default this setting to true (ex. App_Start > GlassMapperScCustom.cs)

1 Answer 1

4
+50

What you can do is replacing default Glass.Mapper.Sc.GlassHtml with your own implementation that will always use true for outputHeightWidth parameter like:

public class CustomGlassHtml : Glass.Mapper.Sc.GlassHtml
{
    public CustomGlassHtml(ISitecoreService sitecoreService) : base(sitecoreService)
    {
    }

    public override string RenderImage<T>(T model, Expression<Func<T, object>> field, object parameters = null, bool isEditable = false, bool outputHeightWidth = false, string imgElementTemplate = "<img src={2}{0}{2} {1}/>")
    {
        return base.RenderImage(model, field, parameters, isEditable, true, imgElementTemplate);
    }
}

Now you need to create your own IGlassHtmlFactory implementation like:

public class CustomGlassHtmlFactory : IGlassHtmlFactory
{
    public CustomGlassHtmlFactory(IDependencyResolver dependencyResolver)
    {
    }

    public IGlassHtml GetGlassHtml(ISitecoreService sitecoreService)
    {
        return new CustomGlassHtml(sitecoreService);
    }
}

and finally register your own factory in Glass dependency resolver. There are multiple options depending on Sitecore version. In Sitecore 10 you should be able to add processor to glassMapper.createResolver pipeline:

<glassMapper.createResolver help="Processors should derive from Glass.Mapper.Sc.Pipelines.CreateResolver.CreateResolverProcessor">
  <!-- Add any changes to the standard resolver here. -->
</glassMapper.createResolver>

Something like this should do the trick:

public class SetCustomFactory : CreateResolverProcessor
{
    public override void Process(CreateResolverPipelineArgs args)
    {
        args.DependencyResolver.GlassHtmlFactory = new CustomGlassHtmlFactory(args.DependencyResolver);
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.