Skip to content

Commit

Permalink
chore(docs): add missing argument (#37063)
Browse files Browse the repository at this point in the history
Co-authored-by: Lennart <lekoarts@gmail.com>
  • Loading branch information
Nischal2015 and LekoArts authored Nov 21, 2022
1 parent fa5e90d commit 7544045
Showing 1 changed file with 6 additions and 10 deletions.
16 changes: 6 additions & 10 deletions docs/docs/how-to/images-and-media/using-gatsby-plugin-image.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: Using the Gatsby Image plugin
examples:
- label: Using Gatsby Image
href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-gatsby-image"
- label: GatsbyGram
href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/gatsbygram"
---

_If you're looking for a guide on using the deprecated `gatsby-image` package, it can be found in the [How to use Gatsby Image](/docs/how-to/images-and-media/using-gatsby-image) doc._
Expand Down Expand Up @@ -37,8 +35,6 @@ If you already have some of these plugins installed, please check that they're u

Note that `gatsby-source-filesystem` is not included in this config. If you are sourcing from your local filesystem to use `GatsbyImage` please configure accordingly. Otherwise, downloading the dependency without configuration is sufficient.

<!-- TODO: add exact minimum version when we reach GA -->

## Using the Gatsby Image components

### Decide which component to use
Expand Down Expand Up @@ -115,8 +111,8 @@ If you need to have dynamic images (such as if they are coming from a CMS), you
Any GraphQL File object that includes an image will have a `childImageSharp` field that you can use to query the image data. The exact data structure will vary according to your data source, but the syntax is like this:

```graphql:title=src/templates/blogpost.js
query {
blogPost(id: { eq: $Id }) {
query ($id: String) {
blogPost(id: { eq: $id }) {
title
body
# highlight-start
Expand All @@ -135,8 +131,8 @@ If you need to have dynamic images (such as if they are coming from a CMS), you
You configure the image by passing arguments to the `gatsbyImageData` resolver. You can change the size and layout, as well as settings such as the type of placeholder used when lazy loading. There are also advanced image processing options available. You can find the full list of options in the API docs.

```graphql:title=src/templates/blogpost.js
query {
blogPost(id: { eq: $Id }) {
query ($id: String) {
blogPost(id: { eq: $id }) {
title
body
author
Expand Down Expand Up @@ -178,8 +174,8 @@ If you need to have dynamic images (such as if they are coming from a CMS), you
}

export const pageQuery = graphql`
query {
blogPost(id: { eq: $Id }) {
query ($id: String) {
blogPost(id: { eq: $id }) {
title
body
author
Expand Down

0 comments on commit 7544045

Please sign in to comment.