# gatsby-wiki-remark-images-datocms

> Processes images in markdown so they can be used in the production build using DatoCMS's built-in CDN.

Latest version **0.1.2** (published 2022-02-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install gatsby-wiki-remark-images-datocms
pnpm add gatsby-wiki-remark-images-datocms
yarn add gatsby-wiki-remark-images-datocms
bun add gatsby-wiki-remark-images-datocms
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2022-02-25 |
| First published | 2022-02-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 44.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | DatoCMS |
| Maintainers | bangash1996 |
| Keywords | gatsby, gatsby-plugin, datocms, images |

## Links

- npm: https://www.npmjs.com/package/gatsby-wiki-remark-images-datocms
- npm.io page: https://npm.io/package/gatsby-wiki-remark-images-datocms

## Dependencies (7)

- [md5](https://npm.io/package/md5.md) ^2.3.0
- [cheerio](https://npm.io/package/cheerio.md) ^1.0.0-rc.6
- [fs-extra](https://npm.io/package/fs-extra.md) ^9.1.0
- [node-fetch](https://npm.io/package/node-fetch.md) ^2.6.1
- [query-string](https://npm.io/package/query-string.md) ^7.0.0
- [datocms-client](https://npm.io/package/datocms-client.md) >=3.1.0
- [unist-util-select](https://npm.io/package/unist-util-select.md) ^3.0.1

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2022-02-25

## README

# gatsby-wiki-remark-images-datocms

Processes images in markdown so they can be used in the production build using DatoCMS's built-in CDN.

In the processing, it makes images responsive by:

- Adding an elastic container to hold the size of the image while it loads to
  avoid layout jumps.
- Generating multiple versions of images at different widths and sets the
  `srcset` and `sizes` of the `img` element so regardless of the width of the
  device, the correct image is downloaded.
- Converting GIF images into `video` elements.
- Using the "blur up" technique popularized by [Medium][1] and [Facebook][2]
  where a small 20px wide version of the image is shown as a placeholder until
  the actual image is downloaded.

## Install

`npm install --save gatsby-wiki-remark-images-datocms`

## How to use

```javascript
// In your gatsby-config.js
plugins: [
  `gatsby-plugin-sharp`,
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-wiki-remark-images-datocms`,
          options: {
            // You need to specify your project read-only API token here!
            apiToken: 'XXXXX',
            // It's important to specify the maxWidth (in pixels) of
            // the content container as this plugin uses this as the
            // base for generating different widths of each image.
            maxWidth: 590,
          },
        },
      ],
    },
  },
];
```

## Options

| Name                   | Default       | Description                                                                                                                                                                                                                                                                     |
| ---------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `maxWidth`             | `650`         | The `maxWidth` in pixels of the `div` where the markdown will be displayed. This value is used when deciding what the width of the various responsive thumbnails should be.                                                                                                     |
| `linkImagesToOriginal` | `true`        | Add a link to each image to the original image. Sometimes people want to see a full-sized version of an image e.g. to see extra detail on a part of the image and this is a convenient and common pattern for enabling this. Set this option to false to disable this behavior. |
| `showCaptions`         | `false`       | Add a caption to each image with the contents of the title attribute, when this is not empty. Set this option to true to enable this behavior.                                                                                                                                  |
| `wrapperStyle`         |               | Add custom styles to the div wrapping the responsive images. Use regular CSS syntax, e.g. `margin-bottom:10px; background: red;`                                                                                                                                                |
| `backgroundColor`      | `transparent` | Set the background color of the image to match the background of your design                                                                                                                                                                                                    |
| `convertGifsToVideo`   | `true`        | Convert GIF images into `video` elements                                                                                                                                                                                                                                        |

[1]: https://jmperezperez.com/medium-image-progressive-loading-placeholder/
[2]: https://code.facebook.com/posts/991252547593574/the-technology-behind-preview-photos/

---
_Source: https://npm.io/package/gatsby-wiki-remark-images-datocms · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._