Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
ilyabo opened this issue Nov 10, 2017 · 6 comments

Comments

Projects
None yet
2 participants
@ilyabo
Copy link

commented Nov 10, 2017

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?

@ilyabo ilyabo changed the title How to use image processing for images uploaded via Netlify CMS? Question: How to use image processing for images uploaded via Netlify CMS? Nov 10, 2017

@AustinGreen

This comment has been minimized.

Copy link
Collaborator

commented Nov 10, 2017

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:

@ilyabo

This comment has been minimized.

Copy link
Author

commented Nov 10, 2017

Oh, super cool! Thanks!

@AustinGreen

This comment has been minimized.

Copy link
Collaborator

commented Nov 24, 2017

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

@ilyabo

This comment has been minimized.

Copy link
Author

commented Nov 26, 2017

@AustinGreen

This comment has been minimized.

Copy link
Collaborator

commented Nov 29, 2017

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

This comment has been minimized.

Copy link
Author

commented Dec 30, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.