Oqtane Tutorials
Oqtane Tutorials

Images and Pictures Tutorial

Tutorial Home › Images
Resize with Reusable Settings
#4 Resize using Presets and Global Settings
Merge image settings
Resources

Resize using Presets and Global Settings

The following examples use predefined Settings which are defined in 2sxc, and can be re-configured in any site and app. We'll use Settings.Images.Content which has the following configuration:

  1. Width: 1400
  2. Height: 865
  3. AspectRatio: 1.618
  4. Quality: 75

This example uses the configuration as is, to create an image according to specs in Settings.Images.Content

⬇️ Result | Source ➡️

@inherits Custom.Hybrid.Razor14
@{
  var imgUrl = App.Path + "/assets/img-resize/basic-logo.png";
}
<img loading="lazy" src='@Link.Image(imgUrl, Settings.Images.Content)'>

This example uses the Settings.Images.Content settings but expects it to be half that size (for 2-columns) or a third the size (for 3 columns).

⬇️ Result | Source ➡️

- 
@inherits Custom.Hybrid.Razor14

@{
  var imgUrl = App.Path + "/assets/img-resize/basic-logo.png";
}
<img loading="lazy" src='@Link.Image(imgUrl, Settings.Images.Content, factor: "1/3")'> - 
<img loading="lazy" src='@Link.Image(imgUrl, Settings.Images.Content, factor: 0.25)'>

In this example we use a custom width, but want to use other specs like quality or resizeMode from the Settings.

⬇️ Result | Source ➡️

@inherits Custom.Hybrid.Razor14

@{
  var imgUrl = App.Path + "/assets/img-resize/basic-logo.png";
}
<img loading="lazy" src='@Link.Image(imgUrl, Settings.Images.Content, width: 100, height: 50)'>

In this example uses a custom width and explicitly doesn't want to set the height (so it's automatic)

⬇️ Result | Source ➡️

@inherits Custom.Hybrid.Razor14

@{
  var imgUrl = App.Path + "/assets/img-resize/basic-logo.png";
}
<img loading="lazy" src='@Link.Image(imgUrl, Settings.Images.Content, width: 100)'>

 

Resize with Reusable Settings
#4 Resize using Presets and Global Settings
Merge image settings