Nodular Pudding Multiverse
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

grunt-responsive-images-converter

0.0.2 • Public • Published

grunt-responsive-images-converter

Convert image tag in markdown file to picture element as to support resoponsive image. It is best to use with grunt-responsive-images , which could build responsive images from one image.

Getting Started

This plugin requires Grunt ~0.4.4

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-responsive-images-converter --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-responsive-images-converter');

The "responsive_images_converter" task

Overview

In your project's Gruntfile, add a section named responsive_images_converter to the data object passed into grunt.initConfig().

grunt.initConfig({
  responsive_images_converter: {
    default_options: {
      files: {
        'tmp/default_options': [ 'test/fixtures/only-one-image.md' ],
      },
    }
  },
})

Options

options.asset

Type: String Default value: ''

The directory of your responsive images, it will be the same with the original img tag in markdown file if ignored.

options.queries

Type: Array Default value: see below

The breakpoints configuration of your responsive policy, with following properties:

  • name: One part of the responsive images' name.
  • media: Value of the media attribute with source tag in picture element.
  • dprs: Device pixel ratios that will support.
  • suffix: Anoher part of the responsive images' name.

The default value of options.queries:

var DEFAULT_OPTIONS = {
    queries: [{
      name: 'phone',
      media: '(max-width:500px)',
      //device pixel ratio( 1 is default )
      dprs: [ 2 ],
      suffix: '@'
    },{
      name: 'tablet',
      media: '(max-width:800px)',
      //device pixel ratio( 1 is default )
      dprs: [ 2 ],
      suffix: '@'
    },{
      name: 'desktop',
      media: '(min-width:800px)',
      //device pixel ratio( 1 is default )
      dprs: [ 2 ],
      suffix: '@'
    }]
  };

Usage Examples

Default Options

test/fixtures/only-one-image.md

![Webp compare tool](/img/raw/webp-tool.png)

Gruntfile.js

grunt.initConfig({
  responsive_images_converter: {
    default_options: {
      files: {
        'tmp/default_options': [ 'test/fixtures/only-one-image.md' ],
      },
    }
  },
})

After running the task above, it will creat a new file named default_options under tmp directory.

tmp/default_options

<picture>
    <source srcset="/img/raw/webp-tool-phone.png, /img/raw/webp-tool-phone@2x.png 2x" media="(max-width:500px)">
    <source srcset="/img/raw/webp-tool-tablet.png, /img/raw/webp-tool-tablet@2x.png 2x" media="(max-width:800px)">
    <source srcset="/img/raw/webp-tool-desktop.png, /img/raw/webp-tool-desktop@2x.png 2x" media="(min-width:800px)">
    <img alt="Webp compare tool">
</picture>

Asset Option

When your responsive images locat in the different directory from the orignal img tag. For the example above, the directory of you img tag in markdown file is /img/raw/, if your responsive images' directory is img/resp/, then you should use the asset field.

grunt.initConfig({
  responsive_images_converter: {
    options: {
      asset: '/img/resp/'
    },
    files: {
      'tmp/change_srcset_dir': [ 'test/fixtures/only-one-image.md' ],
    },
  },
})

And the result will be:

<picture>
    <source srcset="/img/resp/webp-tool-phone.png, /img/resp/webp-tool-phone@2x.png 2x" media="(max-width:500px)">
    <source srcset="/img/resp/webp-tool-tablet.png, /img/resp/webp-tool-tablet@2x.png 2x" media="(max-width:800px)">
    <source srcset="/img/resp/webp-tool-desktop.png, /img/resp/webp-tool-desktop@2x.png 2x" media="(min-width:800px)">
    <img alt="Webp compare tool">
</picture>

Src Option

When you don't want to create a new file and just need to replace the original markdown file, then use the src field.

grunt.initConfig({
  responsive_images_converter: {
    src: [ 'tmp/dest_equal_src.md' ],
  },
})

The result after running task will be written to tmp/dest_equal_src.md.

Notice

At present, browsers don't support the responsive image tech well, you may need use the picturefill to polyfill.

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

(Nothing yet)

Keywords

install

npm i grunt-responsive-images-converter

Downloadsweekly downloads

1

version

0.0.2

license

none

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar