Skip to content

Commit

Permalink
Transforming data/graphql (#21453)
Browse files Browse the repository at this point in the history
* Mark localhost URLs as code snippets

* Mark localhost URLs as code snippets

* made styling changes

* fix up recipes overview page

* Update docs/docs/recipes/transforming-data.md

Co-Authored-By: LB <laurie@gatsbyjs.com>

* Update docs/docs/recipes/transforming-data.md

Co-Authored-By: LB <laurie@gatsbyjs.com>

* Update docs/docs/recipes/transforming-data.md

Co-Authored-By: LB <laurie@gatsbyjs.com>

* remove section on style guide

* add recipe to overview page

* resolve merge conflicts

* chore: format

* Update docs/docs/recipes/transforming-data.md

Co-Authored-By: LB <laurie@gatsbyjs.com>

* Update docs/docs/recipes/transforming-data.md

Co-Authored-By: Michael <184316+muescha@users.noreply.github.com>

* Update docs/docs/recipes/transforming-data.md

Co-Authored-By: Michael <184316+muescha@users.noreply.github.com>

* Update docs/docs/recipes/transforming-data.md

Co-Authored-By: Michael <184316+muescha@users.noreply.github.com>

* updated transforming-data.md

* Update docs/docs/recipes/transforming-data.md

Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com>

* Update docs/docs/recipes/transforming-data.md

Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com>

* Update docs/docs/recipes/transforming-data.md

Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com>

* Update docs/docs/recipes/transforming-data.md

Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com>

* made corrections

* Update docs/docs/recipes/transforming-data.md

Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com>

* Update docs/docs/recipes/transforming-data.md

Co-Authored-By: LB <laurie@gatsbyjs.com>

* Delete transforming-data.md.rej

This is an outdated merge file and can be deleted.

* Update docs/docs/recipes/transforming-data.md

Co-Authored-By: LB <laurie@gatsbyjs.com>

* Update docs/docs/recipes/transforming-data.md

Co-Authored-By: LB <laurie@gatsbyjs.com>

* Update docs/docs/recipes/transforming-data.md

Co-Authored-By: LB <laurie@gatsbyjs.com>

* Update docs/docs/recipes/transforming-data.md

Co-Authored-By: LB <laurie@gatsbyjs.com>

* made changes to recipe

* made changes to recipe

* made changes to recipe

* made changes to recipe

* Update docs/docs/recipes/transforming-data.md

Co-Authored-By: LB <laurie@gatsbyjs.com>

* Update docs/docs/recipes/transforming-data.md

Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com>

* added in more details

* added in more details

* changed url

* made final changes to recipe

Co-authored-by: Marcy Sutton <marcy@gatsbyjs.com>
Co-authored-by: LB <laurie@gatsbyjs.com>
Co-authored-by: GatsbyJS Bot <mathews.kyle+gatsbybot@gmail.com>
Co-authored-by: Michael <184316+muescha@users.noreply.github.com>
5 people authored Feb 14, 2020

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 096e2b0 commit 82037f9
Showing 2 changed files with 92 additions and 0 deletions.
1 change: 1 addition & 0 deletions docs/docs/recipes.md
Original file line number Diff line number Diff line change
@@ -107,6 +107,7 @@ Access images as static resources, or automate the process of optimizing them th
Transforming data in Gatsby is plugin-driven. Transformer plugins take data fetched using source plugins, and process it into something more usable (e.g. JSON into JavaScript objects, and more).

- [Transforming Markdown into HTML](/docs/recipes/transforming-data#transforming-markdown-into-html)
- [Transforming images into grayscale using GraphQL](/docs/recipes/transforming-data#transforming-images-into-grayscale-using-graphql)

## [9. Deploying your site](/docs/recipes/deploying-your-site)

91 changes: 91 additions & 0 deletions docs/docs/recipes/transforming-data.md
Original file line number Diff line number Diff line change
@@ -55,3 +55,94 @@ export const query = graphql`

- [Tutorial on transforming Markdown to HTML](/tutorial/part-six/#transformer-plugins) using `gatsby-transformer-remark`
- Browse available transformer plugins in the [Gatsby plugin library](/plugins/?=transformer)

## Transforming images into grayscale using GraphQL

### Prerequisites

- A [Gatsby site](/docs/quick-start) with a `gatsby-config.js` file and an `index.js` page
- The `gatsby-image`, `gatsby-transformer-sharp`, and `gatsby-plugin-sharp` packages installed
- A source plugin installed, such as `gatsby-source-filesystem`
- An image (`.jpg`, `.png`, `.gif`, `.svg`, etc.) in the `src/images` folder

### Directions

1. Edit your `gatsby-config.js` file to source images and configure plugins for Gatsby's GraphQL data layer. A common approach is to source them from an images directory using the `gatsby-source-filesystem` plugin:

```javascript:title=gatsby-config.js

plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
],
```

2. Query your image using GraphQL and apply a grayscale transformation to the image inline. The `relativePath` should be relative to the path you configured in `gatsby-source-filesystem`.

```graphql
query {
file(relativePath: { eq: "corgi.jpg" }) {
childImageSharp {
// highlight-next-line
fluid(grayscale: true) {
...GatsbyImageSharpFluid
}
}
}
}
```

Note: You can find these and other parameters in your GraphQL playground located at `http://localhost:8000/__graphql`

3. Next import the `Img` component from "gatsby-image". You'll use this inside your JSX to display the image.

```jsx:title=src/pages/index.js
import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Layout from "../components/layout"
// highlight-next-line
import Img from "gatsby-image"

export default () => {
const data = useStaticQuery(graphql`
query {
file(relativePath: { eq: "corgi.jpg" }) {
childImageSharp {
// highlight-next-line
fluid(grayscale: true) {
...GatsbyImageSharpFluid
}
}
}
}
`)
return (
<Layout>
<h1>I love my corgi!</h1>
// highlight-start
<Img
fluid={data.file.childImageSharp.fluid}
alt="A corgi smiling happily"
/>
// highlight-end
</Layout>
)
}
```

4. Run `gatsby develop` to start the development server.

5. View your image in the browser: `http://localhost:8000/`

### Additional resources

- [API docs, including grayscale and duotone query tips](/docs/gatsby-image/#shared-query-parameters)
- [Gatsby Image docs](/docs/gatsby-image/)
- [Image processing examples](https://github.com/gatsbyjs/gatsby/tree/master/examples/image-processing)

0 comments on commit 82037f9

Please sign in to comment.