Images Tutorial

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade;
<!-- unimportant stuff, hidden -->

Best practices using the Image Service... <!-- unimportant stuff, hidden -->

@Html.Partial("../shared/_KitBaseClassInfoBox.cshtml", new { ServiceName = "Image", Service = "IImageService" })

<h2>Image with URL vs. Field in <code>img</code> tag</h2>
<p>
  As learned in the previous tutorials the <code>img</code> tag can be created out of URLs.
  The image service can also be used with Fields. The field will contain the URL as well as additional Metadata like the description or what part of the picture is important (the Crop-Anchor).
</p>
<p>
  To get the most out of 2sxc and its image configuration options 
  it's best to use the image object instead of URLs. By using the image configuration options,
  the settings can be easily retrieved from the corresponding image.
</p>

<!-- unimportant stuff, hidden -->
<div class="row">
  <div class="col-md">

    <p><strong>Picture from <code>Content.Image</code></strong></p>
    
      @* Picture from Content.Image *@
      @Kit.Image.Img(Content.Image)
    

  </div>
  <div class="col-md">

    <p><strong>Picture from <code>Field</code> containing crop anchor and alt text</strong></p>
    
      @* Picture from Field containing crop anchor and alt text *@
      @Kit.Image.Img(Content.Field("Image"))
    

  </div>
</div>





<h2>Picture with URL vs. Field in <code>picture</code> tag</h2>
<p>
  As learned in the previous tutorials the <code>picture</code> tag can be created out of URLs.
  The image service can also be used with Fields. The field will contain the URL as well as additional Metadata like the description or what part of the picture is important (the Crop-Anchor).
</p>
<p>
  To get the most out of 2sxc and its image configuration options 
  it's best to use the image object instead of URLs. By using the image configuration options,
  the settings can be easily retrieved from the corresponding image.
</p>

<div class="row">
  <div class="col-md">

    <p><strong>Picture from <code>Content.Image</code></strong></p>
    
      @* Picture from Content.Image *@
      @Kit.Image.Picture(Content.Image)
    

  </div>
  <div class="col-md">

    <p><strong>Picture from <code>Field</code> containing crop anchor and alt text</strong></p>
    
      @* Picture from Field containing crop anchor and alt text *@
      @Kit.Image.Picture(Content.Field("Image"))
    

  </div>
</div>



@*
  * example with other Recipe like "2x, 3x" - mit Settings
*@

<h2>Apply factor to the <code>picture</code> tag</h2>
<p>
  The Image Service offers multiple parameters for further customization of the images, such as the factor.
  The factor works as a resize multiplier for the image as for example (0.5).
  <br><br>
  Below you will find an example:
</p>

<div class="row">
  <div class="col-md">

    <p><strong>Picture using the factor <code>0.5</code></strong></p>
    
      @* Picture using the factor 0.5 *@
      @Kit.Image.Picture(Content.Field("Image"), factor: 0.5)
    

  </div>
  <div class="col-md">

    <p><strong>Picture using the factor <code>5</code></strong></p>
    
      @* Picture using the factor 5 *@
      @Kit.Image.Picture(Content.Field("Image"), factor: 5)
    

  </div>
</div>





<h2>Create multiple image variants</h2>
<p>
  The picture tag contains multiple configurations of images, which are called recipes in our ecosystem.
  The browser then chooses the optimal configuration based on the given srcset.

  Using the <code>.Recipe("")</code> method from the image service, you can easily add more size variants of your images.
  <br><br>
  Below you will find an example:
</p>

<div class="row">
  <div class="col-md">

    <p><strong>Picture default recipe</strong></p>
    
      @* Picture using the default *@
      @Kit.Image.Picture(Content.Field("Image"))
    

  </div>
  <div class="col-md">
    <p><strong>Picture with variants for 2x and 3x of the image size</strong></p>
    
      @{
        var customRecipe = Kit.Image.Recipe("2*, 3*");
      }
      @* Picture using recipe with 2x and 3x variants *@
      @Kit.Image.Picture(Content.Field("Image"), recipe: customRecipe)
    

  </div>
</div>




<br>

<h2>Choose the optimal alt text</h2>
<p>
  By passing the image object, the picture tag will apply the alt text automatically.
  <br>
  Because alt texts are not always defined in the settings, different texts can be set as fallback.2sxc
  Preferably in that case, the image alt text has priority over other texts.
  We can create a fallback by using the <code>Text.First(text1, text2)</code> Method from Razor Blade. 
  <br><br>
  Below you will find an example:
</p>

<!-- unimportant stuff, hidden -->

@{
  var fallbackAltText = "Fallback";

  var imageFieldWithAltText = Content.Field("Image"); 
  var optimalAltText = Text.First(imageFieldWithAltText.Metadata.Description, fallbackAltText);
}
<div>
  <p><strong>Image with optimal alt text (@optimalAltText)</strong></p>
  <div style="width: 25%;">
    @Kit.Image.Picture(imageFieldWithAltText, imgAlt: optimalAltText)
  </div>
</div>



<!-- unimportant stuff, hidden -->