Oqtane Tutorials
Oqtane Tutorials

RazorBlade Fluid HTML API Tutorial

Tutorial Home › RazorBlade Tags
RazorBlade  Basic Html5  Tag  API Introduction  v3.0
#2 RazorBlade Fluent Tag API @Tag.Img().Src(...) and Srcset(...) v3
Use Koi to Adjust to the Page CSS Framework
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.

⬇️ Result | Source ➡️

<img src='/oqtane-tutorials/app/Tutorial-Razor/assets/tutorials/razorblade-img/img/%C3%BCberschrift-small.png?name=%E6%94%B9%E5%96%84'> 
@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade

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

@Tag.Img().Src(kaizenFullPath)

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

<div>
@* Source Code Html *@
  <code>@Tag.Img().Src(kaizenFullPath).ToString()</code>
</div>

picture tags are the future of img tags. But it can be messy to create them, so here goes 😉. This example will return a small image if your screen is small, a large one otherwise. Try resizing the width of your browser to test. The image will become blurry if the browser is less than 800px wide.

⬇️ Result | Source ➡️

<picture><source srcset='/oqtane-tutorials/app/Tutorial-Razor/assets/tutorials/razorblade-img/img/%C3%BCberschrift-large.png' media='(min-width: 800px)'><img src='/oqtane-tutorials/app/Tutorial-Razor/assets/tutorials/razorblade-img/img/%C3%BCberschrift-small.png'></picture> 
@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade

@{
// Initial Code
// demo of path with umlauts and japanese characters
  var path = App.Path + "/tutorials/razorblade-img/img/";
  var small = "überschrift-small.png";
  var large = "überschrift-large.png";
}

@Tag.Picture(
  Tag.Source().Srcset(path + large).Media("(min-width: 800px)"),
  Tag.Img().Src(path + small))

@* Source Code *@
<code>@Tag.Picture(
  Tag.Source().Srcset(path + large).Media("(min-width: 800px)"),
  Tag.Img().Src(path + small)).ToString()
</code>

 

RazorBlade  Basic Html5  Tag  API Introduction  v3.0
#2 RazorBlade Fluent Tag API @Tag.Img().Src(...) and Srcset(...) v3
Use Koi to Adjust to the Page CSS Framework