App


Images and Pictures Tutorial

Tutorial HomeImages
#4 Resize using Presets and Global Settings

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 + "/settings/demo.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 + "/settings/demo.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 + "/settings/demo.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 + "/settings/demo.png";
}
<img loading="lazy" src='@Link.Image(imgUrl, Settings.Images.Content, width: 100)'>

 

#4 Resize using Presets and Global Settings