Oqtane Tutorials

Images Tutorial

Tutorial Home › Images

Responsive Server-Side Images (img)

#7 Responsive and optimal Server-Side Images (picture)

Leverage the picture tag to the fullest

Requirements

2sxc 13.10

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

Responsive Server-Side Images (img)

#7 Responsive and optimal Server-Side Images (picture)

Leverage the picture tag to the fullest

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