Add remark-unwrap-images to @gridsome/transformer-remark default plugins
See original GitHub issueSummary
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:
- Created 4 years ago
- Reactions:7
- Comments:9 (2 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@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
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).