diff --git a/packages/gatsby-source-contentful/src/extend-node-type.js b/packages/gatsby-source-contentful/src/extend-node-type.js index fb7b2ab28a6f8..1366b83e951e6 100644 --- a/packages/gatsby-source-contentful/src/extend-node-type.js +++ b/packages/gatsby-source-contentful/src/extend-node-type.js @@ -23,6 +23,8 @@ const { ImageFormatType, ImageResizingBehavior, ImageCropFocusType, + ImageLayoutType, + ImagePlaceholderType, } = require(`./schemes`) // By default store the images in `.cache` but allow the user to override @@ -790,6 +792,25 @@ exports.extendNodeType = ({ type, store }) => { type: GraphQLInt, defaultValue: 50, }, + layout: { + type: ImageLayoutType, + description: stripIndent` + The layout for the image. + CONSTRAINED: Resizes to fit its container, up to a maximum width, at which point it will remain fixed in size. + FIXED: A static image size, that does not resize according to the screen width + FULL_WIDTH: The image resizes to fit its container, even if that is larger than the source image. + Pass a value to "sizes" if the container is not the full width of the screen. + `, + }, + placeholder: { + type: ImagePlaceholderType, + description: stripIndent` + Format of generated placeholder image, displayed while the main image loads. + BLURRED: a blurred, low resolution image, encoded as a base64 data URI (default) + DOMINANT_COLOR: a solid color, calculated from the dominant color of the image. + TRACED_SVG: a low-resolution traced SVG of the image. + NONE: no placeholder. Set the argument "backgroundColor" to use a fixed background color.`, + }, formats: { type: GraphQLList(ImageFormatType), description: stripIndent` diff --git a/packages/gatsby-source-contentful/src/schemes.js b/packages/gatsby-source-contentful/src/schemes.js index beabb967fa1a5..8ab0866f364bc 100644 --- a/packages/gatsby-source-contentful/src/schemes.js +++ b/packages/gatsby-source-contentful/src/schemes.js @@ -11,6 +11,25 @@ const ImageFormatType = new GraphQLEnumType({ }, }) +const ImageLayoutType = new GraphQLEnumType({ + name: `ContentfulImageLayout`, + values: { + FIXED: { value: `fixed` }, + FULL_WIDTH: { value: `fullWidth` }, + CONSTRAINED: { value: `constrained` }, + }, +}) + +const ImagePlaceholderType = new GraphQLEnumType({ + name: `ContentfulImagePlaceholder`, + values: { + DOMINANT_COLOR: { value: `dominantColor` }, + TRACED_SVG: { value: `tracedSVG` }, + BLURRED: { value: `blurred` }, + NONE: { value: `none` }, + }, +}) + const ImageResizingBehavior = new GraphQLEnumType({ name: `ImageResizingBehavior`, values: { @@ -59,6 +78,8 @@ const ImageCropFocusType = new GraphQLEnumType({ }) module.exports = { + ImageLayoutType, + ImagePlaceholderType, ImageFormatType, ImageResizingBehavior, ImageCropFocusType,