Gatsby + Netlify CMS images from Markdown are not converted

Question

I am making my first site with Gatsby + Netlify CMS, after some tutorials that I did. But now I started from this template Gatsby-London. How this templete is not integrated with Netlify CMS. I worked with that and I got it. The only thing that I did I commented everthing related with the thumbnails, because it was making some problems that I will solve after, and also I removed all blog posts and I just left only one post. But everything else is OK.

After uploaded on Netlify I saw some problems with the images. The images that I uploaded. They were not responsive. But all of the original post that come with the templete are responsive. Also I add one of my images in that post I was not responsive. After read and researched, I found it was a problem with the referenced path and it was necessary to use a relative path.

So I followed the steps of Issy's tutorial blog, and the it doesn't work yet, same problem. It doesn't converted the images. Then I tried to use another pluging (gatsby-plugin-netlify-cms-paths) but everything is same.

When I check with the inspect tool I see that image is not wrapped with all gatsby classes for making responsive the image:

<!-- some html -->

<div class="post-content-body">
    <p>
        <a class="gatsby-resp-image-link" href="/static/b833f68b610104a59dcc9d3be77f6170/3acf0/cody-davis-259003-unsplash.jpg" style="display: block" target="_blank" rel="noopener">  
          <span class="gatsby-resp-image-wrapper" style="position: relative; display: block;  max-width: 1360px; margin-left: auto; margin-right: auto;">
            <span class="gatsby-resp-image-background-image" style="padding-bottom: 66.76470588235294%; position: rela ....SOME GENERATED CODE... ">
              <img class="gatsby-resp-image-image" style="width: 100%; height: 100%; margin: 0; verti ....SOME GENERATED CODE..." sizes="(max-width: 1360px) 100vw, 1360px">
            </span>
          </span>  
        </a>
    </p>
    <p>
        <img src="/assets/como-conseguir-gatitos-y-gatitas-sociables.jpg" alt="Gatito" title="Feliz">
    </p>
</div>

<!-- some html -->

The first <p> is generated with gatsby-image, because this image is in the same folder where the .md file is too. And the second <p> is the image that is stored in Netlify CMS folder static/img

If someone know which is the problem? And how resolved. I check a lot of source but anything works in my project.

Also if you can check this is my respository in GitHub

This is my gatsby-config:

const urljoin = require("url-join")
const siteConfig = require("./siteConfig")

var netlifyCmsPaths = {
  resolve: `gatsby-plugin-netlify-cms-paths`,
  options: {
    cmsConfig: `/static/admin/config.yml`,
  },
}

module.exports = {
  siteMetadata: {
    title: siteConfig.name,
    author: siteConfig.author,
    description: siteConfig.description,
    siteUrl: urljoin(siteConfig.url, siteConfig.prefix),
    social: {
      twitter: siteConfig.twitter,
    },
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/static/assets`,
        name: "images",
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`,
      },
    },
    netlifyCmsPaths,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          netlifyCmsPaths,
          {
            resolve: `gatsby-remark-relative-images`,
            options: {
              name: "images",
            },
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1360,
              // withWebp: true,
              // showCaptions: true,
              // quality: 75,
              // wrapperStyle: `margin: 7vw 0;`,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
    },
    {
      resolve: `gatsby-plugin-postcss`,
      options: {
        postCssPlugins: [
          require("postcss-easy-import")(),
          require("postcss-custom-properties")({ preserve: false }),
          require("postcss-color-function")(),
          require("autoprefixer")({ browsers: ["last 2 versions"] }),
        ],
      },
    },
    {
      resolve: `gatsby-plugin-purgecss`,
      options: {
        printRejected: true, // Print removed selectors and processed file names
        // develop: true, // Enable while using `gatsby develop`
        // tailwind: true, // Enable tailwindcss support
        // whitelist: ['whitelist'], // Don't remove this selector
        // ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // Ignore files/folders
        // purgeOnly : ['components/', '/main.css', 'bootstrap/'], // Purge only these files/folders
      },
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        //trackingId: `ADD YOUR TRACKING ID HERE`,
      },
    },
    `gatsby-plugin-feed`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: siteConfig.name,
        short_name: siteConfig.shortName,
        start_url: siteConfig.prefix,
        background_color: `#ffffff`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `content/assets/gatsby-icon.png`,
      },
    },
    `gatsby-plugin-netlify`,
    `gatsby-plugin-offline`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-netlify-cms`,
  ],
}

gatsby-node.js

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)
const { fmImagesToRelative } = require('gatsby-remark-relative-images');

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions

  const blogPost = path.resolve(`./src/templates/blog-post.js`)
  return graphql(
    `
      {
        allMarkdownRemark(
          sort: { fields: [frontmatter___date], order: DESC }
          limit: 1000
        ) {
          edges {
            node {
              fields {
                slug
              }
              frontmatter {
                title
              }
            }
          }
        }
      }
    `
  ).then(result => {
    if (result.errors) {
      throw result.errors
    }

    // Create blog posts pages.
    const posts = result.data.allMarkdownRemark.edges

    posts.forEach((post, index) => {
      const previous = index === posts.length - 1 ? null : posts[index + 1].node
      const next = index === 0 ? null : posts[index - 1].node

      createPage({
        path: post.node.fields.slug,
        component: blogPost,
        context: {
          slug: post.node.fields.slug,
          previous,
          next,
        },
      })
    })

    return null
  })
}

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
  fmImagesToRelative(node)
  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

config.yml

  # name: test-repo
  name: git-gateway
  branch: master # Branch to update (optional; defaults to master)

media_folder: static/assets
public_folder: assets

collections:
  - name: blog
    label: Blog
    folder: content/blog
    create: true
    slug: "{{slug}}"
    fields:
      - { name: "title", label: "Title", widget: "string" }
      - { name: date, label: Date, widget: "string" }
      - { name: description, label: Description, widget: "string" }
      # - { name: thumbnail, label: Thumbnail, widget: image }
      - {label: "Body", name: "body", widget: "markdown"}