Skip to main content

Images Tutorial

Tutorial Home

Resize with Reusable Settings

If you want to specify resize-rules many times, you will usually want the configuration as a bundle to use multiple times. The following examples show how to do this.

Basic Bundle of Settings (Height, Width and ResizeMode Crop)

This example uses the configuration as is, to create an image according to following specs

-

@{// Create a configuration bundle as a Dynamic object with these specs
  var customSize = AsDynamic(new {
    Height = 100,
    Width = 500,
    ResizeMode = "Crop"
  });
}
<img loading="lazy" src='@Link.Image(imgUrl, customSize)'> - 
<img loading="lazy" src='@Link.Image(imgUrl2, customSize)'>

Another Example (ResizeMode Stretch)

This example uses the configuration as is, to create an image according to following specs

-

@{
  var customSettingsStreched = AsDynamic(new {
    Height = 300,
    Width = 100,
    ResizeMode = "Stretch"
  });
}
<img loading="lazy" src='@Link.Image(imgUrl, customSettingsStreched)'> - 
<img loading="lazy" src='@Link.Image(imgUrl2, customSettingsStreched)'>

Combine Config-Bundle with additional Params

This example uses a config-bundle, but also specifies additional parameters in Link.Image(...).

- -

@{
  var customSettingsMax = AsDynamic(new {
    Height = 300,
    Width = 100,
    ResizeMode = "Max"
  });
}
<img loading="lazy" src='@Link.Image(imgUrl, customSettingsMax, format: "jpg", quality: 1)'> - 
<img loading="lazy" src='@Link.Image(imgUrl, customSettingsMax, format: "jpg", quality: 10)'> -
<img loading="lazy" src='@Link.Image(imgUrl, customSettingsMax, format: "jpg", quality: 75)'>