gridsome-remark-unwrap-images
gridsome-remark-unwrap-images
unwraps transformed gridsome images from its paragraph tag, allowing for advanced styling such as medium-width paragraphs and full-width images (Medium-style articles).
The plugin is a port of gatsby-remark-unwrap-images.
Install
npm install gridsome-remark-unwrap-images
Usage
Configure gridsome.config.js
to use the plugin.
module.exports = {
siteName: 'Gridsome Blog',
siteDescription: 'A simple Gridsome blog',
transformers: {
remark: {
plugins: [
// Add remark-unwrap-images plugin
'gridsome-remark-unwrap-images'
]
}
}
}
⚠️ Caveat
At the moment the image to be unwrapped must be in a separate line, otherwise the image will still be wrapped in a <p>
tag.
✅ Image gets unwrapped
Markdown
I'm a paragraph.
![I'm an image](image.jpg)
HTML output
<div>
<p>I'm a paragraph.</p>
<img alt="I'm an image" src="image.jpg" />
</div>
❌ Image stays wrapped
Markdown
I'm a paragraph.
![I'm an image](image.jpg)
HTML output
<div>
<p>
I'm a paragraph.
<img alt="I'm an image" src="image.jpg" />
</p>
</div>
License
See the LICENSE file for details.