gatsby-image support for media/image fields

[rezof]

example

image has to be a Media type field.
NB: the field name does not matter.

{
    allStrapiPost {
      edges {
        node {
          id
          title
          content
          date
          image{
            childImageSharp{
              sizes {
                base64
                aspectRatio
                src
                srcSet
                sizes
                originalName
              }
            }
          }
        }
      }
    }
  }

[lauriejim]

Hello @rezof ! Thank you for your PR !

Can you add gatsby-source-filesystem in dependence please. I think you miss --save when you install it.

Can you also describe in your PR how use it please.

[waywardm]

would like to see this merged as soon as possible if it works.

[ch-world]

Tried the changes and as @lauriejim said the dependencie is missing. Also there seems to be a small bug. If no image is set in Strapi you receive a null pointer exception.

[rezof]

@lauriejim gatsby-source-filename added, i don't know how it skipped me.
@ch-world i am familiar with the bug, if the image is not given or the link provided is a 404 it causes a crash. i'll try to fix it this weekend.

[mariolopjr]

@rezof I manually included your fixes. I've always been able to see my media field(s), but am not able to use imageSharp ever.... I don't understand why? Whether it's one image or many. For example, I have allStrapiAffiliate with a logo media field (called logo). And well, it doesn't work. Is there something I am missing?

[ch-world]

@mariolopjr did you include gatsby-source-filesystem in your gatsby-config.js? I tried without imageSharp and noticed that fields like publicURL are missing as long as the plugin isn't configured.

[rezof]

@mariolopjr which files did you update ?
make sure you re-build if you updated the source files.

[mariolopjr]

@rezof The ones listed as changed in your PR. I ofc restarted gatsby develop after saving the changes.

@ch-world I thought it may have to do with gatsby-source-filesystem, however, what path should I point it to? I see files getting fetched from remote (this worked even when I created my own custom nodes in gatsby-node.js before this PR), but gatsby-source-filesystem places the downloaded files in .cache. How do I then load them? That's the part I am stuck tbh.

If I just place gatsby-source-filesystem by iteself in gatsby-config.js, it complains about not having a path. And thus, my conundrum. :)

Thanks to all for the help.

[ch-world]

@mariolopjr I copied the following from the plugin for cockpit cms

      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },

I think the issue is, that before loading the plugin, gatsby doesn't know about the file node type.

[rezof]

@mariolopjr you need to re-build the project (gatsby-source-strapi)

cd nodes_modules/gatsby-source-strapi
npm run build

[mariolopjr]

@ch-world I will try that, thanks!

EDIT: Now that I think about it, there were many occasions where childImageSharp complained saying it doesn't know/understand File. This may be the key!

@rezof WOW...what a dumb oversight on my part. It makes sense since I am pulling from github, that I would need to build the code...heh. I'll go ahead and try that.

//////bleeding edge

:)

[mariolopjr]

Adding the cockpit config for gatsby-source-filesystem fixed my FILE issue.

By the way, for the image array fields (multiple images per node), I have this code in gatsby-node.js (dunno how it would fit into the plugin). It allows me to use gatsby-image will an array of pictures from the api! See following example (config.siteMetadata.api points to the api URL of my strapi instance...):

exports.onCreateNode = async ({ node, actions, store, cache }) => {
  const { createNode, createNodeField } = actions

  if ( node.internal.type !== null && node.internal.type === 'StrapiProperty' ) {
    for ( const picture of node.pictures ) {
      const fileNode = await createRemoteFileNode({
        url: config.siteMetadata.api + picture.url,
        store,
        cache,
        createNode,
        createNodeId: id => `property-image-${picture.id}`,
      })

      if (fileNode) {
        picture.localFile___NODE = fileNode.id
      }
    }
  }
}

I also fixed the NULL error, by changing if() on line 21 in normalize.js to: if (field !== null && field.hasOwnProperty('mime'))

Worked for me! :)

[dwehrmann]

Adding the cockpit config for gatsby-source-filesystem fixed my FILE issue.

By the way, for the image array fields (multiple images per node), I have this code in gatsby-node.js (dunno how it would fit into the plugin). It allows me to use gatsby-image will an array of pictures from the api! See following example (config.siteMetadata.api points to the api URL of my strapi instance...):

exports.onCreateNode = async ({ node, actions, store, cache }) => {
  const { createNode, createNodeField } = actions

  if ( node.internal.type !== null && node.internal.type === 'StrapiProperty' ) {
    for ( const picture of node.pictures ) {
      const fileNode = await createRemoteFileNode({
        url: config.siteMetadata.api + picture.url,
        store,
        cache,
        createNode,
        createNodeId: id => `property-image-${picture.id}`,
      })

      if (fileNode) {
        picture.localFile___NODE = fileNode.id
      }
    }
  }
}

I also fixed the NULL error, by changing if() on line 21 in normalize.js to: if (field !== null && field.hasOwnProperty('mime'))

Worked for me! :)

@mariolopjr Could you explain / simplify your example? I'm trying to get gatsby-image to work with image array fields from strapi (multiple images) but could not make your example work for me. Any help would be greatly appreciated.