Gatsby: remark-images and remark-embed-video wrap everything in <p> tags

[alisonjoseph]

gatsby-remark-embed-video and gatsby-remark-images seem to automatically wrap everything in a p tag.

Is there a way to customize this, either with having it wrap in a div, or at the very least at a custom class to the <p> tag?

I'm using gatsby-transformer-remark to add custom html wrappers (grid code) to my p tags and I don't want the same added to all my images and video.

[edmundojr]

You can use the plugin gatsby-remark-unwrap-images as a workaround until this is resolved.

See: https://github.com/xuopled/gatsby-remark-unwrap-images

[gatsbot[bot]]

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! 💪💜

[KidkArolis]

Replying to keep this issue open. It's still an issue and the suggested workaround doesn't work.

[KidkArolis]

In the meantime, I dropped this into my plugins/gatsby-remark-unwrap-images/index.js:

const visit = require(`unist-util-visit`)
const remove = require(`unist-util-remove`)

module.exports = ({ markdownAST }) => {
  visit(markdownAST, `paragraph`, (node, index, parent) => {
    const hasOnlyImagesNodes = node.children.every(child => {
      return child.type === 'html' && child.url && child.alt
    })

    if (!hasOnlyImagesNodes) {
      return
    }

    remove(node, 'text')

    parent.children.splice(index, 1, ...node.children)

    return index
  })
}

and configured it like so in gatsy-config.js:

module.exports = {
    plugins: [
        {
            resolve: "gatsby-transformer-remark",
            options: {
                plugins: ["gatsby-remark-unwrap-images"]
            }
        }
    ]
}

[gatsbot[bot]]

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!

[mirabilio]

I just released a plugin to solve this issue since I needed to remove the p tags also for another plugin I was working on: https://www.npmjs.com/package/gatsby-remark-remove-root-p-tag

Lmk if there are any problems with it working for your use case.

[PilgrimMemoirs]

Is there a chance of reopening this? I'm having to hack around this issue as well and I don't quite understand the purpose of having them in paragraph tags to begin with. Thanks!