Images Tutorial

#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

@{// 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)'>

Another Example (ResizeMode Stretch)

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

@{
  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)'>

Combine Config-Bundle with additional Params

This example uses a config-bundle, but also specifies additional parameters in Link.Image(...).

@{
  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)'>

Resize and Crop Images on the Server

#3 Resize using Resize-Settings

Resize and Crop using Global Presets

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 })