Resources
Resize using Presets and Global 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 factor 1/3rd or 0.25 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. 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>Resize using Presets and Global Settings</h2>
<p>
The following examples use predefined <code>Settings</code> which are defined in 2sxc, and can be re-configured in any site and app.
We'll use <code>Settings.Images.Content</code> which has the following configuration:
</p>
<ol>
<li>Width: @Settings.Images.Content.Width</li>
<li>Height: @Settings.Images.Content.Height</li>
<li>AspectRatio: @Settings.Images.Content.AspectRatio</li>
<li>Quality: @Settings.Images.Content.Quality</li>
</ol>
</div>
</div>
<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 <code>factor</code> <em>1/3rd</em> or <em>0.25</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: "1/3")'> -
<img loading="lazy" src='@Link.Image(imgUrl, Settings.Images.Content, factor: 0.25)'>
<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: 50)'>
@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })