Oqtane Tutorials
Oqtane Tutorials

Images and Pictures Tutorial

Tutorial Home › Images
The Link.Image(...) Helper
#3 Resize with Reusable Settings
Resize using Presets and Global Settings
Resources

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.

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

Result

- 
@inherits Custom.Hybrid.Razor14

@{// Create a configuration bundle as a Dynamic object with these specs
  var imgUrl = App.Path + "/assets/img-resize/basic-logo.png";
  var imgUrl2 = App.Path + "/assets/img-resize/basic-banner.png";
  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)'>

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

Result

- 
@inherits Custom.Hybrid.Razor14

@{// Create a configuration bundle as a Dynamic object with these specs
  var imgUrl = App.Path + "/assets/img-resize/basic-logo.png";
  var imgUrl2 = App.Path + "/assets/img-resize/basic-banner.png";
  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)'>

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

Result

- - 
@inherits Custom.Hybrid.Razor14

@{
  var imgUrl = App.Path + "/assets/img-resize/basic-logo.png";
  var imgUrl2 = App.Path + "/assets/img-resize/basic-banner.png";
  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)'>

 

The Link.Image(...) Helper
#3 Resize with Reusable Settings
Resize using Presets and Global Settings