Skip to main content
Home  › ... Razor

Razor Blade Tutorials

Tutorial Home › Razor.Blade
Common Attributes (Id, Title, Class, Style) with SmartJoin
#4 Images with Unsafe URLs (Umlauts etc.)
Picture Tags for various sizes / resolutions 
Requirements
Resources

RazorBlade Fluent Tag API @Tag.Img().Src(...) and Srcset(...) v3

One of the magic bits of the Html5 tags is that they are smart. For example, url properties like Src() or Href() will safely encode if they are not yet encoded. This is super important for CMS solutions where the image file may easily contain umlaut characters or spaces.
Note that it's Srcset() and not SrcSet. For consistency, everything is always lower case.

Initial Code

The following code runs at the beginning and creates some variables/services used in the following samples.

@{
  // demo of path with umlauts and japanese characters
  var kaizenUrl = "überschrift-small.png?name=改善";
  var path = App.Path + "/blade/assets/tag-img/";
  var kaizenFullPath =  path + kaizenUrl;
  var kaizenFullHd = kaizenFullPath.Replace("small", "large");
}
This file is called überschrift-small.png?name=改善

Output

@Tag.Img().Src(kaizenFullPath)

Output

<img src='/Portals/tutorials/2sxc/Tutorial-Razor/blade/assets/tag-img/%C3%BCberschrift-small.png?name=%E6%94%B9%E5%96%84'>
<pre>@Tag.Img().Src(kaizenFullPath).ToString()</pre>
And now the same thing with Srcset which allows high-density images:

Output

@Tag.Img().Srcset(kaizenFullPath, 1).Srcset(kaizenFullHd, 2)
Common Attributes (Id, Title, Class, Style) with SmartJoin
#4 Images with Unsafe URLs (Umlauts etc.)
Picture Tags for various sizes / resolutions 

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
@using ToSic.Razor.Blade;
<!-- unimportant stuff, hidden -->


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
      <h2><em>RazorBlade</em> Fluent Tag API <code>@@Tag.Img().Src(...)</code> and <code>Srcset(...)</code> <em>v3</em></h2>
      <div>
        One of the magic bits of the Html5 tags is that they are smart. For example, url properties like <code>Src()</code> or <code>Href()</code> will safely encode if they are not yet encoded. 
        This is super important for CMS solutions where the image file may easily contain umlaut characters or spaces. <br>
        <em>Note that it's <code>Srcset()</code> and not <code>SrcSet</code>. For consistency, everything is always lower case. </em>
      </div>
    </div>
  </div>

  @{
    // demo of path with umlauts and japanese characters
    var kaizenUrl = "überschrift-small.png?name=改善";
    var path = App.Path + "/blade/assets/tag-img/";
    var kaizenFullPath =  path + kaizenUrl;
    var kaizenFullHd = kaizenFullPath.Replace("small", "large");
  }



This file is called @kaizenUrl <br>

  @Tag.Img().Src(kaizenFullPath)


 <pre>@Tag.Img().Src(kaizenFullPath).ToString()</pre>


And now the same thing with <code>Srcset</code> which allows high-density images: <br>

 @Tag.Img().Srcset(kaizenFullPath, 1).Srcset(kaizenFullHd, 2)



@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })