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:
- Add parameters like
?w=200
or?w=200&h=150
to the url, so the server knows what size to deliver - 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 ➡️
![](/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/basic-logo.png)
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 ➡️
![](/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/basic-logo.png?w=200)
⬇️ Result | Source ➡️
![](/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/basic-logo.png?h=150)
⬇️ Result | Source ➡️
![](/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/basic-logo.png?w=200&h=150)
⬇️ Result | Source ➡️
![](/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/basic-logo.png?w=200&format=jpg)
⬇️ Result | Source ➡️
![](/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/basic-logo.png?w=200&quality=15&format=jpg)
⬇️ Result | Source ➡️
![](/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/basic-logo.png?w=250&h=150&mode=crop)
⬇️ Result | Source ➡️
![](/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/basic-logo.png?w=250&h=150&mode=max)
⬇️ Result | Source ➡️
![](/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/basic-logo.png?w=250&h=150&mode=stretch)
Other modes not demonstrated here, see Image Resizer docs.