Images Tutorial

#4 Resize and Crop using Global Presets

Resize combining Presets with Custom Resize-Settings

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

Resources

Image Resizer docs

Link.Image

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

  

Resize using Resize-Settings