releasing 10.09

Author: iJungleboy

.data/app.xml

@@ -19,7 +19,7 @@
 <p>
   <em>RazorBlade</em> can be installed as a <a href="https://github.com/DNN-Connect/razor-blade/releases" target="_blank">stand-alone DNN module</a> or if you are creating your own module, you can include it in your distribution. 2sxc 9.40+ includes <em>RazorBlade</em> 1.01, 2sxc 10.06 includes 2.0 and 10.09 includes v2.02. If you see errors, you probably need to install a newer version of <em>RazorBlade</em>.
 </p>
-@rzr.RazorVersionBox(2.01)
+@rzr.RazorVersionBox(3.00)
 </trim>
 
 <hr>

blade/_000-blade.cshtml

@@ -13,7 +13,9 @@
 </trim>
 
 @{
-  HtmlPage.AddOpenGraph("og:xyz", "other");
+  // note: 'og:' is auto-prefixed if not given in the key
+  HtmlPage.AddOpenGraph("title", "Demo of OpenGraph headers");
+  HtmlPage.AddOpenGraph("type", "website");
 }
 
 <hide>

blade/_330-open-graph.cshtml

@@ -15,7 +15,7 @@
   Learn how to use <code>ToSic.Razor.Blade</code> fluent <code>Tag</code> API to do really cool stuff. This uses <a href="https://github.com/DNN-Connect/razor-blade" target="_blank">ToSic.Razor.Blade</a>. 
 </p>
 
-@rzr.RazorVersionBox(3.0)
+@rzr.RazorVersionBox(3.00)
 </trim>
 
 <hr>
@@ -53,9 +53,15 @@
     "The API automatically fixes unsafe URLs like Umlauts, japanese characters etc. - SuperSmart 😎", 
     "new!", rzr.VersionInfo(version, 3.00))
 
-todo image picture with src and srcset
+  @hlp.TutorialLink("Picture Tags for various sizes / resolutions", "blade825picture", 
+    "Here's an example how to easily generate picture tags, which are the future of Images", 
+    "new!", rzr.VersionInfo(version, 3.00))
+
+  @hlp.TutorialLink("Start and End Tags", "blade828", 
+    "In some cases you may want to just get the start or end-tag.", 
+    "new!", rzr.VersionInfo(version, 3.00))
+
 
-todo: links and iframe with safe href
 
   @hlp.TutorialLink("Create custom (non Html5) tags", "blade829", 
     "Working with tags in your code to stay error-free and do amazing stuff", 

blade/_800-tags-overview.cshtml

@@ -39,22 +39,6 @@
 }
 @infoBox
 
-<trim>
-<hr>
-<h2>Creating Open/Close Tags separately</h2>
-<div>
-  A <code>Tag</code> object also has a <code>.TagStart</code> and <code>.TagEnd</code> property, which just contains that part of the tag, allowing you to place these tags around your work.
-</div>
-</trim>
-@{
-  var successBox = Tag.Div()
-    .Class("alert alert-success");
-}
-@successBox.TagStart
-  This tag was written using both <code>.Open</code> and <code>.Close</code> 
-  because it may be easier for you that way.
-@successBox.TagEnd
-
 <trim>
 <hr>
 <h2>Building Tags within Tags using <code>Add(...)</code></h2>

blade/_820-tag-tag.cshtml

@@ -1,32 +1,44 @@
 @using ToSic.Razor.Blade;
 <hide>
 @RenderPage("_header.cshtml")
+@{  
+  var rzrHelp = CreateInstance("_api-docs.cshtml");
+}
 </hide>
 <trim>
   <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>
+
+  @rzrHelp.ApiLinks(new string[] { 
+    "Img()", "https://razor-blade.net/api/ToSic.Razor.Html5.Img.html",
+    ".Src()", "https://razor-blade.net/api/ToSic.Razor.Html5.Img.html#ToSic_Razor_Html5_Img_Src_System_String_", 
+    ".Srcset()", "https://razor-blade.net/api/ToSic.Razor.Html5.Img.html#ToSic_Razor_Html5_Img_Srcset_System_String_", 
+  })
+
     <em>Note that it's <code>Srcset()</code> and not <code>SrcSet</code>. For consistency, everything is always lower case. </em>
   </div>
 </trim>
 <hr>
 @{
+  // demo of path with umlauts and japanese characters
+  var kaizenUrl = "überschrift-small.png?name=改善";
   var path = App.Path + "/blade/assets/tag-img/";
-  var kaizenUrl = "改善-small.png";
   var kaizenFullPath =  path + kaizenUrl;
   var kaizenFullHd = kaizenFullPath.Replace("small", "large");
 }
 This file is called @kaizenUrl <br>
 @Tag.Img().Src(kaizenFullPath)
