2sxc 12.03 introduces a new Link.Image command which makes it easy to create image urls containing the correct resize parameters. Even better: The parameters can be in a global setting for re-use across all apps and templates.

Simple Examples with Parameters

Look at the source-code below to see how they are made. Note that we're adding a pink border around all img tags to make it easier to see the image bounds.

Simple Example

Simple resize

width: 200px
height: 150px
width: 200px, height 150px

Resize and Change Format to JPG

200px, jpg
200px, jpg, 15% quality only

Resize Modes

All of these examples are width 250px, height 150px

Resize mode crop
Resize Mode max
Resize Mode stretch
Other modes not demonstrated here, see Image Resizer docs.

Examples using 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

Image with Default Content Settings

This example uses the configuration as is, to create an image according to specs in Settings.Images.Content

Image with Half or 1/3rd the Content Settings

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

Image with Settings, Custom Width & Height

In this example we use a custom width, but want to use other specs like quality or resizeMode from the Settings.

Image with Settings, Custom Width & Reset Height

In this example uses a custom width and explicitly doesn't want to set the height (so it's automatic)

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.

@inherits Custom.Hybrid.Razor12
<!-- unimportant stuff, hidden -->

Create Image Tags using the Link.Image... <!-- unimportant stuff, hidden -->
<div class="examples">
  @{
    var imgUrl = App.Path + "/settings/demo.png";
  }
  <h3>Simple Example</h3>
  <img loading="lazy" src='@Link.Image(imgUrl)'>

  <h3>Simple resize</h3>
  <ul>
    <li>
      <img loading="lazy" src='@Link.Image(url: imgUrl, width: 200)'>
      width: 200px
    </li>
    <li>
      <img loading="lazy" src='@Link.Image(url: imgUrl, height: 150)'>
      height: 150px
    </li>
    <li>
      <img loading="lazy" src='@Link.Image(url: imgUrl, width: 250, height: 150)'>
      width: 200px, height 150px
    </li>
  </ul>

  <h3>Resize and Change Format to JPG</h4>
  <ul>
    <li>
      <img loading="lazy" src='@Link.Image(url: imgUrl, width: 200, format: "jpg")'>
      200px, jpg
    </li>
    <li>
      <img loading="lazy" src='@Link.Image(url: imgUrl, width: 200, format: "jpg", quality: 15)'>
      200px, jpg, 15% quality only
    </li>
  </ul>

  <h3>Resize Modes</h3>
  All of these examples are width 250px, height 150px
  <ul>
    <li>
      <img loading="lazy" src='@Link.Image(url: imgUrl, width: 250, height: 150, resizeMode: "crop")'>
      Resize mode <code>crop</code>
    </li>
    <li>
      <img loading="lazy" src='@Link.Image(url: imgUrl, width: 250, height: 150, resizeMode: "max")'>
      Resize Mode <code>max</code>
    </li>
    <li>
      <img loading="lazy" src='@Link.Image(url: imgUrl, width: 250, height: 150, resizeMode: "stretch")'>
      Resize Mode <code>stretch</code>
    </li>
    <li>
      Other modes not demonstrated here, see <a href="https://imageresizing.net/docs/v4/reference" target="_blank">Image Resizer docs</a>.
    </li>
  </ul>
</div>

<hr>

<div class="examples">
  Examples using Settings The following... <!-- unimportant stuff, hidden -->

  <h3>Image with Default Content Settings</h3>
  <p>This example uses the configuration as is, to create an image according to specs in <code>Settings.Images.Content</code></p>
  <img loading="lazy" src='@Link.Image(imgUrl, Settings.Images.Content)'>

  <h3>Image with <em>Half</em> or <em>1/3rd</em> the Content Settings</h3>
  <p>This example uses the <code>Settings.Images.Content</code> settings but expects it to be half that size (for 2-columns) or a third the size (for 3 columns).</p>
  <img loading="lazy" src='@Link.Image(imgUrl, Settings.Images.Content, factor: 0.5)'>
  <img loading="lazy" src='@Link.Image(imgUrl, Settings.Images.Content, factor: 0.333)'>

  <h3>Image with Settings, Custom Width & Height</h3>
  <p>In this example we use a custom width, but want to use other specs like <em>quality</em> or <em>resizeMode</em> from the Settings.</p>
  <img loading="lazy" src='@Link.Image(imgUrl, Settings.Images.Content, width: 100, height: 50)'>

  <h3>Image with Settings, Custom Width & Reset Height</h3>
  <p>In this example uses a custom width and explicitly doesn't want to set the height (so it's automatic)</p>
  <img loading="lazy" src='@Link.Image(imgUrl, Settings.Images.Content, width: 100, height: 0)'>


</div>

<!-- unimportant stuff, hidden -->