#3 Resize using Resize-Settings
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)'>
#3 Resize using Resize-Settings