#3 Resize using Resize-Settings
Resources
Resize with Reusable Settings
If you want to specify resize-rules many times, you will usually want the configuration as a bundle to use multiple times. The following examples show how to do this.
Basic Bundle of Settings (Height, Width and ResizeMode Crop)
This example uses the configuration as is, to create an image according to following specs


Another Example (ResizeMode Stretch)
This example uses the configuration as is, to create an image according to following specs


Combine Config-Bundle with additional Params
This example uses a config-bundle, but also specifies additional parameters in Link.Image(...)
.



#3 Resize using Resize-Settings
Source Code of this file
Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code
@inherits Custom.Hybrid.Razor14 <!-- unimportant stuff, hidden --> <div @Sys.PageParts.InfoWrapper()> @Html.Partial("../shared/DefaultInfoSection.cshtml") <div @Sys.PageParts.InfoIntro()> <h2>Resize with Reusable Settings</h2> <p> If you want to specify resize-rules many times, you will usually want the configuration as a <strong>bundle</strong> to use multiple times. The following examples show how to do this. </p> </div> </div> <h3>Basic Bundle of Settings (Height, Width and ResizeMode Crop)</h3> <p>This example uses the configuration as is, to create an image according to following specs</p> @{// Create a configuration bundle as a Dynamic object with these specs var customSize = AsDynamic(new { Height = 100, Width = 500, ResizeMode = "Crop" }); } <img loading="lazy" src='@Link.Image(imgUrl, customSize)'> - <img loading="lazy" src='@Link.Image(imgUrl2, customSize)'> <h3>Another Example (ResizeMode Stretch)</h3> <p>This example uses the configuration as is, to create an image according to following specs</p> @{ var customSettingsStreched = AsDynamic(new { Height = 300, Width = 100, ResizeMode = "Stretch" }); } <img loading="lazy" src='@Link.Image(imgUrl, customSettingsStreched)'> - <img loading="lazy" src='@Link.Image(imgUrl2, customSettingsStreched)'> <h3>Combine Config-Bundle with additional Params</h3> <p>This example uses a config-bundle, but also specifies additional parameters in <code>Link.Image(...)</code>.</p> @{ var customSettingsMax = AsDynamic(new { Height = 300, Width = 100, ResizeMode = "Max" }); } <img loading="lazy" src='@Link.Image(imgUrl, customSettingsMax, format: "jpg", quality: 1)'> - <img loading="lazy" src='@Link.Image(imgUrl, customSettingsMax, format: "jpg", quality: 10)'> - <img loading="lazy" src='@Link.Image(imgUrl, customSettingsMax, format: "jpg", quality: 75)'> @* Footer *@ @Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })