Gatsby: Inline images in Markdown not being transformed by gatsby-remark-images

[sslotsky]

Description

I'm trying to use gatsby-remark-images to optimize images in my blog posts, but when I view my blog post, it appears to just load the large image. There is no blur-up effect happening.

Steps to reproduce

Here's the repo where I can't make this work.

1. Place a high-res image in /static/assets
2. Add an entry in gatsby-config.js so gatsby-source-filesystem can process those images

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `static/assets`,
        path: `${__dirname}/static/assets`,
      },
    },

1. Add gatsby-remark-images to the gatsby-transformer-remark configuration

    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 813,
            },
          },
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              noInlineHighlight: true,
            },
          },
        ],
      },
    },

1. Add a reference to my high-res image in a blog post

![](/assets/construction.jpg)

Expected result

When I view my blog post, the blur-up effect should occur before my high-res image is displayed.

Actual result

There is no blur-up effect. The page appears to load the high-res image the same as it would without the plugin.

Environment

  System:
    OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: 1.12.3 - /usr/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Languages:
    Python: 2.7.17 - /usr/bin/python
  Browsers:
    Chrome: 70.0.3538.77
    Firefox: 71.0
  npmPackages:
    gatsby: ^2.18.12 => 2.18.12
    gatsby-background-image: ^0.9.12 => 0.9.12
    gatsby-image: ^2.2.34 => 2.2.34
    gatsby-plugin-linaria: ^2.0.0 => 2.0.0
    gatsby-plugin-manifest: ^2.2.31 => 2.2.31
    gatsby-plugin-netlify-cms: ^4.1.33 => 4.1.33
    gatsby-plugin-offline: ^3.0.27 => 3.0.27
    gatsby-plugin-react-helmet-async: ^1.0.13 => 1.0.13
    gatsby-plugin-sharp: ^2.3.5 => 2.3.5
    gatsby-plugin-typescript: ^2.1.23 => 2.1.23
    gatsby-remark-images: ^3.1.39 => 3.1.39
    gatsby-remark-prismjs: ^3.3.28 => 3.3.28
    gatsby-source-filesystem: ^2.1.40 => 2.1.40
    gatsby-transformer-remark: ^2.6.45 => 2.6.45
    gatsby-transformer-sharp: ^2.3.7 => 2.3.7
  npmGlobalPackages:
    gatsby-cli: 2.7.7

[jonniebigodes]

@stollerm i've picked up on your issue. And i'll try to explain what is happing in this case.

I've followed the set of instructions that you've set and i can confirm the issue you're experiencing.

Based on my experience is that Gatsby treats the static folder as special. Which in this case it will copy as is the contents of the folder and will not touch it, even if you add a entry to gatsby-config.js. Don't know if that's by design or something else here. The issue you're experiencing here i've tried to tackle in another community that i'm involved with, as it uses Gatsby as a framework to host its website. After extensive experimentation i came to the conclusion i've mentioned.

If you don't mind, issue a development build with gatsby develop and take a look at your public folder. You'll see that there's a static folder there, but it's contents are the images/pages and other content that was created by Gatsby. If you take a closer look you'll see that the admin, assets folder is there, copied as is. No transformations whatsoever.

I saw that you've setup netlify-cms as a cms to host the content and you thought that you could use the same media folder for both cases, i fully understand your reasoning with that, but probably a better approach would probably use it as a cms for all the content, not only the projects, but the blog aswell. If you plan on using local markdown with for the blog then i would use a folder structure like the one used in the blog starter for better organization.

Feel free to provide feedback so that we can close this issue or continue to work on it until we find a suitable solution

[sslotsky]

Thanks for your response!

I saw that you've setup netlify-cms as a cms to host the content and you thought that you could use the same media folder for both cases, i fully understand your reasoning with that, but probably a better approach would probably use it as a cms for all the content, not only the projects, but the blog aswell.

That was my intention. I created my first blog post manually so I could iterate on it easily, but in the future I'll enter them via NetlifyCMS.

I _think_ what you're suggesting is that I keep my media_folder somewhere other than /static. Is that accurate? If so, I'll give that a try and see if it works.

[sslotsky]

Or, are you saying that the problem is that my blog collection isn't defined in my config.yml yet? I can try that as well. Please clarify. Thanks!

[jonniebigodes]

@sslotsky what i meant to say was, as you're creating the blog posts manually for now, without netlify-cms you could use the folder/file structure i've mentioned, it will keep things more organized so that when you plan on moving on to netlify-cms, you'll just make some small changes to your content and copy over the files to the media_folder that you define in the configuration file for netlify-cms.

[sslotsky]

copy over the files to the media_folder that you define in the configuration file for netlify-cms.

That's the part I'm not understanding though. These assets already _are_ in the media_folder. The exact image that I mentioned in my repro steps was one that I copied over to that folder before building.

media_folder: static/assets
public_folder: assets

:point_up: /static/assets is where the image files live, and /assets is apparently where they're served from, right? So I think there's a piece of your explanation that I'm not understanding. Should I _not_ use static/assets as my media_folder? Should I be using a different public_folder?

[jonniebigodes]

@sslotsky there's probably a misunderstanding and i'm going to try and clarify this.

