❤
npm
Sign UpSign In

gatsby-remark-picture

1.0.1 • Public • Published

gatsby-remark-picture

npm package

Features

  • Wrap images by a <picture> tag.
  • Make remark images reponsives by generating differents sizes
  • Add a <source> tag with srcset, sizes and type attributes.

With gatsby-remark-picture

Hello Word!
 
![](image.jpg)

The previous markdown will generate the following DOM:

<div>
  <p>Hello Word!</p>
  <picture>
    <!-- With "withWebp: true" option -->
    <source
      srcset="
        /static/image-e5090913465832b3ea4cd5728e0970b2-0a74b.webp 200w,
        /static/image-e5090913465832b3ea4cd5728e0970b2-4de56.webp 400w,
        /static/image-e5090913465832b3ea4cd5728e0970b2-d9af4.webp 800w,
        /static/image-e5090913465832b3ea4cd5728e0970b2-6c443.webp 1200w,
        /static/image-e5090913465832b3ea4cd5728e0970b2-4010f.webp 1600w,
        /static/image-e5090913465832b3ea4cd5728e0970b2-17ee1.webp 2400w,
        /static/image-e5090913465832b3ea4cd5728e0970b2-64024.webp 4240w
      "
      sizes="(max-width: 800px) 100vw, 800px"
      type="image/jpeg"
    >
    <!-- With "withSource: true" option -->
    <source
      srcset="
        /static/image-e5090913465832b3ea4cd5728e0970b2-0a74b.jpg 200w,
        /static/image-e5090913465832b3ea4cd5728e0970b2-4de56.jpg 400w,
        /static/image-e5090913465832b3ea4cd5728e0970b2-d9af4.jpg 800w,
        /static/image-e5090913465832b3ea4cd5728e0970b2-6c443.jpg 1200w,
        /static/image-e5090913465832b3ea4cd5728e0970b2-4010f.jpg 1600w,
        /static/image-e5090913465832b3ea4cd5728e0970b2-17ee1.jpg 2400w,
        /static/image-e5090913465832b3ea4cd5728e0970b2-64024.jpg 4240w
      "
      sizes="(max-width: 800px) 100vw, 800px"
      type="image/jpeg"
    >
    <img
      srcset="
        /static/image-e5090913465832b3ea4cd5728e0970b2-0a74b.jpg 200w,
        /static/image-e5090913465832b3ea4cd5728e0970b2-4de56.jpg 400w,
        /static/image-e5090913465832b3ea4cd5728e0970b2-d9af4.jpg 800w,
        /static/image-e5090913465832b3ea4cd5728e0970b2-6c443.jpg 1200w,
        /static/image-e5090913465832b3ea4cd5728e0970b2-4010f.jpg 1600w,
        /static/image-e5090913465832b3ea4cd5728e0970b2-17ee1.jpg 2400w,
        /static/image-e5090913465832b3ea4cd5728e0970b2-64024.jpg 4240w
      "
      src="/static/image-e5090913465832b3ea4cd5728e0970b2-d9af4.jpg"
    >
  </picture>
</div>

Note: To remove the paragraph tag wrapping the picture tag, you can use gatsby-remark-unwrap-images plugin before gatsby-remark-picture

Without gatsby-remark-picture

Hello Word!
 
![](image.jpg)

The previous markdown will generate the following DOM:

<div>
  <p>Hello Word!</p>
  <p>
    <img src="image.jpg" />
  </p>
</div>

Getting started

gatsby-remark-picture

You can download gatsby-remark-picture from the NPM registry via the npm or yarn commands

yarn add gatsby-remark-picture
npm install gatsby-remark-picture --save

Usage

Add the plugin in your gatsby-config.js file:

module.exports = {
    plugins: [
        {
            resolve: "gatsby-transformer-remark",
            options: {
                plugins: [
                    // Optional: Remove the paragraph tag wrapping images
                    "gatsby-remark-unwrap-images",
                    // Wrap images by pictures
                    "gatsby-remark-picture",
                ],
            },
        },
    ],
}

Props

Name PropType Description Default Example
className string Add custom className - "myCustomClassName"
withSource boolean Add a <source> tag with responsives images false true
withSourceWebp boolean Add a <source> tag with responsives .webp images false true

Contributing

  • ⇄ Pull/Merge requests and ★ Stars are always welcome.
  • For bugs and feature requests, please create an issue.

See CONTRIBUTING.md guidelines

Changelog

See CHANGELOG.md

License

This project is licensed under the MIT License - see the LICENCE.md file for details

Readme

Keywords

Package Sidebar

Install

npm i gatsby-remark-picture

Repository

github.com/xuopled/gatsby-remark-picture

Homepage

github.com/xuopled/gatsby-remark-picture#readme

Weekly Downloads

30

Version

1.0.1

License

MIT

Unpacked Size

10.7 kB

Total Files

10

Last publish

Collaborators

  • cedricdelpoux
Try on RunKit
Report malware