A Glassmapper is used in our running project and planning to apply lazy loading for all images.
For this, I have to implement the renderField
Pipeline to apply lazyload functionality to all images.
It is working fine with the default Sitecore field
@Html.Sitecore().Field(LandingPage.FieldIds.BackgroundImage.ToString(), Model.LandingPage.Item, new { MaxWidth = 1500 })
We are trying to apply lazyloading with Glassmapper. so we have written the below code.
@Html.Glass().Editable(Model.LandingPage, x => x.Background_Image, new { MaxWidth = 1500 })
The above code is working fine in the Experience editor but not working on actual normal page.
How we can apply lazyloading with Glassmapper @Html.Glass().Editable()
for image field?
Or is there any way to render renderfield
pipeline for the image field forcefully?
current output with glass().Editable():
<img src="/-/media/images/instron/landing-page-images/mastheads/products/webmasthead_testingsystems_2020.jpg?h=382&w=1500&la=en-IN&hash=89A18D0E8314CC8697DCA3BC8C93BDB7" maxwidth="1500" alt="demo">
Expected output with glass().Editable():
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="demo" width="1500" height="382" maxwidth="1500" data-src="/-/media/images/instron/landing-page-images/mastheads/products/webmasthead_testingsystems_2020.jpg?h=382&iar=0&w=1500&hash=0A90A8CF5873BDA7CBFA8507EDF073C6" class="lazy">
Thanks