posthtml-img

0.2.2 • Public • Published

posthtml-img

NPM Build

PostHTML plugin that manipulates <img> attributes. It fetches remote image dimensions and sets width and height attributes automatically. Fetching is done efficiently, using remote-file-info that does not download entire images.

You can also alter src and alt attributes based on image information.

Before:

<html>
  <body>
    <img src="https://www.kernel.org/theme/images/logos/tux.png">
  </body>
</html>

After:

<html>
  <body>
    <img src="https://www.kernel.org/theme/images/logos/tux.png" width="104" height="120">
  </body>
</html>

Install

npm i posthtml posthtml-img

Usage

const fs = require('fs');
const posthtml = require('posthtml');
const posthtmlImg = require('posthtml-img');
 
posthtml()
    .use(posthtmlImg({ /* options */ }))
    .process(html/*, options */)
    .then(result => fs.writeFileSync('./after.html', result.html));

Options

cache

Example:

const posthtml = require('posthtml');
const posthtmlImg = require('posthtml-img');
 
async function run() {
    const cache = {}; // cache object
 
    await posthtml()
        .use(posthtmlImg({ cache })
        .process('<div><img src="https://server.com/image.png"></div>');
 
    // the remote image info is already in cache, so 2nd run is faster
    await posthtml()
        .use(posthtmlImg({ cache })
        .process('<span><img src="https://server.com/image.png"></span>');
}

changeAlt

Before:

<div>
  <img src="https://server.com/image.jpg">
</div>

Add option:

const fs = require('fs');
const posthtml = require('posthtml');
const posthtmlImg = require('posthtml-img');
 
posthtml()
    .use(posthtmlImg({
      changeAlt: (alt, src, index) => 'This is an image.'
    }))
    .process(html)
    .then(result => fs.writeFileSync('./after.html', result.html));

After:

<div>
  <img src="https://server.com/image.jpg" width="120" height="40" alt="This is an image.">
</div>

changeSrc

Before:

<div>
  <img src="https://server.com/image.jpg">
</div>

Add option:

const fs = require('fs');
const posthtml = require('posthtml');
const posthtmlImg = require('posthtml-img');
 
posthtml()
    .use(posthtmlImg({
      changeSrc: (src, index) => src.replace('image.jpg', 'changed.png')
    }))
    .process(html)
    .then(result => fs.writeFileSync('./after.html', result.html));

After:

<div>
  <img src="https://server.com/changed.png" width="120" height="40">
</div>

onInfo

Plugin sends image information to given options.onInfo callback function.

Before:

<div>
  <img src="https://server.com/image1.png">
  <img src="https://server.com/image2.jpg">
</div>

Add option:

const posthtml = require('posthtml');
const posthtmlImg = require('posthtml-img');
 
const infos = [];
 
posthtml()
    .use(posthtmlImg({
      onInfo: (info, index) => {
        infos[index] = info;
      },
    })
    .process(html)
    .then(() => console.log(info));

After:

<div>
  <img src="https://server.com/image1.png" width="183" height="200">
  <img src="https://server.com/image2.jpg" width="2432" width="4320">
</div>

infos value:

[
  {
    height: 183,
    width: 200,
    type: 'png',
    fileSize: 15829,
    mediaType: 'image/png',
    src: 'https://server.com/image1.png'
  },
  {
    height: 2432,
    orientation: 1,
    width: 4320,
    type: 'jpg',
    fileSize: 6202507,
    mediaType: 'image/jpeg',
    src: 'https://server.com/image2.jpg'
  }
]

Contributing

See PostHTML Guidelines and contribution guide.

License MIT

Package Sidebar

Install

npm i posthtml-img

Weekly Downloads

7

Version

0.2.2

License

MIT

Unpacked Size

13.4 kB

Total Files

14

Last publish

Collaborators

  • iqqmut