How to include images that are lazy-loaded in post preview?

Product Support

AI-generated summary

The discussion revolves around the issue of lazy-loaded images not displaying in post previews. seeminglee explains that their blog uses lazy load, storing image sources in the data-src attribute, which prevents images from loading when using the “show full post” button. They propose a solution to add an option in settings to include custom attributes, such as data-src, for image sources to support lazy-loaded images. codinghorror shares a similar issue with browser print mechanisms, and seeminglee assumes the button’s parsing mechanism is the cause of the problem.

1

Our blog uses lazy load for images — where the image src is stored inside data-src in the HTML. So when using the “show full post” button, the images don’t get loaded. Is there a way to set it up so that it will load the images?

Example where we use regular image markup (source placed inside src) on the blog post and so the images show up on the discourse forum:

Example where we use lazy load and so images don’t show up:

2

I am not sure but I recently noticed that the browser built in print mechanism suffers from the same limitation. Unless you have loaded the images by scrolling all the way down, “print to pdf” will show blank images.

3

Yeah, print to pdf does do that. I would assume that is normal behavior since it’s using the final markup rendered by the browser combined with the print css.

I don’t know what parsing you are using for this button (sorry I know that this is open source but I don’t know ruby :sweat_smile:) but I am gonna assume that it’s parsing the html source directly and that likely won’t try to read custom image attributes.

I would like to propose an option in settings that to include specified custom attributes inside image tags for the image source. (We use a few variance and it would be good to be able to support all of them)