Skip to main content
Home  › ... Razor

Razor Blade Tutorials

Tutorial Home › Razor.Blade
Images with Unsafe URLs (Umlauts etc.)
#5 Picture Tags for various sizes / resolutions 
Start and End Tags
Requirements
Resources

RazorBlade Fluent Tag API @Tag.Picture() with many sources v3

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.

Initial Code

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

@{
  var path = App.Path + "/blade/assets/tag-img/";
  var small = "überschrift-small.png";
  var large = "überschrift-large.png";
}

Output

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

Output

<picture><source srcset='/Portals/tutorials/2sxc/Tutorial-Razor/blade/assets/tag-img/%C3%BCberschrift-large.png' media='(min-width: 800px)'><img src='/Portals/tutorials/2sxc/Tutorial-Razor/blade/assets/tag-img/%C3%BCberschrift-small.png'></picture>
  
<pre>@Tag.Picture(
  Tag.Source().Srcset(path + large).Media("(min-width: 800px)"),
  Tag.Img().Src(path + small)).ToString()
</pre>
Images with Unsafe URLs (Umlauts etc.)
#5 Picture Tags for various sizes / resolutions 
Start and End Tags

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.Picture()</code> with many sources <em>v3</em></h2>
      <div>
        <code>picture</code> tags are the future of <code>img</code> 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.
      </div>
    </div>
  </div>

  @{
    var path = App.Path + "/blade/assets/tag-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))


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



<!-- unimportant stuff, hidden -->

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