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

    Install

    npm i posthtml-img

    DownloadsWeekly Downloads

    5

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    13.4 kB

    Total Files

    14

    Last publish

    Collaborators

    • iqqmut