posthtml-img
v0.2.2
Published
PostHTML plugin for img tag manipulation
Downloads
6
Readme
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-imgUsage
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.