Skip to content

Commit 835d23a

Browse files
trzcinatrzcina
authored
Merge pull request #32 from flotiq/gatsby-v4-ready
update image manipulation for gatsby v4 and newest gatsby-plugin-image
2 parents b6c8851 + 45a029b commit 835d23a

File tree

7 files changed

+1210
-1951
lines changed

7 files changed

+1210
-1951
lines changed

‎README.md

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Get up and running in minutes with a starter project:
2828

2929
Add Gatsby Source Flotiq plugin to your project:
3030
```bash
31-
npm install --save gatsby-source-flotiq
31+
npm install --save gatsby-source-flotiq gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp
3232
```
3333

3434
Enable and configure plugin:
@@ -40,7 +40,7 @@ module.exports = {
4040
// ...
4141
plugins: [
4242
{
43-
resolve: "gatsby-source-flotiq",
43+
resolve: 'gatsby-source-flotiq',
4444
options: {
4545
baseUrl: process.env.GATSBY_FLOTIQ_BASE_URL,
4646
authToken: process.env.GATSBY_FLOTIQ_API_KEY,
@@ -54,6 +54,9 @@ module.exports = {
5454
downloadMediaFile: false //optional, should media files be cached and be available for gatsby-image and gatsby-sharp
5555
},
5656
},
57+
'gatsby-plugin-image',
58+
'gatsby-plugin-sharp',
59+
'gatsby-transformer-sharp'
5760
],
5861
// ...
5962
}
@@ -90,48 +93,39 @@ query MyQuery {
9093
allBlogpost {
9194
nodes {
9295
headerImage {
93-
fixed(height: 1000, width: 1000) {
94-
aspectRatio
95-
height
96-
width
97-
src
98-
srcSet
99-
}
100-
fluid(maxWidth: 1000) {
101-
src
102-
srcSet
103-
aspectRatio
104-
originalName
105-
}
96+
gatsbyImageData(height: 1000, width: 1000)
97+
extension
98+
url
10699
}
107100
}
108101
}
109102
}
110103
```
111104

112105
```
113-
import Img from "gatsby-image";
106+
import { GatsbyImage, getImage } from "gatsby-plugin-image"
114107
//...
115108
const post = this.props.data.blogpost;
109+
const image = getImage(post.headerImage[0])
116110
//...
117-
<Img fluid={post.headerImage[0].fluid}/>
118-
<Img fixed={post.headerImage[0].fixed}/>
111+
{post.headerImage[0].extension !== 'svg' ?
112+
(<GatsbyImage image={image} alt="post image" />) :
113+
(<img src={`https://api.flotiq.com${post.headerImage[0].url}`} alt="post image" />)
114+
}
119115
```
116+
You need a fallback for svg images because gatsby-plugin-image do not display them correctly.
120117

121-
If you are using `downloadMediaFile` as `true`, you can use full potential of gatsby-image and gatsby-image-sharp. You can use them like that (assuming you have blogpost Content Type with headerImage media property):
118+
If you are using `downloadMediaFile` as `true`, you can use full potential of gatsby-plugin-image and gatsby-image-sharp. You can use them like that (assuming you have blogpost Content Type with headerImage media property):
122119
```
123120
query MyQuery {
124121
allBlogpost {
125122
nodes {
126123
headerImage {
124+
extension
125+
url
127126
localFile {
128127
childImageSharp {
129-
fixed(height: 1000, width: 1000) {
130-
...GatsbyImageSharpFixed
131-
}
132-
fluid(maxWidth: 1000) {
133-
...GatsbyImageSharpFluid
134-
}
128+
gatsbyImageData(width: 1000, height: 1000)
135129
}
136130
}
137131
}
@@ -141,14 +135,20 @@ query MyQuery {
141135
```
142136

143137
```
144-
import Img from "gatsby-image";
138+
import { GatsbyImage, getImage } from "gatsby-plugin-image"
145139
//...
146140
const post = this.props.data.blogpost;
147141
//...
148-
<Img fluid={post.headerImage[0].localFile.childImageSharp.fluid}/>
149-
<Img fixed={post.headerImage[0].localFile.childImageSharp.fixed}/>
142+
{post.headerImage[0].localFile.extension !== 'svg' ?
143+
(<GatsbyImage image={getImage(post.headerImage[0].localFile)} alt="post image" />) :
144+
(<img src={`https://api.flotiq.com${post.headerImage[0].localFile.url}`} alt="post image" />)
145+
}
150146
```
151147

148+
You need a fallback for svg images because gatsby-plugin-image do not display them correctly.
149+
150+
You can learn more about [Gatsby Image plugin here](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/).
151+
152152
## Collaboration
153153

154154
If you wish to talk with us about this project, feel free to hop on [![Discord Chat](https://img.shields.io/discord/682699728454025410.svg)](https://discord.gg/FwXcHnX).

‎gatsby-node.js

Lines changed: 38 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
const fetch = require('node-fetch');
22
const {createContentDigest} = require(`gatsby-core-utils`);
3+
const { getGatsbyImageResolver } = require("gatsby-plugin-image/graphql-utils");
4+
const { generateImageData, getLowResolutionImageURL } = require("gatsby-plugin-image");
35
const {getContentTypes, getDeletedObjects, getContentObjects} = require('./src/data-loader');
46
const {capitalize} = require('./src/utils')
57

@@ -209,6 +211,12 @@ exports.createResolvers = ({
209211
}
210212
}
211213
})
214+
} else {
215+
createResolvers({
216+
_media: {
217+
gatsbyImageData: getGatsbyImageResolver(resolveGatsbyImageData),
218+
},
219+
})
212220
}
213221
}
214222

@@ -245,130 +253,13 @@ const createTypeDefs = (contentTypesDefinitions, schema) => {
245253
typeDefs.push(schema.buildObjectType(additionalDef));
246254
}
247255
});
248-
if (ctd.name === '_media' && !downloadMediaFileGlobal) {
249-
tmpDef.fields.fixed = {
250-
type: 'FlotiqImageFixed',
251-
args: {
252-
width: 'Int',
253-
height: 'Int'
254-
},
255-
resolve(source, args) {
256-
let width = 0;
257-
let height = 0;
258-
if (args.width) {
259-
width = args.width;
260-
}
261-
if (args.height) {
262-
height = args.height
263-
}
264-
return {
265-
aspectRatio: (args.width && args.height) ? (args.width / args.height) : (source.width / source.height),
266-
height: args.height ? args.height : source.height,
267-
originalName: source.id + '.' + source.extension,
268-
src: apiUrl + source.url.replace('0x0', width + 'x' + height),
269-
srcSet: createSrcSetFixed(apiUrl, source, args),
270-
width: args.width ? args.width : source.width,
271-
}
272-
}
273-
};
274-
tmpDef.fields.fluid = {
275-
type: 'FlotiqImageFluid',
276-
args: {
277-
maxWidth: 'Int',
278-
sizes: 'String'
279-
},
280-
resolve(source, args) {
281-
return {
282-
aspectRatio: source.width / source.height,
283-
originalName: source.id + '.' + source.extension,
284-
src: apiUrl + (args.maxWidth ? source.url.replace('0x0', args.maxWidth + 'x0') : source.url),
285-
srcSet: createSrcSetFluid(apiUrl, source, args),
286-
sizes: args.sizes ? args.sizes : '(max-width: ' + (args.maxWidth ? args.maxWidth : source.width) + 'px) 100vw, ' + (args.maxWidth ? args.maxWidth : source.width) + 'px'
287-
}
288-
}
289-
};
290-
}
291256

292257
tmpDef.fields.flotiqInternal = `FlotiqInternal!`;
293258
typeDefs.push(schema.buildObjectType(tmpDef));
294259
});
295260
typeDefinitionsDeferred.resolve(typeDefs);
296261
};
297262

298-
const createSrcSetFluid = (apiUrl, source, args) => {
299-
let array = [];
300-
if (!args.maxWidth) {
301-
if (source.width >= 200) {
302-
array.push(apiUrl + '/image/200x0/' + source.id + '.' + source.extension + ' 200w');
303-
if (source.width >= 400) {
304-
array.push(apiUrl + '/image/400x0/' + source.id + '.' + source.extension + ' 400w');
305-
if (source.width >= 800) {
306-
array.push(apiUrl + '/image/800x0/' + source.id + '.' + source.extension + ' 800w');
307-
if (source.width >= 1200) {
308-
array.push(apiUrl + '/image/1200x0/' + source.id + '.' + source.extension + ' 1200w');
309-
if (source.width >= 1600) {
310-
array.push(apiUrl + '/image/1600x0/' + source.id + '.' + source.extension + ' 1600w');
311-
if (source.width >= 1920) {
312-
array.push(apiUrl + '/image/1920x0/' + source.id + '.' + source.extension + ' 1920w');
313-
}
314-
}
315-
}
316-
}
317-
}
318-
}
319-
} else {
320-
if (args.maxWidth <= source.width) {
321-
let per25 = args.maxWidth / 4;
322-
let per50 = args.maxWidth / 2;
323-
let per150 = args.maxWidth * 1.5;
324-
let per200 = args.maxWidth * 2;
325-
array.push(apiUrl + '/image/' + Math.floor(per25) + 'x0/' + source.id + '.' + source.extension + ' ' + per25 + 'w');
326-
array.push(apiUrl + '/image/' + Math.floor(per50) + 'x0/' + source.id + '.' + source.extension + ' ' + per50 + 'w');
327-
array.push(apiUrl + '/image/' + args.maxWidth + 'x0/' + source.id + '.' + source.extension + ' ' + args.maxWidth + 'w');
328-
if (per150 <= source.width) {
329-
array.push(apiUrl + '/image/' + Math.floor(per150) + 'x0/' + source.id + '.' + source.extension + ' ' + per150 + 'w');
330-
if (per200 <= source.width) {
331-
array.push(apiUrl + '/image/' + Math.floor(per200) + 'x0/' + source.id + '.' + source.extension + ' ' + per200 + 'w');
332-
}
333-
}
334-
} else {
335-
let per25 = args.maxWidth / 4;
336-
if (per25 < source.width) {
337-
array.push(apiUrl + '/image/' + Math.floor(per25) + 'x0/' + source.id + '.' + source.extension + ' ' + per25 + 'w');
338-
let per50 = args.maxWidth / 2;
339-
if (per50 < source.width) {
340-
array.push(apiUrl + '/image/' + Math.floor(per50) + 'x0/' + source.id + '.' + source.extension + ' ' + per50 + 'w');
341-
}
342-
}
343-
344-
array.push(apiUrl + '/image/' + source.width + 'x0/' + source.id + '.' + source.extension + ' ' + source.width + 'w');
345-
}
346-
}
347-
return array.join(',\n')
348-
}
349-
350-
const createSrcSetFixed = (apiUrl, source, args) => {
351-
let width = 0;
352-
let height = 0;
353-
if (args.width) {
354-
width = args.width;
355-
}
356-
if (args.height) {
357-
height = args.height
358-
}
359-
let array = [
360-
apiUrl + '/image/' + width + 'x' + height + '/' + source.id + '.' + source.extension + ' 1x'
361-
];
362-
if (width * 1.5 <= source.width && height * 1.5 <= source.height) {
363-
array.push(apiUrl + '/image/' + width * 1.5 + 'x' + height * 1.5 + '/' + source.id + '.' + source.extension + ' 1.5x');
364-
if (width * 2 <= source.width && height * 2 <= source.height) {
365-
array.push(apiUrl + '/image/' + width * 2 + 'x' + height * 2 + '/' + source.id + '.' + source.extension + ' 2x');
366-
}
367-
}
368-
369-
return array.join(',\n')
370-
}
371-
372263

373264
const getType = (propertyConfig, required, property, ctdName) => {
374265

@@ -448,3 +339,33 @@ const getType = (propertyConfig, required, property, ctdName) => {
448339
return 'FlotiqBlock'
449340
}
450341
};
342+
343+
const generateImageSource = (baseURL, width = 0, height = 0, format, fit, options) => {
344+
const src = `https://api.flotiq.com/image/${width || options.width}x${height || options.height}/${baseURL}.${format}`
345+
return {src, width, height, format}
346+
}
347+
348+
349+
const resolveGatsbyImageData = async (image, options) => {
350+
const filename = image.id
351+
const sourceMetadata = {
352+
width: image.width,
353+
height: image.height,
354+
format: image.extension
355+
}
356+
const imageDataArgs = {
357+
...options,
358+
pluginName: `gatsby-source-flotiq`,
359+
sourceMetadata,
360+
filename,
361+
placeholderURL: '',
362+
generateImageSource,
363+
formats: [image.extension],
364+
options: {...options, extension: image.extension},
365+
}
366+
// if(options.placeholder === "blurred") {
367+
// const lowResImage = getLowResolutionImageURL(imageDataArgs)
368+
// imageDataArgs.placeholderURL = await getBase64Image(lowResImage)
369+
// }
370+
return generateImageData(imageDataArgs)
371+
}

0 commit comments

Comments
 (0)