gridsome-remark-unwrap-images

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'
			]
		}
	}
}

:warning: 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.

:white_check_mark: Image gets unwrapped

Markdown

I'm a paragraph.

![I'm an image](https://raw.githubusercontent.com/alexwidua/gridsome-remark-unwrap-images/HEAD/image.jpg)

HTML output

<div>
	<p>I'm a paragraph.</p>
	<img alt="I'm an image" src="https://raw.githubusercontent.com/alexwidua/gridsome-remark-unwrap-images/HEAD/image.jpg" />
</div>

:x: Image stays wrapped

Markdown

I'm a paragraph.
![I'm an image](https://raw.githubusercontent.com/alexwidua/gridsome-remark-unwrap-images/HEAD/image.jpg)

HTML output

<div>
	<p>
		I'm a paragraph.
		<img alt="I'm an image" src="https://raw.githubusercontent.com/alexwidua/gridsome-remark-unwrap-images/HEAD/image.jpg" />
	</p>
</div>

License

See the LICENSE file for details.