Passing arguments into gatsbyImageData

Developing with Prismic
1

I am trying to change some option values when sourcing gatsbyImageData from Prismic. Specifically I am trying to change the layout value from "constrained" to '"fullWidth"`. Any help would be much appreciated!

2

Hello @hon, welcome to the community!

Can you share with us an example of your component?
Typically you only need to pass the layout option and the component prop value "fullWidth" to resize the GatsbyImage component.

4

Hi @Pau,

Thanks so much for the reply.

My component is as follows:

<GatsbyImage image={blogData.headline_image.gatsbyImageData} alt={blogData.headline_image.alt} className="mb-6" />

The gatsbyImageData query returns:

{
  "data": {
    "allPrismicBlogPost": {
      "nodes": [
        {
          "data": {
            "headline_image": {
              "gatsbyImageData": {
                "images": {
                  "sources": [],
                  "fallback": {
                    "src": ...,
                    "srcSet": ...,
                    "sizes": "(min-width: 684px) 684px, 100vw"
                  }
                },
                "layout": "constrained",
                "width": 684,
                "height": 1024
              }
            }
          }
        },

I am trying to change the value of "layout" to "fullWidth". Are you able to help me access this key/value pair?

Thank you!

Hon

5

Hey @hon!

You need to change the layout param value from the query. Take a look at this example:

{
  allPrismicBlogPost {
    edges {
      node {
        headline_image {
          gatsbyImageData(layout: FULL_WIDTH)
        }
      }
    }
  }
}
6

That worked a treat @Pau, thank you so much!

7

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.