@fec/remark-responsive-images

remark-responsive-images

Plugin for Remark to make the images in your Markdown responsives.

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. Changelog

Installation

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

npm install @fec/remark-responsive-images
yarn add @fec/remark-responsive-images

Configuration

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

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

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

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

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

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

Options

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 <img>, lazy to load images when they become visible

Debugging

@fec/remark-responsive-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.

DEBUG=RemarkResponsiveImages node examples/remark-html.js

Contributing

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

1. Fork this repository.
2. Create a branch: git checkout -b <branch_name>.
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 '<commit_message>'
7. Push to the original branch: git push origin <project_name>/<location>
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.

Changelog

Version 0.1.3-alpha (October 10, 2020)

• #4 Add debug information

Version 0.1.2-alpha (October 9, 2020)

• #3 Add option to set loading attribute on image

Version 0.1.1-alpha (October 9, 2020)

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

Version 0.1.0-alpha (October 9, 2020)

• Initial alpha release