gatsby-plugin-pixelate
A Gatsby plugin for pixelating images
Install
npm install gatsby-plugin-pixelate
How to use
// in gatsby-config.jsmoduleexports = 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 (infields
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 }