Responsive images as option

[JosefJezek]

Could you add Responsive images as option?

• responsiveimages.org
• Responsive Images in Practice
• https://github.com/mahnunchik/gulp-responsive

[tatsy]

Hello, @JosefJezek. Thank you for your interest to this package.

To be honest, I am not familiar with responsive images, so could I ask you some questions?

First, is there any notation to specify responsive images with Markdown? If there is, I will happily add the option for responsive images.

If there isn't, the notation for responsive images can be like,

![A rad wolf]((min-width: 36em) 33.vw, 100vw), large.jpg =1024x, medium.jpg =640x, small.jpg = 320x)

that would be interpreted as,

<img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="A rad wolf">

What do you think of this notation? It is also helpful to tell me what you really want to do if possible.

I'm looking forward to hearing back.

Thank you.

[JosefJezek]

Hi @tatsy,

I would like to don't change Markdown syntax. We have http://commonmark.org

Better way is use same config as have gulp-responsive. https://github.com/mahnunchik/gulp-responsive

This config then I can save to global gulp config, check out the config.js https://github.com/StartPolymer/polymer-starter-kit/blob/master/gulp/psk-config.js

[tatsy]

I'm afraid that I cannot imagine how the option of gulp-responsive can work for this package.

For me, it seems that gulp-responsive works to make resized and renamed images with gulp, and the HTMLs for responsive images should be provided by the users.

Could you show me some input/output example?

[JosefJezek]

![A rad wolf](header-wolf-small.jpg)

'srcset': {
    'header-wolf.jpg': [{
            width: 320,
            rename: 'header-wolf-small.jpg'
        },{
            width: 640,
            rename: 'header-wolf-medium.jpg'
        }]
},
'sizes': {
  'header-wolf-*': '(min-width: 36em) 33.3vw, 100vw'
}

Or

'srcset': {
    'header-*': [{
        width: 320,
        rename: {
            suffix: "-small"
        }
    }],
    'header-*': [{
        width: 640,
        rename: {
            suffix: "-medium"
        }
    }]
},
'sizes': {
    'header-*': '(min-width: 36em) 33.3vw, 100vw'
}

Output:

<img src="header-wolf-small.jpg"
     srcset="header-wolf-medium.jpg 640w, header-wolf-small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="A rad wolf">

[JosefJezek]

Check out the example in this issue... https://github.com/mahnunchik/gulp-responsive/issues/7

[tatsy]

Thank you very much for the examples. Maybe I could understand what you mentioned.

In my understanding, the users first specify the options like gulp-responsive to this package.

This would be like,

var md = require('markdown-it')({
  html: true, linkify: true, typography: true
}).use(require('markdown-it-imsize'), { responsive: {
  'srcset': {
      'header-*': [{
          width: 320,
          rename: {
              suffix: "-small"
          }
      }],
      'header-*': [{
          width: 640,
          rename: {
              suffix: "-medium"
          }
      }]
  },
  'sizes': {
      'header-*': '(min-width: 36em) 33.3vw, 100vw'
  }
}});

Then, the markdown parser automatically detect the image file whose name matches **header-***, and parse the markdown code

![A rad wolf](header-wolf-small.jpg)

as

<img src="header-wolf-small.jpg"
     srcset="header-wolf-medium.jpg 640w, header-wolf-small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="A rad wolf">

Is it correct?

To rename and to resize images following the options is rather out of scope of this package. So just to parse the code following the option can be included.

Is it suitable for you?

[JosefJezek]

Yes :+1:

[tatsy]

I'm sorry for the late reply.

I will try to do it for the future support, but now I don't have much time to do that.

Maybe, it takes a couple weeks.

Also, it is possible to divide this option for the other package.

Sorry for your inconvenience.

[JosefJezek]

Thank you...

[tatsy]

Hello, @JosefJezek. First, I'm sorry for terribly late response.

Now, I have released a new markdown-it plugin for responsive images.

markdown-it-reponsive

• Github: https://github.com/tatsy/markdown-it-responsive.git
• NPM: https://www.npmjs.com/package/markdown-it-responsive

While the current version only supports very basic functions, I hope this helps you.

If you find some problems, please don't hesitate to create a new issue. I always welcome to get any kinds of comments and requests.

Thank you.

[JosefJezek]

Thank you :+1: