posthtml-retinate

Create a srcset attribute for retina images with posthtml

Also see: gulp-retinate

 

Installation

npm install posthtml posthtml-retinate

 

Example

const posthtml = require('posthtml');
const retinate = require('posthtml-retinate');
 
const inputHTML = '<img src="[e-mail]">'; // highest resolution image
const outputHTML = posthtml()
  .use(retinate())
  .process(inputHTML, { sync: true })
  .html;
 
// <img src="image.png" srcset="[e-mail] 2x, [e-mail] 4x">

 

Options

inputFlags

A has of flags to identify the scale of the source asset.

• Since: 1.0.0
• Property is Optional
• Default value: { 1: '@1x', 2: '@2x', 4: '@4x' }

 

inputPlace

Identifies where the input flag is located in the source filename.

• Since: 1.0.0
• Property is Optional
• Default value: endsWith
• Validation:
  • Must be either startsWith or endsWith.

 

outputFlags

A hash of flags to identify the destination scales.

• Since: 1.0.0
• Property is Optional
• Default value: { 1: '', 2: '@2x', 4: '@4x' }

 

outputPlace

Identifies where the output flag is position in the destination filename.

• Since: 1.0.0
• Property is Optional
• Default value: append
• Validation:
  • Must be either prepend or append.

 

scaleUp

Whether or not images can be scaled up as well as down.

• Since: 1.0.0
• Property is Optional
• Default value: false
• Validation:
  • Must be a valid Boolean.

For example, given [e-mail]:

When false (default):

<img src="image.jpg" srcset="[e-mail] 2x, [e-mail] 4x">

When true:

<img src="image.jpg" srcset="[e-mail] 2x">