diff --git a/packages/gatsby-source-contentful/src/extend-node-type.js b/packages/gatsby-source-contentful/src/extend-node-type.js index 834a81eae72b6..8f84d522f3918 100644 --- a/packages/gatsby-source-contentful/src/extend-node-type.js +++ b/packages/gatsby-source-contentful/src/extend-node-type.js @@ -12,6 +12,7 @@ const { GraphQLInt, GraphQLFloat, GraphQLNonNull, + GraphQLList, } = require(`gatsby/graphql`) const qs = require(`qs`) const { generateImageData } = require(`gatsby-plugin-image`) @@ -27,6 +28,8 @@ const cacheImage = require(`./cache-image`) // cache is more likely to go stale than the images (which never go stale) // Note that the same image might be requested multiple times in the same run +const validImageFormats = new Set([`jpg`, `png`, `webp`]) + if (process.env.GATSBY_REMOTE_CACHE) { console.warn( `Note: \`GATSBY_REMOTE_CACHE\` will be removed soon because it has been renamed to \`GATSBY_CONTENTFUL_EXPERIMENTAL_REMOTE_CACHE\`` @@ -188,6 +191,24 @@ const generateImageSource = ( _fit, // We use resizingBehavior instead { jpegProgressive, quality, cropFocus, backgroundColor, resizingBehavior } ) => { + // Ensure we stay within Contentfuls Image API limits + if (width > CONTENTFUL_IMAGE_MAX_SIZE) { + height = Math.floor((height / width) * CONTENTFUL_IMAGE_MAX_SIZE) + width = CONTENTFUL_IMAGE_MAX_SIZE + } + + if (height > CONTENTFUL_IMAGE_MAX_SIZE) { + width = Math.floor((width / height) * CONTENTFUL_IMAGE_MAX_SIZE) + height = CONTENTFUL_IMAGE_MAX_SIZE + } + + if (!validImageFormats.has(toFormat)) { + console.warn( + `[gatsby-source-contentful] Invalid image format "${toFormat}". Supported types are jpg, png and webp"` + ) + return undefined + } + const src = createUrl(filename, { width, height, @@ -778,6 +799,16 @@ exports.extendNodeType = ({ type, store, reporter }) => { backgroundColor: { type: GraphQLString, }, + formats: { + type: GraphQLList(ImageFormatType), + description: stripIndent` + The image formats to generate. Valid values are AUTO (meaning the same format as the source image), JPG, PNG, and WEBP. + The default value is [AUTO, WEBP], and you should rarely need to change this. Take care if you specify JPG or PNG when you do + not know the formats of the source images, as this could lead to unwanted results such as converting JPEGs to PNGs. Specifying + both PNG and JPG is not supported and will be ignored. + `, + defaultValue: [``, `webp`], + }, }) } diff --git a/packages/gatsby-source-contentful/src/schemes.js b/packages/gatsby-source-contentful/src/schemes.js index 3b01e7fa26508..beabb967fa1a5 100644 --- a/packages/gatsby-source-contentful/src/schemes.js +++ b/packages/gatsby-source-contentful/src/schemes.js @@ -4,6 +4,7 @@ const ImageFormatType = new GraphQLEnumType({ name: `ContentfulImageFormat`, values: { NO_CHANGE: { value: `` }, + AUTO: { value: `` }, JPG: { value: `jpg` }, PNG: { value: `png` }, WEBP: { value: `webp` },