Skip to main content
Home  › ... 2sxc Apps

Images Tutorial

Tutorial Home
Introduction to the <img> Tag and Image formats
#2 Resize and Crop Images on the Server
Resize using Resize-Settings

Use the ImageResizer for Server-Side Resizing

2sxc comes with a built-in image resizer. V12 and before used ImageResizer.net, while v13 now uses imageflow. They work the same way.

The core principles:

  1. Add parameters like ?w=200 or ?w=200&h=150 to the url, so the server knows what size to deliver
  2. Additional parameters like mode=crop specify how to handle scenarios where the size doesn't match what you need
Resources

The Unmodified Image

For starters - this is the image we'll resize later on: 


    @{
      var imgUrl = App.Path + "/settings/demo.png";
    }
    @* <img loading="lazy" src='@imgUrl'> <-- don't do this *@
    <img loading="lazy" src='@Link.Image(imgUrl)'>

The Link.Image(...) Helper

Above you can see that you shouldn't do src='@imgUrl' because it can cause trouble in a CMS - like when the image has special characters in the name. So you should always use @Link.Image(imgUrl) instead.

The Link.Image also 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.

Resize to 200px Width


  <img loading="lazy" src='@Link.Image(url: imgUrl, width: 200)'>

Width: 200px


  <img loading="lazy" src='@Link.Image(url: imgUrl, width: 200)'>

Height: 150px


  <img loading="lazy" src='@Link.Image(url: imgUrl, height: 150)'>

Width: 200px, Height 150px


  <img loading="lazy" src='@Link.Image(url: imgUrl, width: 200, height: 150)'>

Resize and Change Format to JPG

200px, jpg


  <img loading="lazy" src='@Link.Image(url: imgUrl, width: 200, format: "jpg")'>

200px, jpg, 15% quality only


  <img loading="lazy" src='@Link.Image(url: imgUrl, width: 200, format: "jpg", quality: 15)'>

Resize Modes

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

Resize mode crop


  <img loading="lazy" src='@Link.Image(url: imgUrl, width: 250, height: 150, resizeMode: "crop")'>

Resize Mode max


  <img loading="lazy" src='@Link.Image(url: imgUrl, width: 250, height: 150, resizeMode: "max")'>

Resize Mode stretch


  <img loading="lazy" src='@Link.Image(url: imgUrl, width: 250, height: 150, resizeMode: "stretch")'>

Other modes not demonstrated here, see Image Resizer docs.

Introduction to the <img> Tag and Image formats
#2 Resize and Crop Images on the Server
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 -->

Use the ImageResizer for Server-Side... <!-- unimportant stuff, hidden -->

<h3>Resize to 200px Width</h3>

  <img loading="lazy" src='@Link.Image(url: imgUrl, width: 200)'>



<h3>Width: 200px</h3>

  <img loading="lazy" src='@Link.Image(url: imgUrl, width: 200)'>



<h3>Height: 150px</h3>

  <img loading="lazy" src='@Link.Image(url: imgUrl, height: 150)'>



<h3>Width: 200px, Height 150px</h3>

  <img loading="lazy" src='@Link.Image(url: imgUrl, width: 200, height: 150)'>



<h2>Resize and Change Format to JPG</h2>

<h3>200px, jpg</h3>

  <img loading="lazy" src='@Link.Image(url: imgUrl, width: 200, format: "jpg")'>



<h3>200px, jpg, 15% quality only</h3>

  <img loading="lazy" src='@Link.Image(url: imgUrl, width: 200, format: "jpg", quality: 15)'>



<h2>Resize Modes</h2>
<p>
  All of these examples are width 250px, height 150px
</p>

<h3>Resize mode <code>crop</code></h3>

  <img loading="lazy" src='@Link.Image(url: imgUrl, width: 250, height: 150, resizeMode: "crop")'>



<h3>Resize Mode <code>max</code></h3>

  <img loading="lazy" src='@Link.Image(url: imgUrl, width: 250, height: 150, resizeMode: "max")'>



<h3>Resize Mode <code>stretch</code></h3>

  <img loading="lazy" src='@Link.Image(url: imgUrl, width: 250, height: 150, resizeMode: "stretch")'>



<p>Other modes not demonstrated here, see <a href="https://imageresizing.net/docs/v4/reference" target="_blank">Image Resizer docs</a>.</p>

<!-- unimportant stuff, hidden -->