Resources
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
The Unmodified Image
For starters - this is the image we'll resize later on:
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
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.
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>Use the ImageResizer for Server-Side Resizing</h2> <p> 2sxc comes with a built-in image resizer. V12 and before used <a href="https://imageresizing.net/" target="_blank">ImageResizer.net</a>, while v13 now uses <a href="https://www.imageflow.io/" target="_blank">imageflow</a>. They work the same way. </p> <p>The core principles:</p> <ol> <li>Add parameters like <code>?w=200</code> or <code>?w=200&h=150</code> to the url, so the server knows what size to deliver</li> <li>Additional parameters like <code>mode=crop</code> specify how to handle scenarios where the size doesn't match what you need</li> </ol> </div> </div> <h2>The Unmodified Image</h2> <p> For starters - this is the image we'll resize later on: </p> @{ var imgUrl = App.Path + "/settings/demo.png"; } <img loading="lazy" src='@Link.Image(imgUrl)'> The Link.Image(...) Helper Above you can... <!-- unimportant stuff, hidden --> <h3>Resize to 200px Width</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> @* Footer *@ @Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })