Asset renditions are not available in the Gatsby data layer

[bwlng]

Motivation

Asset renditions (different versions or editions of the original image used in Kontent.ai) can be created by content editors in the Kontent.ai UI, but they can not be used on sites built with the Kontent.ai Gatsby source plugin.

Proposed solution

Extend the kontent_item_asset_element type to include a renditions field with the data returned by the Delivery API.

Additional context

Renditions have been included in the Delivery API since ~December 2021, but customers using the Gatsby plugin to source data from Kontent can't leverage them.

👆 Current fields available on assets

Possible GQL query

``` query MyQuery { kontentItemImageComponent( system: {codename: {eq: "image___magnifying_glass_listeria_salmon_filet"}} ) { elements { asset_element { type name value { name description type size url width height } renditions { preset_codename # string - renditions's dictionary key, "default" rendition_id # string, "b447ca6c-8020-4e8f-be57-1d110721e535" preset_id # string, "a6d98cd5-8b2c-4e50-99c9-15192bce2490" width # number, 1280 height # number, 1024 query # string, w=1280&h=1024&fit=clip&rect=2396,169,1280,1024 url # string, https://assets-us-01.kc-usercontent.com/975bf280-fd91-488c-994c-2f04416e5ee3/3e76909f-599f-4742-b472-77fd4b510e92/sources.jpg?w=1280&h=1024&fit=clip&rect=2396,169,1280,1024 } } } } } ```

[Simply007]

Hello, @bwlng. I thought this was ensured by the Automatic type inference .

I tried to search for @dontInfer in the code (https://github.com/kontent-ai/gatsby-packages/search?q=%40dontInfer&type=code) and it is not there and this is the only opt-out for the Type Inerence.

So you would like to transform the renditions from the dictionary into the array to have it easily queryable and provide the codename as a string property OK?

I would probably tent more to this format:

{
    /// ...
            "renditions": {
              "items": [
                {
                  "preset": "default",
                  "preset_id": "a6d98cd5-8b2c-4e50-99c9-15192bce2490",
                  "rendition_id": "da31c735-488b-47ef-af8d-f552b1fa024b",
                  "query": "w=500&h=333&fit=clip&rect=31,126,500,333",
                  "width": 500,
                  "height": 333
                }
              ]
            }
    /// ...
}

Would you also expect to have the URL ready? How would you expect working with an altered default asset domain - I guess both of these can be achieved by the transformer plugin right?

[bwlng]

Hi @Simply007 — it appears types need to exist in src/schemaTemplates.ts to be included in Schema.

I'm not sure what the cause of that is. Does this prevent elements from being including in the schema if there isn't a defined type?

I tried quickly extending the __KONTENT_ELEMENT_ASSET_VALUE__ type like this:

  type __KONTENT_ELEMENT_ASSET_VALUE__ {
    name: String!
    description: String
    type: String!
    size: Int!
    url: String!
    width: Int
    height: Int
    renditions: Renditions
  }

  type DefaultRendition {
    rendition_id: String
    preset_id: String
    width: Int
    height: Int
    query: String
  }

  type Renditions {
    default: DefaultRendition
  }

And I was able to query that field like this:

  kontentItemImageComponent(
    system: {codename: {eq: "image_codename"}}
  ) {
    elements {
      image_field {
        type
        name
        value {
          name
          description
          type
          size
          url
          width
          height
          renditions {
            default {
              rendition_id
              query
            }
          }
        }
      }
    }
  }

So you would like to transform the renditions from the dictionary into the array to have it easily queryable and provide the codename as a string property OK?

I'll admit I don't have a full understanding of the different rendition types that can appear here, so I'm ok with what you think makes the most sense for querying. If the rendition names are always known, writing the query with the preset name will work (and the items array would be unneeded)

Would you also expect to have the URL ready?

In my usage, I will likely add the rendition query string to the URL myself so there is more flexibility to override the parameters before loading the image (such as loading smaller image, but maintaining the crop). I included the absolute URLas an option because the Delivery SDK includes it

How would you expect working with an altered default asset domain

Should there be a asset delivery domain config option similar to the deliveryDomain and previewDeliveryDomain settings?

[Simply007]

Thanks, I am leaving to vacation tomorrow, so - @IvanKiral can you create a task/story to our GitHub and Innovation Epic?

We will prioritize it and take a look at it.

How urgent is the request @bwlng?

[bwlng]

@Simply007 — I'd say it's important, but not urgent. I can let our editors know not to rely on renditions yet and we can workaround until it’s available by uploading cropped versions of the source image.

[Simply007]

Cool,

I have been thinking about that and I would proceed this way. Add the renditions as a dictionary (as it is in the REST API response). And once this is not enough (but currently I don't see any blocker in the dictionary approach) we can provide the field customization (as a code sample/transformer package) to add a second parameter in the array form.

According to the custom asset domain - I would split it into a separate issue.

What do you think @bwlng?

[bwlng]

@Simply007 — that sounds like a solid approach and solves our use case 👍

[Simply007]

Hello @bwlng,

sorry for the delay. We have some a problem with the new node LTS version in installation of the packages: (#217).

[Simply007]

I will try to publish beta using old Node version (16) and then focus on the CI build fix, so that you are not blocked.

[Simply007]

@bwlng . A new alpha version has been released 9.1.0-alpha.0. Could you test it out and let me know, what do you think?

[bwlng]

@Simply007 thanks for the update! I am out of the office until the end of next week. I will test then.

[Simply007]

Thanks @bwlng,

I was out until now as well. Once you have any feedback, please let me know.

[Simply007]

Hello @bwlng - did you have any chance to look at the renditions?

[bwlng]

Hi @Simply007 — sorry for the delay! I was able to test this and it works great.

Using this GQL query, I got back all the information I needed about the rendition:

query($language: String!, $codename: String!) {
  kontentItemImage(
    preferred_language: {eq: $language}
    system: {codename: {eq: $codename}}
  ) {
    elements {
      image_field {
        value {
          url
          renditions {
            default {
              rendition_id
              preset_id
              width
              height
              query
            }
          }
        }
      }
    }
  }
}

In our image component I could then use the query data to create an object from those values and create optimized images using the crop the editor created in the Kontent CP.

No adjustments needed to work with this in our project.

[Simply007]

Released in 9.1.0