posthtml-img
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 ( { } ) )
. process ( html )
. 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 = { } ;
await posthtml ( )
. use ( posthtmlImg ( { cache } )
. process ( ' <div><img src=" https://server.com/image.png "></div> ' ) ;
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