gatsby-plugin-pixelate

gatsby-plugin-pixelate

A Gatsby plugin for pixelating images

Install

npm install gatsby-plugin-pixelate

How to use

// in gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-pixelate",
      options: {
        nodeType: "GoodreadsBook",
        nodeInput: "image_url",
        nodeOutput: "image_pixelated",
        ratio: 5
      }
    }
  ]
};

It will extend the nodeType with the base64 version of the image contained in nodeInput

  // GoodreadsBook node in GraphQL
  fields {
    image_pixelated
  }

Available options

• nodeType the node type where the original image is present.
• nodeInput the property defining the original image url.
• nodeOutput (default: image_pixelated) the property where the base64 pixelated version of the image is going to be returned (in fields property).
• ration the ratio of pixelation, a value from 0 to 100.

Example

Original:

Pixelated:

Note

The image manipulation is powered by Jimp.

If you need multiple images just add a multiple config.

  {
    resolve: "gatsby-plugin-pixelate",
      options: {
        nodeType: "GoodreadsBook",
        nodeInput: "image_url",
        nodeOutput: "image_pixelated",
        ratio: 5
      }
    }
  },
  {
    resolve: "gatsby-plugin-pixelate",
      options: {
        nodeType: "GoodreadsAuthor",
        nodeInput: "image_url",
        ratio: 5
      }
    }
  }