https://github.com/posthtml/posthtml-sugar-srcset

This shortens the description of the value of srcset.
https://github.com/posthtml/posthtml-sugar-srcset

Last synced: 10 months ago
JSON representation

This shortens the description of the value of srcset.

• Host: GitHub
• URL: https://github.com/posthtml/posthtml-sugar-srcset
• Owner: posthtml
• License: mit
• Created: 2017-12-12T05:00:48.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T04:05:39.000Z (almost 3 years ago)
• Last Synced: 2024-10-29T21:06:08.158Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 593 KB
• Stars: 6
• Watchers: 4
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# posthtml-sugar-srcset

[![npm version](https://badge.fury.io/js/posthtml-sugar-srcset.svg)](https://badge.fury.io/js/posthtml-sugar-srcset)

[![Build Status](https://travis-ci.org/posthtml/posthtml-sugar-srcset.svg?branch=master)](https://travis-ci.org/posthtml/posthtml-sugar-srcset)

Sugar for srcset attributes of the image tag.

## Install

```

$ npm install --save-dev posthtml-sugar-srcset

```

## How it works

```html







  

  

  

```

Output:

```html







  

  

  

```

## Usage

``` js

const posthtml = require('posthtml');

const srcset = require('posthtml-sugar-srcset');

posthtml([srcset()])

  .process(html)

  .then(res => console.log(res.html));

```

## Options

#### resolution

Type: `Object`

#### resolution.src

Type: `boolean`  

Default: `true`

If false, pixel density descriptor will not be converted.

#### resolution.srcset

Type: `boolean`  

Default: `true`

If false, pixel density descriptor will not be converted.

##### resolution.suffix

Type: `string`  

Default: `@[match]x`

Reference string.  

If this pattern is included in src, it is based on the character excluding the pattern.

##### resolution.pixelRatio

Type: `Array`  

Default: `[1, 2, 3, 4]`

src based filtering list.

##### resolution.skip1x

Type: `boolean`  

Default: `true`

If srcset is 1x, omitted.

##### resolution.skip1xSuffix

Type: `boolean`  

Default: `true`

If true, omitting the 1x word input of srcset.

##### resolution.srcReplace

Type: `number`  

Default: `1`

Default value of src.  

If -1, base string is used.

#### responsive

Type: `Object`

##### responsive.src

Type: `boolean`  

Default: `true`

If false, width descriptor will not be converted.

##### responsive.srcset

Type: `boolean`  

Default: `true`

If false, width descriptor will not be converted.

##### responsive.width

Type: `Array`  

Default `[]`

src based filtering list.  

Only be used if `responsive.src: true`.

ex)

```js

srcset({

  responsive: {

    src: true,

    width: [320, 640]

  }

})

```

##### responsive.suffix

Type: `string`  

Default: `-[match]w`

Reference string.  

If this pattern is included in src, it is based on the character excluding the pattern.

##### responsive.srcReplace

Type: `number`  

Default: `-1`

Default value of src.  

If -1, base string is used.

#### replace

Type: `Object`  

Default: `{}`

Is the alias that can be used in sizes and media.  

Valid only in the source tag with a picture tag to the parent.

ex)

``` js

replace({

    defaultSizes: '50vw',

    sp: '(max-width: 320px) 100vw',

    pc: '320px'

    large: '(max-width: 1600px)',

    medium: '(max-width: 900px)'

})

```

Before

```html





  

  

  

```

After

```html





  

  

  

```

#### sourceSrc

Type: `boolean`  

Default: `true`

If you true, to use the src attribute of the source tag.  

After use, delete it.