Add support for gatsby-plugin-image

package.json

@@ -22,6 +22,7 @@
  "cross-env": "^6.0.3",
  "datocms-structured-text-to-html-string": "^1.0.13",
  "gatsby": "^2.24.63",
+ "gatsby-plugin-image": "^1.1.0-next.2",
  "gatsby-plugin-sharp": "^2.14.1",
  "gatsby-transformer-remark": "^2.8.38",
  "np": "^7.4.0",
@@ -58,6 +59,7 @@
  "license": "ISC",
  "peerDependencies": {
  "gatsby": "^2.12.1",
+ "gatsby-plugin-image": "^1.0.0",
  "react": "*",
  "react-helmet": ">= 5.0.0"
  }

src/hooks/sourceNodes/createTypes/fieldTypes/DatoCmsFileField.js

@@ -1,16 +1,16 @@
 const buildAssetFields = require('../utils/buildAssetFields');
 
-module.exports = ({ actions, schema }) => {
+module.exports = ({ actions, schema, cacheDir }) => {
  actions.createTypes([
  schema.buildObjectType({
  name: 'DatoCmsFileField',
  extensions: { infer: false },
  fields: {
- ...buildAssetFields(),
+ ...buildAssetFields({ cacheDir }),
  alt: 'String',
  title: 'String',
  customData: 'JSON',
- focalPoint: 'DatoCmsFocalPoint'
+ focalPoint: 'DatoCmsFocalPoint',
  },
  }),
  schema.buildObjectType({

src/hooks/sourceNodes/createTypes/upload/DatoCmsAsset.js

@@ -1,12 +1,12 @@
 const buildAssetFields = require('../utils/buildAssetFields');
 
-module.exports = ({ actions, schema, store }) => {
+module.exports = ({ actions, schema, store, cacheDir }) => {
  actions.createTypes([
  schema.buildObjectType({
  name: 'DatoCmsAsset',
  extensions: { infer: false },
  fields: {
- ...buildAssetFields(),
+ ...buildAssetFields({ cacheDir }),
  },
  interfaces: ['Node'],
  }),

src/hooks/sourceNodes/createTypes/utils/buildAssetFields.js

@@ -3,6 +3,7 @@ const { camelizeKeys } = require('datocms-client');
 const buildFluidFields = require('../utils/buildFluidFields');
 const buildFixedFields = require('../utils/buildFixedFields');
 const createUrl = require('./createUrl');
+const buildGatsbyImageDataField = require('./buildGatsbyImageDataField');
 
 const resolveUsingEntityPayloadAttribute = (
  key,
@@ -17,7 +18,7 @@ const resolveUsingEntityPayloadAttribute = (
  },
 });
 
-module.exports = function() {
+module.exports = function({ cacheDir }) {
  return {
  size: resolveUsingEntityPayloadAttribute('size', { type: 'Int' }),
  width: resolveUsingEntityPayloadAttribute('width', { type: 'Int' }),
@@ -88,5 +89,6 @@ module.exports = function() {
  },
  ...buildFluidFields(),
  ...buildFixedFields(),
+ gatsbyImageData: buildGatsbyImageDataField({ cacheDir }),
  };
 };

src/hooks/sourceNodes/createTypes/utils/buildGatsbyImageDataField.js

@@ -0,0 +1,83 @@
+const createUrl = require('./createUrl');
+const { getGatsbyImageResolver } = require('gatsby-plugin-image/graphql-utils');
+const { generateImageData } = require('gatsby-plugin-image');
+const getBase64 = require('./getBase64');
+const getTracedSVG = require('./getTracedSVG');
+
+const blurHashCache = new Map();
+
+const generateImageSource = (
+ baseURL,
+ width,
+ height,
+ format,
+ fit,
+ { focalPoint, ...options },
+) => {
+ const src = createUrl(
+ baseURL,
+ { ...options, w: width, h: height },
+ { autoFormat: true, focalPoint },
+ );
+
+ return { src, width, height, format };
+};
+
+module.exports = ({ cacheDir }) => {
+ async function resolve(
+ node,
+ { imgixParams = {}, placeholder = 'DOMINANT_COLOR', ...props },
+ ) {
+ const image = node?.entityPayload?.attributes;
+
+ if (!image.is_image || image.format === 'svg') {
+ return null;
+ }
+
+ const sourceMetadata = {
+ width: image.width,
+ height: image.height,
+ format: image.format,
+ };
+
+ const otherProps = {};
+ if (placeholder === 'DOMINANT_COLOR') {
+ otherProps.backgroundColor = image.colors[0].hex;
+ } else if (placeholder === 'BLURRED') {
+ otherProps.placeholderURL = await getBase64(
+ { ...sourceMetadata, src: image.url },
+ cacheDir,
+ );
+ } else if (placeholder === 'TRACED_SVG') {
+ otherProps.placeholderURL = await getTracedSVG(
+ { ...sourceMetadata, src: image.url },
+ cacheDir,
+ );
+ }
+
+ imgixParams.focalPoint = node.focalPoint;
+
+ return generateImageData({
+ filename: image.url,
+ pluginName: 'gatsby-source-datocms',
+ generateImageSource,
+ sourceMetadata,
+ formats: ['auto'],
+ options: imgixParams,
+ ...otherProps,
+ ...props,
+ });
+ }
+ return getGatsbyImageResolver(resolve, {
+ imgixParams: 'DatoCmsImgixParams',
+ placeholder: {
+ type:
+ 'enum DatoImagePlaceholder { NONE, DOMINANT_COLOR, TRACED_SVG, BLURRED }',
+ description: `Format of generated placeholder, displayed while the main image loads.
+DOMINANT_COLOR: a solid color, calculated from the dominant color of the image (default).
+BLURRED: a blurred, low resolution image, encoded as a base64 data URI 
+TRACED_SVG: a low-resolution traced SVG of the image. Note that this will download the image at build time for processing.
+NONE: no placeholder. Set "backgroundColor" to use a fixed background color.`,
+ },
+ });
+};