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

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).

You can use the next method to 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")

You can also apply manual transformations instead of using presets. Click here for a summary of the available parameters that are supported.

To utilize these parameters in the IntelligenceBankMediaItem, you can pass also them as a query string in the 'transform' parameter. For example, transform: "size=500x500" will resize the image on the fly to 500 pixels width and 500 pixels height.

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

Will render as:

You can combine multiple parameters in the transform parameter using the & character as a separator. For example, "size=400x400&crop=200x200&cropgravity=auto" would resize the image to 400x400 and crop it, with the focal point being automatically detected.

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

Will render as:

If you want to use transformation for RTE or Grid, call the Transform method. Make sure that @using IntelligenceBank.Umbraco.Connector.Core.Models; is included. Keep in mind however that the transformation will be applied to all objects inside. This means that if you insert 2 images into the Grid from IntelligenceBank and apply the transformation, it will be applied to both of the IntelligenceBank images.

Example for RTE: @Model.Value("rteNewStyle").Transform("size=300")

Example for the Grid Component: @Html.GetGridHtml(Model, "gridComponent").Transform("size=200")

Additional examples can be found on this demo page.