imgix / gatsby Goto Github PK
View Code? Open in Web Editor NEWA simple yet powerful integration between Gatsby and imgix
License: BSD 2-Clause "Simplified" License
A simple yet powerful integration between Gatsby and imgix
License: BSD 2-Clause "Simplified" License
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:
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.
It is important to note that this feature can only display images that are already on imgix or an imgix-compatible URL
In your example of URL Transform Function there is this code:
<ImgixGatsbyImage
// Must be an imgix URL
src="https://assets.imgix.net/amsterdam.jpg"
...
/>
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
.
src
of ImgixGatsbyImage
?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
Information:
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 increateTypes
looks like a node, but doesn't implement aNode
interface. It's likely that you should add theNode
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:
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:
fields: [
{
nodeType: "Instagram",
fieldName: "image_imgix",
getURL: (node) => node.image?.url
},
{
nodeType: "ShopifyProductImages",
fieldName: "imgix",
getURL: (node) => node.url
},
],
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:
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:
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:
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 馃憤
I have an image stored in image manager that I want to render.
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:
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.
Before you submit:
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:
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 馃憤
I have an image stored locally that I want to upload to image-manager and render.
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.
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.
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.
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:
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.
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
gatsby
, gatsby-plugin-image
, gatsby-plugin-sharp
, gatsby-source-filesystem
)react
, react-dom
)ramda
, @types/ramda
)@types/jest
, jest
, ts-jest
)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
gatsby-image
, graphql
)@babel/core
, @babel/eslint-parser
)These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.
.circleci/config.yml
node 5.0.3
browser-tools 1.4.0
.codesandbox/Dockerfile
.github/workflows/add-issue-to-project.yml
actions/add-to-project v0.4.0
.github/workflows/add-pr-to-project.yml
actions/add-to-project v0.4.0
.github/workflows/commitlint.yml
actions/checkout v3
wagoid/commitlint-github-action v4
package.json
@imgix/js-core 3.6.0
camel-case ^4.1.2
common-tags ^1.8.0
debug ^4.3.1
graphql-compose ^9.0.0
imgix-url-params ^11.15.0
joi ^17.6.0
jsuri ^1.3.1
lodash.get ^4.4.2
node-fetch ^2.6.0
ramda ^0.27.1
read-pkg-up ^9.0.0
@babel/core 7.19.6
@babel/eslint-parser 7.19.1
@google/semantic-release-replace-plugin 1.1.0
@semantic-release/changelog 6.0.3
@semantic-release/git 10.0.1
@types/common-tags 1.8.1
@types/is-base64 1.1.1
@types/jest 27.5.2
@types/jsuri 1.3.30
@types/lodash.get 4.4.7
@types/node-fetch 2.6.2
@types/ramda 0.27.44
babel-eslint 10.1.0
conventional-changelog-conventionalcommits 4.6.3
cross-env 7.0.3
eslint 8.45.0
gatsby 5.3.2
gatsby-image ^3.11.0
gatsby-plugin-image 3.3.2
gatsby-plugin-sharp 5.3.2
gatsby-source-filesystem 5.3.1
graphql ^16.6.0
graphql-tag 2.12.6
is-base64 1.1.0
jest 27.5.1
marked 4.3.0
msync 2.5.10
prettier 2.2.1
react 18.2.0
react-dom 18.2.0
read-pkg 5.2.0
semantic-release 19.0.5
ts-jest 27.1.5
typescript 4.7.4
webpack 5.74.0
yarn-run-all 3.1.1
gatsby ^2 || ^3 || ^4 || ^5
gatsby-image ^2 || ^3
gatsby-plugin-image ^1 || ^2 || ^3
chalk ^4
graphql ^16.6.0
graphql-compose ^9.0.0
webpack 5.74.0
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 馃憤
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 馃憤
I want to have my imgix parameters in my Gatsby/GraphQL query be strongly-typed
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
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
Test Repo - I created this test repo when I thought this was a CMS issue hence Image from Contentful and DatoCMS.
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 馃憤
I have an image provided from a Gatsby source that I鈥檇 like to transform through imgix and display using gatsby-image.
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 馃憤
I have an image provided from a Gatsby source that I鈥檇 like to transform through imgix.
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 馃憤
I have an image stored in an imgix source (e.g. Amazon S3/GCP) that I want to display using gatsby-image.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
馃枛 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 馃搳馃搱馃帀
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google 鉂わ笍 Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.