Nanoscale Parts Manufacturing

    posthtml-img-autosize

    0.1.6 • Public • Published

    posthtml-img-autosize npm version Build Status

    PostHTML plugin that automatically sets width and height of <img>. It supports JPG, PNG, GIF, BMP, TIFF, SVG, and WebP. It autosizes both local and remote images.

    Usage

    By default the plugin will autosize only images with width="auto" and height="auto":

    var posthtml = require('posthtml');
     
    posthtml([require('posthtml-img-autosize')()])
        .process('<img src="photo.png" width="auto" height="auto"><img src="user.jpg">')
        .then(function (result) {
            console.log(result.html);
        });
     
    // <img src="photo.png" width="111" height="52">
    // <img src="user.jpg">

    But if you set processEmptySize: true, the plugin will autosize all images with undefined or empty width and height:

    posthtml([
            require('posthtml-img-autosize')({
                root: './', // Path to images base directory (default: './')
                processEmptySize: true
            })
        ])
        .process('<img src="photo.png" width="auto" height="auto"><img src="user.jpg">')
        .then(function (result) {
            console.log(result.html);
        });
     
    // <img src="photo.png" width="111" height="52">
    // <img src="user.jpg" width="100" height="201">

    Image versioning

    If you use ?.. for image versioning in your HTML you should set questionMarkAsVersion: true in the config:

    posthtml([
            require('posthtml-img-autosize')({
                questionMarkAsVersion: true
            })
        ])
         // The image file has "photo.png" name
        .process('<img src="photo.png?v=2" width="auto" height="auto">')
        .then(function (result) {
            console.log(result.html);
        });
     
    // <img src="photo.png?v=2" width="111" height="52">

    Without that option the plugin would search for a file with name photo.png?v=2 on your disk.

    Error handling

    You can use the usual Promise.catch() to handle errors:

    posthtml([require('posthtml-img-autosize')()])
        .process('<img src="notExists.jpg" width="auto" height="auto">')
        .then(function (result) {
            // ...
        })
        .catch(function (error) {
            console.log(error.message);
        });
     
    // ENOENT: no such file or directory, open '/notExists.jpg'

    Install

    npm i posthtml-img-autosize

    DownloadsWeekly Downloads

    24

    Version

    0.1.6

    License

    MIT

    Unpacked Size

    114 kB

    Total Files

    28

    Last publish

    Collaborators

    • scrum
    • maltsev