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