When i meant to use the way described in the starter i was going a good approach for you to organize your contents in a good and efficient way so that when you migrate to netlify-cms it will become a trivial matter. When you add gatsby-remark-images the blur up effect will kick in and the images will be responsive.

Now for netlify-cms things are a bit different. What you define in the netlify cms config file will work both locally in your development environment and also in production. Then you can pull the contents from the cms to gatsby with the appropriate plugins all configured correctly and the contents will be responsive.

But i can't stress enough that adding the static folder in your gatsby-config.js file will not work as technically Gatsby treats it as a special folder and whatever exists in there will be copied over as is, nothing will be transformed.

The best test for you to verify this is the following. Issue gatsby develop and take a look at your public folder and you'll see what i've mentioned.

[sslotsky]

Thanks @jonniebigodes, I think I understand now. You're saying I should not be putting my images in /static/assets, because Gatsby treats it as a special folder.

So I took a look at gatsby-starter-blog and tried to copy that structure. I made a content folder, and I placed the projects, blog, and assets folders there, and adjusted my config files to point there. I still have the same problem though - the blur-up just doesn't happen. I saved my work in a branch. If you're able to verify that it still doesn't work and recommend an adjustment that does the trick, I'd appreciate it immensely!

[jonniebigodes]

@sslotsky sorry for the late response, but i just finished pushing a pr that will possibly solve your issue. I've taken into consideration your latest comment and adjusted accordingly. And i was able to get the blur effect working properly.

Like i said in the pr i would like for you to go over it at your own pace and should any questions/issues pop up feel free to reach out.

[sslotsky]

sorry for the late response

No worries at all, nothing but appreciation for your assistance! I'll go over that PR at my nearest opportunity, huge thanks to you!

[sslotsky]

Just tested it out and it seems to be working! Thanks a billion @jonniebigodes !!!

[jonniebigodes]

@sslotsky no need to thank, glad that the issue is solved and i was able to help! Once again sorry for the delayed answer! Hope to the website featured in the gatsby showcase some time soon

[reinierkors]

Could you explain how you solved the issue? I'm having the same problems. @sslotsky @jonniebigodes

Nvm, I found the PR.

[jonniebigodes]

@reinierkors for @sslotsky's case the effect was kicking in, what was happening was in his content there was a good ammount of text and the image was not in the viewport so the effect would kick in but we couldn't see it. I tested it with a dummy document and it was blurring up. And glad that you found it. Should you need any help, feel free to comment here so that we can go over it.

[reinierkors]

@jonniebigodes I solved it by moving my assets folder to content/assets. Now everything is working as expected.

[jonniebigodes]

@reinierkors glad to hear it.

[sslotsky]

the effect would kick in but we couldn't see it

Just want to say, in case anyone else has this problem and finds this issue, that this isn't accurate! In the test branch that I made, I had an image at the very top of my post to make sure I could test it. It was not blurring up (you can verify that by trying this commit).

After @jonniebigodes submitted a PR I realized my problem was the path I was using for the images. For example I was using /assets/some-image.png instead of ../assets/some-image.png. Once I fixed those, they all worked. I'll probably release a blog post about this before the day's out, and link it here for posterity.

[sslotsky]

https://saxyfool.dev/blog/blur-it-up

[ttstauss]

This was a frustrating experience trying to set up netlify cms with inline markdown images. Glad I found this thread! Adding the ../ before the images worked for me as well.

While it solves the issue, the content creator has to remember to add ../ any time they use NetlifyCMS to add an image. Generally they'll use the rich text editor in the NetlifyCMS Content Manager (as opposed to the Markdown one). This adds the image with the following path: ![](uploads/image.jpg). The content editor would then have to go in and adjust it to: ![](../uploads/image.jpg).

Is there a way to make it add that automatically instead of having to do it manually?

Thanks for the solution!

[tmrp]

@ttstauss I came across these issues as well while working on a recent Gatsby TypeScript project. I fixed the issue by using the gatsby-plugin-netlify-cms-paths plugin. Now, I don't need to add ../ to the image URLs to get them to work, and the images show now up automatically.

My gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-plugin-typescript`,
    `gatsby-plugin-react-helmet`,
    `gatsby-image`,
    `gatsby-transformer-remark`,
    `gatsby-transformer-yaml`,
    `gatsby-plugin-theme-ui`,
    `gatsby-plugin-emotion`,
    {
     resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/img`,
        name: 'image-uploads',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog-posts`,
        name: 'blog-posts',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content`,
        name: 'content',
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-plugin-netlify-cms-paths`,
            options: {
              // Path to your Netlify CMS config file
              cmsConfig: `/static/admin/config.yml`,
            },
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 2400,
              quality: 100,
              withWebp: true,
              loading: 'lazy',
              linkImagesToOriginal: false,
            },
          },
        ],
      },
    },
    `gatsby-plugin-netlify-cache`,
    {
      resolve: `gatsby-plugin-netlify-cms`,
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
      },
    },
    `gatsby-plugin-netlify`,
  ],
}

My NetlifyCMS admin content folders in static/admin/config.yml

media_folder: content/img
public_folder: /img

Hope this helps!

[ttstauss]

@tmrp your suggestion worked perfectly. Thanks for the help! 👏