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:
-
Width: 1400
-
Height: 865
-
AspectRatio: 1.618
-
Quality: 75
This example uses the configuration as is, to create an image according to specs in Settings.Images.Content
⬇️ Result | Source ➡️
![](/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/basic-logo.png?w=1230&h=760&quality=75&mode=crop&scale=both)
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 ➡️
![](/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/basic-logo.png?w=390&h=241&quality=75&mode=crop&scale=both)
![](/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/basic-logo.png?w=285&h=176&quality=75&mode=crop&scale=both)
In this example we use a custom width, but want to use other specs like quality or resizeMode from the Settings.
⬇️ Result | Source ➡️
![](/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/basic-logo.png?w=100&h=50&quality=75&mode=crop&scale=both)
In this example uses a custom width and explicitly doesn't want to set the height (so it's automatic)
⬇️ Result | Source ➡️
![](/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/basic-logo.png?w=100&h=61&quality=75&mode=crop&scale=both)