Lazy loading content images

🆘 Support
1

Hi, I am just starting with DatoCMS and I think I am stuck a bit.
I have a main image which works as expected, it’s blurred on load.
Now I have a blog post with a content field and inside I have for example 5 images.
How I can make them lazy loading?

2

Hello @marcinzogrodnik welcome!

Have you seen this: https://github.com/datocms/react-datocms ?

Can this help?

1 Like
3

Hi @mat_jack1, thanks for reply.

I can’t figure out how it could help me. Please check the code below:

    <div className="showcase-item__image">
                    <Link to={`/showcase/${showcase.slug}`}>
                        <Img fluid={showcase.projectImage.fluid} />
                    </Link>
                </div>

                <div className="showcas-item__content">
                    <h2>{showcase.projectName}</h2>
                    <div dangerouslySetInnerHTML={{ __html: showcase.projectDescription }} />

                    <Link to={`/showcase/${showcase.slug}`} className="btn">
                        Read more
                    </Link>
                </div>

Inside showcase.projectDescription I have images from the text editor.
Link you’ve posted is the sama as gatsby-image which I am using and it works for the main image.

4

Oh I see what you mean now!

Have a look at this example: https://github.com/datocms/gatsby-portfolio/blob/master/src/pages/index.js

to see if that helps. Otherwise, plaease share also your GraphQL query that you are using so that I can double check if you are doing that correctly.

1 Like
5

@mat_jack1

I am not sure if I explained it correctly. I’ll try to do it one more time.

So I have a blog page and I am fetching everything from the blog post.
For the main image I am using the <Img> component (check the file)
And it works as expected. I am getting the blurry image so that’s perfect.

Then I have a blog content and inside the blog content I have another images, let’s say I have 4 or 5 images. The question is: How I can make them blurry the same as the main image.
I can’t wrap them into the <Img> because it’s returned as HTML from the post.content.

Also you can have a look how it works online - post page. Refresh the page a few times and you’ll see the main image works, second image from post.content not.

6

ah ok, I missed the fact that images are in rich-text fields. In this case they are not separate asset entities so Gatsby doesn’t recognize them as such and cannot create the Img component for you. You should parse your content yourself and do it, I guess?

1 Like
7

I’ve seen in other examples it works with markdown data from local files. I would like to get the same result with DatoCMS.
I will try to find how to fix it and make all images works as expected.

Thanks for your time @mat_jack1

1 Like
8

sorry @marcinzogrodnik I’ve double checked and actually it should work also on those fields!

But in your example I cannot see any image in the post content, do you have a page with images in rich text fields that I could double check?

1 Like
9

Hi @mat_jack1,
I am using multiple paragraph text for the content. I’ve removed the images and focused on other things. Images frome the multiple paragraph text weren’t wrapped with gatsby-image-wrapper at all, just normal img tag.

10

Yes, i see what you are saying, we’ll have a look at it as soon as possible and get back to you, sorry for this!

1 Like
11

@marcinzogrodnik to do that you should use https://github.com/datocms/gatsby-remark-images-datocms! It will process multiple paragraph text that are configured as markdown converting standard images in gatsby-images!

1 Like
12

Ok so it works finally! :smiley:
Thanks @datocms and @mat_jack1

1 Like