-
+<hide>
 <pre>@Tag.Img().Src(kaizenFullPath).ToString()</pre>
 <hr>
+</hide>
+
 And now the same thing with <code>Srcset</code> which allows high-density images: <br>
 @Tag.Img().Srcset(kaizenFullPath, 1).Srcset(kaizenFullHd, 2)
+<hide>
 <pre>@Tag.Img().Srcset(kaizenFullPath, 1).Srcset(kaizenFullHd, 2).ToString()</pre>
 
-
-<hide>
 @RenderPage("../shared/_source-code.cshtml", new { Path = VirtualPath }) 
 </hide>

blade/_825-img.cshtml

@@ -1,22 +1,43 @@
 @using ToSic.Razor.Blade;
 <hide>
 @RenderPage("_header.cshtml")
+@{  
+  var rzrHelp = CreateInstance("_api-docs.cshtml");
+}
 </hide>
 <trim>
-  <h2><em>RazorBlade</em> Fluent Tag API <code>@@Tag.Img().Src(...)</code> <em>v3</em></h2>
+  <h2><em>RazorBlade</em> Fluent Tag API <code>@@Tag.Picture()</code> with many sources <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.
+    <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.
+
+  @rzrHelp.ApiLinks(new string[] { 
+    "Picture()", "https://razor-blade.net/api/ToSic.Razor.Html5.Picture.html",
+    "Source()", "https://razor-blade.net/api/ToSic.Razor.Html5.Source.html", 
+  })
   </div>
 </trim>
+<hr>
 @{
-  var kaizenUrl = "改善.png";
+  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)
+)
+<hide>
+<pre>@Tag.Picture(
+  Tag.Source().Srcset(path + large).Media("(min-width: 800px)"),
+  Tag.Img().Src(path + small)
+).ToString()</pre>
 
-<hr>
-This file is called @kaizenUrl <br>
-@Tag.Img().Src(App.Path + "/blade/assets/tag-img/" + kaizenUrl)
+<style>
+  picture, picture source, picture img {
+    width: 100%;
+  }
+</style>
 
-<hide>
 @RenderPage("../shared/_source-code.cshtml", new { Path = VirtualPath }) 
 </hide>

blade/_825-picture.cshtml

@@ -0,0 +1,31 @@
+@using ToSic.Razor.Blade;
+<hide>
+@RenderPage("_header.cshtml")
+@{  
+  var rzrHelp = CreateInstance("_api-docs.cshtml");
+}
+</hide>
+<trim>
+  <h2><em>RazorBlade</em> Fluent Tag API <code>TagStart</code>/<code>TagEnd</code> <em>v3</em></h2>
+  <div>
+    A <code>Tag</code> object also has a <code>.TagStart</code> and <code>.TagEnd</code> property, which just contains that part of the tag, allowing you to place these tags around your work.
+  </div>
+  @rzrHelp.ApiLinks(new string[] { 
+    ".TagStart", "https://razor-blade.net/api/ToSic.Razor.Markup.TagBase.html#ToSic_Razor_Markup_TagBase_TagStart",
+    ".TagEnd", "https://razor-blade.net/api/ToSic.Razor.Markup.TagBase.html#ToSic_Razor_Markup_TagBase_TagEnd", 
+  })
+  <hr>
+  <h3>The result</h3>
+</trim>
+
+@{
+  var successBox = Tag.Div().Class("alert alert-success");
+}
+@successBox.TagStart
+  This tag was written using both <code>.TagStart</code> and <code>.TagEnd</code> 
+  because it may be easier for you that way.
+@successBox.TagEnd
+
+<hide>
+@RenderPage("../shared/_source-code.cshtml", new { Path = VirtualPath }) 
+</hide>