pHTML Image Alt

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>