Display customized images with advanced asset management
Is this page helpful?
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.
{
"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_PROJECT_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}";