Normal Programming Mistake

    gatsby-plugin-pixelate

    0.1.0 • Public • Published

    gatsby-plugin-pixelate npm Test Status

    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:

    original

    Pixelated:

    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
          }
        }
      }

    Install

    npm i gatsby-plugin-pixelate

    DownloadsWeekly Downloads

    1

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    32.6 kB

    Total Files

    11

    Last publish

    Collaborators

    • sirlisko