Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iqqmut/posthtml-img
Posthtml plugin for manipulating img tags
https://github.com/iqqmut/posthtml-img
Last synced: 1 day ago
JSON representation
Posthtml plugin for manipulating img tags
- Host: GitHub
- URL: https://github.com/iqqmut/posthtml-img
- Owner: iqqmuT
- License: mit
- Created: 2020-02-14T14:05:55.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T07:17:54.000Z (about 2 years ago)
- Last Synced: 2025-01-10T09:33:57.781Z (11 days ago)
- Language: JavaScript
- Size: 1.03 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
- License: LICENSE
Awesome Lists containing this project
README
# posthtml-img
[![NPM][npm]][npm-url]
[![Build][build]][build-badge]
[PostHTML](https://github.com/posthtml/posthtml) plugin that manipulates `![]()
` attributes.
It fetches remote image dimensions and sets `width` and `height` attributes
automatically. Fetching is done efficiently, using
[remote-file-info](https://www.npmjs.com/package/remote-file-info) that does
not download entire images.
You can also alter `src` and `alt` attributes based on image information.
Before:
``` html
```
After:
``` html
```
## Install
``` bash
npm i posthtml posthtml-img
```
## Usage
``` js
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:
``` js
const posthtml = require('posthtml');
const posthtmlImg = require('posthtml-img');
async function run() {
const cache = {}; // cache object
await posthtml()
.use(posthtmlImg({ cache })
.process('
');
// the remote image info is already in cache, so 2nd run is faster
await posthtml()
.use(posthtmlImg({ cache })
.process('');
}
```
### changeAlt
Before:
``` html
```
Add option:
``` js
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:
``` html
```
### changeSrc
Before:
``` html
```
Add option:
``` js
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:
``` html
```
### onInfo
Plugin sends image information to given `options.onInfo` callback function.
Before:
``` html
```
Add option:
``` js
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:
``` html
```
`infos` value:
``` js
[
{
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](https://github.com/posthtml/posthtml/tree/master/docs) and [contribution guide](CONTRIBUTING.md).
### License [MIT](LICENSE)
[npm]: https://img.shields.io/npm/v/posthtml-img.svg
[npm-url]: https://npmjs.com/package/posthtml-img
[build]: https://travis-ci.org/iqqmuT/posthtml-img.svg?branch=master
[build-badge]: https://travis-ci.org/iqqmuT/posthtml-img?branch=master