Oqtane Tutorials
Oqtane Tutorials

Images and Pictures Tutorial

Tutorial Home › Images
The <img> Tag and Different Image Formats
#2 The Link.Image(...) Helper
Resize with Reusable Settings
Resources

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.

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

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

⬇️ Result | Source ➡️

@inherits Custom.Hybrid.Razor14

@{
  var imgUrl = App.Path + "/assets/img-resize/basic-logo.png";
}

<img loading="lazy" src='@Link.Image(imgUrl)'>

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.

⬇️ Result | Source ➡️

@inherits Custom.Hybrid.Razor14

@{
  var imgUrl = App.Path + "/assets/img-resize/basic-logo.png";
}

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

⬇️ Result | Source ➡️

@inherits Custom.Hybrid.Razor14

@{
  var imgUrl = App.Path + "/assets/img-resize/basic-logo.png";
}

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

⬇️ Result | Source ➡️

@inherits Custom.Hybrid.Razor14

@{
  var imgUrl = App.Path + "/assets/img-resize/basic-logo.png";
}

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

Resize and Change Format to JPG

⬇️ Result | Source ➡️

@inherits Custom.Hybrid.Razor14

@{
  var imgUrl = App.Path + "/assets/img-resize/basic-logo.png";
}

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

⬇️ Result | Source ➡️

@inherits Custom.Hybrid.Razor14

@{
  var imgUrl = App.Path + "/assets/img-resize/basic-logo.png";
}

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

Resize Modes

⬇️ Result | Source ➡️

@inherits Custom.Hybrid.Razor14

@{
  var imgUrl = App.Path + "/assets/img-resize/basic-logo.png";
}

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

⬇️ Result | Source ➡️

@inherits Custom.Hybrid.Razor14

@{
  var imgUrl = App.Path + "/assets/img-resize/basic-logo.png";
}

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

⬇️ Result | Source ➡️

@inherits Custom.Hybrid.Razor14

@{
  var imgUrl = App.Path + "/assets/img-resize/basic-logo.png";
}

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

Other modes not demonstrated here, see Image Resizer docs.

 

 

The <img> Tag and Different Image Formats
#2 The Link.Image(...) Helper
Resize with Reusable Settings