Remark plugin to generate responsive images.
npm install @fec/remark-images> Plugin for Remark to make the images in your Markdown responsive.
Made by 👨💻Florian Eckerstorfer in beautiful 🎡 Vienna, Europe.
1. Installation
2. Configuration
3. Debugging
4. Contributing
5. Code of Conduct
6. License
7. Change log
- 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
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
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]]);
`
- Eleventy and Responsive Images by Florian Eckerstorfer
| 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();
};
`
@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
To contribute to @fec/remark-images, follow these steps:
1. Fork this repository.
2. Create a branch: git checkout -b .npm install
3. Install dependencies: npm test
4. Make your changes (and don't forget to update the tests)
5. Don't forgot to run the tests: git commit -m '
6. Commit your changes: git push origin
7. Push to the original branch:
8. Create the pull request.
Alternatively see the GitHub documentation on creating a pull request.
This project follows the Contributor Covenant Code of Conduct.
This project is licensed under the MIT License.
- Update dependencies
- Update test matrix to Node 16.x, 17.x, 18.x, 19.x, and 20.x
- Update sharp to 0.32.4
- Fix how target file names are transformed
- Rename processTargetFileName option to transformTargetFileName
- Add callback to process target file names
- Use HAST instead of raw HTML
- Bump minimum supported Node.js version to 14.x
- #13 Remove empty srcSet from generated HTML (by joostdecock)
- #8 Add option to process caption (by amykapernick)
- #10 Add support for Node 15
- #6 Add option to add a blurred background
- #5 Wrap images in elastic container to avoid layout jumps
- Rename package to @fec/remark-images`
- #4 Add debug information
- #3 Add option to set loading attribute on image
- #1 Only process .png, .jpg and .jpeg files
- #2 Add remark as peer dependency
- Initial alpha release