Skip to content

Commit

Permalink
Merge pull request #32 from flotiq/gatsby-v4-ready
Browse files Browse the repository at this point in the history 
update image manipulation for gatsby v4 and newest gatsby-plugin-image
  • Loading branch information
@trzcina
trzcina authored Nov 24, 2021
2 parents b6c8851 + 45a029b commit 835d23a
Show file tree
Hide file tree
Showing 7 changed files with 1,210 additions and 1,951 deletions.
56 changes: 28 additions & 28 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ Get up and running in minutes with a starter project:

Add Gatsby Source Flotiq plugin to your project:
```bash
npm install --save gatsby-source-flotiq
npm install --save gatsby-source-flotiq gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp
```

Enable and configure plugin:
Expand All @@ -40,7 +40,7 @@ module.exports = {
// ...
plugins: [
{
resolve: "gatsby-source-flotiq",
resolve: 'gatsby-source-flotiq',
options: {
baseUrl: process.env.GATSBY_FLOTIQ_BASE_URL,
authToken: process.env.GATSBY_FLOTIQ_API_KEY,
Expand All @@ -54,6 +54,9 @@ module.exports = {
downloadMediaFile: false //optional, should media files be cached and be available for gatsby-image and gatsby-sharp
},
},
'gatsby-plugin-image',
'gatsby-plugin-sharp',
'gatsby-transformer-sharp'
],
// ...
}
Expand Down Expand Up @@ -90,48 +93,39 @@ query MyQuery {
allBlogpost {
nodes {
headerImage {
fixed(height: 1000, width: 1000) {
aspectRatio
height
width
src
srcSet
}
fluid(maxWidth: 1000) {
src
srcSet
aspectRatio
originalName
}
gatsbyImageData(height: 1000, width: 1000)
extension
url
}
}
}
}
```

```
import Img from "gatsby-image";
import { GatsbyImage, getImage } from "gatsby-plugin-image"
//...
const post = this.props.data.blogpost;
const image = getImage(post.headerImage[0])
//...
<Img fluid={post.headerImage[0].fluid}/>
<Img fixed={post.headerImage[0].fixed}/>
{post.headerImage[0].extension !== 'svg' ?
(<GatsbyImage image={image} alt="post image" />) :
(<img src={`https://api.flotiq.com${post.headerImage[0].url}`} alt="post image" />)
}
```
You need a fallback for svg images because gatsby-plugin-image do not display them correctly.

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):
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):
```
query MyQuery {
allBlogpost {
nodes {
headerImage {
extension
url
localFile {
childImageSharp {
fixed(height: 1000, width: 1000) {
...GatsbyImageSharpFixed
}
fluid(maxWidth: 1000) {
...GatsbyImageSharpFluid
}
gatsbyImageData(width: 1000, height: 1000)
}
}
}
Expand All @@ -141,14 +135,20 @@ query MyQuery {
```

```
import Img from "gatsby-image";
import { GatsbyImage, getImage } from "gatsby-plugin-image"
//...
const post = this.props.data.blogpost;
//...
<Img fluid={post.headerImage[0].localFile.childImageSharp.fluid}/>
<Img fixed={post.headerImage[0].localFile.childImageSharp.fixed}/>
{post.headerImage[0].localFile.extension !== 'svg' ?
(<GatsbyImage image={getImage(post.headerImage[0].localFile)} alt="post image" />) :
(<img src={`https://api.flotiq.com${post.headerImage[0].localFile.url}`} alt="post image" />)
}
```

You need a fallback for svg images because gatsby-plugin-image do not display them correctly.

You can learn more about [Gatsby Image plugin here](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/).

## Collaboration

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).
Expand Down
155 changes: 38 additions & 117 deletions gatsby-node.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
const fetch = require('node-fetch');
const {createContentDigest} = require(`gatsby-core-utils`);
const { getGatsbyImageResolver } = require("gatsby-plugin-image/graphql-utils");
const { generateImageData, getLowResolutionImageURL } = require("gatsby-plugin-image");
const {getContentTypes, getDeletedObjects, getContentObjects} = require('./src/data-loader');
const {capitalize} = require('./src/utils')

Expand Down Expand Up @@ -209,6 +211,12 @@ exports.createResolvers = ({
}
}
})
} else {
createResolvers({
_media: {
gatsbyImageData: getGatsbyImageResolver(resolveGatsbyImageData),
},
})
}
}

Expand Down Expand Up @@ -245,130 +253,13 @@ const createTypeDefs = (contentTypesDefinitions, schema) => {
typeDefs.push(schema.buildObjectType(additionalDef));
}
});
if (ctd.name === '_media' && !downloadMediaFileGlobal) {
tmpDef.fields.fixed = {
type: 'FlotiqImageFixed',
args: {
width: 'Int',
height: 'Int'
},
resolve(source, args) {
let width = 0;
let height = 0;
if (args.width) {
width = args.width;
}
if (args.height) {
height = args.height
}
return {
aspectRatio: (args.width && args.height) ? (args.width / args.height) : (source.width / source.height),
height: args.height ? args.height : source.height,
originalName: source.id + '.' + source.extension,
src: apiUrl + source.url.replace('0x0', width + 'x' + height),
srcSet: createSrcSetFixed(apiUrl, source, args),
width: args.width ? args.width : source.width,
}
}
};
tmpDef.fields.fluid = {
type: 'FlotiqImageFluid',
args: {
maxWidth: 'Int',
sizes: 'String'
},
resolve(source, args) {
return {
aspectRatio: source.width / source.height,
originalName: source.id + '.' + source.extension,
src: apiUrl + (args.maxWidth ? source.url.replace('0x0', args.maxWidth + 'x0') : source.url),
srcSet: createSrcSetFluid(apiUrl, source, args),
sizes: args.sizes ? args.sizes : '(max-width: ' + (args.maxWidth ? args.maxWidth : source.width) + 'px) 100vw, ' + (args.maxWidth ? args.maxWidth : source.width) + 'px'
}
}
};
}

tmpDef.fields.flotiqInternal = `FlotiqInternal!`;
typeDefs.push(schema.buildObjectType(tmpDef));
});
typeDefinitionsDeferred.resolve(typeDefs);
};

const createSrcSetFluid = (apiUrl, source, args) => {
let array = [];
if (!args.maxWidth) {
if (source.width >= 200) {
array.push(apiUrl + '/image/200x0/' + source.id + '.' + source.extension + ' 200w');
if (source.width >= 400) {
array.push(apiUrl + '/image/400x0/' + source.id + '.' + source.extension + ' 400w');
if (source.width >= 800) {
array.push(apiUrl + '/image/800x0/' + source.id + '.' + source.extension + ' 800w');
if (source.width >= 1200) {
array.push(apiUrl + '/image/1200x0/' + source.id + '.' + source.extension + ' 1200w');
if (source.width >= 1600) {
array.push(apiUrl + '/image/1600x0/' + source.id + '.' + source.extension + ' 1600w');
if (source.width >= 1920) {
array.push(apiUrl + '/image/1920x0/' + source.id + '.' + source.extension + ' 1920w');
}
}
}
}
}
}
} else {
if (args.maxWidth <= source.width) {
let per25 = args.maxWidth / 4;
let per50 = args.maxWidth / 2;
let per150 = args.maxWidth * 1.5;
let per200 = args.maxWidth * 2;
array.push(apiUrl + '/image/' + Math.floor(per25) + 'x0/' + source.id + '.' + source.extension + ' ' + per25 + 'w');
array.push(apiUrl + '/image/' + Math.floor(per50) + 'x0/' + source.id + '.' + source.extension + ' ' + per50 + 'w');
array.push(apiUrl + '/image/' + args.maxWidth + 'x0/' + source.id + '.' + source.extension + ' ' + args.maxWidth + 'w');
if (per150 <= source.width) {
array.push(apiUrl + '/image/' + Math.floor(per150) + 'x0/' + source.id + '.' + source.extension + ' ' + per150 + 'w');
if (per200 <= source.width) {
array.push(apiUrl + '/image/' + Math.floor(per200) + 'x0/' + source.id + '.' + source.extension + ' ' + per200 + 'w');
}
}
} else {
let per25 = args.maxWidth / 4;
if (per25 < source.width) {
array.push(apiUrl + '/image/' + Math.floor(per25) + 'x0/' + source.id + '.' + source.extension + ' ' + per25 + 'w');
let per50 = args.maxWidth / 2;
if (per50 < source.width) {
array.push(apiUrl + '/image/' + Math.floor(per50) + 'x0/' + source.id + '.' + source.extension + ' ' + per50 + 'w');
}
}

array.push(apiUrl + '/image/' + source.width + 'x0/' + source.id + '.' + source.extension + ' ' + source.width + 'w');
}
}
return array.join(',\n')
}

const createSrcSetFixed = (apiUrl, source, args) => {
let width = 0;
let height = 0;
if (args.width) {
width = args.width;
}
if (args.height) {
height = args.height
}
let array = [
apiUrl + '/image/' + width + 'x' + height + '/' + source.id + '.' + source.extension + ' 1x'
];
if (width * 1.5 <= source.width && height * 1.5 <= source.height) {
array.push(apiUrl + '/image/' + width * 1.5 + 'x' + height * 1.5 + '/' + source.id + '.' + source.extension + ' 1.5x');
if (width * 2 <= source.width && height * 2 <= source.height) {
array.push(apiUrl + '/image/' + width * 2 + 'x' + height * 2 + '/' + source.id + '.' + source.extension + ' 2x');
}
}

return array.join(',\n')
}


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

Expand Down Expand Up @@ -448,3 +339,33 @@ const getType = (propertyConfig, required, property, ctdName) => {
return 'FlotiqBlock'
}
};

const generateImageSource = (baseURL, width = 0, height = 0, format, fit, options) => {
const src = `https://api.flotiq.com/image/${width || options.width}x${height || options.height}/${baseURL}.${format}`
return {src, width, height, format}
}


const resolveGatsbyImageData = async (image, options) => {
const filename = image.id
const sourceMetadata = {
width: image.width,
height: image.height,
format: image.extension
}
const imageDataArgs = {
...options,
pluginName: `gatsby-source-flotiq`,
sourceMetadata,
filename,
placeholderURL: '',
generateImageSource,
formats: [image.extension],
options: {...options, extension: image.extension},
}
// if(options.placeholder === "blurred") {
// const lowResImage = getLowResolutionImageURL(imageDataArgs)
// imageDataArgs.placeholderURL = await getBase64Image(lowResImage)
// }
return generateImageData(imageDataArgs)
}
Loading

0 comments on commit 835d23a

Please sign in to comment.