Display customized images

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.

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

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.

How customized images are stored

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

Display customized images

{
  "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"
        }
      }
    }
  ]
}

// Initializes a Delivery client
_client = DeliveryClientBuilder
    .WithOptions(builder => builder
        .WithProjectId("<YOUR_ENVIRONMENT_ID>")
        .UseProductionApi()
        .Build())
    .Build();

// Retrieves a content item
var response = await _client.GetItemAsync<Article>("my_article");

// Gets the image from an asset element named Teaser Image
var imageWithRendition = response.Item.TeaserImage.SingleOrDefault(x => x.Name == "construction-insurance-header.jpg");

// Gets the asset rendition query from the image
var renditionQuery = imageWithRendition.Renditions["default"].Query;

// Combines the original image URL with the asset rendition query, if the image specifies a query
var assetUrl = $"{imageWithRenditions.Url}?{renditionQuery}";