4

I am implementing Sitecore jss on Sitecore version 9.1.

I was wondering if there is a way to specify the image size (width/height) when querying using GraphQl.

Below is my current query which is returning an image too large for my site.

GraphQl Query

query ($datasource: String){
    item (path:$datasource){
    field(name:"Image")
    {
      jss
    }
  }
}

GraphQl Response

{
  "data": {
    "item": {
      "field": {
        "jss": {
          "value": {
            "src": "http://mydomain/-/media/image.png?h=1560&w=900&hash=FB9B94EFC9562A5265FDFD2123D9E044",
            "alt": "",
            "width": "900",
            "height": "1560",
            "style": "margin: 0px 0px"
          }
        }
      }
    }
  }
}
4

I found 2 solution for this issue and I ended using method 1 for the "hashed url" convenience.

Method 1: Using rendered(fieldRendererParameters)

query ($datasource: String){
    item (path:$datasource){
    field (name:"Image") {
      rendered(fieldRendererParameters:"w=100&h=160")
    }
  }
}

The result of this query is...

{
  "data": {
    "item": {
      "field": {
        "rendered": "<img src=\"/-/media/image.png?h=160&amp;w=100&amp;hash=A3B9D31108FCB37E099AA0A2AB19EA75\" alt=\"\" width=\"100\" height=\"160\" style=\"margin: 0px 0px\" />"
      }
    }
  }
}

Method 2: Using inline fragments to query the image src

Note that this method will require the size to be whitelisted via Sitecore config.

GraphQL Inline Fragment reference

query ($datasource: String){
    item (path:$datasource){
    field (name:"Image") {
      ... on ImageField{
        src(maxWidth:100)
      }
    }
  }
}
{
  "data": {
    "item": {
      "field": {
        "image": "/-/media/image.png?mw=100"
      }
    }
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.