Gatsby: ImageSharp doesn't work for images in siteMetadata

[ilyabo]

I am trying to apply ImageSharp queries to images included as siteMetadata. For some reason, the nodes with the image path are then defined as String instead of File. Subsequently they aren't transformed to ImageSharp by gatsby-transformer-sharp:

GraphQL Error Field "photo" must not have a selection since type "String" has no subfields.

  file: src/pages/team.js

   1 | 
   2 |   query TeamQuery {
   3 | 
   4 |     site {
   5 |       siteMetadata {
   6 |         team {
   7 |           teamMembers {
   8 |             experience
   9 |             name
> 10 |             photo {
     |                   ^
  11 |               childImageSharp {
  12 |                resolutions(width: 160, height: 200, quality: 90) {
  13 |                  ...GatsbyImageSharpResolutions
  14 |                }
  15 |               }
  16 |             }
  17 |             position
  18 |             children {
  19 |               name
  20 |               year

I could make the same work for image fields defined in frontmatter (as discussed in #2054). But I couldn't make it work with siteMetadata.

Here the relevant part of my gatsby-config.js:

const yaml = require('js-yaml')
const fs = require('fs')
const loadYaml = (fname) =>
  yaml.safeLoad(fs.readFileSync(fname, 'utf8'))

module.exports = {
  siteMetadata: {
    ...siteMetadata,
    team: loadYaml('./data/team.yml'),
  },
  plugins: [
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages'
      }
    },
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',

And team.yml:

title: Team
teamMembers:
- name: Karin
  photo: img/karin.png
- name: Michael
  photo: img/michael-2.jpg

In order for the photo nodes to become File the relative path must be correct so that the file's existence can be confirmed (at least this appears to be the case for image fields in frontmatter). But I tried all the possibilities I could think of for the path and couldn't make it work.

Is there any fundamental difference between having image fields in frontmatter and injecting them as siteMetadata?

[KyleAMathews]

Yes — links to files are "relative" links. So Gatsby can figure out what a relative link from a markdown file is because it knows where the markdown file. But the site metadata doesn't "exist" anywhere (as of right now). It would be good to add support for this e.g. hard code inside Gatsby that siteMetadata lives at the root of the site.

I'd love a PR adding support for ^^^

Another option is querying team.yml directly with gatsby-transformer-yaml.

[MaralS]

@ilyabo I have the same issue when I created a new branch. I'm stuck :/
Did you find a solution ?

[ilyabo]

@MaralS Not really. I am just not using images in siteMetadata. Instead I add collections of images as fields within pages directly. If you are using Netlify CMS, that also requires this workaround to work.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!

[ooloth]

I keep running into this issue since it would be nice to define the default site image (for SEO purposes) in the same siteMetadata object as the rest of the site-wide metadata.

It would be good to add support for this e.g. hard code inside Gatsby that siteMetadata lives at the root of the site.

👆

Does anyone know how to do this? I'd be happy to create the PR if someone can summarize how to do it.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!