Skip to content
Automatically add image alt attributes in HTML
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.editorconfig
.gitignore
.rollup.js
.tape.js
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
INSTALL.md
LICENSE.md
README.md
package.json

README.md

pHTML Image Alt pHTML

NPM Version Build Status Support Chat

pHTML Image Alt lets you add alt attributes to images in HTML.

<img src="/path/to/image-1.jpg" alt="Mother Nature's Son">
<img src="/path/to/image-2.jpg">
<img src="/path/to/image-3.jpg" alt="">
<img src="/path/to/image-4.jpg">

<!-- becomes -->

<img src="/path/to/image-1.jpg" alt="Mother Nature's Son">
<img src="/path/to/image-2.jpg" alt>
<img src="/path/to/image-3.jpg" alt="">
<img src="/path/to/image-4.jpg" alt>

Usage

Add pHTML Image Alt to your project:

npm install @phtml/image-alt --save-dev

Use pHTML Image Alt to process your HTML:

const phtmlImageAlt = require('@phtml/image-alt');

phtmlImageAlt.process(YOUR_HTML /*, processOptions, pluginOptions */);

Or use it as a pHTML plugin:

const phtml = require('phtml');
const phtmlImageAlt = require('@phtml/image-alt');

phtml([
  phtmlImageAlt(/* pluginOptions */)
]).process(YOUR_HTML /*, processOptions */);

pHTML Image Alt runs in all Node environments, with special instructions for:

Node CLI Eleventy Gulp Grunt

Options

alts

The alts option defines alt attributes by a matching src attribute value.

phtmlImageAlt({ alts: {
  '/path/to/image-2.jpg': 'Martha My Dear'
} });
<img src="/path/to/image-1.jpg" alt="Mother Nature's Son">
<img src="/path/to/image-2.jpg">
<img src="/path/to/image-3.jpg" alt="">
<img src="/path/to/image-4.jpg">

<!-- becomes -->

<img src="/path/to/image-1.jpg" alt="Mother Nature's Son">
<img src="/path/to/image-2.jpg" alt="Martha My Dear">
<img src="/path/to/image-3.jpg" alt="">
<img src="/path/to/image-4.jpg" alt>
You can’t perform that action at this time.