gatsby-remark-images should add only one image to gatsby-plugin-feed

[sedrubal]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

When using gatsby-remark-images together with gatsby-plugin-feed it should just add a plain image to the feed xml. It should not attempt to render some blurry preview and lazy loading of an image with good resolution. Feed readers might not render this heavy html (<picture> element with multiple sources and blurry background image) correctly. In my case (nextcloud news for android), the blurry preview is always rendered above the properly resolved image.

Reproduction Link

https://github.com/sedrubal/reproduce-gatsby-plugin-feed-with-gatsby-remark-images

Steps to Reproduce

1. Clone example repo
2. run yarn install
3. run yarn run build
4. inspect feed.xml

Expected Result

Only one image should appear in the feed xml.

Actual Result

A complex construction of a <span> with (blurry) background image and a <picture> element with multiple <source>s is rendered. This is not properly handled by feed readers.

Environment

System:
    OS: Linux 5.15 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.3.0 - /tmp/yarn--1655846911636-0.37646411761486687/node
    Yarn: 1.22.19 - /tmp/yarn--1655846911636-0.37646411761486687/yarn
    npm: 8.5.5 - /usr/bin/npm
  Languages:
    Python: 3.10.5 - /usr/bin/python
  Browsers:
    Firefox: 101.0.1
  npmPackages:
    gatsby: ^4.16.0 => 4.16.0
    gatsby-plugin-feed: ^4.16.0 => 4.16.0
    gatsby-plugin-gatsby-cloud: ^4.16.0 => 4.16.0
    gatsby-plugin-image: ^2.16.1 => 2.16.1
    gatsby-plugin-manifest: ^4.16.0 => 4.16.0
    gatsby-plugin-offline: ^5.16.0 => 5.16.0
    gatsby-plugin-react-helmet: ^5.16.0 => 5.16.0
    gatsby-plugin-sharp: ^4.16.1 => 4.16.1
    gatsby-remark-images: ^6.16.0 => 6.16.0
    gatsby-source-filesystem: ^4.16.0 => 4.16.0
    gatsby-transformer-remark: ^5.16.0 => 5.16.0
    gatsby-transformer-sharp: ^4.16.0 => 4.16.0

Config Flags

No response

[LekoArts]

I moved this to a feature request since that's what it is as the html of the markdown files are working as expected. If you want to modify your content:encoded section you'll need to modify what you pass in:

https://github.com/sedrubal/reproduce-gatsby-plugin-feed-with-gatsby-remark-images/blob/1ebe265ee8031426ed850a8b6d1fe231ee8bc25e/gatsby-config.js#L66

You could query the htmlAst:

query {
  allMarkdownRemark {
    nodes {
      htmlAst
    }
  }
}

And then change the images how you like it and render it with remark to pass it.

Or you use a regex on the html, that would also work probably.

[sedrubal]

Thanks for the answer. I ended up using a regex like this:

// ...
{
  resolve: "gatsby-plugin-feed",
  options: {
    // ...
    feeds: [
      {
        serialize: ({ query: { site, allMarkdownRemark } }) => {
          return allMarkdownRemark.nodes.map((node) => {
            return Object.assign({}, node.frontmatter, {
              custom_elements: [
                {
                  "content:encoded": node.html.replace(
                    /<span\s+class="gatsby-resp-image-background-image"\s+[^>]+>\s*<\/span>/gm,
                    "",
                  ),
                },
              ],
            }
          }
        }
      }
    ]
  }
}
// ...