Question: How to use image processing for images uploaded via Netlify CMS?

[ilyabo]

With Netlify CMS one has the possibility to define fields and UI for editing these fields which are then saved to a YAML or JSON file and uploaded to Github. Then these data files can be loaded into a Gatsby app and added to siteMetadata. One can also include fields of type image and they will then be uploaded to Github through the CMS. For example, I can have teamMembers with the field "photo" of type image. With Gatsby I can then query for them like this:

export const pageQuery = graphql`
  query TeamQuery {
    site {
      siteMetadata {
        team {
          teamMembers {
            name
            photo
          }
        }
      }
    }
  }

However, I couldn't find how to use the Gatsby's image processing capabilities in such a query
I would need to issue a different allImageSharp query for that and it is not obvious to me how to pass the respective photo src to it.

This concerns all the images uploaded via Netlify CMS, not necessarily saved as siteMetadata, since it is then more convenient not to query for them via allImageSharp, but to use respective fields in frontmatter to get to the image files.

Is there a way to somehow wrap queries for such fields (like photo above) with image processing queries in GraphQL? Or if not, what could be a reasonable way of processing images which are uploaded from Netlify CMS?

[AustinGreen]

I'm actually working on a solution to this on the kaldi-coffee branch. I'm still figuring out the best way to do this and hope to have it solved by next week. In the meantime, here are some resources I'm finding helpful:

• How to configure sharp plugin for single images? gatsbyjs/gatsby#1749
• https://image-processing.gatsbyjs.org/
• Adding an image/thumbnail field to the frontmatter of a post gatsbyjs/gatsby#2054

[ilyabo]

Oh, super cool! Thanks!

[AustinGreen]

Take a look at the project now, I added image processing via gatsby-transformer-sharp

[ilyabo]

Cool, thanks! I will definitely do.

…

On Fri, Nov 24, 2017, 10:33 PM Austin Green ***@***.***> wrote: Take a look at the project now, I added image processing via gatsby-transformer-sharp — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#7 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAVeVNqzDDEViHp-9m_0kyKrKjMTh0euks5s5zYTgaJpZM4QaLo-> .

[AustinGreen]

Take a look at this PR: #14

Turns out if we want to use the media folder in Netlify CMS then we can't use image sharp. Hopefully this issue is resolved soon, but until then this is the best solution

[ilyabo]

I found a workaround for this very issue: decaporg/decap-cms#325 (comment)