#5 Resize combining Presets with Custom Resize-Settings
Merge image settings
The following examples merge custom settings with 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 merged settings
This example uses the configuration as is, to create an image according to specs in customImageSettings
@{
var customImageSettings = AsDynamic(new {
Height = 100,
ResizeMode = "Stretch",
Quality = 50
});
// Merged settings, first one has highes priority
var mergedSettings = AsDynamic(customImageSettings, Settings.Images.Content);
}
<img loading="lazy" src='@Link.Image(imgUrl, mergedSettings)'>
#5 Resize combining Presets with Custom Resize-Settings
@inherits Custom.Hybrid.Razor14
<!-- unimportant stuff, hidden -->
<div @Sys.PageParts.InfoWrapper()>
@Html.Partial("../shared/DefaultInfoSection.cshtml")
<div @Sys.PageParts.InfoIntro()>
<h2>Merge image settings</h2>
<p>
The following examples merge custom settings with 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 merged settings</h3>
<p>This example uses the configuration as is, to create an image according to specs in <code>customImageSettings</code></p>
@{
var customImageSettings = AsDynamic(new {
Height = 100,
ResizeMode = "Stretch",
Quality = 50
});
// Merged settings, first one has highes priority
var mergedSettings = AsDynamic(customImageSettings, Settings.Images.Content);
}
<img loading="lazy" src='@Link.Image(imgUrl, mergedSettings)'>
@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })