Skip to main content

Images Tutorial

Tutorial Home

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:

  1. Width: 1400
  2. Height: 865
  3. AspectRatio: 1.618
  4. 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


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

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

-

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

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.


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

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)


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