[gatsby-images] [gatsby-remark-images] Customizing html of a markdown to implement lazy-loading

[eur2]

I would like to customize the html of a Markdown Post to implement lazy-loading. I need to add a class to the images and change the "src" attribute to "data-src". I have tried directly in the markdown file <img class="lazyload" data-src="…"/> but it didn't work. Anyone has an idea how to make it? Thanks!

import React from "react"

class BlogPostTemplate extends React.Component {
  render() {
    const post = this.props.data.markdownRemark

    return (
      <div>
        <h1>{post.frontmatter.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: post.html }} />
      </div>
    )
  }
}

export default BlogPostTemplate

export const pageQuery = graphql`
query BlogPostBySlug($slug: String!) {
  markdownRemark(fields: { slug: { eq: $slug }}) {
    html
    frontmatter {
      title
    }
  }
}
`

[sebastienfi]

Have you looked at gatsby-remark-images ?

[KyleAMathews]

I've always intended gatsby-remark-images to support lazy loading but haven't gotten there quite yet. Now that I've been exploring this more with https://using-gatsby-image.gatsbyjs.org/, I'd love to make it happen.

[eur2]

@KyleAMathews gatsby-image seems perfect! Thanks a lot!
Is this working on top of gatsby-remark-images? How does it work to use it?

[sebastienfi]

@roberpoldo I believe it will be transparent, gatsby-image being a component called by gatsby-remark-image itself. But let's see :)

[KyleAMathews]

@roberpoldo the two are mostly unrelated. gatsby-image is a React component. gatsby-remark-images is a markdown transformer plugin that transformers markdown images into responsive images.

So for markdown images, someone just needs to add support to gatsby-remark-images for lazy-loading. For gatsby-image, you can use that today. See the source code for the example for how to use it. I'll be writing some docs later today for it.

[eur2]

@KyleAMathews I'm now using gatsby-image (v1.0.1) on my index page. It works great but the lazy-loading works only in Google Chrome and not in Safari (tested on v11.0)…

[eur2]

More precision: the gatsby-image's lazy-load is only working in Chrome in gatsby develop. When I make a build and serve it, the lazy-load doesn't work either in Chrome or Safari. It's displaying all the images of the page…

[KyleAMathews]

There's new versions which fix that.

[eur2]

@KyleAMathews Thanks for this new version! Is there any -webkit fix to make gatsby-image working in Safari with the intersection observer?

[KyleAMathews]

You'll need to add a polyfill for the IntersectionObserver API. I haven't investigated this closely so can't offer much help there but would love to hear back from your research.

[eur2]

gatsby-image is working in Safari now after a build using the intersection-observer polyfill package. Just have imported in the index.js and have added this trick in gatsby-node.js:

exports.modifyWebpackConfig = ({ config, stage }) => {
  if (stage === 'build-html') {
    config.loader('null', {
      test: /intersection-observer/,
      loader: 'null-loader'
    })
  }
}

[eur2]

Anyone has an idea how to disable the blur effect option (base64) in the html markdown graphql query with gatsby-remark-images? I know how do it in the frontmatter but not in the body/html of a markdown. Is there a similar "tweak" as the frontmatter one in the query for the html?
like this one:

allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
      edges {
        node {
          excerpt(pruneLength: 250)
          id
          frontmatter {
            title
            date(formatString: "YYYY")
            path
            caption
            cat
            client
            image {
              childImageSharp {
                responsiveSizes(maxWidth: 1200, quality: 80) {
                  aspectRatio
                  src
                  srcSet
                  sizes
                  originalImg
                }
              }
            }
          }
        }

[fk]

So for markdown images, someone just needs to add support to gatsby-remark-images for lazy-loading.

@KyleAMathews I might be that someone 😍 – I'd love to have lazy loading gatsby-remark-images. I however fear that integrating gatsby-image like @sebastienfi wrote earlier

I believe it will be transparent, gatsby-image being a component called by gatsby-remark-image itself.

might be a little over my head? I probably need some guidance/hint on how to approach this (as usual ;-D)…

[KyleAMathews]

Going through old issues I didn't respond to 😅

So unfortunately we can't use gatsby-image for this as gatsby-transformer-remark and its plugins like gatsby-remark-images produce an HTML string which we insert into the DOM through React via dangerouslySetInnerHTML. Since we're not using React for the markdown rendering, we can't use React components.

What we'll want to do instead is to add some JS to the <head> which does the same thing as gatsby-image and finds images added by gatsby-remark-images and triggers the lazy loading of images.

Hope that helps! Happy to clarify things more.

[fk]

No worries! Understood…and :-/.

A shot in the dark (obviously not fully understanding what's happening here ;-D – layman wishful thinking): Could #3596, #3731 (#3732) change what you explained above in any way?

[KyleAMathews]

Maybe... but we'd need a gatsby-remark-image-component or something like that to change from adding <img/> to the markdown html to adding <Image />. Probably not worth it. Lazy loading is actually pretty easy.

[thomasboyt]

Went ahead and hacked lazy-loading into my blog and it seems to work okay (example page), though it's quite a bit less graceful than what you'd get from gatsby-images (e.g. doesn't properly handle cached images so there's an awkward bit where it flashes loaded->unloaded->loaded, runs only on the client so there's a bit of jank on initial load...). Would be great to have this as part of gatsby-remark-images in the future.

[alexandernanberg]

If anyone else comes across this issue – this is how I solved it!

I created a local plugin that is a simplified version of gatsby-remark-images which creates a custom element with the fluid data attached to it.
https://github.com/strt/www/blob/a9cfffce2d26e43f13df8cead6000bcb981489c4/plugins/gatsby-remark-image-component/index.js

Then you can use rehype-react to change that component to one of your React components, like gatsby-image (I use a custom image component in this example).
https://github.com/strt/www/blob/a9cfffce2d26e43f13df8cead6000bcb981489c4/src/utils/renderAst.js

This would probably work nicer with mdx 🤔

[jumpalottahigh]

@alexandernanberg Thanks for sharing your approach. I was just wondering if MDX would in that case be a bit simpler to set this up. Going down the rabbit hole :)

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[1kohei1]

Hi, I came across this issue and checked both solutions by @alexandernanberg and @thomasboyt. My solution takes hints from both of you. Let me share it!

I created a npm package gatsby-remark-lazy-load. This converts img tag generated by gatsby-remark-imagesto the format of lazysizes.

Then, you load lazysiezes in gatsby-browser.js.

That's it! I'm not fully happy about the solution, but it does what I want to achieve. So, I am okay with this solution right now. You can find my repo here.

Let me know if you have any suggestions!