Images Tutorial

#5 Resize combining Presets with Custom Resize-Settings

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:

Width: 1400
Height: 865
AspectRatio: 1.618
Quality: 75

Resources

Image Resizer docs

Link.Image

Image with merged settings

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

    1
2
3
4
5
6
7
8
9
10
11
12
@{
  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)'>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

  

Resize and Crop using Global Presets

#5 Resize combining Presets with Custom Resize-Settings

Responsive Server-Side Images (img)