imgix / gatsby Goto Github PK

I am trying to constrain image width depending on screen sizes. On the largest screen the image is limited to 1040px width, on tablet it takes about 80% width and full width on mobile.

Even though I set breakpoints and maxWidth, the srcSet values from getGatsbyImageData() contains w units which results in loading 1280px wide image. Taking into account retina display, I expect the largest width to maybe appear as 2080px, but 1280px is useless in any of my cases.

I've extracted my attempted code into a CodeSandbox.

Please advise, can I set width in pixels in srcSet for my breakpoints?

Before you submit:

• Please search through the existing issues (both open AND closed) to see if your question has already been discussed. Github issue search can be used for this: https://github.com/imgix/gatsby/issues?utf8=%E2%9C%93&q=is%3Aissue

Question

Hello, I am trying to make this library work on my project, but I have some issues.

I need to fetch images dinamically, so I followed what is suggested here.

1. First of all I want to ask if you can define what is an "imgix-compatible URL".

It is important to note that this feature can only display images that are already on imgix or an imgix-compatible URL

2. Could be what ever images Web Proxy can accept? So a URL to a public image can be good?

In your example of URL Transform Function there is this code:

 <ImgixGatsbyImage
  // Must be an imgix URL
   src="https://assets.imgix.net/amsterdam.jpg"
  ...
/>   

3. So can I use only an imgix URL with ImgixGatsbyImage's component a not a imgix-compatible URL?

Also, I am not sure if I am providing the right src to the component. For instance, path to my public image with Web Proxy is https://example.com/path/to/image/image.jpg so if my domain on imgix is domain.imgix.net, url would be something like https://domain.imgix.net/https%3A%2F%2Fexample.com%2Fpath%2Fto%2Fimage%2Fimage.jpg. I need some cropping, width and height, so my final url would be https://domain.imgix.net/https%3A%2F%2Fexample.com%2Fpath%2Fto%2Fimage%2Fimage.jpg?fit=crop&max-w=600&max-h=600.

4. What is the url I need to put on src of ImgixGatsbyImage?
5. I need to include parameters (crop, width, height)?
6. I need to include sign string?

ImgixGatsbyImage always encode src, so I do not think I need to put encoded url.

Digging into the API I find Object builders, and in particular buildGatsbyImageDataObject. With it I am able to succesfully query images and also display, but I have some questions about this solution:
7. Are there some drawbacks using this method instead of ImgixGatsbyImage?
8. I am using layout: 'constrained', width: 600 and height: 600, with max-w: 600, max-h: 600 and fit: crop, but images fetched are always 600x600 px. Is it expected?
9. In your example of buildGatsbyImageDataObject there is dimensions: { width: 5000, height: 3000 }. Is it required? Because without it I am receiving error in console.

I have a last question:
10. Can I use includeLibraryParam: false with buildGatsbyImageDataObject or ImgixGatsbyImage?

Thanks in advance for you answers!

I'm using ImgixGatsbyImage on Gatsby v4 but setting auto:['format']as imgixParams still serve a JPG and not an AVIF image.
Using the local version of the .JPG image with gatsby-plugin-image serve an AVIF

What's wrong here?

<ImgixGatsbyImage
  src="https://mysource.imgix.net/image.jpg"
  imgixParams={{ crop: 'faces', auto: ['compress', 'format'] }}
  layout="fullWidth"
  aspectRatio={3 / 2}
  alt="test"
/>
<StaticImage
    src="../images/image.jpg"
    layout="fullWidth"
    alt="test"
/>

The package published on NPM for @imgix/[email protected] contains no dist folder and no node_modules. Build outputs referenced by gatsby*.js files and placed in /dist as part of the build are missing, breaking this plugin.

