Images Tutorial

#5 Resize combining Presets with Custom Resize-Settings

Resources

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)'>

Resize and Crop using Global Presets

#5 Resize combining Presets with Custom Resize-Settings

Responsive Server-Side Images (img)

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>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 })