Skip to main content
Home  › ... 2sxc Apps › 2sxc Tutorial

Razor Blade Tutorials

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

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.
Requirements
Resources
This file is called überschrift-small.png?name=改善 

@Tag.Img().Src(kaizenFullPath)

<img src='/Portals/0/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: 
<img srcset='/Portals/0/2sxc/Tutorial-Razor/blade/assets/tag-img/%C3%BCberschrift-small.png?name=%E6%94%B9%E5%96%84 1x,/Portals/0/2sxc/Tutorial-Razor/blade/assets/tag-img/%C3%BCberschrift-large.png?name=%E6%94%B9%E5%96%84 2x'>
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 -->
RazorBlade Fluent Tag API... <!-- unimportant stuff, hidden -->
<hr>
@{
  // 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)


<!-- unimportant stuff, hidden -->

And now the same thing with <code>Srcset</code> which allows high-density images: <br>
@Tag.Img().Srcset(kaizenFullPath, 1).Srcset(kaizenFullHd, 2)
<!-- unimportant stuff, hidden -->