metalsmith-image-dimensions
Metalsmith plugin for automatically adding width
and height
attributes to img
tags.
Example
Input:
<img src="dog.jpg">
Output:
<img src="dog.jpg" width="100" height="50">
Usage
const mediaMetadata = require('metalsmith-media-metadata');
const imageDimensions = require('metalsmith-image-dimensions');
metalsmith
.use(mediaMetadata())
.use(imageDimensions({
overwrite: true
}));
metalsmith-dom-transform
Using with If you're already using metalsmith-dom-transform
, you can save a little bit of overhead by accessing the image dimension transform directly:
const domTransform = require('metalsmith-image-dimensions');
const readImageSizes = require('metalsmith-image-dimensions/read_image_sizes');
const imageDimensionsTransform = require('metalsmith-image-dimensions/transform');
metalsmith
.use(readImageSizes({
path: '**/*.+(jpg|png)'
}))
.use(domTransform({
transforms: [
imageDimensionsTransform(options),
// Your other transforms go here
]
}));
Note that you must separately use readImageSizes
before running the domTransform
.
Notes
- External images are not supported since I didn't need them. File an issue if that's something you'd like.
Configuration
-
domain
: Domain where this is hosted, used to determine if an image is external. It is unlikely that you'd need to set this, unless you have absolute URLs for image that are local to the site (default:http://example.com
). -
path
:minimatch
case-insensitive glob that determines which files get processed (default:**/*.+(gif|jpg|png)
) -
overwrite
: Writewidth
andheight
tags even if already set (defaultfalse
)
Changelog
-
0.1.0
: Remove requirement formetalsmith-media-metadata
and exposereadImageSizes
-
0.0.2
: Fix bug where paths were not correctly resolved -
0.0.1
: First release