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:
Settings
Settings.Images.Content
This example uses the configuration as is, to create an image according to specs in Settings.Images.Content
@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
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).
@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.
@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)
@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)'>