1

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&amp;w=1500&amp;la=en-IN&amp;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&amp;iar=0&amp;w=1500&amp;hash=0A90A8CF5873BDA7CBFA8507EDF073C6" class="lazy">

Thanks

2
  • Hi Manish, Welcome to Sitecore Stack Exchange. Did you try rendering image like this @Html.Glass().RenderImage(Model.LandingPage, x => x.Background_Image, new { loading = "Lazy" }, isEditable: true) Sep 23, 2021 at 5:45
  • Yes, but it doesn't work Sep 24, 2021 at 11:58

2 Answers 2

2

The first thing is you can now use the loading attribute to lazy-load images without the need to write custom lazy-loading code or use a separate JavaScript library. eg, <img loading=lazy>

https://web.dev/browser-level-image-lazy-loading/

Now to render an image using Glass Mapper you should use RenderImage

@Html.Glass().RenderImage(Model.LandingPage, x => x.Background_Image, new { MaxWidth = 1500, loading = "Lazy" }, isEditable: true)

Or if want to use Editable

 @Html.Glass().Editable(Model.LandingPage, x => x.Background_Image, new { MaxWidth = 1500, loading= "lazy" })

Still, if you want to use class parameter on image tag for lazy loading:

@Html.Glass().Editable(Model.LandingPage, x => x.Background_Image, new { MaxWidth = 1500, class = "lazy" })
1
  • loading= "lazy" is not working in safari browser. @Html.Glass().Editable(Model.LandingPage, x => x.Background_Image, new { MaxWidth = 1500, class = "lazy" }) and if I am using class level lazy loading then I must have to use data-src instead of src. Sep 23, 2021 at 16:06
0

Try using this:

@Html.Glass().RenderImage(Model, x => x.LandingPage, new { Width = 100 }, isEditable: true)
1
  • I have tried with @RenderImage() but it doesn't work Sep 24, 2021 at 17:45

Your Answer

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

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