https://github.com/posthtml/posthtml-img-autosize
Auto setting the width and height of <img>
https://github.com/posthtml/posthtml-img-autosize
Last synced: 8 months ago
JSON representation
Auto setting the width and height of <img>
- Host: GitHub
- URL: https://github.com/posthtml/posthtml-img-autosize
- Owner: posthtml
- License: mit
- Created: 2016-01-01T15:46:40.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T15:10:29.000Z (about 3 years ago)
- Last Synced: 2024-10-29T21:06:05.504Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 401 KB
- Stars: 28
- Watchers: 3
- Forks: 8
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/funding.yml
- License: LICENSE.txt
Awesome Lists containing this project
README
# posthtml-img-autosize [](http://badge.fury.io/js/posthtml-img-autosize) [](https://travis-ci.org/posthtml/posthtml-img-autosize)
[PostHTML](https://github.com/posthtml/posthtml) plugin that automatically sets `width` and `height` of `![]()
`.
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"`:
```js
var posthtml = require('posthtml');
posthtml([require('posthtml-img-autosize')()])
.process('
')
.then(function (result) {
console.log(result.html);
});
//
//
```
But if you set `processEmptySize: true`, the plugin will autosize all images with undefined or empty `width` and `height`:
```js
posthtml([
require('posthtml-img-autosize')({
root: './', // Path to images base directory (default: './')
processEmptySize: true
})
])
.process('')
.then(function (result) {
console.log(result.html);
});
//
//
```
### Image versioning
If you use `?..` for image versioning in your HTML you should set `questionMarkAsVersion: true` in the config:
```js
posthtml([
require('posthtml-img-autosize')({
questionMarkAsVersion: true
})
])
// The image file has "photo.png" name
.process('
')
.then(function (result) {
console.log(result.html);
});
//
```
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:
```js
posthtml([require('posthtml-img-autosize')()])
.process('
')
.then(function (result) {
// ...
})
.catch(function (error) {
console.log(error.message);
});
// ENOENT: no such file or directory, open '/notExists.jpg'
```