question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add remark-unwrap-images to @gridsome/transformer-remark default plugins

See original GitHub issue

Summary

remark-unwrap-images remark plugin removes paragraph tags that wrap images.

Basic example

GitHub for remark-unwrap-image

Motivation

It seems like a good default plugin to add since paragraphs shouldn’t be wrapping images.

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:7
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
sebtiz13commented, Jul 25, 2020

@alexbrown for your solution more reliable 🙏

But personally I prefer if it’s can be an options of @gridsome/transformer-remark so I make PR #1290 for that with more possibilities to cover #1195

1reaction
alexwiduacommented, Jul 11, 2020

In case someone runs into the same issue, I did a quick Gridsome implementation of gatsby-remark-unwrap-images, you can find the repo here: gridsome-remark-unwrap-images.

It basically the same approach @sebtiz13 did. There is one caveat that images have to be placed in a seperate line with one line break to the next paragraph, otherwise the image still gets wrapped in a <p> tag (see example).

Read more comments on GitHub >

github_iconTop Results From Across the Web

gridsome/transformer-remark
By default this plugin comes with remark-slug , remark-autolink-headings , remark-external-links , remark-squeeze-paragraphs and remark-fix-guillemets included.
Read more >
Developers - Add remark-unwrap-images to @gridsome/transformer ...
Add remark -unwrap-images to @gridsome/transformer-remark default plugins. ... remark-unwrap-images remark plugin removes paragraph tags that wrap images.
Read more >
gatsby-remark-unwrap-images
gatsby-remark-unwrap-images is usefull if your want to style paragraphs and images differently. You can easily have full width images and margin around ...
Read more >
gridsome-remark-unwrap-images - NPM Package Overview
gridsome -remark-unwrap-images unwraps transformed gridsome images from its paragraph tag, allowing for advanced styling such as medium-width ...
Read more >
How to use gatsby-remark-images when the images aren't in ...
The gatsby-transformer-remark and gatsby-remark-images works perfectly fine when your folder structure looks like this:
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found