Installation

npm install gatsby-plugin-stamped

or

yarn add gatsby-plugin-stamped

Configuration

For the basic configuration of the plug-in, you need publicKey, secretKey and storeHash, which you can find in your Stamped panel. You can learn more information on where to find both keys here.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-stamped',
      options: {
        publicKey: process.env.STAMPED_PUB,
        secretKey: process.env.STAMPED_SECRET,
        storeHash: process.env.STAMPED_HASH
      }
    }
  ]
};

Options

| Key | Type | Description | |--|--|--| | publicKey | String (required) | The public API key with which you authenticate to the Stamped system from an external source. This can be found here. | | secretKey | String (required) | The secret API key with which you authenticate to the Stamped system from an external source. This can be found here. | | storeHash | String (required) | The hash number, which is the shop number and is used to complete the endpoint you are trying to connect to. This can be found here. | | summaryReview | Boolean (Default: true) | An option to disable the downloading of the overall total of all Stamped assessments. | | downloadAssets | Boolean (Default: false) | Download and cache all product images used in the reviews to the app memory. | | assetsDir | String (Default: .stamped) | Set to the name of the local cache directory. |

Features

• Usage Stamped Review
• Usage Stamped rating summary
• Downloading local image assets
• Usage with gatsby-plugin-image

Usage Stamped Review

All reviews and the resources from which the reviews consist are available in the StampedReview node.

{
  allStampedReview {
    nodes {
      review {
        id
      }
    }
  }
}

Usage Stamped rating summary

All your reviews are aggregated and the resources associated with them you can always use using the allStampedRatingSummary node.

{
  allStampedRatingSummary {
    nodes {
      id
    }
  }
}

If you don't need to use just add summaryReview to the plugin settings.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-stamped',
      options: {
        publicKey: process.env.STAMPED_PUB,
        secretKey: process.env.STAMPED_SECRET,
        storeHash: process.env.STAMPED_HASH,
        summaryReview: false
      }
    }
  ]
};

Downloading local image assets

If you prefer, the source plugin also provides the option to download and cache Stamped assets in your Gatsby project.

To enable this, add downloadAssets: true to your plugin configuration. This downloads all assets.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-stamped',
      options: {
        publicKey: process.env.STAMPED_PUB,
        secretKey: process.env.STAMPED_SECRET,
        storeHash: process.env.STAMPED_HASH,
        downloadAssets: true
      }
    }
  ]
};

This adds a localFile field to the StampedAsset type which resolves to the file node generated at build by gatsby-source-filesystem.

{
  allStampedAsset {
    nodes {
      localFile {
        childImageSharp {
          gatsbyImageData(placeholder: BLURRED)
        }
      }
    }
  }
}

Usage with gatsby-plugin-image

Requires gatsby-plugin-image as a project dependency.

Use the gatsbyImageData resolver on your StampedAsset nodes.

{
  allStampedAsset {
    nodes {
      gatsbyImageData(placeholder: DOMINANT_COLOR)
    }
  }
}

gatsbyImageData resolver arguments

| Key | Type | Description | |--|--|--| | aspectRatio | Float | Force a specific ratio between the image’s width and height. | | backgroundColor | String | Background color applied to the wrapper. | | breakpoints | [Int] | Output widths to generate for full width images. Default is to generate widths for common device resolutions. It will never generate an image larger than the source image. The browser will automatically choose the most appropriate. | | height | Int | Change the size of the image. | | layout | GatsbyImageLayout (CONSTRAINED/FIXED/FULL_WIDTH) | Determines the size of the image and its resizing behavior. | | outputPixelDensities | [Float] | A list of image pixel densities to generate. It will never generate images larger than the source, and will always include a 1x image. The value is multiplied by the image width, to give the generated sizes. For example, a 400 px wide constrained image would generate 100, 200, 400 and 800 px wide images by default. Ignored for full width layout images, which use breakpoints instead. | | quality | Int | The default image quality generated. This is overridden by any format-specific options. | | sizes | String | The <img> sizes attribute, passed to the img tag. This describes the display size of the image, and does not affect generated images. You are only likely to need to change this if your are using full width images that do not span the full width of the screen. | | width | Int | Change the size of the image. |

For more information on using gatsby-plugin-image, please see the documentation.

Authors