erikmuller@067-032 Downloads % npm pack @imgix/gatsby
npm notice 
npm notice 📦  @imgix/gatsby@2.0.1
npm notice === Tarball Contents === 
npm notice 29.9kB CHANGELOG.md                                                      
npm notice 1.3kB  LICENSE                                                           
npm notice 57.5kB README.md                                                         
npm notice 742B   fragments.js                                                      
npm notice 110B   gatsby-browser.js                                                 
npm notice 104B   gatsby-node.js                                                    
npm notice 102B   gatsby-ssr.js                                                     
npm notice 6.8kB  package.json                                                      
npm notice 1.8kB  src/api/fetchBase64Image.ts                                       
npm notice 1.3kB  src/api/fetchImgixMetadata.ts                                     
npm notice 966B   src/common/ar.ts                                                  
npm notice 1.9kB  src/common/cache.ts                                               
npm notice 32B    src/common/constants.ts                                           
npm notice 713B   src/common/createExternalHelper.ts                                
npm notice 1.1kB  src/common/fpTsUtils.ts                                           
npm notice 2.9kB  src/common/imgix-js-core-wrapper.ts                               
npm notice 1.8kB  src/common/ioTs.ts                                                
npm notice 374B   src/common/log.ts                                                 
npm notice 165B   src/common/number.ts                                              
npm notice 212B   src/common/tsUtils.ts                                             
npm notice 707B   src/common/uri.ts                                                 
npm notice 3.2kB  src/common/utils.ts                                               
npm notice 163B   src/gatsby-browser.ts                                             
npm notice 852B   src/gatsby-node.ts                                                
npm notice 179B   src/gatsby-ssr.ts                                                 
npm notice 89B    src/index.ts                                                      
npm notice 1.8kB  src/modules/gatsby-plugin/buildGatsbyImageDataBaseArgs.ts         
npm notice 1.3kB  src/modules/gatsby-plugin/createImgixBase64FieldConfig.ts         
npm notice 4.9kB  src/modules/gatsby-plugin/createImgixFixedFieldConfig.ts          
npm notice 5.0kB  src/modules/gatsby-plugin/createImgixFluidFieldConfig.ts          
npm notice 10.3kB src/modules/gatsby-plugin/createImgixGatsbyImageDataFieldConfig.ts
npm notice 2.0kB  src/modules/gatsby-plugin/createImgixUrlFieldConfig.ts            
npm notice 189B   src/modules/gatsby-plugin/fieldNames.ts                           
npm notice 10.1kB src/modules/gatsby-plugin/gatsby-node.ts                          
npm notice 4.9kB  src/modules/gatsby-plugin/graphqlTypes.ts                         
npm notice 43B    src/modules/gatsby-plugin/index.ts                                
npm notice 5.2kB  src/modules/gatsby-plugin/objectBuilders.ts                       
npm notice 1.6kB  src/modules/gatsby-plugin/privateTypes.ts                         
npm notice 1.6kB  src/modules/gatsby-plugin/resolveDimensions.ts                    
npm notice 3.9kB  src/modules/gatsby-plugin/typeBuilder.ts                          
npm notice 2.6kB  src/modules/gatsby-transform-url/breakpoints.ts                   
npm notice 763B   src/modules/gatsby-transform-url/common.ts                        
npm notice 7.3kB  src/modules/gatsby-transform-url/gatsbyPluginImage.ts             
npm notice 709B   src/modules/gatsby-transform-url/gatsbyPluginImageComponent.tsx   
npm notice 4.9kB  src/modules/gatsby-transform-url/index.ts                         
npm notice 356B   src/modules/gatsby-transform-url/types.ts                         
npm notice 1.6kB  src/pluginHelpers.browser.ts                                      
npm notice 731B   src/pluginHelpers.ts                                              
npm notice 2.9kB  src/publicTypes.ts                                                
npm notice 1.4kB  types/gatsby.d.ts                                                 
npm notice === Tarball Details === 
npm notice name:          @imgix/gatsby                           
npm notice version:       2.0.1                                   
npm notice filename:      @imgix/gatsby-2.0.1.tgz                 
npm notice package size:  46.9 kB                                 
npm notice unpacked size: 191.1 kB                                
npm notice shasum:        fe7bed80952427523ac5202cab408639876b77d0
npm notice integrity:     sha512-A8e46ht6X+b77[...]VoBkI/R3MUgvw==
npm notice total files:   50                                      
npm notice 
imgix-gatsby-2.0.1.tgz

On a side note, why does the package published on NPM include the /src and /types folders?

Describe the bug

When using gatsby-plugin-image with Typescript, using placeholder: TRACED_SVG in the GraphQL query results in a type error.
Digging into this further, it appears that this file, graphqlTypes.ts is missing the attribute TRACED_SVG.

The full types can be found here: in gatsby-transformer-sharp. For some reason TRACED_SVG has been left out of the types definition for @imgix/gatsby. Is there a reason TRACED_SVG has been left out? It's a valid placeholder option, yet the current @imgix/gatsby library prevents its use.

To Reproduce
In a gatsby project configured with Typescript, create a GraphQL query which requests a TRACED_SVG placeholder.

  const data: MyGraphqlQuery = useStaticQuery(graphql`
    query MyGraphql {
      prismicFrontPage {
        data {
          image_resource_name {
            gatsbyImageData(placeholder: TRACED_SVG, layout: FULL_WIDTH)
          }
        }
      }
    }
  `);

Expected behaviour
This is a valid placeholder option, it is expected to have a type defined in this file, graphqlTypes.ts

Screenshots

Information:

• imgix/gatsby version: "@imgix/gatsby@^1.6.9":
• gatsby version: "gatsby": "^3.6.2",
• gatsby-plugin-image version: "gatsby-plugin-image": "^1.6.0",

With the recently introduced GatsbyJS v5 support the gatsby-plugin-image dependency hasn't been updated. This is relevant section of package.json:

  "peerDependencies": {
    "gatsby": "^2 || ^3 || ^4 || ^5",
    "gatsby-image": "^2 || ^3",
    "gatsby-plugin-image": "^1 || ^2"
  },

This invalidates GatsbyJS v5 support, because v5 requires gatsby-plugin-image to be v3.

@imgix/gatsby is not working any more on build process using the command gatsby build.
I have the following error:

info [@imgix/gatsby] Loaded plugin.                                                                                                                                                                                                                                                                                     
success onPreInit - 0.011s
success initialize cache - 0.059s
success copy gatsby files - 0.155s
success Compiling Gatsby Functions - 0.235s
success onPreBootstrap - 0.895s

 ERROR #11321  PLUGIN

"@imgix/gatsby" threw an error while running the createSchemaCustomization lifecycle:

Cannot read properties of undefined (reading 'slice')

  145 |
  146 |   // Create the imgix GraphQL types, which will be added to the schema later
