Display customized images

Jake Kula, Jan Cerman

4 minutes

Image transformation (API) / Advanced asset management

Download PDF

0% complete

With image optimization and art direction in mind, let’s go through how to display customized images in your app so that they appear just as content creators intended.

How customized images are stored

Behind the scenes, customized images are stored as asset renditions with metadata on how to transform the original image. The following JSON example from Delivery API shows an asset element containing the image. Notice the renditions property in the asset’s value, which specifies how to customize the image.

JSON

{
  "type": "asset",
  "name": "Image",
  "value": [
    {
      "name": "iStock-1140334771.jpg",
      "description": null,
      "type": "image/jpeg",
      "size": 4858659,
      "url": "https://assets-us-01.kc-usercontent.com/40886722-9bde-00cb-08d7-36b32d4a6d7b/9858cb0a-46de-4d5e-8970-42222e35463d/iStock-1140334771.jpg",
      "width": 3863,
      "height": 2578,
      "renditions": {
        "default": {
          "rendition_id": "7618a0e0-ce51-4748-b404-e0b828861c69",
          "preset_id": "a6d98cd5-8b2c-4e50-99c9-15192bce2490",
          "width": 1600,
          "height": 1200,
          "query": "w=1600&h=1200&fit=clip&rect=1539,0,1600,1200"
        }
      }
    }
  ]
}

To display the customized version of the image, you append the default asset rendition’s query to the asset’s url.

Display customized images

When you get a content item with an asset element, check if the asset element specifies an asset rendition and then apply the rendition. Content creators can create only a single customization per image, so it's safe to use the default rendition for all images.

Whenever the asset element specifies an asset rendition, the rendition is automatically applied to the asset’s original URL.

Sign in with your Kontent.ai credentials or sign up for free to unlock the full lesson, track your progress, and access exclusive expert insights and tips!

Display customized images

Jake Kula, Jan Cerman

4 minutes

Image transformation (API) / Advanced asset management

Download PDF

0% complete

With image optimization and art direction in mind, let’s go through how to display customized images in your app so that they appear just as content creators intended.

How customized images are stored

JSON

{
  "type": "asset",
  "name": "Image",
  "value": [
    {
      "name": "iStock-1140334771.jpg",
      "description": null,
      "type": "image/jpeg",
      "size": 4858659,
      "url": "https://assets-us-01.kc-usercontent.com/40886722-9bde-00cb-08d7-36b32d4a6d7b/9858cb0a-46de-4d5e-8970-42222e35463d/iStock-1140334771.jpg",
      "width": 3863,
      "height": 2578,
      "renditions": {
        "default": {
          "rendition_id": "7618a0e0-ce51-4748-b404-e0b828861c69",
          "preset_id": "a6d98cd5-8b2c-4e50-99c9-15192bce2490",
          "width": 1600,
          "height": 1200,
          "query": "w=1600&h=1200&fit=clip&rect=1539,0,1600,1200"
        }
      }
    }
  ]
}

To display the customized version of the image, you append the default asset rendition’s query to the asset’s url.

Display customized images

Whenever the asset element specifies an asset rendition, the rendition is automatically applied to the asset’s original URL.

Sign in with your Kontent.ai credentials or sign up for free to unlock the full lesson, track your progress, and access exclusive expert insights and tips!