Oqtane Tutorials
Oqtane Tutorials

Images and Pictures Tutorial

Tutorial Home › Images
Resize using Presets and Global Settings
#5 Merge image settings
Best-Possible Image for Every Screen & Device
Resources

Merge image settings

The following examples merge custom settings with 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 customImageSettings

@inherits Custom.Hybrid.Razor14

@{
    var imgUrl = App.Path + "/assets/img-resize/basic-logo.png";
}

@{
  var customImageSettings = AsDynamic(new {
    Height = 100,
    ResizeMode = "Stretch",
    Quality = 50
  });
  // Merged settings, first one has highes priority
  var mergedSettings = AsDynamic(customImageSettings, Settings.Images.Content);
}
<img loading="lazy" src='@Link.Image(imgUrl, mergedSettings)'>

 

Resize using Presets and Global Settings
#5 Merge image settings
Best-Possible Image for Every Screen & Device