> 147 |   const typesAndFields = buildImgixGatsbyTypes<{ rawURL: string }>({
      |                                               ^
  148 |     cache: gatsbyContext.cache,
  149 |     imgixClient,
  150 |     resolveUrl: prop('rawURL'),

File: node_modules\@imgix\gatsby\src\modules\gatsby-plugin\gatsby-node.ts:147:47



  TypeError: Cannot read properties of undefined (reading 'slice')

  - graphqlTypes.ts:57
    [youmni-front]/[@imgix]/gatsby/src/modules/gatsby-plugin/graphqlTypes.ts:57:35

  - Array.reduce

  - graphqlTypes.ts:24 ImgixParamsInputType
    [youmni-front]/[@imgix]/gatsby/src/modules/gatsby-plugin/graphqlTypes.ts:24:54

  - typeBuilder.ts:55 buildImgixGatsbyTypes
    [youmni-front]/[@imgix]/gatsby/src/modules/gatsby-plugin/typeBuilder.ts:55:47

  - gatsby-node.ts:147
    [youmni-front]/[@imgix]/gatsby/src/modules/gatsby-plugin/gatsby-node.ts:147:47

  - gatsby-node.js:33 step
    [youmni-front]/[@imgix]/gatsby/dist/modules/gatsby-plugin/gatsby-node.js:33:23

  - gatsby-node.js:14 Object.next
    [youmni-front]/[@imgix]/gatsby/dist/modules/gatsby-plugin/gatsby-node.js:14:53

  - gatsby-node.js:8
    [youmni-front]/[@imgix]/gatsby/dist/modules/gatsby-plugin/gatsby-node.js:8:71

  - new Promise

  - gatsby-node.js:4 __awaiter
    [youmni-front]/[@imgix]/gatsby/dist/modules/gatsby-plugin/gatsby-node.js:4:12

  - gatsby-node.ts:125 Object.createSchemaCustomization
    [youmni-front]/[@imgix]/gatsby/src/modules/gatsby-plugin/gatsby-node.ts:125:11

  - api-runner-node.js:430 runAPI
    [youmni-front]/[gatsby]/src/utils/api-runner-node.js:430:22

  - api-runner-node.js:581 Promise.catch.decorateEvent.pluginName
    [youmni-front]/[gatsby]/src/utils/api-runner-node.js:581:13

  - debuggability.js:384 Promise._execute
    [youmni-front]/[bluebird]/js/release/debuggability.js:384:9

  - promise.js:518 Promise._resolveFromExecutor
    [youmni-front]/[bluebird]/js/release/promise.js:518:18

  - promise.js:103 new Promise
    [youmni-front]/[bluebird]/js/release/promise.js:103:10


not finished createSchemaCustomization - 0.124s

After investigation, the source of the problem is due to the latest changes to the imgix-url-params pacakge with the version 11.15.0. A rollback to the version 11.13.1 solved the problem. I believe that the exception thrown after calling the slice method as mentioned in the error is caused by the lack of short_description for the parameter parameters node in this json file.

I used the versions 1.7.7 and 2.1.2 of @imgix/gatsby, the same problem.

Description

With @imgix/gatsby enabled, gatsby develop and gatsby build result in the following error:

warn Type ImagesJson declared in createTypes looks like a node, but doesn't implement a Node interface. It's likely that you should add the Node interface to your type def:
type ImagesJson implements Node { ... }
If you know that you don't want it to be a node (which would mean no root queries to retrieve it), you can explicitly disable inference for it:
type ImagesJson @dontInfer { ... }
ERROR
Building schema failed
not finished building schema - 0.106s

To Reproduce
I have the following tandem configured: gatsby-source-filesystem to read a json file called images.json with data, like this:

[
    {
        "url": "https://bucket.imgix.net/images/header/splash.jpg"
    }
]

then gatsby-transformer-json to parse the JSON file, and finally @imgix/gatsby with the following configuration:

        {
            resolve: "@imgix/gatsby",
            options: {
                domain: "bucket.imgix.net",
                sourceType: ImgixSourceType.AmazonS3,
                fields: [
                    {
                        nodeType: "ImagesJson",
                        getURL: (node) => node.url,
                        fieldName: 'image'
                    }
                ]
            }
        }

If I disable @imgix/gatsby in the config - build succeeds. The JSON is parsed just fine, verified in GraphiQL.

It appears to be clear that the issue is isolated to imgix/gatsby.

Expected behaviour
No error, and an images node with stuff added to my ImagesJson object. The configuration above used to work with gatsby-plugin-imgix and Gatsby v2 before.

Information:

• imgix/gatsby version: 1.6.11
• browser version: Version 1.25.72 Chromium: 91.0.4472.101 (Official Build) (64-bit)
• OS used: Debian GNU/Linux 10 (buster)

Additional context
I'm happy to provide any additional information, if required.

There's a small typo in the README for the "what should I read" section.

My images are set dynamically (e.g. loaded from REST API on client) 👉 url tranform function

Should instead read

My images are set dynamically (e.g. loaded from REST API on client) 👉 url transform function

After upgrading to gatsby 4 and 1.7.0 of the imgix library (which adds gatsby 4 support), I get errors related to invalid config formats, though the format hasn't changed (and still seems to match the readme)

Steps to reproduce the behaviour:

1. Have the following section in your fields config in gatsby-config.js:

fields: [
        {
          nodeType: "Instagram",
          fieldName: "image_imgix",
          getURL: (node) => node.image?.url
        },
        {
          nodeType: "ShopifyProductImages",
          fieldName: "imgix",
          getURL: (node) => node.url 
        },
      ],

2. Build with production node env
3. Error during "Validating Rendering Engines" of gatsby build:

error [@imgix/gatsby] Fatal error during setup: Error: The plugin config is not in the correct format. Errors: Invalid value [{"nodeType":"Instagram","fieldName":"image_imgix"},{"nodeType":"ShopifyProductImages","fieldName":"imgix"}] supplied to : GatsbySourceUrlOptions/fields: (undefined | Array<(({ nodeType: string, fieldName: string } & { getURL: Function }) | ({ nodeType: string, fieldName: string } & { getURLs: Function }))>)/0: undefined,Invalid value undefined supplied to : GatsbySourceUrlOptions/fields: (undefined | Array<(({ nodeType: string, fieldName: string } & { getURL: Function }) | ({ nodeType: string, fieldName: string } & { getURLs: Function }))>)/1: Array<(({ nodeType: string, fieldName: string } & { getURL: Function }) | ({ nodeType: string, fieldName: string } & { getURLs: Function }))>/0: (({ nodeType: string, fieldName: string } & { getURL: Function }) | ({ nodeType: string, fieldName: string } & { getURLs: Function }))/0: ({ nodeType: string, fieldName: string } & { getURL: Function })/1: { getURL: Function }/getURL: Function,Invalid value undefined supplied to : GatsbySourceUrlOptions/fields: (undefined | Array<(({ nodeType: string, fieldName: string } & { getURL: Function }) | ({ nodeType: string, fieldName: string } & { getURLs: Function }))>)/1: Array<(({ nodeType: string, fieldName: string } & { getURL: Function }) | ({ nodeType: string, fieldName: string } & { getURLs: Function }))>/0: (({ nodeType: string, fieldName: string } & { getURL: Function }) | ({ nodeType: string, fieldName: string } & { getURLs: Function }))/1: ({ nodeType: string, fieldName: string } & { getURLs: Function })/1: { getURLs: Function }/getURLs: Function,Invalid value undefined supplied to : GatsbySourceUrlOptions/fields: (undefined | Array<(({ nodeType: string, fieldName: string } & { getURL: Function }) | ({ nodeType: string, fieldName: string } & { getURLs: Function }))>)/1: Array<(({ nodeType: string, fieldName: string } & { getURL: Function }) | ({ nodeType: string, fieldName: string } & { getURLs: Function }))>/1: (({ nodeType: string, fieldName: string } & { getURL: Function }) | ({ nodeType: string, fieldName: string } & { getURLs: Function }))/0: ({ nodeType: string, fieldName: string } & { getURL: Function })/1: { getURL: Function }/getURL: Function,Invalid value undefined supplied to : GatsbySourceUrlOptions/fields: (undefined | Array<(({ nodeType: string, fieldName: string } & { getURL: Function }) | ({ nodeType: string, fieldName: string } & { getURLs: Function }))>)/1: Array<(({ nodeType: string, fieldName: string } & { getURL: Function }) | ({ nodeType: string, fieldName: string } & { getURLs: Function }))>/1: (({ nodeType: string, fieldName: string } & { getURL: Function }) | ({ nodeType: string, fieldName: string } & { getURLs: Function }))/1: ({ nodeType: string, fieldName: string } & { getURLs: Function })/1: { getURLs: Function }/getURLs: Function

Information:

• imgix/gatsby version: [v1.7.0]

Describe the bug

If a URL has existing URL parameters, such as rect for cropping, they are removed after the URL is transformed for url, fluid, fixed, and gatsbyImageData fields. Only parameters given to defaultImgixParams, the GraphQL field's arguments, and those produced by the library itself (such as during srcSet generation) are included.

To Reproduce

Provide a URL to the plugin with a rect parameter. Using buildFixedImageData as an example:

import { buildFixedImageData } from '@imgix/gatsby'

const url =
  'https://images.prismic.io/gatsbygts-angelo/72d75488-437f-4e91-bb8a-4a03ef325714_patrick-robert-doyle-eb8dmXNOGP4-unsplash.jpg?auto=compress,format&rect=0,1100,6091,1865&w=980&h=300'
const fixedImageData = buildFixedImageData(url, {
  w: 200,
  h: 100,
})

console.log(fixedImageData)

The following is logged:

{
  width: 200,
  height: 100,
  src: 'https://images.prismic.io/gatsbygts-angelo/72d75488-437f-4e91-bb8a-4a03ef325714_patrick-robert-doyle-eb8dmXNOGP4-unsplash.jpg?ixlib=gatsbyTransformUrl-1.6.2&fit=crop&w=200&h=100&ar=undefined',
  srcSet: 'https://images.prismic.io/gatsbygts-angelo/72d75488-437f-4e91-bb8a-4a03ef325714_patrick-robert-doyle-eb8dmXNOGP4-unsplash.jpg?ixlib=gatsbyTransformUrl-1.6.2&fit=crop&w=200&h=100&ar=undefined&dpr=1&q=75 1x,\n' +
    'https://images.prismic.io/gatsbygts-angelo/72d75488-437f-4e91-bb8a-4a03ef325714_patrick-robert-doyle-eb8dmXNOGP4-unsplash.jpg?ixlib=gatsbyTransformUrl-1.6.2&fit=crop&w=200&h=100&ar=undefined&dpr=2&q=50 2x,\n' +
    'https://images.prismic.io/gatsbygts-angelo/72d75488-437f-4e91-bb8a-4a03ef325714_patrick-robert-doyle-eb8dmXNOGP4-unsplash.jpg?ixlib=gatsbyTransformUrl-1.6.2&fit=crop&w=200&h=100&ar=undefined&dpr=3&q=35 3x,\n' +
    'https://images.prismic.io/gatsbygts-angelo/72d75488-437f-4e91-bb8a-4a03ef325714_patrick-robert-doyle-eb8dmXNOGP4-unsplash.jpg?ixlib=gatsbyTransformUrl-1.6.2&fit=crop&w=200&h=100&ar=undefined&dpr=4&q=23 4x,\n' +
    'https://images.prismic.io/gatsbygts-angelo/72d75488-437f-4e91-bb8a-4a03ef325714_patrick-robert-doyle-eb8dmXNOGP4-unsplash.jpg?ixlib=gatsbyTransformUrl-1.6.2&fit=crop&w=200&h=100&ar=undefined&dpr=5&q=20 5x',
  srcWebp: 'https://images.prismic.io/gatsbygts-angelo/72d75488-437f-4e91-bb8a-4a03ef325714_patrick-robert-doyle-eb8dmXNOGP4-unsplash.jpg?ixlib=gatsbyTransformUrl-1.6.2&fit=crop&w=200&h=100&ar=undefined&fm=webp',
  srcSetWebp: 'https://images.prismic.io/gatsbygts-angelo/72d75488-437f-4e91-bb8a-4a03ef325714_patrick-robert-doyle-eb8dmXNOGP4-unsplash.jpg?ixlib=gatsbyTransformUrl-1.6.2&fit=crop&w=200&h=100&ar=undefined&fm=webp&dpr=1&q=75 1x,\n' +
    'https://images.prismic.io/gatsbygts-angelo/72d75488-437f-4e91-bb8a-4a03ef325714_patrick-robert-doyle-eb8dmXNOGP4-unsplash.jpg?ixlib=gatsbyTransformUrl-1.6.2&fit=crop&w=200&h=100&ar=undefined&fm=webp&dpr=2&q=50 2x,\n' +
    'https://images.prismic.io/gatsbygts-angelo/72d75488-437f-4e91-bb8a-4a03ef325714_patrick-robert-doyle-eb8dmXNOGP4-unsplash.jpg?ixlib=gatsbyTransformUrl-1.6.2&fit=crop&w=200&h=100&ar=undefined&fm=webp&dpr=3&q=35 3x,\n' +
    'https://images.prismic.io/gatsbygts-angelo/72d75488-437f-4e91-bb8a-4a03ef325714_patrick-robert-doyle-eb8dmXNOGP4-unsplash.jpg?ixlib=gatsbyTransformUrl-1.6.2&fit=crop&w=200&h=100&ar=undefined&fm=webp&dpr=4&q=23 4x,\n' +
    'https://images.prismic.io/gatsbygts-angelo/72d75488-437f-4e91-bb8a-4a03ef325714_patrick-robert-doyle-eb8dmXNOGP4-unsplash.jpg?ixlib=gatsbyTransformUrl-1.6.2&fit=crop&w=200&h=100&ar=undefined&fm=webp&dpr=5&q=20 5x'
}

Note the exclusion of ?auto=compress,format&rect=0,1100,6091,1865 in the URLs, which may be crucial to the image's representation.

Expected behaviour

The URL should include original parameters. Any parameters added by the plugin should be merged over the existing params.

Information:

• imgix/gatsby version: 1.6.3

Additional context

I believe this is the behavior of @imgix/js-core's buildURL method. If the core JS library is to be left as is, could the Gatsby plugin automatically read the URL parameters and merge them into the top of the final params?

For example, the URL field config could add ...existingUrlParams above defaultParams here:

See: https://github.com/imgix/js-core/blob/e168e5da6874591f657ce6de95257fe5414a361c/src/index.js#L47-L60

We're upgrading from v2.0.3 to v2.0.4 of this library and we started receiving such error on gatsby develop:

success load gatsby config - 0.088s
ERROR #11331 PLUGIN
Invalid plugin options for "@imgix/gatsby":

• "domain" is required

The release notes for v2.0.4 doesn't list any changes in the way how the domain setting logic is handled, which makes us think that this is a bug.

This is the configuration we use:

{
    resolve: "@imgix/gatsby",
    options: {
        domain: "", // keep it empty, since we want to preserve domain name together with the link
        sourceType: ImgixSourceType.AmazonS3,
        fields: [
            {
                nodeType: "ImagesJson",
                rawURLKey: "url",
                fieldName: "image"
            }
        ],
        disableIxlibParam: true
    }
}

We intentionally set domain to be empty because we want to keep the full URL of our imgix images in our components.

The README.md states:

If url is: an imgix URL, domain and secureURLToken are likely not required. If domain is set, the source must be a Web Proxy Source. If "secure URLs" are enabled on the imgix source, or the source is a Web Proxy Source, secureURLToken is required.

We tried removing the domain parameter from the config entirely as the docs suggest that it's optional, but we receive the same error.

What can be done about this? Thank you in advance!

~/gatsby-project
cfaruki@website[imgix-gatsby !x] yarn start
yarn run v1.22.17
$ run-p start:**
$ yarn develop
$ yarn clean && gatsby develop --verbose
$ rimraf .cache public
verbose set gatsby_log_level: "verbose"
verbose set gatsby_executing_command: "develop"
verbose loading local command from: /Users/cfaruki/gatsby-project/node_modules/gatsby/dist/commands/develop.js
verbose running command: develop

verbose Transition to "initializing"
warn The following flag(s) found in your gatsby-config.js are not supported in your environment and will have no effect:
- DEV_SSR
info The following flags are active:
- FAST_DEV · Enable all experiments aimed at improving develop server start time.
- PRESERVE_FILE_DOWNLOAD_CACHE · (Umbrella Issue (https://gatsby.dev/cache-clearing-feedback)) · Don't delete the downloaded files cache when changing
gatsby-node.js & gatsby-config.js files.

There is one other flag available that you might be interested in:
- PARALLEL_SOURCING · EXPERIMENTAL · (Umbrella Issue (https://gatsby.dev/parallel-sourcing-feedback)) · Run all source plugins at the same time instead of
serially. For sites with multiple source plugins, this can speedup sourcing and transforming considerably.

success open and validate gatsby-configs, load plugins - 1.138s

 ERROR

(node:97162) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./public/" in the "exports" field module resolution of the package at
/Users/cfaruki/gatsby-project/node_modules/extract-files/package.json.
Update this package.json to use a subpath pattern like "./public/*".
(Use `node --trace-deprecation ...` to show where the warning was created)

info [@imgix/gatsby] Loaded plugin.
success onPreInit - 0.014s
success initialize cache - 0.076s
success copy gatsby files - 0.069s
verbose Attaching functions to development server
success Compiling Gatsby Functions - 0.240s
success onPreBootstrap - 0.252s
verbose Creating 5 worker
verbose Transition to "initializingData"
success createSchemaCustomization - 1.109s
verbose Transition to "initializingData" > "sourcingNodes"
verbose Checking for deleted pages
verbose Deleted 0 pages
verbose Found 0 changed pages
success Checking for changed pages - 0.003s
success source and transform nodes - 4.378s
verbose Transition to "initializingData" > "buildingSchema"
success building schema - 0.508s
verbose Transition to "initializingData" > "creatingPages"
success createPages - 0.135s
success createPagesStatefully - 0.158s
info Total nodes: 1069, SitePage nodes: 80 (use --verbose for breakdown)
verbose Number of node types: 10. Nodes per type: Directory: 38, File: 482, GraphQLSource: 1, ImageSharp: 272, Instagram: 6, MarkdownRemark: 158, Site: 1,
SiteBuildMetadata: 1, SitePage: 80, SitePlugin: 56
verbose Checking for deleted pages
verbose Deleted 0 pages
verbose Found 80 changed pages
success Checking for changed pages - 0.001s
verbose Transition to "initializingData" > "writingOutRedirects"
success write out redirect data - 0.003s
verbose Transition to "initializingData" > "done"
verbose Transition to "runningPostBootstrap"
success Build manifest and related icons - 0.118s
success onPostBootstrap - 0.121s
info bootstrap finished - 9.926s
verbose Transition to "runningQueries"
success onPreExtractQueries - 0.002s
success extract queries from components - 1.131s
verbose Transition to "runningQueries" > "waitingPendingQueries"
verbose Transition to "runningQueries" > "writingRequires"
success write out requires - 0.124s
verbose Transition to "runningQueries" > "calculatingDirtyQueries"
verbose Transition to "runningQueries" > "runningStaticQueries"
success run static queries - 0.282s - 10/10 35.51/s
verbose Transition to "runningQueries" > "runningPageQueries"
success run page queries - 0.014s - 2/2 141.85/s
verbose Transition to "runningQueries" > "waitingForJobs"
verbose Transition to "runningQueries" > "done"
verbose Transition to "startingDevServers"
verbose Attaching functions to development server

 ERROR

Error when resolving URL value for node type MarkdownRemarkFrontmatterMyCustomNode. This probably means that the getURL function in
gatsby-config.js is incorrectly set. Please read this project's README for detailed instructions on how to set this correctly.

Two things:

1. The custom field configuration docs are not intuitive. Took me a couple hours of kicking the tires to figure out how it works.
2. The above error only occurs at dev runtime. But there's no meaningful output. For projects at scale, this makes it frustratingly difficult to isolate the root cause of the graphql query failure. You should be able to see what part of the query failed.

This is a potential feature for this library. If you want to see us build this, please indicate your support by reacting to this with a 👍

User Story

I have an image stored in image manager that I want to render.

Description

This would provide a Gatsby source that would allow developers to display any images available in imgix's new image manager product.

For example, in a Gatsby page query:

{
	allImgixImages {
		name
		url(imgixParams: {auto: ["compress"]}) { url }
		owner
		modifiedAt
	}
}

Before you submit:

• Please search through the existing issues (both open AND closed) to see if your question has already been discussed. Github issue search can be used for this: https://github.com/imgix/gatsby/issues?utf8=%E2%9C%93&q=is%3Aissue

Question
Is it possible to use images from multiple imgix sources within the same Gatsby project? E.g. images from a CMS (through a Web Proxy Source) and images from a S3 bucket (through a Amazon S3 Source)?

Thanks for any hints.

npm WARN deprecated [email protected]: gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.

https://github.com/imgix/gatsby/blob/main/package.json#L79

Before you submit:

• Please read the contributing guidelines
• Please search through the existing issues (both open AND closed) to see if your question has already been discussed. Github issue search can be used for this: https://github.com/imgix/gatsby/issues?utf8=%E2%9C%93&q=is%3Aissue

Question
I have added a field for image URL using Gatsby createResolvers API.

// gatsby-node.js
exports.createResolvers = ({ createResolvers }) => {
  createResolvers({
    Post: {
      imageUrl: {
        type: 'String!',
        resolve(source) {
          const getImageUrl = (text) => {
            // The process of extracting the image URL from text
          }
          return getImageUrl(source.text)
        },
      },
    },
  })
}

I can retrieve the value of the field using the following query:

export const query = graphql`
  {
    allPost {
      nodes {
        text # Text containing the image URL
        imageUrl # https://...
      }
    }
  }
`

I have configured the field, but when I execute the query, an error occurs.

// gatsby-config.js
module.exports = {
  //...
  plugins: [
    //... other plugins
    {
      resolve: `@imgix/gatsby`,
      options: {
        defaultImgixParams: { auto: ['compress', 'format'] },
        fields: [
          {
            nodeType: 'Post',
            fieldName: 'imgixImage',
            rawURLKey: 'imageUrl',
          },
        ],
      },
    },
  ],
};

Error:

Error when resolving URL value for node type Post. This probably means that the rawURLKey function in gatsby-config.js is incorrectly set. Please read this project's README for detailed instructions on how to set this correctly.

Is it possible to use customized GraphQL fields?

Before you submit:

• Please read the contributing guidelines
• Please search through the existing issues (both open AND closed) to see if your issue has been discussed before. Github issue search can be used for this: https://github.com/imgix/vue/issues?utf8=%E2%9C%93&q=is%3Aissue
• Please ensure the problem has been isolated and reduced. This link explains more: http://css-tricks.com/6263-reduced-test-cases/

Describe the bug
After upgrading to Gatsby 5, which has a dependency on graphql 16, the plugin fails to load due to a dependency on version 15.

For reference, error when using v16 of graphql is TypeError: Class constructor GraphQLNonNull cannot be invoked without 'new'.

I'll try and work on this as a PR, but just to raise it incase there's already a reason it's not upto date.

To Reproduce
Install Gatsby v5, with the @imgix/gatsby plugin configured, fails during build with error above

Expected behaviour
Build passes as expected

This is a potential feature for this library. If you want to see us build this, please indicate your support by reacting to this with a 👍

User Story

I have an image stored locally that I want to upload to image-manager and render.

Description

This would offload the processing of images stored on a developer's machine to imgix. This results in much lower build times and also allows the developer to take advantage of imgix's larger suite of transformations, better responsiveness, and best-in-class CDN.

1. The disableIxlibParam setting doesn't work. When it is not set (or set to false), the URLs generated look like this: https://domain.net/image.jpg?ixlib=gatsbySourceUrl-2.0.2. When it is set to true, the URLs look like this: https://domain.net/image.jpg?ixlib=js-3.5.1.

I expect that disableIxlibParam should disable any variation of ixlib param.

2. Another question is why something that's claimed to be a diagnostic mechanism is enabled by default? Can we switch it off by default? Imagine that a security vulnerability is found in a specific version of a plugin. Exposing the version of the library in the URLs of every image can expedite identification of many vulnerable sites that use this specific version.

3. The documentation (README.md) has some discrepancies: sometimes it says that do disable the ixlib param, one needs to set includeLibraryParam to false, other times it says that in order to disable it, disableIxlibParam should be set to true. None of this settings (and their combination) allows to disable the version of the library entirely.

Information:

• imgix/gatsby version: 2.0.3
• browser version: Chrome 104

Hello,

GraphQL does not allow hyphenated names. The property fpZ just get past to the generated URL and Imgix does not seem to know what to do with it (fpZ=1 instead of fp-z=1).

I'm using the version 1.6.0.

Thanks.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): replace dependency @google/semantic-release-replace-plugin with semantic-release-replace-plugin
• fix(deps): replace dependency read-pkg-up with read-package-up ^11.0.0
• chore(dev-deps): update dependency @types/common-tags to v1.8.4
• chore(dev-deps): update dependency @types/is-base64 to v1.1.3
• chore(dev-deps): update dependency @types/lodash.get to v4.4.9
• chore(dev-deps): update dependency @types/node-fetch to v2.6.11
• chore(deps): update actions/add-to-project action to v0.6.1
• chore(deps): update node orb to v5.2.0
• chore(dev-deps): update dependency @google/semantic-release-replace-plugin to v1.2.7
• chore(dev-deps): update dependency eslint to v8.57.0
• chore(dev-deps): update gatsby monorepo (gatsby, gatsby-plugin-image, gatsby-plugin-sharp, gatsby-source-filesystem)
• chore(dev-deps): update react monorepo to v18.3.1 (react, react-dom)
• fix(deps): update dependency ramda to ^0.30.0 (ramda, @types/ramda)
• chore(deps): update actions/add-to-project action to v1
• chore(deps): update actions/checkout action to v4
• chore(deps): update dependency chalk to v5
• chore(deps): update wagoid/commitlint-github-action action to v6
• chore(dev-deps): update dependency conventional-changelog-conventionalcommits to v8
• chore(dev-deps): update dependency eslint to v9
• chore(dev-deps): update dependency marked to v12
• chore(dev-deps): update dependency prettier to v3
• chore(dev-deps): update dependency read-pkg to v9
• chore(dev-deps): update dependency semantic-release to v23
• chore(dev-deps): update dependency typescript to v5
• chore(dev-deps): update jest monorepo to v29 (major) (@types/jest, jest, ts-jest)
• fix(deps): update dependency camel-case to v5
• fix(deps): update dependency read-pkg-up to v11
• chore(deps): lock file maintenance
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): replace dependency babel-eslint with @babel/eslint-parser 7.11.0
• chore(deps): pin dependencies (gatsby-image, graphql)
• chore(deps): update browser-tools orb to v1.4.8
• chore(dev-deps): update dependency @types/jsuri to v1.3.34
• chore(deps): update dependency webpack to v5.91.0
• chore(dev-deps): update babel monorepo to v7.24.6 (@babel/core, @babel/eslint-parser)
• chore(dev-deps): update dependency prettier to v2.8.8
• chore(dev-deps): update dependency typescript to v4.9.5
• fix(deps): update dependency @imgix/js-core to v3.8.0
• fix(deps): update dependency node-fetch to v3
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(dev-deps): update dependency msync to v2.7.1

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

This is a potential feature for this library. If you want to see us build this, please indicate your support by reacting to this with a 👍

User Story

I want to display imgix images with gatsby-image's lazy-load and blur-up features.

How do you handle a source that may or may not have a value for a field?

I have content sourced from a Google Spreadsheet, this spreadsheet has a column called img with a URL to a publicly accessible image. This column might be null or have a string.

To debug the setup I configured the plugin without a defined rawURLKey and produced this error:

Error when resolving URL value for node type googleReviewsSheet. This probably means that the rawURLKey function
in gatsby-config.js is incorrectly set. Please read this project's README for detailed instructions on how to
set this correctly.

Potential images were found at these paths:
 - img
   Set following configuration options:
     rawURLKey: 'img'
     URLPrefix: 'https:'

When configuring the plugin with the suggestions and settings I think are correct, like this:

{
  resolve: `@imgix/gatsby`,
  options: {
    domain: "example.imgix.net",
    secureURLToken: "abc123",
    sourceType: ImgixSourceType.WebProxy,
    defaultImgixParams: { auto: "format,compress" },
    fields: [
      {
        nodeType: "googleReviewsSheet",
        fieldName: "imgixImage",
        rawURLKey: "img",
        URLPrefix: "https:",
      },
    ],
  },
},

The following error is thrown and the build or develop task crashes.

Error when resolving URL value for node type googleReviewsSheet. This probably means that the rawURLKey function 
in gatsby-config.js is incorrectly set. Please read this project's README for detailed instructions on how to 
set this correctly.

Everything seems to work fine if the source has a string populated for every record.

Fragment partial that for getting image data:

{
  ...
  id
  verifiedPurchase
  rating
  imgixImage {
    gatsbyImageData(
      imgixParams: {
        fit: "crop"
        crop: "faces,entropy"
        fill: "blur"
        w: 280
        h: 200
      }
      width: 282
      height: 200
      placeholder: DOMINANT_COLOR
    )
  }
}

Pre version 2 it seemed possible to work around the error by using something likegetURL: (node) => node.img || 'https://example.com/file.jpg'

Hi,

When I use @imgix/gatsby with gatsby-source-shopify I've been getting these warnings the entire time, although everything still builds and works as expected.

warn Plugin `@imgix/gatsby` has customized the GraphQL type `ShopifyCollectionImage`, which has already been defined by the plugin `gatsby-source-shopify`. This could potentially cause conflicts.
warn Plugin `@imgix/gatsby` has customized the GraphQL type `ShopifyProductImage`, which has already been defined by the plugin `gatsby-source-shopify`. This could potentially cause conflicts.
warn Plugin `@imgix/gatsby` has customized the GraphQL type `ShopifyProductVariantImage`, which has already been defined by the plugin `gatsby-source-shopify`. This could potentially cause conflicts.
warn Plugin `@imgix/gatsby` has customized the GraphQL type `ShopifyProductFeaturedImage`, which has already been defined by the plugin `gatsby-source-shopify`. This could potentially cause conflicts.

Just wondering what's causing them and if it's something to worry about?

This is a potential feature for this library. If you want to see us build this, please indicate your support by reacting to this with a 👍

User Story

I want to have my imgix parameters in my Gatsby/GraphQL query be strongly-typed

Description

This would ensure that imgix parameters passed to any transformations in a GraphQL query would be strongly typed, to reduce errors, typos, and improve developer experience.

For example:

{
	allWordpressPosts {
		heroImage # The original image url
		imgixHeroImage( # The transformed hero image, served by imgix
			imgixParams: {
				auto: ["format", "compress", "not-a-parameter"], # this would throw an error as "not-a-parameter" is, well, not a valid paremeter.
				q: 50,
				focus: 10 # this would throw an error because focus is not an imgix parameter.
			}
		) {
			url
		}
}

I noticed the image URLs returned by the getGatsbyImageData hook are unsigned, causing issues when trying to render images from an Imgix source that has Secure URLs enabled. For example, attempting to pass the following in the image prop to GatsbyImage fails with a 403 error:

getGatsbyImageData({
  aspectRatio: 16/9,
  layout: "fullWidth",
  src: someImgixImageURL,
})

If secure URLs are disabled in the Imgix source, images are rendered without a hiccup. Additionally, the secureURLToken is configured correctly - images rendered with different integration methods throughout the site are being signed properly.

Is this a limitation of getGatsbyImageData (because it would otherwise expose the secure URL token to the browser) or is there something I'm missing?

Thanks in advance!

v2.0

All types are being exported when using the frontend hook. Bundlephobia is unable to check size https://bundlephobia.com/package/@imgix/gatsby

Steps to reproduce

1. import { getGatsbyImageData } from "@imgix/gatsby"
2. View bundle size

I wasn't sure where to post this bug which seems to be OS and framework independent FYI

Chrome 88 and above is serving images with auto=format in their original format. Not sure if this is related to the Safari bug mentioned in your documentation Here. Originally I thought this was a Gatsby v3 issue, then a DatoCMS issue but, now I believe it's a Chrome (Maybe Webkit in general) issue.

To Reproduce

1. Go to URL
2. Right-click on the image under the heading DatoCMS
3. Save the image.

Test Repo - I created this test repo when I thought this was a CMS issue hence Image from Contentful and DatoCMS.

Here is a list of other sites I've found with the same behavior:

• Gatsby Snipcart Demo
• Hugo portfolio
• Nextjs events

Expected behavior
Saving an image from a site should produce WebP if the platform supports it.

Information:
Most of my testing can be found here gatsby-source-datocms issue #164 and here Gatsby issue #31644. (sorry for the redundancy)

This is a potential feature for this library. If you want to see us build this, please indicate your support by reacting to this with a 👍

User Story

I have an image provided from a Gatsby source that I’d like to transform through imgix and display using gatsby-image.

Description

This is very similar to #3, but extends that feature to support gatsby-image, including lazy-loading, and blur-up.

This is a potential feature for this library. If you want to see us build this, please indicate your support by reacting to this with a 👍

User Story

I have an image provided from a Gatsby source that I’d like to transform through imgix.

Description

This would allow developers to transform images that are provided from various Gatsby sources, such as Wordpress, via imgix. This prevents the image from needing to be downloaded to the developer's computer for processing. The image would also be served with our best-in-class global CDN.

This is a potential feature for this library. If you want to see us build this, please indicate your support by reacting to this with a 👍

User Story

I have an image stored in an imgix source (e.g. Amazon S3/GCP) that I want to display using gatsby-image.

Description

This would allow developers that already have an imgix source configured, and with images already available from those sources, to display those images with gatsby-image.

It doesn't seem like processing images within markdown is supported with this plugin, similar to something like what gatsby-remark-images does.

It seems like processing image links in the frontmatter is not a problem as shown here, but I'm wondering if there is any plan to support images within the markdown body itself.

Hi there

GraphQL does not allow hyphenated names. There are properties fpY, fpX but these just get passed to the generated URL and Imgix does not seem to know what to do with them. What am I doing wrong?

Why are fpX and fpY integers, shouldn't they be floats?

Thanks,
Richard