Skip to main content

Razor Blade Tutorials

Tutorial HomeRazor.Blade

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.

RazorBlade API Docs

Note that it's Srcset() and not SrcSet. For consistency, everything is always lower case.

This file is called überschrift-small.png?name=改善
<img src='/Portals/tutorials/2sxc/Tutorial-Razor/blade/assets/tag-img/%C3%BCberschrift-small.png?name=%E6%94%B9%E5%96%84'>

And now the same thing with Srcset which allows high-density images:
<img srcset='/Portals/tutorials/2sxc/Tutorial-Razor/blade/assets/tag-img/%C3%BCberschrift-small.png?name=%E6%94%B9%E5%96%84 1x,/Portals/tutorials/2sxc/Tutorial-Razor/blade/assets/tag-img/%C3%BCberschrift-large.png?name=%E6%94%B9%E5%96%84 2x'>

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.

@inherits ToSic.Sxc.Dnn.RazorComponent
@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 -->