Images Tutorial

Tutorial Home › Images

Resize using Resize-Settings

#4 Resize and Crop using Global Presets

Resize combining Presets with Custom Resize-Settings

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

<img loading="lazy" src='@Link.Image(imgUrl, 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).

-

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

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.

<img loading="lazy" src='@Link.Image(imgUrl, Settings.Images.Content, width: 100, height: 50)'>

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)

<img loading="lazy" src='@Link.Image(imgUrl, Settings.Images.Content, width: 100, height: 50)'>

Resize using Resize-Settings

#4 Resize and Crop using Global Presets

Resize combining Presets with Custom Resize-Settings

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