remark-images

> Plugin for Remark to make the images in your Markdown responsive.

!Unit tests

Made by 👨‍💻Florian Eckerstorfer in beautiful 🎡 Vienna, Europe.

Table of Contents

1. Installation
2. Configuration
3. Debugging
4. Contributing
5. Code of Conduct
6. License
7. Change log

Features

- Generates multiple sizes of images
- Inserts tags and srcset
- Adds an elastic container to avoid layout jumps
- Show a blurred version of the image while it is loading

Installation

You need to install @fec/remark-images with NPM or Yarn. Since this is a plugin for Remark, I assume you already have Remark installed and configured.

``shell
npm install @fec/remark-images
yarn add @fec/remark-images
`

Configuration

You can use @fec/remark-images like any other Remark plugin:

`javascript
const remark = require('remark');
const images = require('@fec/remark-images');

const processor = remark().use(images);
`

@fec/remark-images gives you some options to customise its behaviour:

`javascript
const remark = require('remark');
const images = require('@fec/remark-images');

const processor = remark().use([[images, options]]);
`

$3

- Eleventy and Responsive Images by Florian Eckerstorfer

$3

| Option | Default value | Description |
| ------------------------- | ------------------------------ | ----------------------------------------------------------------------------------------- |
| figureClassName | remarkri--figure | Name of CSS class for figure tag |
| pictureClassName | remarkri--picture | Name of CSS class for picture tag |
| imgClassName | remarkri--img | Name of CSS class for img tag |
| figCaptionClassName | remarkri--figcaption | Name of CSS class for figcaption tag |
| resolutions | [1, 2, 3] | Resolutions that should be generated |
| imageSizes | [320, 640, 960] | Width of the generated images |
| srcDir | . | Directory where to look for images |
| targetDir | . | Directory where to save generated images |
| loadingPolicy | "eager" | Sets the loading attribute on , "lazy" to load images when they become visible |
| elasticContainer | true | Insert elastic container to avoid layout jumps when the image loads |
| blurredBackground | true | Add a blurred background while the image is loading |
| processCaption | (caption) => caption | Define a function to process image caption, eg. convert markdown to HTML |
| transformTargetFileName | (fileName, data) => fileName | Define a function to transform the target file name |

#### Process Caption

If you're using markdown in the image captions, you can define a custom function to process the caption before it renders (by default it won't process the caption). Eg.

`js
const remark = require('remark');
const html = require('remark-html');

const processCaption = (markdown) => {
return remark().use(html).processSync(markdown).toString();
};
`

Debugging

@fec/remark-images uses debug to give you helpful debugging information when something does not work. In debug mode you get information about inspected nodes, skipped images and srcsets and generated images.

`bash
DEBUG=RemarkResponsiveImages node examples/remark-html.js
`

Contributing

To contribute to @fec/remark-images, follow these steps:

1. Fork this repository.
2. Create a branch: git checkout -b .
3. Install dependencies: npm install
4. Make your changes (and don't forget to update the tests)
5. Don't forgot to run the tests: npm test
6. Commit your changes: git commit -m ''
7. Push to the original branch: git push origin /
8. Create the pull request.

Alternatively see the GitHub documentation on creating a pull request.

Code of Conduct

This project follows the Contributor Covenant Code of Conduct.

License

This project is licensed under the MIT License.

Change log

$3

- Update dependencies
- Update test matrix to Node 16.x, 17.x, 18.x, 19.x, and 20.x

$3

- Update sharp to 0.32.4

$3

- Fix how target file names are transformed
- Rename processTargetFileName option to transformTargetFileName

$3

- Add callback to process target file names

$3

- Use HAST instead of raw HTML
- Bump minimum supported Node.js version to 14.x

$3

- #13 Remove empty srcSet from generated HTML (by joostdecock)

$3

- #8 Add option to process caption (by amykapernick)
- #10 Add support for Node 15

$3

- #6 Add option to add a blurred background

$3

- #5 Wrap images in elastic container to avoid layout jumps

$3

- Rename package to @fec/remark-images`

$3

- #4 Add debug information

$3

- #3 Add option to set loading attribute on image

$3

- #1 Only process .png, .jpg and .jpeg files
- #2 Add remark as peer dependency

$3

- Initial alpha release