Using the transform parameter to automatically optimize the IntelligenceBank CDN linked asset

CDN Transformations

When configuring your Templates, you can use a transform parameter to automatically optimize the IntelligenceBank CDN linked asset based on specific media queries, leveraging IntelligenceBank's transformation capabilities.

The query to use is transform:"{transformation_parameter}" - where transformation_parameter is the transformation parameter you want to use.

Using Presets

You can manually change the preset applied by inserting preset={id} (as displayed in the CDN URL):

@Html.IntelligenceBankMediaItem(Model, "ibImagePicker", htmlAttributes: new { width="500" }, transform: "preset=VOEb")

Manual Transformations

You can also apply manual transformations instead of using presets. See the available parameters that are supported.

For example, transform: "size=500x500" will resize the image to 500x500 pixels:

@Html.IntelligenceBankMediaItem(Model, "ibImagePicker", transform: "size=500x500")

Renders as:

Combining Parameters

Combine multiple parameters using the & character. For example, "size=400x400&crop=200x200&cropgravity=auto" resizes and crops with automatic focal point detection:

@Html.IntelligenceBankMediaItem(Model, "ibImagePicker", transform: "size=400&crop=200x200&cropgravity=auto")

Renders as:

Transformations for Rich Text and Block Grid

To use transformations on RTE or Block Grid content, call the .Transform() method. Include the following namespace:

@using IntelligenceBank.Umbraco.Connector.Core.Models;

Note: The transformation will be applied to all IntelligenceBank assets within the content.

Rich Text Editor (all versions)

@Model.Value("rteField").Transform("size=300")

Grid Component (v11-13)

@Html.GetGridHtml(Model, "gridComponent").Transform("size=200")

Block Grid (v14+)

@{
    var blockGrid = Model.Value<BlockGridModel>("blockGridAlias");
}
@await Html.GetBlockGridHtmlAsync(blockGrid)

For Block Grid, apply transformations within individual block partial views using @Html.IntelligenceBankMediaItem() with the transform parameter.